/* ── Cubiq Assembly — scroll-pinned engagement model ───────────────────────
   Isometric glass plates float apart at rest and seat one by one into a
   tapering stack as the section is scrolled. Each layer brings its copy in
   beside it; when the apex lands the pin releases and the page carries on.

   The panel casing, aura and grain are lifted from Cubiq Process so the two
   process modules read as the same family. */

/* This theme sets `html, body { overflow-x: hidden }`, which turns the page
   into a scroll container and breaks position:sticky. `overflow-x: clip`
   contains the same overflow without creating a scroll container, so the pin
   works. The theme's rule is unlayered and loads after this file, so the
   !important is needed to win. */
html, body { overflow-x: clip !important; }

.cqa,
.cqa *,
.cqa *::before,
.cqa *::after { box-sizing: border-box; }

.cqa {
  /* Brand palette — same triple as the hero and Cubiq Process */
  --c1: 20, 171, 218;   /* #14ABDA cyan   */
  --c2: 3, 139, 241;    /* #038BF1 blue   */
  --c3: 114, 89, 191;   /* #7259BF purple */
  --grad: linear-gradient(100deg, #4fd6f1, #2f8fda 55%, #2b6fd0);
  --teal: #65C8C0;

  /* Horizontal anchor for the isometric scene. The pyramid's own centre line
     sits here — the annotations hang off to the right of it and are allowed
     to be asymmetric, so the solid itself reads as dead centre rather than
     the pyramid-plus-labels group. Scene, leaders and labels all derive from
     this one value so they cannot drift apart. */
  --anchor: 50%;

  /* The tall element that donates the scroll distance. --pin is how many
     extra screens the section holds for. */
  height: calc((var(--pin, 4) + 1) * 100vh);

  position: relative;
  background: #020b31;
  font-family: 'Open Sauce One', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #eaf1f8;
}

.cqa-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: clamp(12px, 1.6vh, 26px) clamp(12px, 1.4vw, 28px);
}

/* The inset panel everything happens inside — same construction as Cubiq
   Process: a base a few steps lighter than #020b31, an inset glow, and an
   outer shadow to sit it above the page rather than flush with it. */
.cqa-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);
}

/* ── Inner glow ────────────────────────────────────────────────────────────
   Two brand-gradient conics turning slowly at different speeds and opposite
   directions behind an edge-weighted mask, so the colour travelling round the
   inside of the frame never repeats the same pass. */

.cqa-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  -webkit-mask-image: radial-gradient(118% 118% at 50% 50%,
    transparent 26%, rgba(0, 0, 0, .5) 58%, #000 100%);
          mask-image: radial-gradient(118% 118% at 50% 50%,
    transparent 26%, rgba(0, 0, 0, .5) 58%, #000 100%);
}

.cqa-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.cqa-glow--a {
  background: conic-gradient(from 200deg,
    rgb(var(--c3)), rgb(var(--c2)), rgb(var(--c1)), rgb(var(--c2)), rgb(var(--c3)));
  filter: blur(70px) saturate(108%);
  opacity: .5;
  animation: cqa-orbit 46s linear infinite;
}

.cqa-glow--b {
  background: conic-gradient(from 20deg,
    rgb(var(--c1)), rgb(var(--c3)), rgb(var(--c2)), rgb(var(--c1)));
  filter: blur(100px) saturate(102%);
  opacity: .34;
  animation: cqa-orbit 71s linear infinite reverse;
}

@keyframes cqa-orbit { to { transform: rotate(360deg); } }

/* Keeps the middle of the panel deep so the colour stays edge light and the
   stack has something to read against. */
.cqa-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%);
}

/* The house 46px grid, masked so it fades before it reaches the rim and never
   competes with the aura. */
.cqa-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 52% 48%, #000 22%, transparent 92%);
          mask-image: radial-gradient(78% 74% at 52% 48%, #000 22%, transparent 92%);
}

.cqa-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout ────────────────────────────────────────────────────────────────*/

/* The pyramid is the centrepiece: it holds the middle of the panel while the
   copy takes opposite corners — intro top-left, the live layer bottom-right.
   Both corners are absolutely placed so neither can push the stack off centre
   as its text changes length. */
/* Full width, unlike the site's 92rem body column: the corner blocks are part
   of a framed composition and should hug the panel, not an inner text column
   that would leave them floating ~200px short of the corner. */
.cqa-wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
}

/* Held inside the pyramid's own vertical band rather than jammed against the
   panel's top edge. Pinned to the very top it left a huge void down the whole
   bottom-left of the panel; sharing the stack's band means the leftover space
   reads as even padding above and below the composition instead. Still above
   the midline, so it stays the top-left block of the diagonal. */
