.cqe,.cqe *,.cqe *::before,.cqe *::after{box-sizing:border-box}
.cqe{position:relative;background:#020b31;color:#eaf1f8;
  --c1:20,171,218;--c2:3,139,241;--c3:114,89,191;
  --grad:linear-gradient(100deg,#4fd6f1,#2f8fda 55%,#2b6fd0);--teal:#65C8C0;
  font-family:'Open Sauce One',system-ui,-apple-system,'Segoe UI',sans-serif}


.cqe .cqe-pin{height:100vh;padding:22px 26px}
.cqe .cqe-canvas{
    position:relative;height:100%;overflow:hidden;isolation:isolate;
    border-radius:clamp(16px,1.6vw,30px);
    background:radial-gradient(125% 115% at 50% 0%,#091747 0%,#061231 44%,#030e2b 100%);
    box-shadow:inset 0 0 70px -12px rgba(var(--c2),.12),0 34px 80px -34px rgba(0,0,3,.85);
  }
.cqe .cqe-canvas::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(66% 70% at 50% 50%,rgba(4,16,47,.96) 0%,rgba(4,16,47,.8) 40%,rgba(4,16,47,0) 82%)}
.cqe .cqe-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
    background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
                     linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(78% 74% at 50% 50%,#000 22%,transparent 92%);
            mask-image:radial-gradient(78% 74% at 50% 50%,#000 22%,transparent 92%)}

.cqe .cqe-viz{position:absolute;inset:0;z-index:2}
.cqe .cqe-stage{position:absolute;inset:0;transform:scale(var(--fit,1));transform-origin:50% 50%}
.cqe .cqe-scene{position:absolute;width:0;height:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-45deg)}
.cqe .cqe-flow{position:absolute;inset:0;pointer-events:none}
.cqe .cqe-flat{position:absolute;inset:0;pointer-events:none}

.cqe .cqe-grp{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.cqe .cqe-solid{pointer-events:none;position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cqe .cqe-f{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:hidden;
    transition:opacity .45s ease,background .45s ease,border-color .45s ease,box-shadow .45s ease}

  /* ── Block styling, matched to the Assembly module ─────────────────────── */
.cqe .cqe-lid{background:rgba(13,30,84,.34);border:1px solid rgba(150,210,247,.5);border-radius:6px;
    box-shadow:0 18px 44px rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  /* the crossed grid on every lid, same as Assembly */
.cqe .cqe-lid::after{content:"";position:absolute;inset:12px;
    background-image:linear-gradient(to right,rgba(160,215,250,.07) 1px,transparent 1px),
                     linear-gradient(to bottom,rgba(160,215,250,.07) 1px,transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,transparent 88%);
            mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,transparent 88%)}
.cqe .cqe-wall{background:rgba(7,18,54,.6);
    border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.05);
    box-shadow:inset 0 1px 0 rgba(150,210,247,.5);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cqe .cqe-wall.lit{background:rgba(11,26,72,.56)}

  /* Both sides now share one treatment — they are told apart by position and
     label rather than by styling. */

  /* The platform sits in exactly the same passive treatment as the team
     solids — only its footprint marks it out at rest. It lights when a flow is
     running through it, not permanently. */
.cqe .cqe-hub .cqe-lid{background:rgba(18,42,104,.2)}
.cqe .cqe-hub .cqe-wall{background:rgba(10,26,74,.3);
    -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}
.cqe .cqe-hub .cqe-wall.lit{background:rgba(14,34,92,.28)}
.cqe .cqe-hub .cqe-lid::after{inset:9px;background-size:20px 20px}
.cqe .cqe-hub .cqe-lid::before{content:'';position:absolute;inset:-1px;border-radius:7px;padding:1px;
    background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .35s ease}
.cqe .cqe-hub.on .cqe-lid{background:rgba(20,48,116,.72);border-color:rgba(255,255,255,.28)}
.cqe .cqe-hub.on .cqe-lid::before{opacity:.9}
.cqe .cqe-hub.on .cqe-wall{background:rgba(10,26,74,.95);box-shadow:inset 0 1px 0 rgba(79,214,241,.9)}
.cqe .cqe-hub.on .cqe-wall.lit{background:rgba(14,34,92,.95)}

  /* ── Flow lines: real dashed lines converging on the platform ─────────── */
.cqe .cqe-link{position:absolute;height:1px;margin-top:-.5px;transform-origin:0 50%;
    background-image:repeating-linear-gradient(90deg,
      rgba(255,255,255,.44) 0 7px, rgba(255,255,255,0) 7px 18px);
    background-size:18px 1px;
    background-position-x:var(--phase,0px);
    transition:opacity .45s ease}
.cqe .cqe-link.on{
    background-image:repeating-linear-gradient(90deg,
      #6fdcf8 0 7px, rgba(111,220,248,0) 7px 18px);
    animation:march .5s linear infinite;
    filter:drop-shadow(0 0 5px rgba(79,214,241,.55));
  }
  @keyframes march{ from{background-position-x:var(--phase,0px)}
                    to{background-position-x:calc(var(--phase,0px) + 18px)} }
  /* Hover-only overlay. The passive layer below is deduplicated, so the lit
     path for one department is drawn separately rather than by lighting shared
     segments. */
.cqe .cqe-trace{position:absolute;height:1px;margin-top:-.5px;transform-origin:0 50%;
    background-image:repeating-linear-gradient(90deg,
      #6fdcf8 0 7px, rgba(111,220,248,0) 7px 18px);
    background-size:18px 1px;
    background-position-x:var(--phase,0px);
    opacity:0;transition:opacity .25s ease;
    filter:drop-shadow(0 0 5px rgba(79,214,241,.55))}
.cqe .cqe-trace.on{opacity:1;animation:march .5s linear infinite}

.cqe .cqe-node{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
    background:rgba(255,255,255,.45);transition:opacity .45s ease,background .45s ease}
.cqe .cqe-node.on{background:#6fdcf8;box-shadow:0 0 9px rgba(79,214,241,.8)}

.cqe .cqe-chip{position:absolute;transform:translate(-50%,0);white-space:nowrap;
    line-height:1.55;text-align:center;
    padding:0;font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.17em;
    color:rgba(234,241,248,.55);background:none;border:0;
    transition:color .35s ease}
.cqe .cqe-chip.on{color:#fff}
.cqe .cqe-chip.below{transform:translate(-50%,0)}
.cqe .cqe-tether{position:absolute;border-left:1px dashed rgba(160,215,250,.5)}

  /* Text laid in the ground plane. It is a plain child of the scene, so it
     inherits the camera and lies flat on the floor — no per-element transform
     needed. Sized up because the 58deg tilt compresses it to roughly half
     height. */
.cqe .cqe-floor-lbl{position:absolute;left:0;top:0;transform-origin:0 0;text-align:center;
    white-space:nowrap;font-size:18px;font-weight:400;
    text-transform:uppercase;letter-spacing:.17em;
    color:rgba(234,241,248,.45);transition:opacity .4s ease}
.cqe .cqe-floor-lbl b{font-weight:600;color:#8fd8f5}
.cqe .cqe-floor-lbl.on{color:rgba(234,241,248,.8)}
.cqe .cqe-floor-lbl .cqe-l1,.cqe .cqe-floor-lbl .cqe-l2{display:block;text-align:center}
.cqe .cqe-floor-lbl.muted{opacity:.16}

.cqe .cqe-lbl{position:absolute;transform:translateY(-50%);white-space:nowrap;font-size:13.5px;
    color:rgba(234,241,248,.62);transition:opacity .45s ease,color .45s ease}
.cqe .cqe-lbl.r{padding-left:14px}
.cqe .cqe-lbl.l{padding-right:14px;text-align:right;transform:translate(-100%,-50%)}
.cqe .cqe-lbl.mid{transform:translate(-50%,-100%);text-align:center;padding:0}

  .cqe .hot .cqe-pod:not(.on) .cqe-f,.cqe .hot .cqe-cli:not(.on) .cqe-f{opacity:.34}
  .cqe .hot.outflow .cqe-cli .cqe-f{opacity:1}
  .cqe .hot .cqe-link{opacity:.13}
  .cqe .hot .cqe-node:not(.on){opacity:.25}
  .cqe .hot .cqe-lbl:not(.on){opacity:.26}
.cqe .cqe-lbl.on{color:#fff;font-weight:600}
  .cqe .on.cqe-pod .cqe-lid,.cqe .on.cqe-cli .cqe-lid{border-color:rgba(170,232,255,.95)}
  .cqe .on .cqe-wall{box-shadow:inset 0 1px 0 rgba(79,214,241,.75)}

  .cqe .allflow .cqe-link{
    background-image:repeating-linear-gradient(90deg,
      #6fdcf8 0 7px, rgba(111,220,248,0) 7px 18px);
    animation:march .5s linear infinite;
    filter:drop-shadow(0 0 4px rgba(79,214,241,.4));
  }

  /* Delivery serves every function, so highlighting it runs the whole client
     side at once. Driven off the deduplicated passive layer for the same reason
     as the platform: the traces overlap on the shared legs. */
  .cqe .outflow .cqe-link-out{
    opacity:1;
    background-image:repeating-linear-gradient(90deg,
      #6fdcf8 0 7px, rgba(111,220,248,0) 7px 18px);
    animation:march .5s linear infinite;
    filter:drop-shadow(0 0 4px rgba(79,214,241,.4));
  }

  /* Key. The swatch is the same dashed pattern as the lines themselves, and it
     marches whenever a flow is running, so the legend demonstrates its own
     meaning rather than just asserting it. */
.cqe .cqe-key{position:absolute;left:30px;bottom:56px;margin:0;z-index:4;
    display:flex;align-items:center;gap:11px;
    font-size:12px;letter-spacing:.01em;color:rgba(234,241,248,.42);
    transition:color .4s ease}
.cqe .cqe-key{flex-direction:column;align-items:flex-start;gap:7px}
.cqe .cqe-key-row{display:flex;align-items:center;gap:11px;margin:0}
.cqe .cqe-key-line{flex:none;width:40px;height:1px;
    background-image:repeating-linear-gradient(90deg,
      rgba(255,255,255,.44) 0 7px, rgba(255,255,255,0) 7px 18px);
    background-size:18px 1px;
    transition:background-image .4s ease}
  .cqe .hot .cqe-key,.cqe .allflow .cqe-key,.cqe .outflow .cqe-key{color:rgba(234,241,248,.8)}
  .cqe .hot .cqe-key-line,.cqe .allflow .cqe-key-line,.cqe .outflow .cqe-key-line{
    background-image:repeating-linear-gradient(90deg,
      #6fdcf8 0 7px, rgba(111,220,248,0) 7px 18px);
    animation:march .5s linear infinite;
  }
/* The hover proxy must stay invisible WITHOUT using opacity: any opacity < 1
   flattens a preserve-3d container, collapsing these faces to zero area so
   they cannot be hit at all. Transparent paint keeps the 3D intact. */
.cqe .cqe-hit{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.cqe .cqe-hit .cqe-f{background:none;border-color:transparent;box-shadow:none;
    /* These clones paint nothing, so every filter and transition on them is
       pure cost. backdrop-filter especially: it was snapshotting and blurring
       the backdrop behind 60 invisible faces on every frame. */
    -webkit-backdrop-filter:none;backdrop-filter:none;
    transition:none;border-radius:0}
.cqe .cqe-hit .cqe-f::before,.cqe .cqe-hit .cqe-f::after{display:none}

/* ── Split layout: copy left, diagram right ─────────────────────────────────
   Only applies when the layout actually has copy — .cqe--split is added by the
   renderer. Confining .cqe-viz to the right column is all it takes for the
   diagram to follow: the scene centres on 50% of the stage, and fit() measures
   .cqe-viz, so both the centring and the scale re-derive from the new box. */
.cqe{--cqe-split:44%;--cqe-gut:clamp(22px,3.4vw,66px)}

.cqe .cqe-copy{position:absolute;z-index:3;
  left:var(--cqe-gut);top:50%;transform:translateY(-50%);
  width:calc(var(--cqe-split) - var(--cqe-gut) - 20px);max-width:34rem}

.cqe--split .cqe-viz{left:var(--cqe-split)}
.cqe--split .cqe-key{left:calc(var(--cqe-split) + clamp(10px,1.2vw,30px))}

.cqe .cqe-copy>*:first-child{margin-top:0}
.cqe .cqe-copy>*:last-child{margin-bottom:0}

/* Shared display-heading treatment — matches .cqa-heading in cubiq-assembly,
   .cqp-heading in cubiq-process and .cqh-title in cubiq-hero-glow. */
.cqe .cqe-copy h1,.cqe .cqe-copy h2,.cqe .cqe-copy h3,.cqe .cqe-copy h4{
  margin:0 0 18px;font-weight:300;line-height:1.06;letter-spacing:-.032em;
  background:linear-gradient(180deg,#ffffff 0%,#c4d2e6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* background-clip:text cuts the gradient at the box edge, and 1.06 leading
     leaves the last line's descenders outside it. */
  padding-bottom:.13em}
.cqe .cqe-copy h1,.cqe .cqe-copy h2{font-size:clamp(26px,3.4vw,48px)}
.cqe .cqe-copy h3{font-size:clamp(22px,2.4vw,32px)}
.cqe .cqe-copy h4{font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em}

/* em in a heading is the brand-gradient accent, same convention as Assembly */
.cqe .cqe-copy h1 em,.cqe .cqe-copy h2 em,.cqe .cqe-copy h3 em,.cqe .cqe-copy h4 em{
  font-style:normal;
  background:linear-gradient(100deg,rgb(var(--c1)) 0%,rgb(var(--c2)) 52%,rgb(var(--c3)) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

.cqe .cqe-copy p,.cqe .cqe-copy ul,.cqe .cqe-copy ol{
  font-size:17px;line-height:1.6;color:rgba(234,241,248,.55);margin:0 0 1.1em}
.cqe .cqe-copy ol{padding-left:1.15em}
.cqe .cqe-copy ul{list-style:none;padding-left:0}
.cqe .cqe-copy li{margin:0 0 .5em}
.cqe .cqe-copy ul li{position:relative;padding-left:22px}
.cqe .cqe-copy ul li::before{content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--teal)}
.cqe .cqe-copy strong{color:rgba(234,241,248,.85);font-weight:600}
.cqe .cqe-copy a{color:#8fd8f5;text-decoration:none;
  border-bottom:1px solid rgba(143,216,245,.35);transition:border-color .3s ease}
.cqe .cqe-copy a:hover{border-bottom-color:#8fd8f5}

/* Below this the isometric diagram can't be shown at a legible scale, and per
   the brief it isn't wanted on a phone — the module becomes wording-only.
   Un-pin the section, drop the 3D scene, its background grid and the legend,
   and let the copy run full width. A diagram-only embed (no copy) has nothing
   left to say at this width, so the whole section is removed rather than shown
   as an empty band. fit() in the JS measures the now-hidden .cqe-viz as 0×0
   and simply sets --fit:0 — harmless, nothing renders. */
@media (max-width:1080px){
  .cqe .cqe-pin{height:auto}
  .cqe .cqe-canvas{height:auto;padding:clamp(26px,5vw,44px) 0}
  .cqe .cqe-viz,
  .cqe .cqe-grid,
  .cqe .cqe-key{display:none}
  .cqe--split .cqe-copy{position:static;transform:none;
    width:auto;max-width:none;padding:0 clamp(20px,5vw,40px);margin:0}
  .cqe:not(.cqe--split){display:none}
}

/* Nothing here carries meaning through movement — the dashes only illustrate a
   direction the layout already states — so reduced-motion users lose no
   information, and the marching gradients stop costing paint. */
@media (prefers-reduced-motion:reduce){
  .cqe *,.cqe *::before,.cqe *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* Held only while the page is actually moving — see "Scroll relief" in the JS.
   Restored ~140ms after scrolling stops, so the glass is always intact by the
   time anyone is still enough to see it. */
.cqe.cqe-scrolling .cqe-lid,
.cqe.cqe-scrolling .cqe-wall{
  -webkit-backdrop-filter:none;backdrop-filter:none}