/* 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(--ink4); 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(--ink4); 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 var(--t-slow) 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; }


  .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(--ink4); 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(--ink4); 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); } }

/* ---------- Selected work: each case's teaser, in its UI tile's own palette ---------- */

/* obseed: the Heute screen, the health head card lifted */
.tu--eo { font-family: var(--font); color: #1a1a1a; letter-spacing: -.005em; }
.tu--eo .tu__base { inset: 0; }
.eo-phone { position: absolute; left: calc(var(--u) * 232); top: calc(var(--u) * 18); width: calc(var(--u) * 150); height: calc(var(--u) * 260); border-radius: calc(var(--u) * 26); background: #F6F3EE; overflow: hidden;
  box-shadow: 0 0 0 calc(var(--u) * 3) #fbfaf7, 0 0 0 calc(var(--u) * 3.5) #d6d1c5, 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(26,26,26,.08); }
.eo-notch { position: absolute; left: 50%; top: calc(var(--u) * 8); width: calc(var(--u) * 44); height: calc(var(--u) * 12); margin-left: calc(var(--u) * -22); border-radius: calc(var(--u) * 7); background: #d9d4c9; }
.eo-h { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 30); font-size: calc(var(--u) * 13); font-weight: 600; letter-spacing: -.02em; color: #a19c91; }
.eo-rows { position: absolute; left: calc(var(--u) * 14); right: calc(var(--u) * 14); top: calc(var(--u) * 54); }
.eo-rows div { display: flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 22); border-bottom: calc(var(--u) * .5) solid #e6e2d9; font-size: calc(var(--u) * 7.5); color: #a19c91; white-space: nowrap; }
.eo-rows i { flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; }
.eo-rows b { margin-left: auto; flex: none; width: calc(var(--u) * 16); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #e6e2d9; }
.eo-strip { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 152); height: calc(var(--u) * 28); display: flex; align-items: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 8); background: #5d5e57; }
.eo-strip span { font-size: calc(var(--u) * 7); font-weight: 600; padding: calc(var(--u) * 1.5) calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #d8c982; color: #4b4a3e; }
.eo-strip b { width: calc(var(--u) * 54); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #85867e; }
.eo-card { left: calc(var(--u) * 28); top: calc(var(--u) * 30); width: calc(var(--u) * 198); padding: calc(var(--u) * 11) calc(var(--u) * 12) 0; box-sizing: border-box; background: #fff; border-radius: calc(var(--u) * 14); }
.eo-pills { display: flex; gap: calc(var(--u) * 2); width: max-content; padding: calc(var(--u) * 2.5); border-radius: calc(var(--u) * 10); background: #f3f0ea; font-size: calc(var(--u) * 8); color: #55534c; }
.eo-pills span { padding: calc(var(--u) * 3.5) calc(var(--u) * 7); border-radius: calc(var(--u) * 8); }
.eo-pills .is-on { color: #1a1a1a; font-weight: 600; background: #fff; box-shadow: 0 0 0 calc(var(--u) * .5) #e3dfd6, 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(26,26,26,.06); }
.eo-val { display: flex; align-items: flex-end; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 10); }
.eo-val b { width: calc(var(--u) * 50); height: calc(var(--u) * 14); border-radius: calc(var(--u) * 3); background: #1a1a1a; }
.eo-val i { width: calc(var(--u) * 34); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #d9d5cc; margin-bottom: calc(var(--u) * 1.5); }
.eo-lolli { display: block; width: 100%; height: auto; margin-top: calc(var(--u) * 6); overflow: visible; }
.eo-tabs { display: flex; gap: calc(var(--u) * 11); margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 7.5); color: #6b665e; white-space: nowrap; }
.eo-tabs span { padding: calc(var(--u) * 6) 0 calc(var(--u) * 9); border-top: calc(var(--u) * 1.4) solid transparent; }
.eo-tabs .is-on { color: #1a1a1a; font-weight: 600; border-top-color: #E6C229; }

/* Heineken: the order desk, one order row lifted */
.tu--eh { font-family: var(--font); color: #1a1a1a; }
.tu--eh .tu__base { inset: 0; }
.eh-win { position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 22); width: calc(var(--u) * 380); height: calc(var(--u) * 200); border-radius: calc(var(--u) * 6); background: #f3f3f3; overflow: hidden;
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(26,26,26,.1), 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(26,26,26,.06); }
.eh-top { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 12); background: #fff; border-bottom: calc(var(--u) * .5) solid #eaeaea; font-size: calc(var(--u) * 7); color: #a3a3a3; white-space: nowrap; }
.eh-logo { flex: none; width: calc(var(--u) * 34); height: calc(var(--u) * 7); border-radius: calc(var(--u) * 2); background: #bddcbd; }
.eh-fld { display: flex; align-items: center; margin-left: calc(var(--u) * 8); height: calc(var(--u) * 16); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 0 0 0 calc(var(--u) * .6) #eaeaea; }
.eh-body { display: grid; grid-template-columns: calc(var(--u) * 66) 1fr; gap: calc(var(--u) * 12); padding: calc(var(--u) * 11) calc(var(--u) * 12); }
.eh-fac { display: grid; align-content: start; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 7); }
.eh-fac > b { color: #8c8c8c; font-weight: 600; font-size: calc(var(--u) * 8); }
.eh-chip { display: block; width: max-content; padding: calc(var(--u) * 3) calc(var(--u) * 6); border-radius: 99px; box-shadow: 0 0 0 calc(var(--u) * .6) #bddcbd; }
.eh-chip i { display: block; width: calc(var(--u) * 34); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #dbeadb; }
.eh-cap { margin-top: calc(var(--u) * 4); color: #a3a3a3; font-weight: 600; letter-spacing: .06em; font-size: calc(var(--u) * 6.5); }
.eh-ck { display: flex; align-items: center; gap: calc(var(--u) * 5); }
.eh-ck i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: calc(var(--u) * 1.5); background: #fff; box-shadow: 0 0 0 calc(var(--u) * .6) #dcdcdc; }
.eh-ck i.on { background: #bddcbd; box-shadow: none; }
.eh-ck b { width: calc(var(--u) * 32); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #ececec; }
.eh-main { display: grid; align-content: start; gap: calc(var(--u) * 6); }
.eh-act { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 7); font-weight: 500; white-space: nowrap; }
.eh-edit { margin-right: auto; color: #9fc79f; }
.eh-bo { padding: calc(var(--u) * 3.5) calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: #fff; color: #a3a3a3; box-shadow: 0 0 0 calc(var(--u) * .6) #e3e3e3; }
.eh-bm { padding: calc(var(--u) * 3.5) calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: #bddcbd; color: #fff; }
.eh-row { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 4); background: #fff; box-shadow: 0 0 0 calc(var(--u) * .6) #eaeaea; }
.eh-slot { height: calc(var(--u) * 34); }
.eh-sq { flex: none; width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 2); background: #fafafa; box-shadow: 0 0 0 calc(var(--u) * .5) #efefef; }
.eh-col { display: grid; gap: calc(var(--u) * 4); flex: 1; min-width: 0; }
.eh-bar { display: block; height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #ececec; }
.eh-bar--n { height: calc(var(--u) * 6); background: #e2e2e2; }
.eh-st { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 0 0 0 calc(var(--u) * .6) #eaeaea; }
.eh-st .eh-bar { width: calc(var(--u) * 10); }
.eh-pm { position: relative; display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 1.3); background: #bddcbd; }
.eh-pm--p::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 1.3); height: calc(var(--u) * 7); transform: translate(-50%, -50%); background: inherit; }
.eh-hi { left: calc(var(--u) * 32); top: calc(var(--u) * 104); width: calc(var(--u) * 346); display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 10) calc(var(--u) * 11); box-sizing: border-box; background: #fff; border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 8); }
.eh-hi .eh-sq { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.eh-hi .eh-col { gap: calc(var(--u) * 5); }
.eh-l3 { display: flex; align-items: center; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 1); white-space: nowrap; }
.eh-add { color: #008100; font-weight: 500; }
.eh-bdg { flex: none; color: #fff; font-size: calc(var(--u) * 7); font-weight: 600; letter-spacing: .06em; padding: calc(var(--u) * 2.5) calc(var(--u) * 5); border-radius: calc(var(--u) * 2); white-space: nowrap; }
.eh-bdg--mix { background: #008100; }
.eh-bdg--off { background: #ff7900; }
.eh-hi .eh-st { height: calc(var(--u) * 22); gap: calc(var(--u) * 9); padding: 0 calc(var(--u) * 8); }
.eh-st--on .eh-pm { background: #008100; }
.eh-st--on .eh-bar { background: #d6d6d6; }

/* Finanzcheck: the credit overview, the credit summary lifted */
.tu--ef { font-family: var(--font); color: #0A0F1A; line-height: 1.3; }
.tu--ef .tu__base { inset: 0; }
.ef-phone { position: absolute; left: calc(var(--u) * 226); top: calc(var(--u) * 16); width: calc(var(--u) * 158); height: calc(var(--u) * 300); border-radius: calc(var(--u) * 22); background: #F4F6FA; color: #8C93A0; overflow: hidden;
  box-shadow: 0 0 0 calc(var(--u) * 3) #fafbfc, 0 0 0 calc(var(--u) * 3.5) #d5d9e0, 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(26,26,26,.08);
  display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 14) calc(var(--u) * 11); box-sizing: border-box; font-size: calc(var(--u) * 7.5); }
.ef-ttl { display: flex; align-items: center; font-size: calc(var(--u) * 11); font-weight: 700; letter-spacing: -.01em; color: #6b7382; }
.ef-ttl i { margin-left: auto; width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; background: #e3e8f2; }
.ef-bar { display: block; height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #dfe3ea; }
.ef-seg { display: flex; gap: calc(var(--u) * 3); white-space: nowrap; }
.ef-seg span { flex: none; padding: calc(var(--u) * 2.5) calc(var(--u) * 6); border-radius: calc(var(--u) * 8); background: #fff; font-weight: 600; font-size: calc(var(--u) * 7); box-shadow: 0 0 0 calc(var(--u) * .5) #e4e7ed; }
.ef-seg .is-on { background: #9DB2DF; color: #fff; box-shadow: none; }
.ef-cd { display: flex; flex-direction: column; gap: calc(var(--u) * 5); padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 8); background: #fff; box-shadow: 0 0 0 calc(var(--u) * .5) #e4e7ed; }
.ef-cap { font-size: calc(var(--u) * 7); font-weight: 600; letter-spacing: .04em; color: #9aa1ad; white-space: nowrap; }
.ef-v { display: block; width: calc(var(--u) * 64); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 3); background: #c3c9d3; }
.ef-pb { display: flex; gap: calc(var(--u) * 2); }
.ef-pb i { height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); opacity: .4; }
.ef-lg { display: flex; align-items: center; gap: calc(var(--u) * 4); white-space: nowrap; }
.ef-lg i { flex: none; width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; opacity: .4; }
.ef-lg b { margin-left: auto; width: calc(var(--u) * 20); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #dfe3ea; }
.ef-ar { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 7); border-radius: calc(var(--u) * 8); background: #EDF2FB; color: #7f95c6; white-space: nowrap; }
.ef-ar > i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #fff; }
.ef-ar b { display: block; color: #6b7382; }
.ef-ar small { display: block; font-size: 1em; }
.ef-sum { left: calc(var(--u) * 28); top: calc(var(--u) * 86); width: calc(var(--u) * 202); display: grid; grid-template-columns: 1fr auto; row-gap: calc(var(--u) * 4); align-items: center; padding: calc(var(--u) * 12) calc(var(--u) * 13); box-sizing: border-box;
  background: #fff; border-radius: calc(var(--u) * 11); font-size: calc(var(--u) * 8); }
.ef-sum > b { font-size: calc(var(--u) * 12); font-weight: 700; letter-spacing: -.01em; }
.ef-sum .ef-cap { color: #6F7786; font-size: calc(var(--u) * 7.5); }
.ef-r { justify-self: end; display: flex; align-items: center; gap: calc(var(--u) * 4); }
.ef-r i { display: block; width: calc(var(--u) * 40); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 3); background: #0A0F1A; }
.ef-g { color: #12805A; font-weight: 500; }
.ef-g i { width: calc(var(--u) * 18); height: calc(var(--u) * 6); background: #12805A; }
.ef-prog { grid-column: 1 / -1; position: relative; display: block; height: calc(var(--u) * 6); margin-top: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #EAF1FC; overflow: hidden; }
.ef-prog::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 32%; border-radius: inherit; background: #1F50B5; }

/* Covestro: the explorer, the haptic axes lifted */
.tu--ec { font-family: var(--font); color: #12100e; }
.tu--ec .tu__base { inset: 0; }
.ec-scr { position: absolute; left: calc(var(--u) * 52); top: calc(var(--u) * 22); width: calc(var(--u) * 300); height: calc(var(--u) * 196); padding: calc(var(--u) * 8); box-sizing: border-box; border-radius: calc(var(--u) * 10); background: #fff;
  box-shadow: 0 0 0 calc(var(--u) * .8) rgba(194,185,198,.5), 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(26,26,26,.05); }
.ec-hero { position: relative; height: calc(var(--u) * 112); border-radius: calc(var(--u) * 6); background: linear-gradient(160deg, #d3cdd4, #c4bcc6); }
.ec-ring { position: absolute; left: calc(var(--u) * 12); top: calc(var(--u) * 12); width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; border: calc(var(--u) * 1.8) solid #b3aab5; box-sizing: border-box; }
.ec-name { position: absolute; right: calc(var(--u) * 12); top: calc(var(--u) * 12); font-size: calc(var(--u) * 7.5); color: rgba(255,255,255,.92); white-space: nowrap; }
.ec-name b { font-weight: 600; }
.ec-t1 { position: absolute; left: calc(var(--u) * 12); bottom: calc(var(--u) * 20); width: calc(var(--u) * 92); height: calc(var(--u) * 7); border-radius: calc(var(--u) * 4); background: rgba(255,255,255,.8); }
.ec-t2 { position: absolute; left: calc(var(--u) * 12); bottom: calc(var(--u) * 11); width: calc(var(--u) * 62); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: rgba(255,255,255,.5); }
.ec-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 8); }
.ec-doors div { display: grid; gap: calc(var(--u) * 6); padding: calc(var(--u) * 8) calc(var(--u) * 7) calc(var(--u) * 20); border-radius: calc(var(--u) * 5); background: #F8F7F7; border-top: calc(var(--u) * 2.5) solid #E0DBDE; overflow: hidden; }
.ec-doors span { font-size: calc(var(--u) * 7); font-weight: 600; letter-spacing: -.01em; color: #a79dab; white-space: nowrap; }
.ec-doors i { display: block; width: 70%; height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #E0DBDE; }
.ec-axes { left: calc(var(--u) * 162); top: calc(var(--u) * 64); width: calc(var(--u) * 206); display: grid; gap: calc(var(--u) * 9); padding: calc(var(--u) * 11) calc(var(--u) * 14) calc(var(--u) * 12); box-sizing: border-box; border-radius: calc(var(--u) * 10);
  background: radial-gradient(120% 140% at 85% 0%, #3a2216, transparent 60%), #1b1227; color: rgba(255,255,255,.9); }
.ec-row { display: flex; align-items: baseline; gap: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 6); border-bottom: calc(var(--u) * .5) solid rgba(255,255,255,.18); font-size: calc(var(--u) * 7.5); color: rgba(255,255,255,.62); white-space: nowrap; }
.ec-row .is-on { position: relative; font-size: calc(var(--u) * 13.5); font-weight: 300; letter-spacing: -.01em; color: rgba(255,255,255,.95); }
.ec-row .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -2); height: calc(var(--u) * 1.2); border-radius: 1px; background: linear-gradient(90deg, #ff803d, #eb0e77); }