.cqa-copy {
  position: absolute;
  z-index: 3;
  top: clamp(30px, 20%, 190px);
  left: clamp(22px, 3.4vw, 66px);
  max-width: min(30rem, 42%);
}

.cqa-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(16px, 2vh, 26px);
}
.cqa-eyebrow i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--teal);
}
.cqa-eyebrow span {
  font-size: 14px;
  font-weight: 400;
  color: rgba(234, 241, 248, .62);
}

.cqa-heading {
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 48px);
  background: linear-gradient(180deg, #ffffff 0%, #c4d2e6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Shared display-heading treatment — matches .cqp-heading in cubiq-process
     and .cqh-title in cubiq-hero-glow. Grep "display-heading treatment" to
     find every module using it. */
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.032em;
  /* 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;
}

.cqa-heading 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;
}

.cqa-lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(234, 241, 248, .55);
  margin: 0 0 clamp(20px, 3.4vh, 40px);
  max-width: 24rem;
}

/* Layer copy — one block visible at a time, cross-fading as its plate seats.
   Absolutely stacked, so the column never reflows as the text changes. */
/* Bottom-right corner. Items are anchored to the container's bottom edge and
   grow upward, so the block stays welded to the corner however long the copy
   for a given layer runs. */
.cqa-detail {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 3.4vw, 66px);
  bottom: clamp(28px, 20%, 190px);
  width: min(27rem, 40%);
  height: 0;
  text-align: right;
}
/* The outgoing block clears before the incoming one arrives. A symmetric
   cross-fade leaves two paragraphs legible on top of each other at the
   half-way point, which reads as a rendering fault. */
.cqa-item {
  position: absolute;
  inset: auto 0 0 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .16s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.cqa-item.is-on {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease .15s, transform .55s cubic-bezier(.22, 1, .36, 1) .1s;
}
.cqa-item h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.cqa-item p {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(234, 241, 248, .55);
  margin: 0 0 0 auto;
  max-width: 23rem;
}

/* ── The isometric stack ───────────────────────────────────────────────────*/

.cqa-viz { position: absolute; inset: 0; }

.cqa-stack {
  position: absolute;
  inset: 0;
  transform: scale(var(--fit, 1));
  transform-origin: 50% 50%;
}

/* True isometric: orthographic camera, no perspective. Plates are square in
   local space and get their diamond from the scene rotation alone. */
.cqa-scene {
  position: absolute;
  left: var(--anchor);
  /* The bottom plate is anchored — layers land on it — so the origin is
     offset once, far enough down that the exploded stack still sits centred. */
  top: calc(50% + var(--origin, 0px));
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-45deg);
}

