/* Isolated, lightweight 3D accents. All content stays on an untransformed plane. */
.spatial-art {
  --spatial-play: paused;
  --spatial-edge: 66px;
  position: absolute;
  top: 7px;
  right: 12px;
  width: 190px;
  height: 148px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.spatial-art::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,245,155,.12), transparent 68%);
}
.spatial-art::after {
  content: "";
  position: absolute;
  width: 108px;
  height: 16px;
  bottom: 9px;
  left: calc(50% - 54px);
  background: radial-gradient(ellipse, rgba(0,245,155,.17), transparent 70%);
}
.spatial-perspective {
  position: absolute;
  inset: 0;
  perspective: 650px;
  perspective-origin: 50% 35%;
}
.spatial-float {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: spatialFloat 7s ease-in-out infinite;
}
.spatial-art .spatial-motion { animation-play-state: var(--spatial-play); }
.spatial-layers, .spatial-cube, .spatial-gyroscope {
  position: absolute;
  transform-style: preserve-3d;
}
.spatial-layers {
  width: 84px;
  height: 68px;
  left: -42px;
  top: -34px;
  transform: rotateX(52deg) rotateZ(-30deg);
  animation: spatialLayers 12s ease-in-out infinite;
}
.spatial-pane {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,245,155,.78);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(0,245,155,.2), rgba(3,22,14,.86));
  box-shadow: 3px 3px 0 rgba(0,245,155,.15), inset 0 0 16px rgba(0,245,155,.07);
  transform: translateZ(-24px);
}
.spatial-pane:nth-child(2) { transform: translateZ(0); }
.spatial-pane:nth-child(3) { transform: translateZ(24px); border-color: var(--green); }
.spatial-pane::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-top: 1px solid rgba(255,255,255,.52);
  background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(0,245,155,.09) 10px 11px);
}
.spatial-pane b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 5px;
  color: var(--white);
  font: 500 25px/1 var(--mono);
  letter-spacing: -.12em;
}
.spatial-cube {
  width: var(--spatial-edge);
  height: var(--spatial-edge);
  left: calc(var(--spatial-edge) / -2);
  top: calc(var(--spatial-edge) / -2);
  transform: rotateX(-24deg) rotateY(34deg);
  animation: spatialCore 24s linear infinite;
}
.spatial-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,245,155,.8);
  background: linear-gradient(135deg, rgba(0,245,155,.16), rgba(1,14,8,.75));
  box-shadow: inset 0 0 18px rgba(0,245,155,.12);
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.spatial-face::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(90deg, transparent 49%, rgba(0,245,155,.28) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, rgba(0,245,155,.28) 50%, transparent 51%);
}
.spatial-face--front { transform: translateZ(calc(var(--spatial-edge) / 2)); }
.spatial-face--back { transform: rotateY(180deg) translateZ(calc(var(--spatial-edge) / 2)); }
.spatial-face--left { transform: rotateY(-90deg) translateZ(calc(var(--spatial-edge) / 2)); }
.spatial-face--right { transform: rotateY(90deg) translateZ(calc(var(--spatial-edge) / 2)); }
.spatial-face--top { transform: rotateX(90deg) translateZ(calc(var(--spatial-edge) / 2)); background: rgba(0,245,155,.25); }
.spatial-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--spatial-edge) / 2)); }
.spatial-gyroscope {
  width: 98px;
  height: 98px;
  top: -49px;
  left: -49px;
  transform: rotateX(60deg) rotateY(-20deg);
  animation: spatialGyroscope 28s linear infinite;
}
.spatial-hoop {
  position: absolute;
  inset: 0;
  border: 1px solid var(--green);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(0,245,155,.13), inset 0 0 9px rgba(0,245,155,.1);
  transform-style: preserve-3d;
}
.spatial-hoop:nth-child(2) { transform: rotateY(65deg); border-color: rgba(255,255,255,.6); }
.spatial-hoop:nth-child(3) { transform: rotateX(65deg); }
.spatial-hoop::after {
  content: "";
  position: absolute;
  left: calc(50% - 3px);
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px rgba(0,245,155,.7);
}
.spatial-gyroscope .spatial-cube { --spatial-edge: 28px; left: calc(50% - 14px); top: calc(50% - 14px); animation-direction: reverse; }
.spatial-gyroscope .spatial-face::before { inset: 5px; }
.service-card.has-spatial-art::after { content: none; }
.service-card.has-spatial-art h3 { margin-top: 105px; }
.process-intro.has-spatial-art {
  position: relative;
  top: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 0;
}
/* Keep DOM/localization order intact; decoration is visually below the copy. */
.spatial-art--process {
  position: sticky;
  order: 1;
  flex: none;
  align-self: flex-start;
  top: calc(var(--header) + 32px);
  right: auto;
  width: min(86%, 480px);
  height: clamp(350px, 33vw, 470px);
  margin: 32px 0 0;
  --spatial-edge: clamp(164px, 15vw, 224px);
}
.spatial-art--process::after { width: 70%; left: 15%; bottom: 16px; height: 30px; }
.spatial-art--process .spatial-perspective { perspective: 1200px; }
/* An opening six-panel shell around a counter-rotating illuminated core. */
.spatial-reactor {
  --reactor-edge: calc(var(--spatial-edge) * .78);
  position: absolute;
  width: var(--reactor-edge);
  height: var(--reactor-edge);
  left: calc(var(--reactor-edge) * -.5);
  top: calc(var(--reactor-edge) * -.5);
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(34deg) rotateZ(-7deg);
  animation: spatialReactor 32s linear infinite;
}
.spatial-reactor-panel {
  --panel-x: 0deg;
  --panel-y: 0deg;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  border: 1px solid rgba(0,245,155,.88);
  background: linear-gradient(135deg, rgba(0,245,155,.1), rgba(1,14,8,.12));
  box-shadow: inset 0 0 22px rgba(0,245,155,.07), 0 0 8px rgba(0,245,155,.12);
  transform: rotateX(var(--panel-x)) rotateY(var(--panel-y)) translateZ(calc(var(--reactor-edge) * .59));
  animation: spatialUnfold 10s cubic-bezier(.45,0,.25,1) infinite;
}
.spatial-reactor-panel--back { --panel-y: 180deg; }
.spatial-reactor-panel--left { --panel-y: -90deg; }
.spatial-reactor-panel--right { --panel-y: 90deg; }
.spatial-reactor-panel--top { --panel-x: 90deg; }
.spatial-reactor-panel--bottom { --panel-x: -90deg; }
.spatial-reactor-panel::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(90deg, transparent 49.5%, rgba(0,245,155,.3) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, rgba(0,245,155,.3) 50%, transparent 50.5%);
}
.spatial-reactor-panel::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(var(--white),var(--white)) left top / 15% 3px no-repeat, linear-gradient(var(--white),var(--white)) left top / 3px 15% no-repeat, linear-gradient(var(--green),var(--green)) right bottom / 15% 3px no-repeat, linear-gradient(var(--green),var(--green)) right bottom / 3px 15% no-repeat;
}
.spatial-reactor-panel i {
  position: absolute;
  width: 22%;
  height: 4px;
  left: 17%;
  top: 16%;
  background: repeating-linear-gradient(90deg, var(--green) 0 3px, transparent 3px 6px);
}
.spatial-reactor-panel em {
  position: absolute;
  inset: 35%;
  border: 1px solid rgba(0,245,155,.65);
  transform: rotate(45deg);
}
.spatial-reactor-core {
  --core-edge: calc(var(--reactor-edge) * .4);
  position: absolute;
  width: var(--core-edge);
  height: var(--core-edge);
  left: calc(50% - var(--core-edge) / 2);
  top: calc(50% - var(--core-edge) / 2);
  transform-style: preserve-3d;
  transform: rotateX(28deg) rotateY(-35deg);
  animation: spatialReactorHeart 18s linear infinite;
}
.spatial-core-face {
  position: absolute;
  inset: 0;
  border: 2px solid #baffdf;
  background: linear-gradient(135deg, #a0ffdb, #00dc89 45%, #004d31);
  box-shadow: inset 0 0 12px rgba(255,255,255,.6), 0 0 22px rgba(0,245,155,.45);
}
.spatial-core-face::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(255,255,255,.8); background: rgba(0,32,20,.25); }
.spatial-core-face--front { transform: translateZ(calc(var(--core-edge) / 2)); }
.spatial-core-face--back { transform: rotateY(180deg) translateZ(calc(var(--core-edge) / 2)); }
.spatial-core-face--left { transform: rotateY(-90deg) translateZ(calc(var(--core-edge) / 2)); }
.spatial-core-face--right { transform: rotateY(90deg) translateZ(calc(var(--core-edge) / 2)); }
.spatial-core-face--top { transform: rotateX(90deg) translateZ(calc(var(--core-edge) / 2)); }
.spatial-core-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--core-edge) / 2)); }
.spatial-reactor-halo {
  position: absolute;
  width: calc(var(--spatial-edge) * 1.6);
  height: calc(var(--spatial-edge) * 1.6);
  left: calc(var(--spatial-edge) * -.8);
  top: calc(var(--spatial-edge) * -.8);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  transform: rotateX(66deg) rotateY(-18deg);
  transform-style: preserve-3d;
  animation: spatialReactorHalo 24s linear infinite;
}
.spatial-reactor-halo::before { content: ""; position: absolute; inset: -5%; border: 1px dashed rgba(0,245,155,.25); border-radius: 50%; }
.spatial-reactor-halo i { position: absolute; width: 6px; height: 6px; left: calc(50% - 3px); top: -3px; background: var(--white); border-radius: 50%; box-shadow: 0 0 12px var(--green); }
.spatial-reactor-halo i:nth-child(2) { top: auto; bottom: -3px; background: var(--green); }
.spatial-platform {
  position: absolute;
  width: calc(var(--spatial-edge) * 1.75);
  height: calc(var(--spatial-edge) * 1.75);
  left: calc(var(--spatial-edge) * -.875);
  top: calc(var(--spatial-edge) * -.075);
  border: 1px solid rgba(0,245,155,.7);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 51%, rgba(0,245,155,.08) 52%, transparent 53%);
  transform: rotateX(78deg);
  transform-style: preserve-3d;
  animation: spatialPlatform 36s linear infinite;
}
.spatial-platform::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 50%;
}
.spatial-platform i {
  position: absolute;
  width: 7px;
  height: 7px;
  top: -4px;
  left: calc(50% - 3.5px);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(0,245,155,.8);
}
.spatial-platform i:nth-child(2) { top: calc(50% - 3.5px); left: -4px; background: var(--white); }
.spatial-platform i:nth-child(3) { top: calc(100% - 3px); }

