/* Five spatial working motifs, painted with the studio's existing palette.
   The static composition is complete; JavaScript adds optional motion only. */
.service-art {
  --art-ink: #07110f;
  --art-soft: #14211e;
  --art-mint: #22e6bd;
  --art-white: #fff;
  --art-x: 0deg;
  --art-y: 0deg;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 400px;
  aspect-ratio: 1 / 1.08;
  margin: 0;
  color: var(--art-white);
  overflow: hidden;
}
.service-art__scene { position: absolute; inset: 0; perspective: 1100px; container-type: inline-size; }
.service-art__parallax { position: absolute; inset: 0; transform: rotateX(var(--art-y)) rotateY(var(--art-x)); transform-style: preserve-3d; }
.service-art__sculpture { position: absolute; inset: 0; perspective: 1100px; transform-style: flat; }
.service-art__halo { position: absolute; inset: 10% -8%; background: radial-gradient(ellipse at 55% 53%, rgba(34,230,189,.24), rgba(34,230,189,.07) 36%, transparent 68%); filter: blur(18px); }
.service-art__ground { position: absolute; width: 70%; height: 9%; left: 17%; bottom: 3%; border-radius: 50%; background: rgba(0,0,0,.6); filter: blur(18px); opacity: .65; }
.service-art__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.service-art__pause { position: absolute; z-index: 5; right: 8px; bottom: 8px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: var(--art-soft); color: var(--art-white); cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.service-art__pause:hover { background: var(--art-mint); color: var(--art-ink); }
.service-art__pause:focus-visible { outline: 3px solid var(--art-mint); outline-offset: 4px; }
.service-art__pause svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.service-art__pause > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.service-art__play-icon, .service-art__pause[aria-pressed="true"] .service-art__pause-icon { display: none; }
.service-art__pause[aria-pressed="true"] .service-art__play-icon { display: block; }
.service-art__text-lines { display: grid; gap: .7em; }
.service-art__text-lines i { height: .35em; background: currentColor; opacity: .19; }
.service-art__text-lines i:nth-child(2) { width: 89%; }
.service-art__text-lines i:nth-child(3) { width: 64%; }
.service-art__browser-bar { display: flex; align-items: center; gap: 1.1%; height: 11%; min-height: 22px; padding: 0 4%; background: var(--art-white); color: var(--art-ink); border-bottom: 1px solid rgba(7,17,15,.12); }
.service-art__browser-bar i { width: 1.7%; aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: .3; }
.service-art__browser-bar span { margin: auto; font-size: 1.8cqw; opacity: .7; }

/* Web: real work on a substantial browser surface, with an offset mobile study. */
.service-art__web-backing { position: absolute; width: 75%; height: 51%; top: 19%; left: 9%; border: 1px solid rgba(34,230,189,.5); background: linear-gradient(140deg, rgba(34,230,189,.4), rgba(20,33,30,.18)); transform: rotateX(14deg) rotateY(-17deg) rotateZ(-9deg) translateZ(-50px); box-shadow: -18px 25px 55px rgba(0,0,0,.4); }
.service-art__browser { position: absolute; width: 85%; top: 22%; left: 2%; background: var(--art-white); color: var(--art-ink); border: 1px solid rgba(255,255,255,.8); border-radius: 7px; overflow: hidden; transform: rotateX(10deg) rotateY(-17deg) rotateZ(-8deg); box-shadow: 0 3px 0 #c0ccc6, -24px 40px 65px rgba(0,0,0,.52); }
.service-art__browser .service-art__browser-bar { height: 26px; }
.service-art__browser img { display: block; width: 100%; height: auto; }
.service-art__browser-foot { padding: 4% 5%; display: flex; justify-content: space-between; gap: 5%; font-size: 2cqw; font-weight: 600; }
.service-art__phone { position: absolute; width: 27%; height: 59%; left: 64%; top: 32%; padding: 5% 2.2% 3%; border: 4px solid var(--art-white); border-radius: 22px; background: var(--art-soft); transform: rotateY(-18deg) rotateZ(7deg) translateZ(55px); box-shadow: -3px 3px 0 #84978e, -14px 23px 40px rgba(0,0,0,.5); }
.service-art__phone-speaker { width: 28%; height: 3px; border-radius: 5px; background: rgba(255,255,255,.6); position: absolute; top: 8px; left: 36%; }
.service-art__phone > span { display: block; font-size: 1.8cqw; }
.service-art__phone-image { margin: 14% -3% 12%; height: 33%; overflow: hidden; }
.service-art__phone-image img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; }
.service-art__phone strong { font-size: 3.3cqw; letter-spacing: -.035em; line-height: 1.05; display: block; }
.service-art__phone .service-art__text-lines { font-size: 1.6cqw; margin-top: 15%; }
.service-art__phone-button { padding: 9% 2%; margin-top: 17%; background: var(--art-mint); color: var(--art-ink); font-size: 1.5cqw; text-align: center; font-weight: 650; }

/* SEO: indexing foundations below the actual point of discovery. */
.service-art__seo-layer { position: absolute; width: 73%; height: 33%; left: 12%; padding: 5%; transform: rotateX(46deg) rotateZ(-19deg); border: 1px solid rgba(255,255,255,.4); box-shadow: -10px 17px 0 rgba(34,230,189,.08), -20px 35px 40px rgba(0,0,0,.4); }
.service-art__seo-layer > span { position: absolute; left: 6%; bottom: 9%; font-size: 2.5cqw; }
.service-art__seo-layer--base { top: 57%; background: linear-gradient(135deg, #14211e, rgba(34,230,189,.35)); border-color: rgba(34,230,189,.65); color: var(--art-white); }
.service-art__site-tree { position: relative; height: 50%; width: 75%; margin: 0 auto; background: linear-gradient(90deg,transparent 49%,var(--art-mint) 49% 51%,transparent 51%) center 15% / 100% 100% no-repeat; }
.service-art__site-tree::after { content: ''; position: absolute; top: 47%; left: 10%; width: 80%; border-top: 1px solid var(--art-mint); }
.service-art__site-tree i { position: absolute; width: 23%; height: 34%; border: 1px solid var(--art-mint); background: var(--art-soft); }
.service-art__site-tree i:nth-child(1) { left: 38%; top: 0; }
.service-art__site-tree i:nth-child(2) { left: 0; bottom: -10%; }
.service-art__site-tree i:nth-child(3) { left: 38%; bottom: -10%; }
.service-art__site-tree i:nth-child(4) { right: 0; bottom: -10%; }
.service-art__seo-layer--middle { top: 37%; left: 9%; background: var(--art-mint); color: var(--art-ink); }
.service-art__page-block { width: 56%; }
.service-art__page-block > strong { display: block; font-size: 3.3cqw; line-height: 1.05; letter-spacing: -.025em; margin-bottom: 12%; }
.service-art__page-block .service-art__text-lines { font-size: 2cqw; }
.service-art__page-square { position: absolute; display: grid; place-items: center; width: 24%; height: 52%; right: 8%; top: 12%; background: var(--art-ink); color: var(--art-mint); font-size: 7cqw; font-weight: 500; letter-spacing: -.08em; }
.service-art__search { position: absolute; width: 80%; left: 10%; top: 13%; padding: 5.5%; border-radius: 8px; background: var(--art-white); color: var(--art-ink); transform: rotateX(8deg) rotateY(-10deg) rotateZ(-7deg); box-shadow: -2px 4px 0 #bed2c8, -10px 25px 40px rgba(0,0,0,.3); }
.service-art__search-input { display: flex; gap: 4%; align-items: center; padding-bottom: 5%; margin-bottom: 6%; border-bottom: 1px solid rgba(7,17,15,.15); font-size: 2.5cqw; }
.service-art__search-input svg { width: 4cqw; stroke: currentColor; stroke-width: 1.6; }
.service-art__search small { display: block; font-size: 1.9cqw; opacity: .65; }
.service-art__search > strong { display: block; font-size: 4.3cqw; line-height: 1.12; letter-spacing: -.04em; margin-top: 3%; }
.service-art__search .service-art__text-lines { width: 90%; margin-top: 6%; font-size: 1.9cqw; }
.service-art__search-links { display: flex; gap: 10%; margin-top: 7%; font-size: 2cqw; }
.service-art__seo-marker { position: absolute; top: 70%; left: 60%; display: flex; gap: 1.5em; align-items: center; color: var(--art-mint); font-size: 3.4cqw; line-height: 1.1; transform: rotateZ(-8deg); }
.service-art__seo-marker svg { width: 6cqw; }

/* AI discovery: sources stay tangible, a translucent core connects them. */
.service-art__network { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.service-art__network path { stroke: var(--art-mint); stroke-width: .65; opacity: .34; }
.service-art__network circle { fill: var(--art-mint); filter: drop-shadow(0 0 5px rgba(34,230,189,.8)); }
.service-art__knowledge-orbit { position: absolute; width: 59%; height: 59%; top: 20%; left: 22%; border-radius: 50%; border: 1px solid rgba(34,230,189,.7); box-shadow: inset 0 0 20px rgba(34,230,189,.08), 0 0 14px rgba(34,230,189,.08); }
.service-art__knowledge-orbit--one { transform: rotateX(65deg) rotateZ(-35deg); }
.service-art__knowledge-orbit--two { transform: rotateY(65deg) rotateZ(25deg); }
.service-art__knowledge-core { position: absolute; top: 25%; left: 28%; width: 47%; aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(34,230,189,.5) 28%, rgba(20,33,30,.8) 60%, rgba(34,230,189,.6)); clip-path: polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); filter: drop-shadow(0 0 30px rgba(34,230,189,.3)); transform: rotateZ(-8deg); }
.service-art__knowledge-core > div { position: absolute; inset: 1px; background: linear-gradient(150deg,rgba(34,230,189,.2),rgba(7,17,15,.45)); clip-path: polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); }
.service-art__knowledge-core > span { position: relative; font-size: 4.1cqw; line-height: 1.07; letter-spacing: -.035em; text-align: center; }
.service-art__source { position: absolute; padding: 4%; color: var(--art-ink); background: var(--art-white); box-shadow: -4px 5px 0 #93b2a2, -12px 20px 40px rgba(0,0,0,.35); }
.service-art__source > span { display: block; font-size: 2cqw; margin-bottom: 8%; }
.service-art__source strong { font-size: 3.5cqw; line-height: 1.1; font-weight: 550; letter-spacing: -.04em; }
.service-art__source--one { top: 12%; left: 4%; width: 37%; transform: rotateY(14deg) rotateZ(-13deg); }
.service-art__source--one .service-art__text-lines { margin-top: 12%; font-size: 2.2cqw; }
.service-art__document-corner { position: absolute; bottom: 0; right: 0; width: 16%; aspect-ratio: 1; background: linear-gradient(135deg,#d3e3da 50%,var(--art-ink) 50%); }
.service-art__source--two { top: 45%; left: 69%; width: 26%; transform: rotateY(-16deg) rotateZ(11deg); }
.service-art__source--two .service-art__text-lines { margin-top: 14%; font-size: 2cqw; }
.service-art__source-symbol { font-size: 5cqw; margin-top: 10%; }
.service-art__answer { position: absolute; width: 64%; top: 71%; left: 13%; padding: 4.5%; background: linear-gradient(135deg, rgba(34,230,189,.98), rgba(34,230,189,.75)); color: var(--art-ink); transform: rotateX(7deg) rotateZ(-5deg); box-shadow: -1px 4px 0 #0c9378, -7px 15px 30px rgba(0,0,0,.3); }
.service-art__answer > span { display: block; font-size: 2.8cqw; font-weight: 550; }
.service-art__answer > div { display: flex; gap: 5%; margin: 7% 0; }
.service-art__answer i { height: 4px; width: 24%; background: var(--art-ink); opacity: .6; }
.service-art__answer i:nth-child(2) { width: 36%; }
.service-art__answer small { font-size: 1.9cqw; }

/* Advertising: a dimensional target and an actual ad-to-destination path. */
.service-art__target { position: absolute; top: 1%; left: 24%; width: 73%; aspect-ratio: 1; transform: rotateX(31deg) rotateY(-21deg); transform-style: preserve-3d; }
.service-art__target-ring { position: absolute; border-radius: 50%; border: 16px solid var(--art-mint); border-width: 3cqw; box-shadow: inset 1px 3px 4px rgba(255,255,255,.5), 2px 6px 0 #168d74, 0 15px 30px rgba(0,0,0,.3); }
.service-art__target-ring--one { inset: 0; opacity: .4; }
.service-art__target-ring--two { inset: 16%; opacity: .7; }
.service-art__target-ring--three { inset: 32%; }
.service-art__target-center { position: absolute; inset: 47%; border-radius: 50%; background: var(--art-white); box-shadow: 0 0 25px rgba(34,230,189,.7); }
.service-art__ad { position: absolute; top: 22%; left: 3%; width: 68%; padding: 5%; background: var(--art-white); color: var(--art-ink); transform: rotateY(-14deg) rotateZ(-10deg); box-shadow: -2px 5px 0 #b5c9bf, -20px 30px 40px rgba(0,0,0,.45); }
.service-art__ad > span { font-size: 2cqw; }
.service-art__ad > strong { display: block; margin: 8% 0; font-size: 4.3cqw; line-height: 1.08; letter-spacing: -.04em; font-weight: 550; }
.service-art__ad .service-art__text-lines { font-size: 2cqw; }
.service-art__ad-action { margin-top: 9%; display: flex; justify-content: space-between; align-items: center; background: var(--art-ink); color: var(--art-white); padding: 4% 6%; font-size: 2.1cqw; }
.service-art__ad-action svg { width: 4cqw; color: var(--art-mint); }
.service-art__destination { position: absolute; top: 57%; left: 46%; width: 49%; background: var(--art-mint); color: var(--art-ink); transform: rotateY(-16deg) rotateZ(9deg) translateZ(20px); box-shadow: -3px 4px 0 #0c9378, -14px 20px 35px rgba(0,0,0,.4); }
.service-art__destination .service-art__browser-bar { height: 24px; background: var(--art-ink); color: var(--art-white); }
.service-art__destination > div:last-child { padding: 10%; }
.service-art__destination span { font-size: 2cqw; }
.service-art__destination strong { display: block; font-size: 3.6cqw; letter-spacing: -.04em; line-height: 1.08; margin-block: 6% 10%; }
.service-art__destination > div:last-child > i { display: block; width: 57%; height: 9px; background: var(--art-ink); }
.service-art__ad-route { position: absolute; top: 82%; left: 4%; display: flex; flex-direction: column; gap: 1.5%; color: #d2e1d9; font-size: 2.1cqw; line-height: 1.4; }
.service-art__ad-route i { width: 1px; height: 5px; background: var(--art-mint); margin-left: 7px; }

/* Editorial: page stock, a large typographic cover and a distribution tile. */
.service-art__editorial { position: absolute; width: 58%; height: 74%; padding: 6%; color: var(--art-ink); transform-origin: 50% 80%; }
.service-art__editorial--back { left: 9%; top: 10%; background: var(--art-mint); transform: rotateY(-7deg) rotateZ(-19deg); box-shadow: -2px 5px 0 #13937a, -25px 30px 45px rgba(0,0,0,.4); }
.service-art__editorial > span { display: block; font-size: 2cqw; line-height: 1.35; }
.service-art__editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15%; height: 70%; }
.service-art__editorial-grid i { border: 1px solid rgba(7,17,15,.3); background: rgba(7,17,15,.1); }
.service-art__editorial--front { top: 12%; left: 26%; background: var(--art-white); transform: rotateY(-12deg) rotateZ(5deg); box-shadow: 2px 5px 0 #bdd0c5, -10px 20px 30px rgba(0,0,0,.35); }
.service-art__editorial--front strong { display: block; margin-top: 11%; font-size: 7.4cqw; line-height: .96; letter-spacing: -.065em; font-weight: 550; }
.service-art__editorial-picture { position: relative; height: 31%; background: var(--art-ink); margin: 10% -6% 8%; overflow: hidden; }
.service-art__editorial-picture i { position: absolute; border-radius: 50%; width: 57%; aspect-ratio: 1; background: linear-gradient(140deg,var(--art-mint),var(--art-soft)); box-shadow: inset -7px -9px 12px rgba(7,17,15,.5); }
.service-art__editorial-picture i:nth-child(1) { top: 15%; left: 8%; }
.service-art__editorial-picture i:nth-child(2) { top: 8%; left: 42%; width: 49%; background: linear-gradient(140deg,var(--art-white),var(--art-mint)); }
.service-art__editorial-picture i:nth-child(3) { top: 57%; left: 43%; width: 35%; }
.service-art__editorial--front .service-art__text-lines { font-size: 2cqw; }
.service-art__publication { position: absolute; top: 58%; left: 3%; width: 41%; padding: 5%; background: linear-gradient(130deg,var(--art-soft),#294f41); border: 1px solid rgba(255,255,255,.4); transform: rotateY(-8deg) rotateZ(-8deg) translateZ(35px); box-shadow: -8px 13px 25px rgba(0,0,0,.4); }
.service-art__publication > span { display: block; font-size: 2cqw; }
.service-art__publication > strong { display: block; font-size: 4cqw; line-height: 1.06; letter-spacing: -.04em; margin-top: 9%; }
.service-art__publication-symbol { display: flex; justify-content: space-between; align-items: center; margin-top: 14%; font-size: 5cqw; color: var(--art-mint); letter-spacing: -.07em; }
.service-art__publication-symbol span { font-size: 6cqw; }

/* These are composed layers, not intersecting 3D meshes. Explicit paint order
   avoids CSS perspective slicing through the readable surfaces. */
.service-art__web-backing, .service-art__seo-layer--base, .service-art__target,
.service-art__editorial--back, .service-art__network { z-index: 1; }
.service-art__browser, .service-art__seo-layer--middle, .service-art__ad,
.service-art__editorial--front, .service-art__knowledge-orbit { z-index: 2; }
.service-art__phone, .service-art__search, .service-art__destination,
.service-art__knowledge-core { z-index: 3; }
.service-art__seo-marker, .service-art__publication,
.service-art__source, .service-art__answer { z-index: 4; }
.service-art__editorial--back { left: 15%; width: 53%; transform: rotateY(-7deg) rotateZ(-17deg); }
.service-art__editorial--front { left: 30%; width: 54%; }
.service-art__publication { left: 7%; }
.service-art__source--one { left: 8%; width: 34%; }

/* One coordinated ambient movement, not individual bouncing UI fragments. */
.service-art__sculpture { animation: service-art-drift 9s ease-in-out infinite both; animation-play-state: paused; }
.service-art--seo .service-art__sculpture { animation-duration: 11s; }
.service-art--inhalte .service-art__sculpture { animation-duration: 12s; }
.service-art[data-motion="running"] .service-art__sculpture { animation-play-state: running; }
@keyframes service-art-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(-.4deg); }
  50% { transform: translate3d(0, -10px, 0) rotateZ(.6deg); }
}
@media (min-width: 1500px) { .service-art { max-height: 680px; } }
@media (max-width: 700px) {
  .service-art { max-width: 560px; min-height: 380px; margin-inline: auto; aspect-ratio: 1 / 1.08; }
  .service-art__scene { inset: 4px 2%; }
  .service-art__browser .service-art__browser-bar { height: 21px; }
  .service-art__phone { border-width: 3px; border-radius: 16px; }
  .service-art__ad-route { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-art__sculpture { animation: none; }
  .service-art__parallax { transform: none; }
  .service-art__pause { display: none; }
}