/* Page styles for design-management.html.
   Extracted from the inline <style> blocks on 2026-09-11, byte for byte and in
   the same order, and linked from the same position in the head. The cascade is
   unchanged; what changed is that the CSS is now a file the browser can cache
   and a person can read. */

/* a scene card: the AI-method crisp visual language, dropped into journey's scene slot */
  .dm-scene{ position:relative; background:#fff; border:1px solid var(--rule); border-radius:18px; padding:clamp(18px,2.2vw,26px); box-shadow:0 26px 54px -36px rgba(10,10,10,.42); }
  .dm-scene__top{ display:flex; align-items:center; gap:13px; }
  .dm-scene__tile{ width:52px;height:52px;border-radius:14px; background:#FCFAF4; border:1px solid var(--rule); display:flex;align-items:center;justify-content:center; flex:0 0 auto; }
  .dm-scene__tile svg{ width:24px;height:24px; stroke:var(--ink); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .dm-scene__tile--accent{ background:var(--ink); border-color:var(--ink); }
  .dm-scene__tile--accent svg{ stroke:#F5EFE2; }
  .dm-scene__tag{ margin-left:auto; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:#3f8d5a; border:1px solid var(--rule); border-radius:100px; padding:4px 11px; white-space:nowrap; }
  .dm-scene__motif{ margin-top:18px; }

  /* goal vs KPI mini, lives in the first stage scene */
  .dm-def{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .dm-def__card{ border:1px solid var(--rule); border-radius:12px; padding:13px; background:#FCFAF4; }
  .dm-def__k{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size: 11px; letter-spacing: 0.02em; color:#3f8d5a; margin:0 0 7px; }
  .dm-def__v{ font-size:13px; color:var(--ink-soft,#4a4a44); line-height:1.5; margin:0; }
  .dm-def__v b{ color:var(--ink); font-weight:600; }

  /* small motifs, built from plain divs so they stay crisp and light */
  .mf{ display:flex; }
  .mf-funnel{ flex-direction:column; gap:7px; }
  .mf-funnel i{ display:block; height:11px; border-radius:4px; background:color-mix(in srgb,var(--ink) 12%,transparent); }
  .mf-funnel i:nth-child(1){ width:100%; } .mf-funnel i:nth-child(2){ width:72%; } .mf-funnel i:nth-child(3){ width:48%; }
  .mf-funnel i:nth-child(4){ width:30%; background:var(--journey-red,#c8533f); }
  .mf-chips{ gap:8px; flex-wrap:wrap; }
  .mf-chips span{ font-size:12px; color:var(--muted); border:1px solid var(--rule); border-radius:100px; padding:5px 12px; }
  .mf-chips span.on{ color:var(--ink); border-color:color-mix(in srgb,var(--ink) 40%,var(--rule)); font-weight:500; }
  .mf-board{ gap:9px; }
  .mf-board .col{ flex:1; border:1px solid var(--rule); border-radius:9px; background:#FCFAF4; padding:8px; display:flex; flex-direction:column; gap:6px; }
  .mf-board .col b{ display:block; height:5px; width:60%; border-radius:3px; background:color-mix(in srgb,var(--ink) 22%,transparent); margin-bottom:2px; }
  .mf-board .col i{ display:block; height:14px; border-radius:5px; background:color-mix(in srgb,var(--ink) 7%,transparent); border:1px solid color-mix(in srgb,var(--ink) 8%,transparent); }
  .mf-board .col i.ac{ background:var(--journey-red-soft,#f5ddd6); border-color:color-mix(in srgb,var(--journey-red,#c8533f) 30%,transparent); }
  .mf-people{ align-items:center; gap:0; }
  .mf-people .av{ width:34px;height:34px;border-radius:50%; border:1px solid var(--rule); background:#FCFAF4; display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink); margin-left:-8px; }
  .mf-people .av:first-child{ margin-left:0; }
  /* constant-alignment: the moving grey dashes from the AI method, in the right spot */
  .mf-people .lk{ flex:1; height:2px; margin:0 7px; background-image:repeating-linear-gradient(90deg, color-mix(in srgb,var(--ink) 46%,transparent) 0 6px, transparent 6px 13px); }
  @media (prefers-reduced-motion:no-preference){ .mf-people .lk{ animation:mfflow .85s linear infinite; } }
  @keyframes mfflow{ from{ background-position:0 0; } to{ background-position:13px 0; } }
  .mf-hand{ align-items:center; gap:10px; }
  .mf-hand .frame{ flex:1; height:46px; border-radius:9px; border:1px solid var(--rule); background:#FCFAF4; display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); }
  .mf-hand .frame.code{ background:#1b1a17; color:#9FE0AF; border-color:#2a2823; }
  .mf-hand .arr{ color:var(--ink3,#8a857a); flex:0 0 auto; }
  .mf-hand .arr svg{ width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; display:block; }
  .mf-qa{ gap:10px; }
  .mf-qa .frame{ flex:1; border:1px solid var(--rule); border-radius:9px; padding:10px; background:#FCFAF4; }
  .mf-qa .frame .cap{ font-family:"JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.02em; color:var(--ink3,#8a857a); margin-bottom:7px; }
  .mf-qa .frame i{ display:block; height:6px; border-radius:3px; background:color-mix(in srgb,var(--ink) 11%,transparent); margin-bottom:5px; }
  .mf-qa .frame i:last-child{ width:65%; margin-bottom:0; }
  .mf-qa .frame.ok{ border-color:color-mix(in srgb,#3f8d5a 40%,var(--rule)); }
  .mf-qa .frame.ok .cap{ color:#3f8d5a; }
  .mf-list{ flex-direction:column; gap:7px; }
  .mf-list .row{ display:flex; align-items:center; gap:9px; }
  .mf-list .row i{ flex:1; height:9px; border-radius:4px; background:color-mix(in srgb,var(--ink) 9%,transparent); }
  .mf-list .row::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--journey-red,#c8533f); flex:0 0 auto; }
  .mf-list .row.dim::before{ background:color-mix(in srgb,var(--ink) 20%,transparent); }

  /* ── THE PROCESS: a connected node-graph that builds on scroll. No thread, no white cards, its own (centered) style ── */
  .pwrap{ max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }
  .pgraph{ margin-top:clamp(2.2rem,4vw,3.2rem); display:flex; flex-direction:column; align-items:center; }
  .pnode{ text-align:center; width:100%; max-width:480px; }
  .pnode__name{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size: 11px; letter-spacing: 0.02em; color:#3f8d5a; margin:0 0 9px; }
  .pnode__h{ font-family:var(--font); font-size:clamp(1.25rem,2vw,1.6rem); font-weight:600; letter-spacing:-.014em; line-height:1.15; color:var(--ink); margin:0 0 .55rem; }
  .pnode__d{ font-size:clamp(.95rem,1.15vw,1.0625rem); line-height:1.62; color:var(--muted); margin:0 auto; max-width:44ch; }
  .pnode__viz{ margin:18px auto 0; max-width:300px; }
  /* the drawn edge between nodes (grey, not the red thread) */
  .pedge{ position:relative; width:2px; height:clamp(34px,5vw,54px); margin:clamp(15px,2.2vw,22px) 0; background:repeating-linear-gradient(180deg, color-mix(in srgb,var(--ink) 32%,transparent) 0 5px, transparent 5px 11px); }
  .pedge::after{ content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:0; height:0; border-left:4.5px solid transparent; border-right:4.5px solid transparent; border-top:6px solid color-mix(in srgb,var(--ink) 42%,transparent); }
  /* ── scroll build-in: each step assembles (eyebrow -> headline -> copy), then the designed motif builds under it ── */
  .js .pgraph .pnode{ opacity:0; transform:none; transition:opacity .55s var(--ease-out,cubic-bezier(.2,.7,.3,1)); }
  .js .pgraph .pnode.is-in{ opacity:1; }
  .js .pgraph .pnode__name, .js .pgraph .pnode__h, .js .pgraph .pnode__d{ opacity:0; transform:translateY(13px); transition:opacity .5s ease, transform .55s var(--ease-out,cubic-bezier(.2,.7,.3,1)); }
  .js .pgraph .pnode.is-in .pnode__name{ opacity:1; transform:none; transition-delay:.05s; }
  .js .pgraph .pnode.is-in .pnode__h{ opacity:1; transform:none; transition-delay:.14s; }
  .js .pgraph .pnode.is-in .pnode__d{ opacity:1; transform:none; transition-delay:.22s; }
  .js .pgraph .pnode__viz{ opacity:0; transform:translateY(16px) scale(.985); transition:opacity .55s ease .30s, transform .6s var(--ease-out,cubic-bezier(.2,.7,.3,1)) .30s; }
  .js .pgraph .pnode.is-in .pnode__viz{ opacity:1; transform:none; }
  .js .pgraph .pedge{ transform:scaleY(0); transform-origin:top center; transition:transform .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)); }
  .js .pgraph .pedge.is-in{ transform:scaleY(1); }
  /* a current of momentum travels down each connector as the story moves to the next step */
  .pedge::before{ content:""; position:absolute; left:50%; top:0; width:4px; height:4px; border-radius:50%; transform:translate(-50%,-50%); background:#4a9a66; box-shadow:0 0 7px 1.5px color-mix(in srgb,#3f8d5a 55%,transparent); opacity:0; }
  @keyframes edgeFlow{ 0%{ top:-2px; opacity:0; } 18%{ opacity:1; } 82%{ opacity:1; } 100%{ top:calc(100% + 2px); opacity:0; } }
  @keyframes edgeTip{ 0%{ opacity:0; transform:translateX(-50%) scale(.45); } 62%{ opacity:1; transform:translateX(-50%) scale(1.16); } 100%{ opacity:1; transform:translateX(-50%) scale(1); } }
  .js .pgraph .pedge::after{ opacity:0; }
  .js .pgraph .pedge.is-in::before{ animation:edgeFlow .72s var(--ease-out,cubic-bezier(.2,.7,.3,1)) .26s 1 both; }
  .js .pgraph .pedge.is-in::after{ animation:edgeTip .42s var(--ease-out,cubic-bezier(.2,.7,.3,1)) .9s both; }
  /* the designed motif builds with character, staggered, after the viz lifts in */
  @keyframes mfRise{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
  @keyframes mfGrow{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
  @keyframes mfPop{ from{ opacity:0; transform:scale(.58); } to{ opacity:1; transform:scale(1); } }
  @keyframes mfSlide{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:none; } }
  .js .pgraph .pnode__viz .mf > *, .js .pgraph .pnode__viz .dm-def > *{ opacity:0; }
  .js .pgraph .pnode.is-in .pnode__viz .dm-def__card{ animation:mfPop .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-funnel i{ animation:mfGrow .55s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; transform-origin:left center; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-chips span{ animation:mfPop .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-board .col{ animation:mfPop .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; transform-origin:bottom center; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-people .av{ animation:mfPop .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-hand > *{ animation:mfRise .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-qa .frame{ animation:mfRise .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-list .row{ animation:mfSlide .5s var(--ease-out,cubic-bezier(.2,.7,.3,1)) both; }
  .js .pgraph .pnode.is-in .pnode__viz .mf > *:nth-child(1), .js .pgraph .pnode.is-in .pnode__viz .dm-def > *:nth-child(1){ animation-delay:.42s; }
  .js .pgraph .pnode.is-in .pnode__viz .mf > *:nth-child(2), .js .pgraph .pnode.is-in .pnode__viz .dm-def > *:nth-child(2){ animation-delay:.50s; }
  .js .pgraph .pnode.is-in .pnode__viz .mf > *:nth-child(3){ animation-delay:.58s; }
  .js .pgraph .pnode.is-in .pnode__viz .mf > *:nth-child(4){ animation-delay:.66s; }
  .js .pgraph .pnode.is-in .pnode__viz .mf > *:nth-child(5){ animation-delay:.74s; }
  /* the alignment connector fades in but keeps its flowing dashes */
  .js .pgraph .pnode__viz .mf-people .lk{ opacity:0; transition:opacity .45s ease .54s; }
  .js .pgraph .pnode.is-in .pnode__viz .mf-people .lk{ opacity:1; }
  /* gentle, meaning-bearing ambient motion (paused under reduced motion) */
  @keyframes mfPulse{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.84); } }
  @keyframes acGlow{ 0%,100%{ background:var(--journey-red-soft,#f5ddd6); } 50%{ background:color-mix(in srgb,var(--journey-red,#c8533f) 28%,transparent); } }
  @keyframes mfNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }
  @media (prefers-reduced-motion:no-preference){
    .js .pgraph .pnode.is-in .pnode__viz .mf-funnel i:nth-child(4){ animation:mfGrow .55s var(--ease-out,cubic-bezier(.2,.7,.3,1)) .66s both, mfPulse 2.6s ease-in-out 1.7s infinite; }
    .js .pgraph .pnode.is-in .pnode__viz .mf-board .col i.ac{ animation:acGlow 2.8s ease-in-out 1.5s infinite; }
    .js .pgraph .pnode.is-in .pnode__viz .mf-hand .arr{ animation:mfNudge 1.9s ease-in-out 1.3s infinite; }
  }
  /* ── scroll-linked motion: the story animates WITH the scroll (progressive enhancement, Chrome/Edge). Falls back to the reveal above on Safari/Firefox ── */
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion:no-preference){
      /* each step takes focus as it reaches the centre of the viewport, then recedes */
      @keyframes pnodeFocus{
        0%     { opacity:.5; transform:translateY(15px) scale(.985); }
        42%,58%{ opacity:1; transform:none; }
        100%   { opacity:.5; transform:translateY(-15px) scale(.985); }
      }
      .js .pgraph .pnode{ animation:pnodeFocus linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
      /* the momentum current tracks your scroll across each connector */
      @keyframes edgeFlowScroll{ 0%{ top:0%; opacity:0; } 16%{ opacity:1; } 84%{ opacity:1; } 100%{ top:100%; opacity:0; } }
      .js .pgraph .pedge::before,
      .js .pgraph .pedge.is-in::before{ animation:edgeFlowScroll linear both; animation-timeline:view(); animation-range:cover 30% cover 70%; }
    }
  }
  @media (prefers-reduced-motion:reduce){ .js .pgraph .pnode, .js .pgraph .pnode__name, .js .pgraph .pnode__h, .js .pgraph .pnode__d, .js .pgraph .pnode__viz, .js .pgraph .pnode__viz .mf > *, .js .pgraph .pnode__viz .dm-def > *, .js .pgraph .pnode__viz .mf-people .lk, .js .pgraph .pedge, .js .pgraph .pedge::after{ opacity:1 !important; transform:none !important; animation:none !important; } .js .pgraph .pedge::before{ display:none !important; } }

  /* ── THE SYSTEM: editorial rows, the AI "method / four parts" pattern ── */
  .syswrap{ max-width:920px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }
  .sys__intro{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(1rem,4vw,3rem); align-items:start; }
  @media(max-width:720px){ .sys__intro{ grid-template-columns:1fr; gap:.75rem; } }
  .sys__h{ font-family:var(--font); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; line-height:1.12; letter-spacing:-.015em; color:var(--ink); margin:.4rem 0 0; }
  .sys__h span{ color:var(--muted); }
  .sys__lede{ font-size:clamp(.95rem,1.2vw,1.0625rem); color:var(--muted); line-height:1.62; margin:0; }
  .sys{ margin-top:clamp(2rem,4vw,2.75rem); border-top:1px solid var(--rule); }
  .sys__row{ display:grid; grid-template-columns:minmax(150px,1fr) 2.4fr; gap:clamp(1rem,4vw,3rem); padding:clamp(1.25rem,2.5vw,1.8rem) 0; border-bottom:1px solid var(--rule); align-items:baseline; }
  @media(max-width:640px){ .sys__row{ grid-template-columns:1fr; gap:.5rem; } }
  .sys__name{ font-size:clamp(1.05rem,1.6vw,1.28rem); font-weight:600; color:var(--ink); margin:0; line-height:1.2; }
  .sys__name span{ display:block; font-size:12px; font-weight:400; color:#716c63; margin-top:4px; }
  .sys__desc{ font-size:clamp(.92rem,1.2vw,1.0625rem); color:var(--ink-soft,#4a4a44); line-height:1.62; margin:0; max-width:62ch; }

  /* ── SELECTED WORK ── */
  /* Words, not a pill, the same treatment as the article tags. Every entry that
     does not lead to a case carries it, so it reads as a state of the list and
     not as one odd card. */

  /* ── hover-reveal sneak-peek thumbnails (match homepage recent work) ── */
  .dm-cases .company--link{ text-decoration:none; color:inherit; display:block; }
  .dm-cases .company__name{ display:inline-flex; align-items:center; }
  .dm-cases .company--link:hover .company__name{ color:var(--ink); }
  /* No thumbnail. The hover signal is the case name taking its own colour, which
     only the two entries that lead somewhere are allowed to do. Each --case-ink is
     the case page's own accent, darkened until it clears 4.5:1 on the paper. */
  .dm-cases .cthumb-shell{ display:none; }
  .dm-cases .company--link .company__name{ transition:color .18s ease; }
  .dm-cases .company--link:hover .company__name, .dm-cases .company--link:focus-visible .company__name{ color:var(--case-ink,var(--ink)); }
  .dm-cases .cthumb{ position:relative; display:block; aspect-ratio:16/10; border-radius:9px; border:1px solid var(--rule); background:#FCFAF4; padding:12px; box-sizing:border-box; overflow:hidden; }
  @media (prefers-reduced-motion:reduce){ .dm-cases .company--link .company__name{ transition:none; } }
  .dm-cases .company__card{ position:relative; display:block; }

  /* obseed - mini dashboard (dark rail, chart, cards) */
  .dm-cases .cthumb--dob{ padding:0; display:flex; }
  .dob-rail{ width:20%; background:#1b1c21; flex:0 0 auto; }
  .dob-main{ flex:1; min-width:0; padding:9px; display:flex; flex-direction:column; gap:6px; }
  .dob-chart{ flex:1; border:1px solid var(--rule); border-radius:5px; background:#fff; display:flex; padding:5px; }
  .dob-chart svg{ width:100%; height:100%; display:block; }
  .dob-area{ fill:rgba(238,93,87,.10); stroke:none; }
  .dob-line{ fill:none; stroke:#EE5D57; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .dob-cards{ display:flex; gap:5px; height:36%; }
  .dob-cards span{ flex:1; border:1px solid var(--rule); border-radius:4px; background:#fff; }

  /* Heineken - mini order desk (product rows + qty steppers) */
  .dm-cases .cthumb--dhk{ display:flex; flex-direction:column; gap:5px; }
  .dhk-row{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--rule); border-radius:5px; padding:0 7px; flex:1; }
  .dhk-row::before{ content:""; display:block; width:14px; height:14px; border-radius:3px; background:#e8e4d8; flex:0 0 auto; }
  .dhk-row::after{ content:""; display:block; margin-left:auto; width:24px; height:12px; border-radius:3px; border:1px solid var(--rule); background:#fff; flex:0 0 auto; }
  .dhk-row i{ height:5px; border-radius:2px; background:#e3ded0; width:42%; }

  /* StepStone - pricing table (3 columns, middle highlighted) */
  .dm-cases .cthumb--dss{ display:flex; gap:5px; align-items:stretch; }
  .dss-col{ flex:1; border:1px solid var(--rule); border-radius:5px; background:#fff; display:flex; flex-direction:column; gap:4px; padding:7px 5px; }
  .dss-col--hot{ border-color:#caa94e; box-shadow:0 0 0 1px #caa94e; }
  .dss-col i{ height:4px; border-radius:2px; background:#e3ded0; width:90%; } .dss-col i:first-child{ width:62%; height:6px; background:#cfc9b8; }
  .dss-col b{ margin-top:auto; height:9px; border-radius:3px; background:#e8e4d8; } .dss-col--hot b{ background:#caa94e; }

  /* Finanzcheck - credit dashboard (balance, progress, stat cards) */
  .dm-cases .cthumb--dfc{ padding:11px; }
  .dfc-card{ background:#fff; border:1px solid var(--rule); border-radius:7px; padding:9px; height:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:7px; }
  .dfc-top{ display:flex; align-items:center; justify-content:space-between; }
  .dfc-lbl{ width:32%; height:5px; border-radius:3px; background:#E9ECF1; }
  .dfc-pill{ width:30%; height:11px; border-radius:99px; background:#E6F4EE; }
  .dfc-num{ width:56%; height:13px; border-radius:4px; background:#0A0F1A; }
  .dfc-bar{ height:6px; border-radius:99px; background:#EAF1FC; position:relative; overflow:hidden; }
  .dfc-bar::before{ content:""; position:absolute; inset:0 auto 0 0; width:52%; background:#1F50B5; border-radius:99px; }
  .dfc-stats{ display:flex; gap:5px; margin-top:auto; }
  .dfc-stats span{ flex:1; height:19px; border:1px solid var(--rule); border-radius:5px; background:#fff; }

  .dm-cases .cthumb--dcv{ display:flex; gap:5px; align-items:stretch; }
  .dcv-bar{ flex:1; border-radius:4px; }

  .dm-eyebrow{ text-align:center; }

  /* anchor line that ties the process graph to the real engagement */
  .pintro{ max-width:480px; margin:0 auto; text-align:center; }
  .pintro .eyebrow{ justify-content:center; }
  .pintro__d{ font-size:clamp(.95rem,1.15vw,1.0625rem); line-height:1.6; color:var(--muted); margin:.6rem 0 0; }

  /* ===== ported flow (Concept D) ===== */

  :root{ --cf-page:#F5EFE2; }
  /* step motifs, centred, crafted to feel intentional rather than placeholder */
  .mf{ display:flex; }
  .mf-list{ flex-direction:column; gap:13px; width:300px; }
  .mf-list .row{ display:flex; align-items:center; gap:13px; }
  .mf-list .row i{ flex:1; height:14px; border-radius:7px; background:color-mix(in srgb,var(--ink) 10%,transparent); }
  .mf-list .row:nth-child(1){ margin-left:26px; } .mf-list .row:nth-child(3){ margin-left:14px; }  /* slight misalignment = the mess */
  .mf-list .row::before{ content:""; width:11px;height:11px;border-radius:50%; background:var(--journey-red,#c8533f); flex:0 0 auto; }
  .mf-list .row:nth-child(2)::before{ background:#3f8d5a; }
  .mf-list .row:nth-child(3)::before{ background:#caa94e; }
  .mf-people{ align-items:center; justify-content:center; gap:0; }
  .mf-people .av{ width:62px;height:62px;border-radius:50%; border:1px solid var(--rule); background:#FCFAF4; display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--ink); margin-left:-12px; box-shadow:0 8px 20px -14px rgba(22,22,19,.5); }
  .mf-people .av:first-child{ margin-left:0; }
  .mf-people .lk{ width:60px; height:2px; margin:0 9px; background-image:repeating-linear-gradient(90deg, color-mix(in srgb,var(--ink) 46%,transparent) 0 7px, transparent 7px 15px); }
  @media (prefers-reduced-motion:no-preference){ .mf-people .lk{ animation:mfflow .9s linear infinite; } }
  @keyframes mfflow{ from{ background-position:0 0; } to{ background-position:15px 0; } }
  .mf-funnel{ flex-direction:column; gap:13px; align-items:center; width:320px; }
  .mf-funnel i{ display:block; height:21px; border-radius:8px; background:color-mix(in srgb,var(--ink) 12%,transparent); }
  .mf-funnel i:nth-child(1){ width:100%; } .mf-funnel i:nth-child(2){ width:70%; } .mf-funnel i:nth-child(3){ width:46%; }
  .mf-funnel i:nth-child(4){ width:28%; background:var(--journey-red,#c8533f); box-shadow:0 10px 22px -12px color-mix(in srgb,var(--journey-red,#c8533f) 80%,transparent); }
  .mf-board{ gap:15px; width:360px; justify-content:center; }
  .mf-board .col{ flex:1; border:1px solid var(--rule); border-radius:14px; background:#FCFAF4; padding:12px; display:flex; flex-direction:column; gap:9px; box-shadow:0 12px 26px -20px rgba(22,22,19,.5); }
  .mf-board .col b{ display:block; height:6px; width:58%; border-radius:3px; background:color-mix(in srgb,var(--ink) 22%,transparent); margin-bottom:3px; }
  .mf-board .col i{ display:block; height:20px; border-radius:7px; background:color-mix(in srgb,var(--ink) 7%,transparent); border:1px solid color-mix(in srgb,var(--ink) 8%,transparent); }
  .mf-board .col i.ac{ background:var(--journey-red-soft,#f5ddd6); border-color:color-mix(in srgb,var(--journey-red,#c8533f) 30%,transparent); }
  .mf-hand{ align-items:center; justify-content:center; gap:16px; width:360px; }
  .mf-hand .frame{ flex:1; height:76px; border-radius:14px; border:1px solid var(--rule); background:#FCFAF4; display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--muted); }
  .mf-hand .frame.code{ background:#1b1a17; color:#9FE0AF; border-color:#2a2823; box-shadow:0 14px 30px -18px rgba(27,26,23,.7); }
  .mf-hand .arr{ color:var(--ink3,#8a857a); flex:0 0 auto; }
  .mf-hand .arr svg{ width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; display:block; }

  /* bespoke line-art graphics (draw themselves on scroll) */
  .cfg{ width:clamp(280px,33vw,380px); height:auto; overflow:visible; }
  .cfg .ln{ fill:none; stroke:color-mix(in srgb,var(--ink) 27%,transparent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .cfg .ln-soft{ stroke:color-mix(in srgb,var(--ink) 15%,transparent); }
  .cfg .ln-accent{ stroke:#3f8d5a; stroke-width:2.1; }
  .cfg .nd{ stroke:var(--cf-page); stroke-width:2.5; }
  .cfg .nd-r{ fill:var(--journey-red,#c8533f); } .cfg .nd-g{ fill:#3f8d5a; } .cfg .nd-y{ fill:#caa94e; }
  .cfg .nd-b{ fill:#1F4F8C; } .cfg .nd-k{ fill:var(--ink); }
  .cfg .nd-o{ fill:var(--cf-page); stroke:color-mix(in srgb,var(--ink) 38%,transparent); }
  .cfg .bar{ fill:color-mix(in srgb,var(--ink) 6%,transparent); stroke:color-mix(in srgb,var(--ink) 13%,transparent); stroke-width:1; }
  .cfg .bar-top{ fill:color-mix(in srgb,#3f8d5a 13%,transparent); stroke:color-mix(in srgb,#3f8d5a 46%,transparent); }
  .cfg .ln-check{ fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
  .cfg [data-a]{ transform-box:fill-box; transform-origin:center; }
  .js .cf-viz svg.cfg [data-a]{ opacity:0; }

  /* Experience motifs */
  .dm-def{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:340px; }
  .dm-def__card{ border:1px solid var(--rule); border-radius:13px; padding:14px; background:#FCFAF4; box-shadow:0 12px 26px -20px rgba(22,22,19,.5); text-align:left; }
  .dm-def__k{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing: 0.02em; color:#3f8d5a; margin:0 0 8px; }
  .dm-def__v{ font-size:14px; color:var(--ink-soft,#4a4a44); line-height:1.5; margin:0; }
  .dm-def__v b{ color:var(--ink); font-weight:600; }
  .mf-chips{ gap:9px; flex-wrap:wrap; justify-content:center; width:340px; }
  .mf-chips span{ font-size:13px; color:var(--muted); border:1px solid var(--rule); border-radius:100px; padding:7px 15px; }
  .mf-chips span.on{ color:var(--ink); border-color:color-mix(in srgb,var(--ink) 40%,var(--rule)); font-weight:500; }
  .mf-qa{ gap:13px; width:360px; }
  .mf-qa .frame{ flex:1; border:1px solid var(--rule); border-radius:12px; padding:13px; background:#FCFAF4; box-shadow:0 12px 26px -20px rgba(22,22,19,.5); }
  .mf-qa .frame .cap{ font-family:"JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.02em; color:var(--ink3,#8a857a); margin-bottom:9px; }
  .mf-qa .frame i{ display:block; height:7px; border-radius:3px; background:color-mix(in srgb,var(--ink) 11%,transparent); margin-bottom:6px; }
  .mf-qa .frame i:last-child{ width:65%; margin-bottom:0; }
  .mf-qa .frame.ok{ border-color:color-mix(in srgb,#3f8d5a 40%,var(--rule)); }
  .mf-qa .frame.ok .cap{ color:#3f8d5a; }

  /* ── CONCEPT D: one centred thread, every step builds on scroll ── */
  .cf-wrap{ padding-top:clamp(18px,3vw,32px); padding-bottom:clamp(40px,6vw,80px); }
  /* the flow lives in a .section; cut its wrapper padding + pull the next block up so
     the content after the scroll isn't stranded far below the last beat */
  .section:has(.cf-wrap){ padding-top:clamp(24px,3.5vw,52px); padding-bottom:clamp(20px,3vw,40px); }
  .section:has(.cf-wrap) + .section, .section:has(.cf-wrap) + .cta-strip{ padding-top:clamp(32px,4.5vw,64px); }
  .cf-head{ text-align:center; margin-bottom:clamp(8px,3vw,28px); }
  .cf-head .eyebrow{ justify-content:center; }
  .cf-track{ position:relative; }
  /* the thread WINDS down the centre, BEHIND the steps; an ink stroke draws on with scroll */
  .cf-thread{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
  .cf-thread .cf-rail{ fill:none; stroke:var(--rule); stroke-width:2; vector-effect:non-scaling-stroke; }
  .cf-thread .cf-fill{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
  .cf-tip{ display:none; }

  .cf-steps{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
  .cf-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
            padding-block:clamp(22px,3.6vh,42px); }
  /* the node sits on the thread, in the breathing space above each step */
  /* node markers removed (just a curvy line); keep the spacing they provided */
  .cf-node{ width:1px; height:1px; visibility:hidden; margin-bottom:clamp(16px,3vh,32px); }
  /* content sits ON TOP of the thread; the line runs continuously behind it (no masking) */
  /* min-width:auto is the default on a flex and grid child, which lets this
     grow past its own column when the diagram inside is wider than the
     phone. Pinning it to 0 makes the parent the boundary again. */
  .cf-inner{ position:relative; z-index:1; padding:clamp(16px,3vw,30px) clamp(20px,4vw,44px); max-width:min(34rem, 100%); min-width:0; }
  .cf-name{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing: 0.02em; color:#3f8d5a; margin:0 0 18px; will-change:opacity,transform; }
  .cf-h{ font-family:var(--font); font-size:clamp(1.3rem,2.4vw,1.85rem); font-weight:600; letter-spacing:-.022em; line-height:1.06; color:var(--ink); margin:0 auto 1.05rem; max-width:18ch; }
  .cf-h .w{ display:inline-block; will-change:opacity, transform; }
  .cf-d{ font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.62; color:var(--muted); margin:0 auto; max-width:40ch; }
  .cf-viz{ display:flex; justify-content:center; margin-top:clamp(20px,3vw,36px); }
  .cf-viz .mf-funnel i{ transform-origin:center; }
  .cf-viz .mf-board .col{ transform-origin:bottom center; }
  .cf-viz .mf > *, .cf-viz .mf-people .lk{ will-change:opacity, transform; }
  /* JS drives the build; hide buildable parts up front (only when JS is active) */
  .js .cf-name, .js .cf-h .w, .js .cf-d, .js .cf-viz .mf > *, .js .cf-viz .dm-def > *, .js .cf-viz .mf-people .lk{ opacity:0; }

  @media (max-width:680px){
    .cf-inner{ padding-inline:clamp(14px,5vw,24px); }
    .cf-step{ padding-block:clamp(22px,5.5vw,40px); }
    .cf-viz .mf{ max-width:86vw; }
  }
  @media (prefers-reduced-motion:reduce){ .cf-name, .cf-h .w, .cf-d, .cf-viz .mf > *, .cf-viz .dm-def > *, .cf-viz .mf-people .lk{ opacity:1 !important; transform:none !important; } .cf-thread__fill{ display:none; } .cf-step .cf-node{ border-color:var(--ink); } }