/* Heading artwork occupies the unused label column, never the text columns. */
.section-heading.has-spatial-art { position: relative; min-height: 276px; }
.spatial-art--maintenance, .spatial-art--journal, .spatial-art--portfolio, .spatial-art--answers, .spatial-art--reputation {
  top: 58px;
  left: 0;
  right: auto;
  width: 20%;
  max-width: 250px;
  height: 218px;
}
.spatial-art--maintenance::after, .spatial-art--journal::after, .spatial-art--portfolio::after, .spatial-art--answers::after, .spatial-art--reputation::after { bottom: 18px; }
.spatial-tower, .spatial-slab {
  position: absolute;
  transform-style: preserve-3d;
}
.spatial-tower {
  --spatial-edge: 102px;
  transform: rotateX(-18deg) rotateY(-32deg);
  animation: spatialTower 18s ease-in-out infinite;
}
.spatial-slab { transform: translateY(-42px); }
.spatial-slab:nth-child(2) { transform: translateY(0); }
.spatial-slab:nth-child(3) { transform: translateY(42px); }
.spatial-tower .spatial-cube { animation: none; transform: scaleY(.26); }
.spatial-tower .spatial-face--front::after {
  content: "";
  position: absolute;
  bottom: 26px;
  left: 15px;
  width: 5px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 12px 0 0 rgba(255,255,255,.8), 24px 0 0 rgba(0,245,155,.35);
}
/* A legible digital magazine: masthead, feature, text columns and extracted article. */
.spatial-art--journal { height: 272px; }
.spatial-journal { position: absolute; width: 136px; height: 172px; left: -68px; top: -86px; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-24deg) rotateZ(-7deg); animation: spatialJournal 18s ease-in-out infinite; }
.spatial-journal-volume { position: absolute; inset: 0; transform-style: preserve-3d; }
.spatial-journal-cover, .spatial-journal-back { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.9); background: #052417; }
.spatial-journal-cover { transform: translateZ(7px); padding: 10px 12px; background: linear-gradient(130deg,#0a3926,#041b10); box-shadow: inset 0 0 0 3px #03150d; }
.spatial-journal-back { transform: translateZ(-7px); border-color: var(--green); }
.spatial-journal-spine { position: absolute; top: 0; left: -7px; width: 14px; height: 172px; background: repeating-linear-gradient(90deg,#d7ffee 0 1px,#256046 1px 3px); transform: rotateY(90deg); border: 1px solid var(--green); }
.spatial-journal-bottom { position: absolute; bottom: -7px; left: 0; width: 136px; height: 14px; background: repeating-linear-gradient(0deg,#b8decf 0 1px,#164e34 1px 3px); transform: rotateX(90deg); border: 1px solid var(--green); }
.spatial-journal-brand { display: block; color: var(--white); font: 500 7px/1 var(--mono); letter-spacing: .04em; }
.spatial-journal-masthead { display: block; margin: 4px 0 7px; padding-bottom: 5px; border-bottom: 2px solid var(--green); color: var(--white); font: 800 29px/.92 var(--sans); letter-spacing: -.055em; }
.spatial-journal-feature { position: relative; height: 38px; border: 1px solid rgba(0,245,155,.45); background: linear-gradient(135deg,#007047,#023820); }
.spatial-journal-feature > span { position: absolute; inset: 0; display: grid; place-items: center; color: #d4ffed; font: 500 25px/1 var(--mono); letter-spacing: -.12em; }
.spatial-journal-feature > i { position: absolute; right: 6px; bottom: 5px; width: 13px; height: 2px; background: var(--green); }
.spatial-journal-feature > i:last-child { bottom: 10px; width: 8px; }
.spatial-journal-headline { display: grid; gap: 3px; margin: 7px 0 6px; }
.spatial-journal-headline > i { height: 4px; background: var(--white); }
.spatial-journal-headline > i:last-child { width: 72%; height: 3px; }
.spatial-journal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; height: 22px; }
.spatial-journal-columns > i { background: repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1px,transparent 1px 5px); }
.spatial-journal-folio { display: block; margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(0,245,155,.4); color: var(--green); font: 500 5px/1 var(--mono); letter-spacing: .12em; }
.spatial-journal-paper { --paper-depth: 1; position: absolute; inset: 0; border: 1px solid rgba(190,255,228,.8); background: #0d3b27; transform: translate3d(-9px,-9px,-18px); animation: spatialJournalPaper 12s ease-in-out infinite; }
.spatial-journal-paper--back { --paper-depth: 2; background: #041c10; transform: translate3d(-18px,-18px,-36px); }
.spatial-journal-paper > i { position: absolute; inset: 15px; border-top: 6px solid var(--green); background: repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.3) 9px 10px); }
.spatial-journal-extract { position: absolute; width: 68px; height: 91px; top: 45px; right: -29px; transform: translateZ(36px) rotateY(-12deg) rotateZ(9deg); border: 1px solid #a3ffda; background: #093721; box-shadow: 3px 3px 0 #007f4f; padding: 9px; animation: spatialJournalExtract 12s ease-in-out infinite; }
.spatial-journal-extract > span { display: block; color: var(--white); font: 750 17px/1 var(--sans); letter-spacing: -.04em; }
.spatial-journal-extract > b { display: block; margin-top: 5px; width: 100%; height: 2px; background: var(--green); }
.spatial-journal-extract > div { height: 25px; display: flex; align-items: end; gap: 4px; margin-top: 6px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.4); }
.spatial-journal-extract > div > i { width: 9px; height: 8px; background: var(--green); }
.spatial-journal-extract > div > i:nth-child(2) { height: 14px; }
.spatial-journal-extract > div > i:nth-child(3) { height: 20px; background: var(--white); }
.spatial-journal-extract > em { display: block; margin-top: 5px; height: 8px; background: repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1px,transparent 1px 4px); }

/* Two free-standing, solid quotation marks make a seamless full 3D revolution. */
.spatial-reputation { position: absolute; width: 134px; height: 100px; left: -67px; top: -50px; transform-style: preserve-3d; transform: rotateX(-13deg) rotateY(-24deg) rotateZ(-6deg); animation: spatialReputation 24s linear infinite; }
.spatial-quote-glyph { position: absolute; width: 56px; height: 100px; left: 0; top: 0; transform-style: preserve-3d; transform: translateZ(4px); animation: spatialQuoteDrift 8s ease-in-out infinite; }
.spatial-quote-glyph:nth-child(2) { left: 78px; animation-delay: -4s; }
.spatial-quote-face { position: absolute; inset: 0; clip-path: var(--quote-outline); }
.spatial-quote-face--front { transform: translateZ(12px); background: linear-gradient(130deg,#dcfff1 1%,#63ffc1 19%,#00efa0 42%,#00a765 80%,#beffe0); }
.spatial-quote-face--back { transform: translateZ(-12px); background: linear-gradient(150deg,#49eba4,#075638 75%,#75ffd0); }
.spatial-quote-face--front > i { position: absolute; inset: 5px 5px auto; height: 43px; border: 1px solid rgba(255,255,255,.68); background: linear-gradient(125deg,rgba(255,255,255,.3),transparent 54%); }
.spatial-quote-side { position: absolute; height: 24px; background: linear-gradient(0deg,#075a3b,#00a76e 45%,#4cf5b1); border-top: 1px solid rgba(172,255,219,.85); border-bottom: 1px solid rgba(0,245,155,.6); transform-origin: 0 0; transform: translateZ(-12px) rotateZ(var(--quote-angle)) rotateX(90deg); }
.spatial-portfolio {
  --portfolio-width: clamp(118px, 11.4vw, 164px);
  position: absolute;
  width: var(--portfolio-width);
  height: calc(var(--portfolio-width) * .72);
  top: calc(var(--portfolio-width) * -.36);
  left: calc(var(--portfolio-width) * -.5);
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-24deg) rotateZ(-6deg);
  animation: spatialPortfolio 16s ease-in-out infinite;
}
.spatial-window {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,245,155,.75);
  background: linear-gradient(135deg, rgba(0,245,155,.15), #03150c);
  box-shadow: inset 0 0 18px rgba(0,245,155,.08);
}
.spatial-window--blueprint { --window-layer: 2; transform: translate3d(-22px,-24px,-46px); background: rgba(0,245,155,.04); border-style: dashed; animation: spatialWindowLayers 12s ease-in-out infinite; }
.spatial-window--layout { --window-layer: 1; transform: translate3d(-11px,-12px,-23px); background: #052719; animation: spatialWindowLayers 12s ease-in-out infinite; }
.spatial-window--live { border-color: rgba(255,255,255,.85); background: linear-gradient(135deg, #073522, #03140c); box-shadow: 3px 4px 0 #006440, 0 0 22px rgba(0,245,155,.12); }
.spatial-window::before { content: ""; position: absolute; left: 0; right: 0; top: 14%; height: 1px; background: rgba(0,245,155,.4); }
.spatial-window > i { position: absolute; left: 7%; top: 6%; width: 3px; height: 3px; border-radius: 50%; background: var(--green); box-shadow: 6px 0 0 rgba(255,255,255,.7), 12px 0 0 rgba(0,245,155,.4); }
.spatial-wire-layout { position: absolute; inset: 25% 9% 13%; border: 1px solid rgba(0,245,155,.5); background: linear-gradient(90deg, transparent 49%,rgba(0,245,155,.35) 50%,transparent 51%), repeating-linear-gradient(0deg, transparent 0 14px,rgba(255,255,255,.2) 14px 15px); }
.spatial-web-layout { position: absolute; inset: 24% 9% 11%; display: grid; grid-template-columns: 1fr .82fr; grid-template-rows: 1fr 22%; gap: 12%; }
.spatial-web-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8%; padding-top: 8%; }
.spatial-web-copy em { width: 90%; height: 5%; background: rgba(255,255,255,.45); }
.spatial-web-copy em:first-child { height: 13%; width: 100%; background: var(--white); }
.spatial-web-copy em:nth-child(3) { width: 68%; }
.spatial-web-copy strong { margin-top: 8%; width: 58%; height: 15%; background: var(--green); box-shadow: 0 0 9px rgba(0,245,155,.25); }
.spatial-web-visual { position: relative; display: grid; place-items: center; border: 1px solid rgba(0,245,155,.2); background: radial-gradient(ellipse,rgba(0,245,155,.16),transparent 75%); }
.spatial-web-gem { width: 52%; aspect-ratio: 1; background: conic-gradient(from 45deg, #b0ffe0, #00ef96, #005735, #09cc85, #b0ffe0); transform: rotate(45deg); animation: spatialWebGem 9s ease-in-out infinite; box-shadow: 0 0 14px rgba(0,245,155,.35); }
.spatial-web-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8%; }
.spatial-web-tiles span { border: 1px solid rgba(0,245,155,.4); background: linear-gradient(110deg,rgba(0,245,155,.17),transparent); }
.spatial-web-cursor { position: absolute; left: 31%; top: 61%; width: 11px; height: 15px; background: var(--white); clip-path: polygon(0 0,100% 65%,55% 69%,36% 100%); transform: translate(0,0); animation: spatialWebCursor 8s ease-in-out infinite; }
.spatial-phone {
  position: absolute; width: 33%; height: 80%; right: -14%; bottom: -19%;
  border: 1px solid rgba(255,255,255,.9); border-radius: 7px;
  background: #042216; box-shadow: 3px 3px 0 #008253, inset 0 0 0 3px #010f08, 0 0 18px rgba(0,245,155,.12);
  transform: translateZ(44px) rotateY(-12deg) rotateZ(7deg);
  animation: spatialPhone 10s ease-in-out infinite;
}
.spatial-phone > i { position: absolute; top: 5%; left: 32%; width: 36%; height: 3%; border-radius: 4px; background: rgba(255,255,255,.65); }
.spatial-phone > span { position: absolute; inset: 17% 12% 43%; background: conic-gradient(from 35deg,#00ed95,#05452c,#93ffd5,#00ed95); border: 1px solid rgba(0,245,155,.8); }
.spatial-phone > em { position: absolute; top: 65%; left: 14%; width: 70%; height: 3%; background: var(--white); box-shadow: 0 6px 0 rgba(255,255,255,.3); }
.spatial-phone > b { position: absolute; bottom: 9%; left: 14%; width: 44%; height: 5%; background: var(--green); }
.spatial-code-module { position: absolute; top: -11%; left: -18%; width: 39%; height: 38%; border: 1px solid var(--green); background: #05291a; box-shadow: 2px 2px 0 #008857; transform: translateZ(48px) rotateY(12deg); animation: spatialCodeModule 11s ease-in-out infinite; }
.spatial-code-module b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); font: 500 19px/1 var(--mono); letter-spacing: -.12em; }
.spatial-code-module i { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--green); }
.spatial-art--portfolio { height: 248px; }
.spatial-art--portfolio .spatial-perspective { perspective: 900px; }
.spatial-question {
  position: absolute;
  left: -45px;
  top: -51px;
  width: 90px;
  height: 102px;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-26deg) rotateZ(-7deg);
  animation: spatialQuestion 14s ease-in-out infinite;
}
.spatial-answer-face, .spatial-answer-edge { position: absolute; border: 1px solid rgba(0,245,155,.8); background: #062417; }
.spatial-answer-face { inset: 0; background: linear-gradient(135deg, rgba(0,245,155,.22), #05160d); }
.spatial-answer-face--front { transform: translateZ(12px); }
.spatial-answer-face--back { transform: rotateY(180deg) translateZ(12px); }
.spatial-answer-face b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); font: 400 70px/1 var(--sans); text-shadow: 0 0 18px rgba(0,245,155,.25); }
.spatial-answer-edge--left, .spatial-answer-edge--right { top: 0; width: 24px; height: 102px; transform: rotateY(90deg); }
.spatial-answer-edge--left { left: -12px; }
.spatial-answer-edge--right { right: -12px; }
.spatial-answer-edge--top, .spatial-answer-edge--bottom { left: 0; width: 90px; height: 24px; transform: rotateX(90deg); }
.spatial-answer-edge--top { top: -12px; background: rgba(0,245,155,.35); }
.spatial-answer-edge--bottom { bottom: -12px; }

@keyframes spatialFloat {
  0%, 100% { transform: translate3d(0, 3px, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}
@keyframes spatialLayers {
  0%, 100% { transform: rotateX(52deg) rotateZ(-30deg); }
  50% { transform: rotateX(42deg) rotateZ(-18deg); }
}
@keyframes spatialCore {
  from { transform: rotateX(-24deg) rotateY(34deg); }
  to { transform: rotateX(-24deg) rotateY(394deg); }
}
@keyframes spatialGyroscope {
  from { transform: rotateX(60deg) rotateY(-20deg) rotateZ(0); }
  to { transform: rotateX(60deg) rotateY(-20deg) rotateZ(360deg); }
}
@keyframes spatialTower {
  0%, 100% { transform: rotateX(-18deg) rotateY(-32deg); }
  50% { transform: rotateX(-12deg) rotateY(-8deg); }
}
@keyframes spatialPlatform {
  from { transform: rotateX(78deg) rotateZ(0); }
  to { transform: rotateX(78deg) rotateZ(360deg); }
}
@keyframes spatialPortfolio {
  0%, 100% { transform: rotateX(12deg) rotateY(-24deg) rotateZ(-6deg); }
  50% { transform: rotateX(-3deg) rotateY(14deg) rotateZ(3deg); }
}
@keyframes spatialReactor {
  from { transform: rotateX(-22deg) rotateY(34deg) rotateZ(-7deg); }
  to { transform: rotateX(-22deg) rotateY(394deg) rotateZ(-7deg); }
}
@keyframes spatialUnfold {
  0%, 12%, 100% { transform: rotateX(var(--panel-x)) rotateY(var(--panel-y)) translateZ(calc(var(--reactor-edge) * .51)); }
  45%, 62% { transform: rotateX(var(--panel-x)) rotateY(var(--panel-y)) translateZ(calc(var(--reactor-edge) * .76)); }
}
@keyframes spatialReactorHeart {
  from { transform: rotateX(28deg) rotateY(-35deg); }
  to { transform: rotateX(28deg) rotateY(-395deg); }
}
@keyframes spatialReactorHalo {
  from { transform: rotateX(66deg) rotateY(-18deg) rotateZ(0); }
  to { transform: rotateX(66deg) rotateY(-18deg) rotateZ(-360deg); }
}
@keyframes spatialWindowLayers {
  0%, 100% { transform: translate3d(calc(var(--window-layer) * -9px),calc(var(--window-layer) * -10px),calc(var(--window-layer) * -18px)); }
  50% { transform: translate3d(calc(var(--window-layer) * -17px),calc(var(--window-layer) * -18px),calc(var(--window-layer) * -28px)); }
}
@keyframes spatialPhone {
  0%, 100% { transform: translate3d(0,0,44px) rotateY(-12deg) rotateZ(7deg); }
  50% { transform: translate3d(3px,-9px,58px) rotateY(2deg) rotateZ(3deg); }
}
@keyframes spatialCodeModule {
  0%, 100% { transform: translate3d(0,0,48px) rotateY(12deg); }
  50% { transform: translate3d(-3px,-7px,60px) rotateY(-8deg); }
}
@keyframes spatialWebGem {
  0%, 100% { transform: rotate(45deg) scale(.86); }
  50% { transform: rotate(135deg) scale(1); }
}
@keyframes spatialWebCursor {
  0%, 12%, 100% { transform: translate(0,0); }
  40%, 65% { transform: translate(28px,-16px); }
  82% { transform: translate(0,0) scale(.85); }
}
@keyframes spatialQuestion {
  0%, 100% { transform: rotateX(12deg) rotateY(-26deg) rotateZ(-7deg); }
  50% { transform: rotateX(-5deg) rotateY(18deg) rotateZ(3deg); }
}
@keyframes spatialJournal { 0%,100% { transform: rotateX(8deg) rotateY(-24deg) rotateZ(-7deg); } 50% { transform: rotateX(-3deg) rotateY(6deg) rotateZ(3deg); } }
@keyframes spatialJournalPaper { 0%,100% { transform: translate3d(calc(var(--paper-depth) * -9px),calc(var(--paper-depth) * -9px),calc(var(--paper-depth) * -18px)); } 50% { transform: translate3d(calc(var(--paper-depth) * -14px),calc(var(--paper-depth) * -14px),calc(var(--paper-depth) * -23px)); } }
@keyframes spatialJournalExtract { 0%,100% { transform: translate3d(0,0,36px) rotateY(-12deg) rotateZ(9deg); } 50% { transform: translate3d(6px,-16px,46px) rotateY(6deg) rotateZ(5deg); } }
@keyframes spatialReputation { from { transform: rotateX(-13deg) rotateY(-24deg) rotateZ(-6deg); } to { transform: rotateX(-13deg) rotateY(336deg) rotateZ(-6deg); } }
@keyframes spatialQuoteDrift { 0%,100% { transform: translate3d(0,2px,4px); } 50% { transform: translate3d(0,-5px,16px); } }

.spatial-is-static .spatial-motion { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .spatial-art .spatial-motion { animation: none; }
}
@media (max-width: 1100px) {
  .spatial-art--process { position: relative; top: auto; }
}
@media (max-height: 650px) {
  .spatial-art--process { position: relative; top: auto; }
}
@media (max-width: 760px) {
  .spatial-art { width: 158px; height: 126px; top: 2px; right: 9px; }
  .service-card.has-spatial-art h3 { margin-top: 86px; }
  .spatial-perspective { transform: scale(.88); }
  .process-intro.has-spatial-art { padding-top: 0; }
  .section-heading.has-spatial-art { min-height: 0; }
  .spatial-art--process {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 320px);
    height: 304px;
    margin: 28px auto 0;
    --spatial-edge: clamp(120px, 38vw, 148px);
  }
  .spatial-art--process .spatial-perspective { transform: none; }
  .spatial-art--maintenance, .spatial-art--journal, .spatial-art--portfolio, .spatial-art--answers, .spatial-art--reputation {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: min(100%, 206px);
    height: 170px;
    margin: 0 auto 22px;
  }
  .spatial-art--maintenance .spatial-tower { --spatial-edge: 90px; }
  .spatial-art--portfolio { width: min(100%, 280px); height: 232px; }
  .spatial-art--portfolio .spatial-portfolio { --portfolio-width: 164px; }
  .spatial-art--portfolio .spatial-perspective { transform: none; }
  .spatial-art--journal { width: min(100%, 250px); height: 264px; }
  .spatial-art--maintenance::after, .spatial-art--journal::after, .spatial-art--portfolio::after, .spatial-art--answers::after, .spatial-art--reputation::after { bottom: 0; }
}