/* 03 / Two ways forward — two 3D block towers to the right of the heading */
#services .section-heading.has-tw{position:relative}
.tw{position:absolute;right:0;top:-20px;display:flex;gap:28px;align-items:flex-end;--s:44px}
.tw-col{display:flex;flex-direction:column;align-items:center;width:130px}
.tw-col p{margin:14px 0 0;text-align:center;font-size:12px;line-height:1.4;color:#3b3f66;display:flex;flex-direction:column;gap:4px}
.tw-col small{font:500 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.12em;color:#5b5fd9}
.tw-sc{position:relative;width:130px;height:230px;perspective:700px}
.tw-tower{position:absolute;left:50%;bottom:34px;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);transform-style:preserve-3d;
  transform:rotateX(-24deg) rotateY(-38deg)}
.tw.run .tw-tower{animation:tw-sway 9s ease-in-out infinite}
@keyframes tw-sway{50%{transform:rotateX(-24deg) rotateY(-12deg)}}
.tw-ground{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px;border-radius:50%;transform:translateY(calc(var(--s) / 2)) rotateX(90deg);
  background:radial-gradient(circle,rgba(42,45,159,.18),rgba(42,45,159,0) 70%)}
/* a block = six faces */
.tw-b{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(calc(var(--y) * var(--s) * -1))}
.tw-b .f{position:absolute;inset:0;border:1px solid rgba(42,45,159,.35)}
.tw-b .fr{transform:translateZ(calc(var(--s) / 2))}
.tw-b .bk{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.tw-b .rt{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.tw-b .lf{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.tw-b .tp{transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.tw-b .bt{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
.tw-b.old .fr,.tw-b.old .bk{background:#eceef6}
.tw-b.old .rt,.tw-b.old .lf{background:#dcdfeb}
.tw-b.old .tp{background:#fff}.tw-b.old .bt{background:#cfd3e2}
.tw-b.ai .f{border-color:#1f2280}
.tw-b.ai .fr,.tw-b.ai .bk{background:linear-gradient(160deg,#5b5fe0,#2a2d9f)}
.tw-b.ai .rt,.tw-b.ai .lf{background:linear-gradient(160deg,#3a3ec2,#1f2280)}
.tw-b.ai .tp{background:#8b90ff}.tw-b.ai .bt{background:#1f2280}
.tw-b em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;color:#fff;font-size:20px;transform:translateZ(calc(var(--s) / 2 + .5px))}
/* 01 · the AI block drops onto the existing stack */
.tw.run .drop{animation:tw-drop 5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes tw-drop{
  0%{transform:translateY(calc(-3 * var(--s) - 120px)) scale(.001)}
  6%{transform:translateY(calc(-3 * var(--s) - 110px)) scale(1)}
  30%{transform:translateY(calc(-3 * var(--s) + 4px)) scale(1)}
  36%{transform:translateY(calc(-3 * var(--s) - 6px)) scale(1)}
  42%,86%{transform:translateY(calc(-3 * var(--s))) scale(1)}
  100%{transform:translateY(calc(-3 * var(--s))) scale(.001)}}
/* 02 · a new tower builds itself, block by block */
.tw.run .build{animation:tw-build 5s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--y) * .35s)}
@keyframes tw-build{
  0%{transform:translateY(calc(var(--y) * var(--s) * -1 - 50px)) scale(.001)}
  14%,80%{transform:translateY(calc(var(--y) * var(--s) * -1)) scale(1)}
  94%,100%{transform:translateY(calc(var(--y) * var(--s) * -1)) scale(.001)}}
@media(max-width:1100px){.tw{position:relative;top:auto;right:auto;margin-top:24px;grid-column:1 / -1;justify-content:flex-start}}
@media(max-width:760px){.tw{--s:36px;gap:16px}.tw-sc{height:190px}}
@media(prefers-reduced-motion:reduce){.tw *{animation:none!important}}

/* fit beside the heading without touching it or the cards below */
@media(min-width:1101px){
  #services .section-heading.has-tw{min-height:250px}
  .tw{--s:32px;gap:10px;top:-34px;right:-10px}
  .tw-col{width:104px}
  .tw-sc{width:104px;height:205px}
  .tw-col p{margin-top:8px;font-size:11px}
  .tw-ground{width:84px;height:84px;margin:-42px}
  .tw-b em{font-size:15px}
}
.tw-col p{white-space:nowrap}

/* words on the blocks; grey = what exists, blue = AI, light blue = new layers built on AI */
.tw-b em{font:600 9px/1 'Poppins',Arial,sans-serif;letter-spacing:.01em;color:#3b3f66}
.tw-b.ai em{color:#fff;font-size:11px;font-weight:700}
.tw-b.new .f{border-color:rgba(42,45,159,.5)}
.tw-b.new .fr,.tw-b.new .bk{background:#dfe2ff}.tw-b.new .rt,.tw-b.new .lf{background:#c9cdfb}.tw-b.new .tp{background:#eef0ff}.tw-b.new .bt{background:#b9bef7}
.tw-b.new em{color:#2a2d9f}
.tw-col p{white-space:normal;font-size:12px;font-weight:500;color:#0f1233}
.tw-col small{font-size:9px;letter-spacing:.08em;white-space:nowrap}
@media(min-width:1101px){.tw{gap:22px}.tw-col{width:118px}.tw-sc{width:118px}}