/* Apostrophe service sculptures: native CSS 3D, no raster animation or runtime library.
 * Marketing explanation; only transform/opacity animate. Motion tokens extend site tokens.
 */
body:not(.home) .service-page-hero.service-hero-refined.pageBanner {
  height: auto !important;
  min-height: min(780px, 100svh) !important;
  max-height: none;
  padding: 0 !important;
  background: #050505 !important;
  overflow: clip;
}

body:not(.home) .service-page-hero.service-hero-refined.pageBanner::before,
body:not(.home) .service-page-hero.service-hero-refined.pageBanner::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

body:not(.home) .service-page-hero.service-hero-refined > .container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible;
}

body:not(.home) .service-page-hero.service-hero-refined .banner-container {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 28px;
  height: auto !important;
  min-height: min(780px, 100svh) !important;
  max-height: none !important;
  padding: 136px 0 64px !important;
  overflow: visible;
}

body:not(.home) .service-page-hero.service-hero-refined .banner-title {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
  font-size: clamp(52px, 6.5vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-align: left;
  text-wrap: balance;
  overflow-wrap: normal;
}

.service-hero-refined .banner-title_left {
  display: block;
  width: auto;
  margin: 0;
  font: inherit;
  color: #f4f4f4;
  -webkit-text-fill-color: #f4f4f4;
}

body:not(.home) .service-hero-refined[data-service="ppc"] .banner-title {
  font-size: clamp(42px, 4.8vw, 74px);
  line-height: 1.08;
}

body:not(.home) .service-hero-refined[data-service="seo"] .banner-title {
  font-size: clamp(48px, 5.4vw, 84px);
  line-height: 1.08;
}

body:not(.home) .service-page-hero.service-hero-refined .banner-row {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.service-hero-refined .banner-description-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

.service-hero-refined .banner-description {
  order: 0;
  max-width: 36ch;
  margin: 0;
  color: #bdbdbd;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 400;
  line-height: 1.55;
}

.service-hero-refined .banner-cta {
  order: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin: 0;
}

.service-hero-refined .banner-cta__btn {
  min-height: 50px;
  padding: 16px 22px;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.service-hero-refined .banner-cta__btn--primary {
  color: #141414;
  background: #f2f2f2;
  border-color: #f2f2f2;
}

.service-hero-refined .banner-cta__btn--ghost {
  color: #eee;
  border-color: #666;
  background: transparent;
}

.service-hero-refined .banner-cta__btn:focus-visible {
  outline: 2px solid #f4f4f4;
  outline-offset: 5px;
}

.service-art {
  --sculpture-red: #ff342b;
  --sculpture-ease: var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 100%;
  min-width: 0;
  height: clamp(390px, 39vw, 550px);
  perspective: 1000px;
  isolation: isolate;
}

.service-art__world {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%) scale(var(--scene-scale, 0.85));
  transform-style: preserve-3d;
  pointer-events: none;
}

.service-art__rig,
.sculpture-piece,
.sculpture-solid,
.sculpture-solid > span,
.ai-orbit,
.ai-rotor,
.seo-sheet,
.ppc-orbit,
.smm-poster {
  position: absolute;
  transform-style: preserve-3d;
}

.service-art__rig {
  left: 250px;
  top: 250px;
  width: 0;
  height: 0;
}

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

.sculpture-piece {
  width: 0;
  height: 0;
}

.sculpture-solid {
  width: var(--size, 84px);
  height: var(--size, 84px);
  left: calc(var(--size, 84px) / -2);
  top: calc(var(--size, 84px) / -2);
  color: #0a0a0a;
}

.sculpture-solid > span {
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid #fafafa;
  background: #e5e5e3;
  backface-visibility: hidden;
  font-family: ui-monospace, monospace;
  font-size: 26px;
  font-weight: 500;
}

.sculpture-solid .solid-front { transform: translateZ(calc(var(--size, 84px) / 2)); }
.sculpture-solid .solid-back { transform: rotateY(180deg) translateZ(calc(var(--size, 84px) / 2)); }
.sculpture-solid .solid-right { transform: rotateY(90deg) translateZ(calc(var(--size, 84px) / 2)); background: #8b8b89; }
.sculpture-solid .solid-left { transform: rotateY(-90deg) translateZ(calc(var(--size, 84px) / 2)); background: #a8a8a6; }
.sculpture-solid .solid-top { transform: rotateX(90deg) translateZ(calc(var(--size, 84px) / 2)); background: #fafaf7; }
.sculpture-solid .solid-bottom { transform: rotateX(-90deg) translateZ(calc(var(--size, 84px) / 2)); background: #6b6b69; }
.sculpture-solid--red > span { background: #ff342b; border-color: #ff7972; color: #190501; }
.sculpture-solid--red .solid-right { background: #be1d17; }
.sculpture-solid--red .solid-left { background: #d72b22; }
.sculpture-solid--red .solid-top { background: #ff6a5e; }
.sculpture-solid--red .solid-bottom { background: #971611; }

.service-art__pause {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 0 8px 12px;
  border: 0;
  color: #aaa;
  background: transparent;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  text-underline-offset: 4px;
}

.service-art__pause:hover { color: #f4f4f4; text-decoration: underline; }
.service-art__pause:focus-visible { outline: 2px solid #eee; outline-offset: 3px; }
.service-art__pause[hidden] { display: none; }

/* WEB-DEV: an exploded modular structure, with a distinct connecting core. */
.web-rig {
  transform: rotateX(-24deg) rotateY(-32deg);
  animation: web-perspective 14s var(--sculpture-ease) infinite;
}
.web-breathe { animation: web-connect 7s var(--sculpture-ease) infinite; }
.web-core { animation: web-core 7s var(--sculpture-ease) infinite; }
.web-ground {
  position: absolute;
  width: 310px;
  height: 310px;
  left: -155px;
  top: -155px;
  border: 1px solid #454545;
  transform: translateY(156px) rotateX(90deg);
}
.web-ground::before,
.web-ground::after {
  content: '';
  position: absolute;
  background: #3c3c3c;
}
.web-ground::before { width: 1px; height: 100%; left: 50%; }
.web-ground::after { height: 1px; width: 100%; top: 50%; }

/* AI: data packets revolve around one controlled processing core. */
.ai-rig { transform: rotateX(-15deg) rotateY(-20deg); }
.ai-core {
  position: absolute;
  left: -68px;
  top: -68px;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  border: 1px solid #ff8d83;
  background: radial-gradient(circle at 32% 26%, #ff9d86 0, #ff342b 30%, #b3201b 63%, #3e0c0a 100%);
  box-shadow: inset -10px -10px 24px #380a0866;
  animation: ai-heart 6s var(--sculpture-ease) infinite;
}
.ai-orbit { width: 332px; height: 332px; left: -166px; top: -166px; }
.ai-orbit::before { content: ''; position: absolute; inset: 0; border: 1px solid #8d8d8d; border-radius: 50%; }
.ai-orbit--one { transform: rotateX(65deg) rotateY(14deg); }
.ai-orbit--two { transform: rotateY(62deg) rotateZ(35deg); }
.ai-orbit--three { transform: rotateX(-52deg) rotateY(-34deg); }
.ai-orbit--four { width: 408px; height: 408px; left: -204px; top: -204px; transform: rotateX(58deg) rotateY(-20deg); }
.ai-orbit--four::before { border-color: #414141; }
.ai-rotor { inset: 0; animation: sculpture-orbit 12s linear infinite; }
.ai-orbit--two .ai-rotor { animation-duration: 16s; animation-delay: -6s; }
.ai-orbit--three .ai-rotor { animation-duration: 14s; animation-direction: reverse; animation-delay: -3s; }
.ai-orbit--four .ai-rotor { animation-duration: 22s; animation-delay: -8s; }
.ai-packet { position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #f3f3ed; box-shadow: inset -3px -3px 4px #7b7b77; }
.ai-orbit--four .ai-packet { background: #ff342b; box-shadow: none; width: 9px; height: 9px; }
.ai-axis { position: absolute; width: 1px; height: 390px; left: 0; top: -195px; background: #424242; transform: rotateZ(32deg); }

/* SEO: the lens traverses structured, layered content. No invented rankings. */
.seo-rig { transform: rotateX(51deg) rotateZ(-32deg); animation: seo-perspective 16s var(--sculpture-ease) infinite; }
.seo-sheet { width: 218px; height: 280px; left: -109px; top: -140px; border: 1px solid #8a8a8a; border-radius: 6px; background: #141414; box-shadow: 3px 4px 0 #050505; }
.seo-sheet--one { transform: translate3d(-18px, 18px, -65px); }
.seo-sheet--two { transform: translate3d(-12px, 12px, -30px); }
.seo-sheet--three { transform: translate3d(-6px, 6px, 5px); }
.seo-sheet--top { transform: translateZ(40px); background: #e8e8e3; border-color: #fafaf4; }
.seo-content { position: absolute; left: 26px; right: 26px; height: 7px; background: #747473; }
.seo-content:nth-child(1) { top: 32px; height: 28px; right: 64px; background: #171717; }
.seo-content:nth-child(2) { top: 84px; }
.seo-content:nth-child(3) { top: 103px; }
.seo-content:nth-child(4) { top: 122px; right: 60px; }
.seo-content:nth-child(5) { top: 163px; height: 72px; background: #c7c7c2; }
.seo-scan { position: absolute; left: 12px; right: 12px; top: 68px; height: 3px; background: #ff342b; transform: translateY(40px); animation: seo-scan 8s var(--sculpture-ease) infinite; }
.seo-lens-motion { position: absolute; width: 150px; height: 150px; left: -80px; top: -105px; transform: translate3d(16px, 12px, 110px); animation: seo-search 8s var(--sculpture-ease) infinite; transform-style: preserve-3d; }
.seo-lens { position: absolute; inset: 0; border: 9px solid #ff5148; border-radius: 50%; background: #ff342b0c; box-shadow: 3px 5px 0 #a31e18, inset 2px 2px 0 #ff9a91; }
.seo-lens::after { content: ''; position: absolute; width: 86px; height: 14px; left: 112px; top: 124px; background: #f0f0eb; transform: rotate(45deg); transform-origin: left center; border-radius: 3px; box-shadow: 1px 3px 0 #888; }

/* PPC: several trajectories, one precise target. */
.ppc-rig { transform: rotateX(48deg) rotateZ(-28deg); animation: ppc-perspective 15s var(--sculpture-ease) infinite; }
.ppc-ring { position: absolute; left: calc(var(--diameter) / -2); top: calc(var(--diameter) / -2); width: var(--diameter); height: var(--diameter); border: 2px solid #e2e2dc; border-radius: 50%; background: #0c0c0c; }
.ppc-ring--outer { --diameter: 348px; transform: translateZ(-35px); border-color: #535353; background: #090909; }
.ppc-ring--middle { --diameter: 260px; transform: translateZ(0); }
.ppc-ring--inner { --diameter: 170px; transform: translateZ(35px); border-color: #858585; }
.ppc-target { position: absolute; width: 82px; height: 82px; left: -41px; top: -41px; transform: translateZ(70px); transform-style: preserve-3d; }
.ppc-target::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #ff8178; background: #ff342b; box-shadow: 3px 5px 0 #a51c16; animation: ppc-hit 6s var(--sculpture-ease) infinite; }
.ppc-trajectory { position: absolute; height: 1px; width: 160px; left: -215px; top: 0; background: #777; transform: translateZ(90px) rotateZ(32deg); transform-origin: right; }
.ppc-trajectory--two { left: 55px; transform: translateZ(90px) rotateZ(-32deg); transform-origin: left; }
.ppc-orbit { inset: -154px; width: 308px; height: 308px; transform: translateZ(90px); }
.ppc-orbit-inner { position: absolute; inset: 0; animation: sculpture-orbit 20s linear infinite; }
.ppc-orbit-inner::before { content: ''; position: absolute; left: 148px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #e4e4de; }
.ppc-arrow { position: absolute; width: 44px; height: 60px; left: -16px; top: -22px; transform: translate3d(14px, 10px, 150px) rotateZ(24deg); animation: ppc-arrive 6s var(--sculpture-ease) infinite; }
.ppc-arrow::before { content: ''; position: absolute; inset: 0; background: #f5f5ef; clip-path: polygon(0 0, 100% 59%, 58% 66%, 40% 100%); }

/* SMM: a coherent family of expressive typographic posters broadcasts a signal. */
.smm-rig { transform: rotateX(-10deg) rotateY(-16deg); animation: smm-perspective 14s var(--sculpture-ease) infinite; }
.smm-poster { width: 156px; height: 218px; left: -78px; top: -109px; border: 1px solid #c9c9c3; border-radius: 3px; box-shadow: 5px 7px 0 #181818; overflow: hidden; }
.smm-poster--left { transform: translate3d(-124px, -10px, -45px) rotateZ(-17deg); background: #e8e8e2; }
.smm-stripes { position: absolute; width: 220px; height: 126px; left: -32px; top: 42px; background: repeating-linear-gradient(90deg, #1b1b1b 0 8px, transparent 8px 20px); transform: rotate(-36deg); }
.smm-poster--right { transform: translate3d(128px, 8px, -32px) rotateZ(16deg); background: #141414; }
.smm-quote { position: absolute; top: 6px; left: 22px; color: #eeeee7; font-family: Georgia, serif; font-size: 172px; line-height: 1; letter-spacing: -0.1em; }
.smm-poster--front { transform: translate3d(0, 0, 55px) rotateZ(-3deg); border-color: #ff7e75; background: #ff342b; }
.smm-letter { position: absolute; inset: 0; display: grid; place-items: center; color: #180805; font-size: 156px; font-weight: 500; line-height: 1; letter-spacing: -0.09em; }
.smm-letter::after { content: '\0027'; position: absolute; right: 20px; top: 12px; color: #f5f5ee; font-size: 90px; }
.smm-front-motion { position: absolute; inset: 0; transform-style: preserve-3d; animation: smm-poster 9s var(--sculpture-ease) infinite; }
.smm-wave { position: absolute; width: 420px; height: 420px; left: -210px; top: -210px; border: 1px solid #656565; border-radius: 50%; transform: translateZ(-100px) rotateX(46deg); opacity: 0.5; }
.smm-wave--two { width: 480px; height: 480px; left: -240px; top: -240px; border-color: #3c3c3c; animation: smm-signal 9s var(--sculpture-ease) infinite; }
.smm-satellite { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #ff5148; transform: translate3d(184px,-156px,0); animation: smm-satellite 9s var(--sculpture-ease) infinite; }

/* One play-state gate handles intersection, tab visibility, user pause and reduced motion. */
.service-art__world * { animation-play-state: paused !important; }
.service-art.is-running .service-art__world * { animation-play-state: running !important; }
.service-art__world *::before,
.service-art__world *::after { animation-play-state: paused !important; }
.service-art.is-running .service-art__world *::before,
.service-art.is-running .service-art__world *::after { animation-play-state: running !important; }

@keyframes web-perspective { 0%,100% { transform: rotateX(-24deg) rotateY(-32deg); } 50% { transform: rotateX(-16deg) rotateY(-44deg); } }
@keyframes web-connect { 0%,20%,100% { transform: translateZ(0); } 45%,65% { transform: translateZ(-18px); } }
@keyframes web-core { 0%,20%,100% { transform: translateZ(0); } 45%,65% { transform: translateZ(24px); } }
@keyframes sculpture-orbit { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }
@keyframes ai-heart { 0%,100% { transform: scale(0.97); } 50% { transform: scale(1.03); } }
@keyframes seo-perspective { 0%,100% { transform: rotateX(51deg) rotateZ(-32deg); } 50% { transform: rotateX(43deg) rotateZ(-26deg); } }
@keyframes seo-search { 0%,100% { transform: translate3d(-16px,-30px,110px); } 50% { transform: translate3d(30px,42px,110px); } }
@keyframes seo-scan { 0%,100% { transform: translateY(14px); } 50% { transform: translateY(158px); } }
@keyframes ppc-perspective { 0%,100% { transform: rotateX(48deg) rotateZ(-28deg); } 50% { transform: rotateX(40deg) rotateZ(-20deg); } }
@keyframes ppc-arrive { 0%,8% { opacity: 0; transform: translate3d(104px,-130px,190px) rotateZ(24deg); } 22% { opacity: 1; } 44%,68% { opacity: 1; transform: translate3d(14px,10px,150px) rotateZ(24deg); } 85%,100% { opacity: 0; transform: translate3d(14px,10px,150px) rotateZ(24deg); } }
@keyframes ppc-hit { 0%,35%,100% { transform: scale(1); } 48% { transform: scale(1.1); } 65% { transform: scale(1); } }
@keyframes smm-perspective { 0%,100% { transform: rotateX(-10deg) rotateY(-16deg); } 50% { transform: rotateX(-4deg) rotateY(0deg); } }
@keyframes smm-poster { 0%,100% { transform: translateY(8px); } 50% { transform: translateY(-12px); } }
@keyframes smm-signal { 0%,100% { opacity: 0.25; transform: translateZ(-100px) rotateX(46deg) scale(0.96); } 50% { opacity: 0.65; transform: translateZ(-100px) rotateX(46deg) scale(1.06); } }
@keyframes smm-satellite { 0%,100% { transform: translate3d(184px,-156px,0); } 50% { transform: translate3d(204px,-116px,18px); } }

@media (hover: hover) and (pointer: fine) {
  .service-hero-refined .banner-cta__btn--primary:hover { background: #d9d9d9; border-color: #d9d9d9; color: #111; }
  .service-hero-refined .banner-cta__btn--ghost:hover { background: #171717; border-color: #aaa; color: #f2f2f2; }
}

@media (max-width: 900px) {
  body:not(.home) .service-page-hero.service-hero-refined.pageBanner { min-height: auto !important; }
  body:not(.home) .service-page-hero.service-hero-refined .banner-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0 !important;
    padding: 128px 0 32px !important;
    row-gap: 24px;
    align-items: start;
    justify-content: normal;
  }
  body:not(.home) .service-page-hero.service-hero-refined .banner-title,
  body:not(.home) .service-hero-refined[data-service="seo"] .banner-title { font-size: clamp(48px, 8.8vw, 76px); }
  body:not(.home) .service-hero-refined[data-service="ppc"] .banner-title { font-size: clamp(36px, 6.6vw, 60px); }
  .service-hero-refined .banner-description-wrap { gap: 24px; }
  .service-hero-refined .banner-description { max-width: 42ch; font-size: 17px; }
  .service-art { grid-column: 1; grid-row: 3; justify-self: center; width: min(100%, 500px); height: clamp(300px, 62vw, 420px); }
  .service-art__pause { bottom: 2px; }
}

@media (max-width: 560px) {
  body:not(.home) .service-page-hero.service-hero-refined > .container { width: auto; margin-inline: 20px; padding: 0; }
  body:not(.home) .service-page-hero.service-hero-refined .banner-container { padding-top: 116px !important; padding-bottom: 24px !important; row-gap: 22px; }
  body:not(.home) .service-page-hero.service-hero-refined .banner-title { font-size: clamp(42px, 10.5vw, 58px); }
  body:not(.home) .service-hero-refined[data-service="seo"] .banner-title { font-size: clamp(42px, 10vw, 56px); }
  body:not(.home) .service-hero-refined[data-service="ppc"] .banner-title { font-size: clamp(34px, 8.8vw, 46px); }
  .service-hero-refined .banner-cta { width: 100%; gap: 10px; }
  .service-hero-refined .banner-cta__btn { min-height: 48px; padding: 15px 16px; font-size: 11px; }
  .service-art { height: 310px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-art .service-art__world *,
  .service-art .service-art__world *::before,
  .service-art .service-art__world *::after { animation: none !important; }
  .service-art__pause { display: none; }
}