/* Page styles for product.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. */

: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; }

  /* ── 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) */
  .cf-inner{ position:relative; z-index:1; padding:clamp(16px,3vw,30px) clamp(20px,4vw,44px); max-width:34rem; }
  .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 .mf-people .lk{ opacity:0; }

  @media (max-width: 720px){
    .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 .mf-people .lk{ opacity:1 !important; transform:none !important; } .cf-thread__fill{ display:none; } .cf-step .cf-node{ border-color:var(--ink); } }

  /* ── SELECTED WORK: hover-reveal sneak-peek thumbnails (match homepage recent work) ── */
  .pr-cases .company--link{ text-decoration:none; color:inherit; display:block; }
  .pr-cases .company__name{ display:inline-flex; align-items:center; }
  .pr-cases .company--link:hover .company__name{ color:var(--accent,#1f6b5b); }
  /* Same as the Experience list: no thumbnail, and hover colours the case name
     with that case's own accent, darkened to clear 4.5:1 on the paper. */
  .pr-cases .cthumb-shell{ display:none; }
  .pr-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; }
  .pr-cases .company--link .company__name{ transition:color .18s ease; }
  .pr-cases .company--link:hover .company__name, .pr-cases .company--link:focus-visible .company__name{ color:var(--case-ink,var(--ink)); }
  @media (prefers-reduced-motion:reduce){ .pr-cases .company--link .company__name{ transition:none; } }
  .pr-cases .company__card{ position:relative; display:block; }
  .pr-cases .company:not(.company--link) .company__name, .pr-cases .company:not(.company--link) .company__desc{ opacity:.6; }
  @media (hover:hover) and (pointer:fine){ .pr-cases .company:not(.company--link):hover .cthumb{ opacity:.72; filter:grayscale(.5); } }
  .pr-cases .company__tip{ position:absolute; left:50%; top:32%; transform:translate(-50%,-5px); background:#fff; color:var(--ink); border:1px solid var(--rule); box-shadow:0 10px 24px -12px rgba(22,22,19,.45); font:500 12px/1 var(--font-sans,var(--font)); padding:7px 13px; border-radius:999px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; z-index:3; }
  @media (hover:hover) and (pointer:fine){ .pr-cases .company:not(.company--link):hover .company__tip{ opacity:1; transform:translate(-50%,0); } }
  /* ZKB - advisory tool, blue + white (NDA, no page, no hover) */
  .pr-cases .cthumb--zkb{ background:#fff; border-color:color-mix(in srgb,#00529b 22%,var(--rule)); }
  .pr-cases .cthumb--zkb .zk-head{ position:absolute; left:0; right:0; top:0; height:30%; background:linear-gradient(135deg,#0a63ad,#00529b); }
  .pr-cases .cthumb--zkb .zk-row{ position:absolute; left:12px; height:8px; border-radius:3px; background:color-mix(in srgb,#00529b 14%,transparent); }
  .pr-cases .cthumb--zkb .zk-row--1{ top:46%; right:14px; }
  .pr-cases .cthumb--zkb .zk-row--2{ top:62%; right:42%; }
  .pr-cases .cthumb--zkb .zk-cta{ position:absolute; left:12px; bottom:11px; width:42px; height:13px; border-radius:7px; background:#0a63ad; }
  /* obseed - roadmap / backlog (product ownership) */
  .pr-cases .cthumb--ob{ display:flex; flex-direction:column; justify-content:center; gap:8px; padding:14px; }
  .pr-cases .cthumb--ob .ob-lane{ position:relative; height:8px; border-radius:4px; background:color-mix(in srgb,var(--ink) 7%,transparent); }
  .pr-cases .cthumb--ob .ob-bar{ position:absolute; top:0; bottom:0; border-radius:4px; background:color-mix(in srgb,var(--ink) 22%,transparent); }
  .pr-cases .cthumb--ob .ob-bar--a{ background:#E0A92E; }
  .pr-cases .cthumb--ob .ob-l1{ left:6%; width:46%; } .pr-cases .cthumb--ob .ob-l2{ left:34%; width:52%; }
  .pr-cases .cthumb--ob .ob-l3{ left:12%; width:30%; } .pr-cases .cthumb--ob .ob-l4{ left:48%; width:40%; }
  /* generic skeleton lines (agentic app) */
  .pr-cases .cthumb .ct-l{ display:block; height:7px; border-radius:3px; background:color-mix(in srgb,var(--ink) 13%,transparent); margin-bottom:7px; }
  .pr-cases .cthumb .ct-l2{ width:58%; }
  /* Scout24 - managed UX unit (org/alignment), türkis + white */
  .pr-cases .cthumb--s24{ background:#fff; border-color:color-mix(in srgb,#0fa3a0 24%,var(--rule)); display:flex; align-items:center; justify-content:center; padding:10px; }
  .pr-cases .cthumb--s24 .s24-org{ width:74%; height:auto; }
  .pr-cases .cthumb--s24 .s24-link{ fill:none; stroke:#0fa3a0; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .pr-cases .cthumb--s24 .s24-top{ fill:#0fa3a0; }
  .pr-cases .cthumb--s24 .s24-sub{ fill:color-mix(in srgb,#0fa3a0 32%,#fff); stroke:#0fa3a0; stroke-width:1.5; }
  /* finanzcheck - conversion funnel (CRO) */
  .pr-cases .cthumb--fc{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:15px; }
  .pr-cases .cthumb--fc .fc-step{ height:10px; border-radius:3px; background:color-mix(in srgb,var(--ink) 13%,transparent); }
  .pr-cases .cthumb--fc .fc-s1{ width:86%; } .pr-cases .cthumb--fc .fc-s2{ width:64%; } .pr-cases .cthumb--fc .fc-s3{ width:44%; }
  .pr-cases .cthumb--fc .fc-s4{ width:28%; background:#1F4F8C; }
  /* stepstone - notification */
  .pr-cases .cthumb--ss .ct-av{ position:absolute; left:12px; top:12px; width:18px; height:18px; border-radius:6px; background:#1F4F8C; }
  .pr-cases .cthumb--ss .ct-lh{ position:absolute; left:38px; top:13px; height:6px; width:42%; border-radius:3px; background:color-mix(in srgb,var(--ink) 16%,transparent); }
  .pr-cases .cthumb--ss .ct-ls{ position:absolute; left:38px; top:24px; height:5px; width:30%; border-radius:3px; background:color-mix(in srgb,var(--ink) 10%,transparent); }
  .pr-cases .cthumb--ss .ct-nrow{ position:absolute; left:12px; right:12px; height:11px; border-radius:4px; background:color-mix(in srgb,var(--ink) 7%,transparent); border:1px solid color-mix(in srgb,var(--ink) 9%,transparent); }
  .pr-cases .cthumb--ss .ct-nrow--1{ bottom:30px; } .pr-cases .cthumb--ss .ct-nrow--2{ bottom:13px; }
  /* ibmix - product grid */
  .pr-cases .cthumb--hk{ display:flex; gap:8px; align-items:stretch; padding:12px; }
  .pr-cases .cthumb--hk .ct-tile{ flex:1; border-radius:6px; }
  .pr-cases .cthumb--hk .ct-tile--r{ background:linear-gradient(180deg,#b15c4f,#8a4339); }
  .pr-cases .cthumb--hk .ct-tile--g{ background:linear-gradient(180deg,#c0a65d,#917a3d); }
  .pr-cases .cthumb--hk .ct-tile--b{ background:linear-gradient(180deg,#5d8669,#42634c); }
  /* agentic desktop app - dark dashboard */
  .pr-cases .cthumb--ai{ background:#1c1f25; border-color:#2a2e36; }
  .pr-cases .cthumb--ai .ct-dots{ display:block; width:26px; height:5px; border-radius:3px; background:rgba(255,255,255,.18); margin-bottom:11px; }
  .pr-cases .cthumb--ai .ct-l{ background:rgba(255,255,255,.15); }
  .pr-cases .cthumb--ai .ct-pill{ position:absolute; right:12px; bottom:12px; width:42px; height:13px; border-radius:999px; background:#2f8043; }