.cqa-plate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.cqa-solid {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.cqa-f {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* ── Hover ─────────────────────────────────────────────────────────────────
   The hovered block slides out along the pyramid's front diagonal — equal
   parts west and south, which in this camera resolves to pure downward screen
   movement, so it reads as coming toward the viewer rather than sliding off
   sideways. Everything else recedes; the emphasis comes as much from what
   dims as from what lifts. */
.cqa-plate.is-hot .cqa-solid { transform: translate3d(-26px, 26px, 0); }

.cqa-plate.is-hot .cqa-face {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(14, 30, 84, .62);
}
.cqa-plate.is-hot .cqa-face::before { opacity: 1; }
.cqa-plate.is-hot .cqa-wall {
  background: rgba(6, 15, 48, .95);
  box-shadow: inset 0 1px 0 rgba(79, 214, 241, .95);
}
.cqa-plate.is-hot .cqa-num { color: rgba(255, 255, 255, .3); }

.cqa.is-hovering .cqa-plate:not(.is-hot) .cqa-f { opacity: .34; }
.cqa.is-hovering .cqa-tag:not(.is-hot) { opacity: .28; }
.cqa.is-hovering .cqa-lead:not(.is-hot) { opacity: .16; }

.cqa-tag.is-hot { opacity: 1; color: #fff; font-weight: 600; }
.cqa-lead.is-hot {
  opacity: 1;
  background: linear-gradient(to right, #4fd6f1, rgba(47, 143, 218, .45));
  box-shadow: 0 0 9px rgba(79, 214, 241, .45);
}

/* The lid — smoked glass over the panel, with the house grid inside it. */
.cqa-face {
  background: rgba(10, 22, 66, .52);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  transition: border-color .5s ease, background .5s ease, opacity .4s ease;
}
.cqa-face::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 .55s ease;
}
.cqa-face::after {
  content: "";
  position: absolute;
  inset: 14px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  -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%);
}

/* The extrusion. Only the two camera-facing walls paint — the far pair is
   culled, which keeps the glass from showing its own inside. */
.cqa-wall {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: rgba(4, 11, 38, .92);
  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(255, 255, 255, .16);
  transition: box-shadow .5s ease, background .5s ease, opacity .4s ease;
}
.cqa-wall-lit { background: rgba(7, 17, 52, .86); }
/* The numeral-bearing face sits a touch darker so the figure reads against it */
.cqa-wall-face { background: rgba(3, 9, 32, .94); }

.cqa-plate.is-on .cqa-face { border-color: rgba(255, 255, 255, .2); }
.cqa-plate.is-on .cqa-face::before { opacity: 1; }
.cqa-plate.is-on .cqa-wall { box-shadow: inset 0 1px 0 rgba(79, 214, 241, .65); }

/* Layer numeral, set on the block's south face. It inherits the camera's
   foreshortening from the wall it sits in, which is what makes it read as
   printed on the solid rather than floating over it. */
.cqa-num {
  position: absolute;
  left: 5.5%;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .1);
  transition: color .5s ease;
}
.cqa-plate.is-on .cqa-num { color: rgba(255, 255, 255, .16); }

/* Plate labels. These live outside the 3D scene so they stay screen-upright;
   JS puts each one at its plate's projected east corner. */
.cqa-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cqa-tag {
  position: absolute;
  margin: 0;
  padding-left: 16px;
  white-space: nowrap;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  color: rgba(234, 241, 248, .55);
  opacity: .38;
  transition: opacity .5s ease, color .5s ease;
}
.cqa-tag.is-on { opacity: 1; color: #fff; font-weight: 600; }

/* Leader line from the plate's east corner out to its label. Anchored at the
   plate end and rotated toward the label, so it flexes from horizontal to
   diagonal as the stack closes. */
.cqa-lead {
  position: absolute;
  height: 1px;
  margin-top: -.5px;
  transform-origin: 0 50%;
  background: linear-gradient(to right, rgba(255, 255, 255, .30), rgba(255, 255, 255, .10));
  opacity: .3;
  transition: opacity .5s ease, background .5s ease;
}
.cqa-lead.is-on {
  opacity: 1;
  background: linear-gradient(to right, rgba(79, 214, 241, .85), rgba(47, 143, 218, .22));
}

/* The flat fallback: a plain ordered list of the same layers. Hidden whenever
   the isometric stack is on screen, shown instead of it on narrow viewports
   and when the visitor has asked for reduced motion. */
.cqa-list { display: none; }

/* ── Narrow viewports ──────────────────────────────────────────────────────
   Under ~1080px the diamond is too small to label, so the stack is dropped
   for the list and the pin is released — the section becomes ordinary flow. */
@media (max-width: 1080px) {
  .cqa { height: auto; }
  .cqa-pin { position: relative; height: auto; }
  .cqa-canvas { height: auto; }
  /* Corners go back into normal flow — there is no centred stack to sit around */
  .cqa-wrap {
    padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 40px);
  }
  .cqa-copy {
    position: static;
    max-width: none;
    margin-bottom: clamp(24px, 5vw, 40px);
  }
  .cqa-detail { display: none; }
  .cqa-viz { position: static; }
  .cqa-stack { display: none; }

  .cqa-list {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cqa;
  }
  .cqa-list li {
    counter-increment: cqa;
    display: grid;
    gap: 6px;
    padding-left: 44px;
    position: relative;
  }
  .cqa-list li::before {
    content: counter(cqa, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .28);
  }
  .cqa-list li::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 26px;
    bottom: -26px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .16), transparent);
  }
  .cqa-list li:last-child::after { display: none; }
  .cqa-list-tag {
    font-size: 12.5px;
    color: var(--teal);
  }
  .cqa-list strong { font-size: 18px; font-weight: 600; }
  .cqa-list span:last-child {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(234, 241, 248, .55);
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────────
   No pin, no assembly, no turning aura — the list carries the same content. */
@media (prefers-reduced-motion: reduce) {
  .cqa { height: auto; }
  .cqa-pin { position: relative; height: auto; }
  .cqa-canvas { height: auto; }
  .cqa-stack, .cqa-detail { display: none; }
  .cqa-viz { position: static; }
  .cqa-copy { position: static; max-width: none; margin-bottom: 32px; }
  .cqa-list { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
  .cqa-glow { animation: none; }
  .cqa-face, .cqa-face::before, .cqa-wall, .cqa-solid,
  .cqa-tag, .cqa-lead, .cqa-num, .cqa-item { transition: none; }
}