.services-page {
  --services-content: 1116px;
}

.services-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 100px) 5% clamp(52px, 5.5vw, 72px);
  background:
    radial-gradient(circle at 50% 0, rgba(135, 54, 225, .2), transparent 46%),
    linear-gradient(180deg, rgba(12, 8, 23, .72), rgba(5, 5, 13, 0));
}

.services-hero::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(560px, 62vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  content: "";
  transform: translateX(-50%);
}

.services-page .services-hero .eyebrow {
  margin-bottom: 18px;
  color: #b266ff;
}

.services-hero h1 {
  max-width: 980px;
  margin-bottom: 24px;
  font-size: clamp(3.2rem, 6.5vw, 5.8rem);
  font-weight: 820;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

.services-hero h1 span {
  background: var(--blue-gradient, linear-gradient(105deg, #a84dff 0%, #8338ec 48%, #6622d8 100%));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.services-hero-copy {
  max-width: 800px;
  margin-bottom: 32px;
  color: #c0bdc7;
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  line-height: 1.72;
  text-wrap: pretty;
}

.services-hero-actions {
  gap: 12px;
}

.services-page .button {
  border-radius: 6px;
}

.services-page .services-hero-actions .button {
  min-height: 54px;
  padding: 13px 25px;
}

.services-page .primary-button {
  background: linear-gradient(115deg, #7626de, #9434ed);
  box-shadow: 0 10px 30px rgba(107, 35, 210, .23);
  color: #fff;
}

.services-page .secondary-button {
  border-color: #777480;
  background: rgba(8, 8, 14, .72);
}

.services-hero-actions .primary-button span,
.work-card-content .button span {
  margin-left: 8px;
  transition: transform .2s ease;
}

.services-container {
  width: 100%;
  max-width: var(--services-content);
  margin-right: auto;
  margin-left: auto;
}

.services-section,
.our-work-section {
  padding: clamp(76px, 8vw, 110px) 5%;
  scroll-margin-top: 98px;
}

.services-section {
  position: relative;
  border-top: 1px solid #1b1927;
  background: linear-gradient(180deg, #080a14, #080913);
}

.services-section::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .008) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  pointer-events: none;
}

.services-section-heading,
.work-section-heading {
  position: relative;
  max-width: 740px;
  margin: 0 0 44px;
  text-align: left;
}

.services-section-heading {
  margin-left: 66px;
}

.services-section-heading h2,
.work-section-heading h2 {
  font-size: clamp(2.25rem, 4vw, 3.7rem);
  letter-spacing: -.045em;
}

.services-section-heading > p:last-child,
.work-section-heading > p:last-child {
  max-width: 650px;
  margin-top: 18px;
}

.service-showcase {
  position: relative;
  outline: none;
}

.service-showcase:focus-visible {
  outline: 3px solid #c17aff;
  outline-offset: 6px;
}

.service-showcase-shell {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 14px;
}

.showcase-arrow {
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #352849;
  border-radius: 7px;
  background: rgba(12, 12, 24, .9);
  box-shadow: 0 12px 30px rgba(28, 7, 48, .18);
  color: #d8c9e9;
  font-size: 1.25rem;
  place-items: center;
}

.showcase-arrow:hover {
  border-color: #8d40d8;
  background: #151225;
  color: #fff;
  transform: translateY(-2px);
}

.showcase-arrow:focus-visible,
.showcase-selector:focus-visible {
  outline: 3px solid #c17aff;
  outline-offset: 3px;
}

.service-showcase-stage {
  overflow: hidden;
  min-width: 0;
  border: 1px solid #29243a;
  border-radius: 9px;
  background:
    radial-gradient(circle at 12% 12%, rgba(139, 55, 230, .14), transparent 34%),
    linear-gradient(145deg, #11101d, #0a0913);
  box-shadow: 0 24px 70px rgba(45, 13, 79, .24);
}

.service-showcase-content {
  display: grid;
  min-height: 480px;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .15s ease, transform .15s ease;
}

.service-showcase-content.is-leaving-next {
  opacity: 0;
  transform: translate3d(-16px, 0, 0);
}

.service-showcase-content.is-leaving-previous {
  opacity: 0;
  transform: translate3d(16px, 0, 0);
}

.service-showcase-content.is-entering-next {
  opacity: 0;
  transform: translate3d(16px, 0, 0);
}

.service-showcase-content.is-entering-previous {
  opacity: 0;
  transform: translate3d(-16px, 0, 0);
}

.service-showcase-content.is-entering-next.is-active,
.service-showcase-content.is-entering-previous.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.showcase-primary,
.showcase-details {
  padding: clamp(32px, 3.5vw, 42px);
}

.showcase-primary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid #29243a;
}

.showcase-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid #5b2d85;
  border-radius: 7px;
  background: rgba(132, 48, 225, .1);
  color: #b458ff;
  box-shadow: 0 0 28px rgba(132, 48, 225, .12);
}

.showcase-icon svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.showcase-heading {
  display: flex;
  width: 100%;
  margin-bottom: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.showcase-heading .eyebrow,
.showcase-counter {
  margin: 0;
}

.showcase-counter {
  color: #8c8398;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.showcase-primary h3 {
  max-width: 520px;
  margin-bottom: 16px;
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  letter-spacing: -.055em;
  line-height: 1;
}

.showcase-overview {
  max-width: 590px;
  margin-bottom: 24px;
  color: #c0bdc7;
  font-size: 1rem;
  line-height: 1.65;
}

.showcase-primary .button {
  min-height: 52px;
  margin-top: auto;
  padding: 12px 22px;
}

.showcase-details {
  display: grid;
  align-content: center;
  gap: 12px;
}

.showcase-details h4 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.showcase-included {
  padding-bottom: 14px;
  border-bottom: 1px solid #29243a;
}

.showcase-included ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.showcase-included li {
  position: relative;
  padding-left: 21px;
  color: #c0bdc7;
  font-size: .95rem;
  line-height: 1.52;
}

.showcase-included li::before {
  position: absolute;
  top: .68em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9b42ff;
  box-shadow: 0 0 10px rgba(155, 66, 255, .45);
  content: "";
}

.showcase-detail-block {
  padding: 13px 15px;
  border: 1px solid #29243a;
  border-radius: 7px;
  background: rgba(7, 7, 15, .5);
}

.showcase-detail-block p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
}

.showcase-considerations {
  border-left-color: #693493;
}

.service-showcase-selectors {
  display: flex;
  overflow-x: auto;
  margin: 14px 66px 0;
  padding: 2px 2px 8px;
  gap: 8px;
  scrollbar-color: #5c2f80 transparent;
  scrollbar-width: thin;
}

.showcase-selector {
  position: relative;
  display: flex;
  min-width: 132px;
  min-height: 58px;
  padding: 11px 12px;
  flex: 1 0 0;
  align-items: center;
  gap: 9px;
  border: 1px solid #262235;
  border-radius: 7px;
  background: rgba(12, 12, 24, .75);
  color: #8f8999;
  text-align: left;
}

.showcase-selector span {
  color: #8d47c8;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.showcase-selector strong {
  font-size: .73rem;
  line-height: 1.25;
}

.showcase-selector::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: var(--blue-gradient);
  content: "";
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .2s ease, transform .2s ease;
}

.showcase-selector:hover {
  border-color: #51306e;
  color: #e9e3ef;
}

.showcase-selector.is-active {
  border-color: #6f379b;
  background: rgba(91, 33, 145, .18);
  color: #fff;
}

.showcase-selector.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.showcase-noscript {
  padding: 24px;
  border: 1px solid #29243a;
  border-radius: 9px;
  background: #0c0c18;
}

.our-work-section {
  position: relative;
  background:
    radial-gradient(circle at 15% 35%, rgba(102, 39, 168, .09), transparent 28%),
    #05050d;
}

.work-card {
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  border: 1px solid #242237;
  border-radius: 9px;
  background: linear-gradient(145deg, #11101d, #0a0913);
  box-shadow: 0 24px 70px rgba(45, 13, 79, .24);
}

.work-preview {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  border-right: 1px solid #242237;
  background: #d9a53c;
}

.work-browser-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 38px;
  padding: 0 15px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #29283a;
  background: #0b0b14;
}

.work-browser-bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4d4260;
}

.work-browser-bar > span:first-child {
  background: #9b42ff;
}

.work-browser-bar p {
  margin: 0 0 0 12px;
  color: #777287;
  font-size: .68rem;
  letter-spacing: .02em;
}

.work-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  pointer-events: none;
}

.work-card-content {
  display: flex;
  padding: clamp(34px, 4vw, 58px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.work-card-content .project-label {
  margin-bottom: 20px;
}

.work-card-content h3 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -.04em;
}

.work-card-content > p {
  margin-bottom: 26px;
  font-size: 1rem;
  line-height: 1.72;
}

.work-services {
  display: flex;
  margin-bottom: 32px;
  gap: 8px;
  flex-wrap: wrap;
}

.work-services span {
  padding: 6px 10px;
  border: 1px solid #352849;
  border-radius: 999px;
  background: rgba(130, 53, 225, .08);
  color: #c5b9d4;
  font-size: .76rem;
}

.work-availability {
  margin-top: 22px;
  padding: 20px 24px;
  border: 1px solid #202031;
  border-radius: 7px;
  background: #0c0c18;
}

.work-availability p {
  margin: 0;
  font-size: .94rem;
}

.work-availability strong {
  color: var(--text);
}

.reveal-ready .services-page .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.reveal-ready .services-page .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity .48s ease-out var(--reveal-delay, 0ms),
    transform .48s cubic-bezier(.2, .75, .3, 1) var(--reveal-delay, 0ms);
}

@media (hover: hover) and (pointer: fine) {
  .services-page .primary-button:hover {
    box-shadow: 0 14px 35px rgba(126, 43, 230, .38);
    transform: translateY(-2px);
  }

  .services-page .secondary-button:hover {
    border-color: #a350eb;
    background: rgba(26, 15, 40, .88);
    box-shadow: 0 10px 26px rgba(85, 29, 139, .18);
    transform: translateY(-2px);
  }

  .services-hero-actions .primary-button:hover span,
  .work-card-content .button:hover span {
    transform: translateX(3px);
  }
}

@media (max-width: 1080px) {
  .service-showcase-content {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .showcase-primary,
  .showcase-details {
    padding: 32px;
  }

  .work-card {
    grid-template-columns: 1fr;
  }

  .work-preview {
    min-height: 430px;
    border-right: 0;
    border-bottom: 1px solid #242237;
  }

  .work-preview iframe {
    min-height: 430px;
  }
}

@media (max-width: 800px) {
  .services-hero {
    padding-top: 58px;
    padding-bottom: 48px;
  }

  .services-hero h1 {
    max-width: 720px;
    font-size: clamp(2.75rem, 11vw, 4.25rem);
    line-height: 1.02;
  }

  .services-hero-copy {
    max-width: 650px;
    margin-bottom: 28px;
    font-size: 1.05rem;
  }

  .services-section,
  .our-work-section {
    padding-top: 72px;
    padding-bottom: 72px;
    scroll-margin-top: 84px;
  }

  .services-section-heading,
  .work-section-heading {
    margin-bottom: 34px;
  }

  .services-section-heading {
    margin-left: 0;
  }

  .service-showcase-shell {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .service-showcase-stage {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .showcase-arrow {
    grid-row: 1;
    width: 100%;
    height: 48px;
  }

  .showcase-arrow-previous {
    grid-column: 1;
  }

  .showcase-arrow-next {
    grid-column: 2;
  }

  .service-showcase-content {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .showcase-primary {
    border-right: 0;
    border-bottom: 1px solid #29243a;
  }

  .service-showcase-selectors {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .work-preview,
  .work-preview iframe {
    min-height: 340px;
  }

  .work-card-content {
    padding: 30px 24px 32px;
  }
}

@media (max-width: 480px) {
  .services-hero {
    padding: 48px 5% 42px;
  }

  .services-page .services-hero .eyebrow {
    margin-bottom: 14px;
  }

  .services-hero h1 {
    margin-bottom: 20px;
    font-size: clamp(2.55rem, 13vw, 3.5rem);
    letter-spacing: -.045em;
  }

  .services-hero-copy {
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.65;
  }

  .services-page .services-hero-actions {
    gap: 10px;
  }

  .services-page .services-hero-actions .button {
    min-height: 52px;
  }

  .services-section,
  .our-work-section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .showcase-primary,
  .showcase-details {
    padding: 24px 20px;
  }

  .showcase-primary h3 {
    font-size: clamp(2.35rem, 13vw, 3.2rem);
  }

  .showcase-heading {
    align-items: flex-start;
  }

  .showcase-heading .eyebrow {
    max-width: 190px;
  }

  .showcase-selector {
    min-width: 122px;
  }

  .work-preview,
  .work-preview iframe {
    min-height: 285px;
  }

  .work-browser-bar {
    height: 32px;
  }

  .work-browser-bar p {
    font-size: .6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .services-page .reveal,
  .reveal-ready .services-page .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .services-hero-actions .primary-button span,
  .work-card-content .button span {
    transition: none;
  }

  .service-showcase-content,
  .showcase-selector::after {
    transition: none;
  }
}

/* Services hero — floating glass city */
.services-page {
  min-width: 0;
  --city-violet: var(--accent, #9b42ff);
  --city-violet-bright: var(--cyan, #b06aff);
  --city-white: #edebff;
  --city-ink: #05040b;
  --city-rotate-x: 0deg;
  --city-rotate-y: 0deg;
  --city-shift-x: 0px;
  --city-shift-y: 0px;
  --city-back-x: 0px;
  --city-back-y: 0px;
  --city-mid-x: 0px;
  --city-mid-y: 0px;
  --city-front-x: 0px;
  --city-front-y: 0px;
  --city-reflection-x: 0px;
  --city-glow-x: 62%;
}

.services-page .services-hero {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  height: 537px;
  min-height: 0;
  max-width: none;
  padding: 0;
  background:
    radial-gradient(circle at 65% 48%, rgba(120, 40, 207, .12), transparent 31%),
    linear-gradient(105deg, #030309 0%, #05040b 42%, #020207 100%);
  text-align: left;
}

.services-page .services-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(rgba(181, 105, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 105, 255, .018) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
  opacity: .7;
  transform: none;
}

.services-page .services-hero::after {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18%;
  background: linear-gradient(transparent, #05050d 88%);
  content: "";
  pointer-events: none;
}

.services-hero-copy {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: max(5%, calc((100% - 1352px) / 2));
  width: min(31vw, 390px);
  max-width: 390px !important;
  margin: 0 !important;
  text-align: left;
  transform: translateY(-50%);
}

.services-page .services-hero .eyebrow {
  margin-bottom: 13px;
  color: #c27aff;
  font-size: .7rem;
  letter-spacing: .18em;
}

.services-page .services-hero h1 {
  max-width: 390px;
  margin-bottom: 17px;
  font-size: clamp(2.3rem, 3.65vw, 3.65rem);
  font-weight: 690;
  letter-spacing: -.052em;
  line-height: 1.02;
  text-wrap: balance;
}

.services-page .services-hero h1 span {
  background: linear-gradient(100deg, #f4ebff 4%, #c783ff 48%, #9347ed 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.services-hero-copy > p:not(.eyebrow) {
  max-width: 355px;
  margin-bottom: 22px;
  color: #aaa5b4;
  font-size: .96rem;
  line-height: 1.62;
}

.services-page .services-hero-actions {
  justify-content: flex-start;
  gap: 9px;
}

.services-page .services-hero-actions .button {
  min-height: 46px;
  padding: 10px 17px;
  font-size: .82rem;
}

.services-city {
  position: absolute;
  z-index: 2;
  top: 1%;
  right: -1%;
  bottom: -3%;
  left: 30%;
  max-width: none !important;
  margin: 0 !important;
  contain: layout paint style;
  pointer-events: auto;
}

.city-atmosphere {
  position: absolute;
  inset: 2% 1% 1%;
  background:
    radial-gradient(circle at var(--city-glow-x) 48%, rgba(161, 69, 255, .18), transparent 34%),
    radial-gradient(ellipse at 57% 81%, rgba(102, 27, 193, .24), transparent 42%);
  filter: blur(18px);
  opacity: 0;
}

.services-city.is-atmosphere-active .city-atmosphere {
  animation: city-atmosphere-in 3.4s ease-out forwards, city-atmosphere-idle 10.8s ease-in-out 3.4s infinite alternate;
}

.city-dust {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3.2s ease-out;
}

.services-city.is-atmosphere-active .city-dust {
  opacity: 1;
}

.city-dust i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 221, 255, .9), rgba(177, 78, 255, .38) 42%, transparent 72%);
  box-shadow: 0 0 12px rgba(177, 75, 255, .68);
  opacity: 0;
}

.services-city.is-atmosphere-active .city-dust i {
  animation: city-dust-drift var(--duration) ease-in-out var(--delay) infinite both;
}

.city-dust--front {
  z-index: 3;
}

.city-dust--front i {
  filter: blur(3px);
}

.city-stage {
  position: absolute;
  inset: 0;
  transform: perspective(1100px) rotateX(var(--city-rotate-x)) rotateY(var(--city-rotate-y)) translate3d(var(--city-shift-x), var(--city-shift-y), 0);
  transform-style: preserve-3d;
  will-change: transform;
}

.city-model {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 54% 62%;
  animation: none;
}

.city-model path,
.city-model circle,
.city-model ellipse {
  vector-effect: non-scaling-stroke;
}

.city-layer {
  transform-box: view-box;
  transform-origin: center;
}

.city-layer--base {
  transform: translate(var(--city-back-x), var(--city-back-y));
}

.city-layer--roads,
.city-layer--back {
  transform: translate(var(--city-back-x), var(--city-back-y));
}

.city-layer--mid {
  transform: translate(var(--city-mid-x), var(--city-mid-y));
}

.city-layer--tower {
  transform: none;
}

.city-layer--front,
.city-layer--lights {
  transform: translate(var(--city-front-x), var(--city-front-y));
}

.city-shadow {
  fill: #000;
  opacity: 0;
  filter: blur(12px);
  animation: city-shadow-in 4s ease-out .2s forwards;
}

.city-underlight {
  opacity: 0;
  animation: city-underlight-in 4s ease-out 11.7s forwards, city-underlight-idle 7.6s ease-in-out 16s infinite alternate;
}

.platform-side,
.platform-edge,
.platform-grid,
.platform-inset {
  opacity: 0;
}

.platform-side,
.platform-edge {
  stroke: #a448ed;
  stroke-width: .8;
  stroke-linejoin: round;
  animation: city-platform-in 4.2s cubic-bezier(.2, .68, .25, 1) 1.3s forwards;
}

.platform-grid {
  animation: city-grid-in 4.2s ease-out 1.7s forwards;
}

.platform-inset {
  fill: none;
  stroke: #a956ef;
  stroke-width: .62;
  stroke-opacity: .28;
  stroke-dasharray: 10 11;
  animation: city-blueprint-in 4.8s ease-out 2.1s forwards;
}

.city-satellite {
  opacity: 0;
  animation: city-satellite-in 3.4s cubic-bezier(.2, .68, .25, 1) 3.4s forwards;
}

.city-satellite--north { animation-delay: 3.8s; }
.city-satellite--east { animation-delay: 4.2s; }
.city-satellite--south { animation-delay: 4.6s; }

.satellite-side,
.satellite-top {
  stroke: rgba(187, 101, 255, .76);
  stroke-width: .72;
  stroke-linejoin: round;
}

.satellite-side { fill: url(#cityPlatformSide); }
.satellite-top { fill: url(#cityPlatform); }

.satellite-grid {
  fill: url(#cityGrid);
  stroke: rgba(190, 109, 255, .28);
  stroke-width: .5;
}

.city-bridge {
  fill: rgba(115, 42, 195, .14);
  stroke: rgba(204, 132, 255, .62);
  stroke-width: .72;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: city-bridge-in 2.8s cubic-bezier(.16, .72, .22, 1) var(--bridge-delay, 10.2s) forwards;
}

.city-bridge--satellite {
  stroke-width: .82;
}

.city-bridge-lanes {
  fill: none;
  stroke: rgba(232, 195, 255, .82);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.city-bridge-rails {
  fill: none;
  stroke: rgba(221, 169, 255, .88);
  stroke-width: .8;
  stroke-linecap: round;
}

.city-bridge-lanes path,
.city-bridge-rails path {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: city-bridge-detail-in 2.2s cubic-bezier(.2, .68, .25, 1) var(--bridge-delay, 10.55s) forwards;
}

.city-bridge-lanes path {
  --bridge-detail-opacity: .82;
}

.city-bridge-rails path {
  --bridge-detail-opacity: .9;
}

.city-structure {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: city-structure-rise 3.9s cubic-bezier(.16, .72, .22, 1) var(--build-delay) forwards;
}

.structure--rear-left {
  transform-box: view-box;
  animation: city-building-seven-rise 3.6s cubic-bezier(.25, .46, .45, .94) var(--build-delay) forwards;
}

.structure-body {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 1.1s cubic-bezier(.2, .75, .3, 1), filter 1.1s ease;
}

.city-structure .face-left,
.city-structure .face-right,
.city-structure .face-top {
  fill-opacity: 1;
  stroke: rgba(197, 116, 255, .86);
  stroke-width: .78;
  stroke-linejoin: round;
}

.city-structure .face-left {
  fill: #241035;
}

.city-structure .face-right {
  fill: #12091d;
}

.city-structure .face-top {
  fill: #4a2467;
}

.city-structure .face-inset {
  fill: #08050f;
  stroke: rgba(218, 160, 255, .64);
  stroke-width: .55;
}

.city-structure .ui-line,
.city-structure .core-line,
.city-structure .tower-spire {
  fill: none;
  stroke: rgba(227, 186, 255, .68);
  stroke-width: .72;
  stroke-linecap: round;
}

.city-structure .ui-line-bright {
  stroke: #d79aff;
  stroke-width: 1.1;
  filter: url(#cityGlow);
}

.city-structure .core-line {
  stroke: #b659ff;
  stroke-width: 1.2;
  filter: url(#cityGlow);
}

.city-structure .ui-orb,
.city-structure .ui-image {
  fill: rgba(190, 106, 255, .42);
  stroke: #d79cff;
  stroke-width: .55;
}

.city-structure--central .structure-body {
  filter: none;
}

.city-structure--central:not(.is-built) .structure-body {
  filter: none;
}

.city-structure--central:not(.is-built) .tower-backglow,
.city-structure--central:not(.is-built) .tower-halo,
.city-structure--central:not(.is-built) .building-window-flicker,
.city-structure--central:not(.is-built) .building-window-pulse path {
  animation: none;
  opacity: 0;
}

.building-door {
  fill: #08050f;
  stroke: rgba(229, 188, 255, .88);
  stroke-width: .72;
  stroke-linejoin: round;
}

.building-door--windowed {
  fill: rgba(177, 105, 226, .52);
  stroke: rgba(231, 195, 255, .78);
  stroke-width: .48;
}

.building-door--double {
  fill: rgba(177, 105, 226, .52);
  stroke-linejoin: round;
}

.building-window {
  fill: rgba(159, 86, 213, .74);
  stroke: rgba(222, 172, 255, .6);
  stroke-width: .38;
  stroke-linejoin: round;
}

.building-window--grid {
  fill: rgba(177, 105, 226, .78);
  stroke: rgba(231, 195, 255, .52);
  stroke-width: .3;
}

.building-window-flicker {
  fill: rgba(247, 222, 255, .98);
  filter: url(#cityGlow);
  opacity: 0;
}

.services-city.is-atmosphere-active .building-window-flicker {
  animation: city-window-flicker var(--flicker-duration) ease-in-out var(--flicker-delay) infinite;
}

.building-window-pulse path {
  fill: rgba(250, 230, 255, 1);
  stroke: rgba(255, 241, 255, .72);
  stroke-width: .35;
  filter: url(#cityGlow);
  opacity: 0;
}

.services-city.is-atmosphere-active .building-window-pulse path {
  animation: city-window-sweep var(--pulse-duration) ease-in-out var(--pulse-delay) infinite;
}

.city-structure--central {
  opacity: 1;
  transform: scale(.82);
  animation: none;
}

.central-rise-motion {
  opacity: 0;
  transform-box: view-box;
  will-change: transform, opacity;
  animation: city-central-rise-clean 3.9s cubic-bezier(.16, .72, .22, 1) var(--build-delay) forwards;
}

.city-layer--energy {
  transform: translate(var(--city-front-x), var(--city-front-y));
}

.energy-array,
.wind-turbine,
.energy-hub,
.energy-service-line,
.antenna-array {
  opacity: 0;
  animation: city-energy-in 2.8s ease-out 12.6s forwards;
}

.energy-array--services { animation-delay: 13s; }
.energy-array--front { animation-delay: 13.4s; }

.solar-panel {
  fill: rgba(124, 55, 203, .48);
  stroke: rgba(232, 194, 255, .92);
  stroke-width: .7;
}

.solar-grid,
.equipment-stand,
.turbine-mast,
.turbine-blades,
.antenna-mast {
  fill: none;
  stroke: rgba(224, 174, 255, .82);
  stroke-width: .7;
  stroke-linecap: round;
}

.turbine-blades {
  transform-box: view-box;
  transform-origin: 0 7px;
  animation: city-turbine-spin 4.8s linear 13.2s infinite;
}

.turbine-hub {
  fill: #e9c5ff;
  filter: url(#cityGlow);
}

.rooftop-addition {
  filter: drop-shadow(0 3px 3px rgba(7, 2, 13, .9));
}

.equipment-stand {
  stroke: rgba(133, 82, 166, .95);
  stroke-width: 1;
}

.antenna-array--data { animation-delay: 13s; }
.antenna-array--nav { animation-delay: 13.4s; }
.antenna-array--central { animation-delay: 13.8s; }

.antenna-mast {
  stroke: rgba(235, 208, 255, .9);
  stroke-width: 1.05;
}

.antenna-mast--primary { stroke-width: 1.35; }

.antenna-beacon {
  fill: #f1ddff;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#cityGlow);
}

.services-city.is-atmosphere-active .antenna-beacon {
  animation: city-antenna-pulse var(--beacon-speed, 6.2s) ease-in-out var(--beacon-delay, 0s) infinite;
  filter: url(#cityGlow) drop-shadow(0 0 4px rgba(203, 125, 255, .88));
}

.services-city.is-atmosphere-active .antenna-mast {
  animation: city-antenna-mast-glow var(--beacon-speed, 6.2s) ease-in-out var(--beacon-delay, 0s) infinite;
}

.services-city.is-atmosphere-active .city-structure--central .antenna-beacon {
  opacity: .7;
  transform: none;
  animation: none;
}

.antenna-array--image { --beacon-speed: 7.3s; --beacon-delay: .3s; }
.antenna-array--data { --beacon-speed: 8.1s; --beacon-delay: 1.7s; }
.antenna-array--nav { --beacon-speed: 6.9s; --beacon-delay: 3.1s; }
.antenna-array--central { --beacon-speed: 8.8s; --beacon-delay: 1s; }
.antenna-array--satellite-west { --beacon-speed: 9.7s; --beacon-delay: 4.2s; }
.antenna-array--satellite-east { --beacon-speed: 7.9s; --beacon-delay: 2.5s; }

.energy-hub {
  fill: rgba(111, 40, 185, .34);
  stroke: rgba(220, 158, 255, .8);
  stroke-width: .7;
  filter: url(#cityGlow);
}

.energy-service-line {
  fill: none;
  stroke: rgba(205, 132, 255, .68);
  stroke-width: .72;
  stroke-dasharray: 3 3;
  animation-delay: 13.8s;
}

.utility-grid {
  opacity: 0;
  animation: city-energy-in 2.8s ease-out 13.4s forwards;
}

.utility-node {
  fill: rgba(105, 38, 172, .82);
  stroke: rgba(226, 176, 255, .9);
  stroke-width: .75;
}

.utility-conduit {
  fill: none;
  stroke: rgba(188, 105, 243, .72);
  stroke-width: .75;
  stroke-dasharray: 3 3;
}

.city-structure--central .central-face {
  stroke: rgba(202, 136, 241, .78);
  stroke-width: .82;
}

.city-structure--central .crown-face {
  fill-opacity: 1;
}

.tower-halo {
  opacity: 0;
  animation: city-central-awaken 3.5s ease-out 11.5s forwards, city-central-idle 8s ease-in-out 15s infinite alternate;
}

.tower-backglow {
  fill: url(#cityHalo);
  filter: blur(10px);
  opacity: .16;
  transform-box: fill-box;
  transform-origin: center;
  animation: city-tower-breathe 9.5s ease-in-out -4s infinite alternate;
}

.city-edge-pulses {
  fill: none;
  pointer-events: none;
}

.edge-pulse {
  stroke: rgba(238, 201, 255, .86);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 3 88;
  filter: url(#cityGlow);
  animation: city-edge-travel 11s linear -2s infinite;
}

.edge-pulse--two { animation-duration: 14s; animation-delay: -8s; }
.edge-pulse--three { animation-duration: 9s; animation-delay: -5s; opacity: .6; }

.data-link {
  fill: none;
  stroke: rgba(185, 99, 243, .18);
  stroke-width: .6;
  stroke-dasharray: 2 5;
}

.data-particle {
  fill: #f1d5ff;
  filter: url(#cityGlow);
  offset-rotate: 0deg;
  opacity: .75;
}

.data-particle--one {
  offset-path: path("M79 302 Q116 269 172 197");
}

.data-particle--two {
  offset-path: path("M712 304 Q775 273 828 221");
}

.services-city.is-atmosphere-active .data-particle--one {
  animation: city-data-travel 10.8s ease-in-out 2.4s infinite;
}

.services-city.is-atmosphere-active .data-particle--two {
  animation: city-data-travel 13.3s ease-in-out 6.8s infinite reverse;
}

.city-bridge-data-pulses {
  pointer-events: none;
}

.bridge-data-pulse {
  fill: #f7e7ff;
  filter: url(#cityGlow) drop-shadow(0 0 3px rgba(196, 103, 255, .9));
  opacity: 0;
  offset-rotate: 0deg;
}

.bridge-data-pulse--west { offset-path: path("M110 316 L149 316"); }
.bridge-data-pulse--north { offset-path: path("M198 200 L234 272"); }
.bridge-data-pulse--east { offset-path: path("M802 236 L779 290"); }
.bridge-data-pulse--south { offset-path: path("M746 410 L708 350"); }

.services-city.is-atmosphere-active .bridge-data-pulse {
  animation: city-bridge-data-travel var(--data-duration) cubic-bezier(.38, 0, .25, 1) var(--data-delay) infinite;
}

.bridge-data-trail {
  fill: none;
  stroke: rgba(218, 151, 255, .6);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  opacity: 0;
  filter: url(#cityGlow);
}

.services-city.is-atmosphere-active .bridge-data-trail {
  animation: city-bridge-data-trail var(--data-duration) ease-in-out var(--data-delay) infinite;
}

.central-core {
  fill: url(#cityCore);
  opacity: 0;
  filter: url(#cityGlow);
  animation: city-core-in 3.7s ease-out 11.2s forwards;
}

.central-core--right {
  opacity: 0;
  animation-delay: 11.6s, 17.1s;
}

.central-screen {
  fill: #10091a !important;
}

.tower-spire {
  stroke: #e5b7ff !important;
  stroke-width: 1.2 !important;
  filter: url(#cityGlow);
}

.city-beacon {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    city-beacon-in 2.5s ease-out 12.3s forwards,
    city-beacon-idle 7.2s ease-in-out 14.8s infinite alternate;
}

.beacon-two { animation-delay: 12.8s, 17.2s; animation-duration: 2.5s, 7.8s; }
.beacon-three { animation-delay: 13.2s, 18.1s; animation-duration: 2.5s, 8.6s; }

.city-particles {
  fill: url(#cityParticle);
  opacity: 0;
}

.services-city.is-atmosphere-active .city-particles {
  animation: city-particles-in 3.4s ease-out forwards;
}

.city-particles--back { --particle-layer-opacity: .62; }
.city-particles--mid { --particle-layer-opacity: .94; }

.city-particles--back circle { filter: blur(.45px); }
.city-particles--mid circle { filter: url(#cityGlow); }
.city-particles circle:nth-child(4n) { opacity: .58; }
.city-particles circle:nth-child(5n + 2) { opacity: .8; }

.services-city.is-atmosphere-active .city-particles circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: city-particle-drift-a 18s ease-in-out -7s infinite;
}

.services-city.is-atmosphere-active .city-particles circle:nth-child(3n) {
  animation-name: city-particle-drift-b;
  animation-delay: -13s;
  animation-duration: 23s;
}

.services-city.is-atmosphere-active .city-particles circle:nth-child(3n + 2) {
  animation-name: city-particle-drift-c;
  animation-delay: -4s;
  animation-duration: 27s;
}

.city-particle-streaks {
  fill: none;
  pointer-events: none;
}

.city-particle-streaks path {
  stroke: rgba(202, 129, 255, .22);
  stroke-width: .55;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  opacity: 0;
}

.services-city.is-atmosphere-active .city-particle-streaks path {
  animation: city-particle-streak var(--streak-duration) ease-in-out var(--streak-delay) infinite;
}

.city-reflection {
  position: absolute;
  right: 9%;
  bottom: 6%;
  left: 15%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at calc(50% + var(--city-reflection-x)) 50%, rgba(179, 79, 255, .26), transparent 66%);
  filter: blur(17px);
  opacity: 0;
  animation: city-reflection-in 4s ease-out 12s forwards;
}

.services-city.is-paused *,
.services-city.is-paused *::before,
.services-city.is-paused *::after {
  animation-play-state: paused !important;
}

@media (hover: hover) and (pointer: fine) {
  .city-structure:not(.city-structure--central):hover .structure-body,
  .city-structure:not(.city-structure--central).is-near .structure-body {
    filter: drop-shadow(0 0 7px rgba(189, 95, 255, .5));
    transform: translateY(-2px);
  }
}

@keyframes city-atmosphere-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes city-atmosphere-idle {
  to { opacity: .68; transform: scale(1.035); }
}

@keyframes city-model-idle {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -3px, 0); }
}

@keyframes city-shadow-in {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: .72; transform: scale(1); }
}

@keyframes city-underlight-in {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: .72; transform: scale(1); }
}

@keyframes city-underlight-idle {
  to { opacity: .46; transform: scaleX(.94); }
}

@keyframes city-platform-in {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: 1; transform: none; }
}

@keyframes city-grid-in {
  from { opacity: 0; }
  to { opacity: .78; }
}

@keyframes city-blueprint-in {
  from { opacity: 0; stroke-dashoffset: 220; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes city-dust-drift {
  0%, 100% { opacity: .1; transform: translate3d(0, 10px, 0) scale(.82); }
  28% { opacity: var(--alpha); transform: translate3d(var(--drift-mid), -5px, 0) scale(.96); }
  61% { opacity: .18; transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.12); }
  82% { opacity: var(--alpha); transform: translate3d(4px, -8px, 0) scale(.9); }
}

@keyframes city-satellite-in {
  from { opacity: 0; transform: translateY(22px) scale(.92); }
  to { opacity: 1; transform: none; }
}

@keyframes city-bridge-in {
  0% { opacity: 0; transform: translateY(12px) scale(.68); }
  68% { opacity: .82; transform: translateY(-1px) scale(1.025); }
  100% { opacity: .9; transform: none; }
}

@keyframes city-bridge-detail-in {
  from { opacity: 0; transform: translateY(7px) scale(.78); }
  to { opacity: var(--bridge-detail-opacity, .9); transform: none; }
}

@keyframes city-nodes-in {
  to { opacity: .92; }
}

@keyframes city-node-idle {
  to { opacity: .42; }
}

@keyframes city-structure-rise {
  0% { opacity: 0; transform: translateY(55px) scaleY(.04); }
  24% { opacity: .28; }
  70% { opacity: .92; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes city-building-seven-rise {
  from { opacity: 0; transform: translateY(42px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes city-central-rise-clean {
  from { opacity: 0; transform: translate(0, 55px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes city-energy-in {
  from { opacity: 0; }
  to { opacity: .9; }
}

@keyframes city-turbine-spin {
  to { transform: rotate(360deg); }
}

@keyframes city-antenna-pulse {
  0%, 100% { opacity: .22; transform: scale(.82); }
  42% { opacity: .48; transform: scale(1.05); }
  58% { opacity: 1; transform: scale(1.85); }
  74% { opacity: .36; transform: scale(.94); }
}

@keyframes city-antenna-mast-glow {
  0%, 100% { stroke: rgba(235, 208, 255, .64); filter: drop-shadow(0 0 0 rgba(185, 91, 255, 0)); }
  58% { stroke: rgba(246, 226, 255, .98); filter: drop-shadow(0 0 3px rgba(185, 91, 255, .7)); }
}

@keyframes city-window-flicker {
  0%, 62%, 100% { opacity: 0; }
  69% { opacity: .2; }
  76% { opacity: .96; }
  88% { opacity: .34; }
  94% { opacity: 0; }
}

@keyframes city-window-sweep {
  0%, 55%, 100% { opacity: 0; }
  62% { opacity: .18; }
  70% { opacity: 1; }
  82% { opacity: .36; }
  90% { opacity: 0; }
}

@keyframes city-edge-travel {
  to { stroke-dashoffset: -182; }
}

@keyframes city-data-travel {
  0%, 10% { offset-distance: 0%; opacity: 0; }
  18%, 82% { opacity: .8; }
  90%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes city-bridge-data-travel {
  0%, 14% { offset-distance: 0%; opacity: 0; }
  22% { opacity: .95; }
  48% { opacity: .8; }
  68% { offset-distance: 100%; opacity: .9; }
  78%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes city-bridge-data-trail {
  0%, 14% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  24% { opacity: .18; stroke-dasharray: 9 91; }
  64% { opacity: .32; stroke-dasharray: 16 84; stroke-dashoffset: -70; }
  78%, 100% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: -100; }
}

@keyframes city-tower-breathe {
  to { opacity: .29; transform: scale(1.08); }
}

@keyframes city-central-awaken {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: .42; transform: scale(.86); }
}

@keyframes city-central-idle {
  to { opacity: .62; transform: scale(.96); }
}

@keyframes city-core-in {
  from { opacity: 0; }
  to { opacity: .9; }
}

@keyframes city-core-idle {
  to { opacity: .56; }
}

@keyframes city-beacon-in {
  to { opacity: .92; }
}

@keyframes city-beacon-idle {
  to { opacity: .45; transform: translate3d(6px, -5px, 0) scale(.76); }
}

@keyframes city-particles-in {
  to { opacity: var(--particle-layer-opacity, .7); }
}

@keyframes city-particle-drift-a {
  0%, 100% { opacity: .48; transform: translate3d(0, 8px, 0) scale(.82); }
  28% { opacity: .92; transform: translate3d(18px, -8px, 0) scale(1.08); }
  61% { opacity: .62; transform: translate3d(-12px, -28px, 0) scale(.9); }
  82% { opacity: .78; transform: translate3d(9px, -17px, 0) scale(1); }
}

@keyframes city-particle-drift-b {
  0%, 100% { opacity: .36; transform: translate3d(5px, 2px, 0) scale(.76); }
  34% { opacity: .8; transform: translate3d(-20px, -17px, 0) scale(1.02); }
  68% { opacity: .52; transform: translate3d(15px, -35px, 0) scale(.84); }
  86% { opacity: .7; transform: translate3d(-6px, -23px, 0) scale(.94); }
}

@keyframes city-particle-drift-c {
  0%, 100% { opacity: .44; transform: translate3d(-4px, 7px, 0) scale(.86); }
  25% { opacity: .72; transform: translate3d(12px, -9px, 0) scale(.98); }
  52% { opacity: .88; transform: translate3d(24px, -25px, 0) scale(1.12); }
  79% { opacity: .54; transform: translate3d(-16px, -14px, 0) scale(.92); }
}

@keyframes city-particle-streak {
  0%, 56%, 100% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  62% { opacity: .1; stroke-dasharray: 14 86; }
  68% { opacity: .22; stroke-dasharray: 34 66; stroke-dashoffset: -28; }
  75% { opacity: .08; stroke-dasharray: 12 88; stroke-dashoffset: -78; }
  81% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: -100; }
}

@keyframes city-reflection-in {
  from { opacity: 0; transform: scaleX(.76); }
  to { opacity: .8; transform: scaleX(1); }
}

@keyframes city-reflection-idle {
  to { opacity: .47; transform: scaleX(.92); }
}

@media (max-width: 1080px) {
  .services-hero-copy {
    left: 4.5%;
    width: 34vw;
  }

  .services-page .services-hero h1 {
    font-size: clamp(2.15rem, 4.5vw, 3.1rem);
  }

  .services-city {
    right: -9%;
    left: 27%;
  }
}

@media (max-width: 800px) {
  .services-page .services-hero {
    height: 480px;
    min-height: 0;
    padding: 0;
  }

  .services-hero-copy {
    top: 42px;
    left: 5%;
    width: 43%;
    max-width: 330px !important;
    transform: none;
  }

  .services-page .services-hero h1 {
    margin-bottom: 13px;
    font-size: clamp(2rem, 6.2vw, 2.8rem);
  }

  .services-hero-copy > p:not(.eyebrow) {
    margin-bottom: 17px;
    font-size: .88rem;
  }

  .services-page .services-hero-actions .button {
    min-height: 43px;
    padding: 9px 14px;
    font-size: .76rem;
  }

  .services-city {
    top: 4%;
    right: -6%;
    bottom: -5%;
    left: 25%;
  }

  .city-priority-low {
    display: none;
  }

  .city-atmosphere {
    filter: blur(13px);
  }

  .city-stage {
    transform: none;
    will-change: auto;
  }
}

@media (max-width: 560px) {
  .services-page .services-hero {
    height: 390px;
  }

  .services-page .services-hero::before {
    opacity: .42;
  }

  .services-hero-copy {
    top: 22px;
    right: 5%;
    left: 5%;
    width: auto;
    max-width: none !important;
  }

  .services-page .services-hero .eyebrow {
    margin-bottom: 7px;
    font-size: .6rem;
  }

  .services-page .services-hero h1 {
    max-width: 360px;
    margin-bottom: 9px;
    font-size: clamp(1.9rem, 9vw, 2.35rem);
    line-height: 1;
  }

  .services-hero-copy > p:not(.eyebrow) {
    max-width: 300px;
    margin-bottom: 12px;
    font-size: .77rem;
    line-height: 1.45;
  }

  .services-page .services-hero-actions {
    display: block;
  }

  .services-page .services-hero-actions .button {
    width: auto;
    min-height: 38px;
    padding: 7px 13px;
    font-size: .7rem;
  }

  .services-page .services-hero-actions .secondary-button {
    display: none;
  }

  .services-city {
    top: 130px;
    right: -8%;
    bottom: -8%;
    left: -4%;
  }

  .city-priority-medium {
    display: none;
  }

  .city-satellite--north,
  .city-satellite--south,
  .energy-array--front {
    display: none;
  }

  .city-particles circle:nth-child(n + 5) {
    display: none;
  }

  .city-particle-streaks path:nth-child(n + 3) { display: none; }

  .city-dust i:nth-child(n + 4),
  .city-dust--front i:nth-child(n + 2) {
    display: none;
  }

  .city-atmosphere {
    filter: blur(9px);
  }

}

/* Keep the SVG timeline at its first frame until JavaScript has measured the hero. */
.services-city.is-pending *,
.services-city.is-pending *::before,
.services-city.is-pending *::after {
  animation-play-state: paused !important;
}

/* A complete, non-black final frame if setup is unavailable or fails. */
.services-city.is-fallback *,
.services-city.is-fallback *::before,
.services-city.is-fallback *::after {
  animation: none !important;
  transition: none !important;
}

.services-city.is-fallback .city-atmosphere,
.services-city.is-fallback .city-dust,
.services-city.is-fallback .city-shadow,
.services-city.is-fallback .city-underlight,
.services-city.is-fallback .platform-side,
.services-city.is-fallback .platform-edge,
.services-city.is-fallback .platform-grid,
.services-city.is-fallback .platform-inset,
.services-city.is-fallback .city-bridge,
.services-city.is-fallback .city-bridge-lanes,
.services-city.is-fallback .city-bridge-rails,
.services-city.is-fallback .city-satellite,
.services-city.is-fallback .city-structure,
.services-city.is-fallback .energy-array,
.services-city.is-fallback .wind-turbine,
.services-city.is-fallback .energy-hub,
.services-city.is-fallback .energy-service-line,
.services-city.is-fallback .antenna-array,
.services-city.is-fallback .utility-grid,
.services-city.is-fallback .tower-halo,
.services-city.is-fallback .tower-backglow,
.services-city.is-fallback .central-core,
.services-city.is-fallback .city-beacon,
.services-city.is-fallback .city-particles,
.services-city.is-fallback .city-reflection {
  opacity: 1;
  transform: none;
}

.services-city.is-fallback .city-shadow { opacity: .72; }
.services-city.is-fallback .city-underlight { opacity: .58; }
.services-city.is-fallback .platform-grid { opacity: .78; }
.services-city.is-fallback .city-structure--central { transform: scale(.82); }
.services-city.is-fallback .central-rise-motion { opacity: 1; transform: none; }
.services-city.is-fallback .city-bridge { opacity: .9; }
.services-city.is-fallback .city-bridge-lanes path { opacity: .82; transform: none; }
.services-city.is-fallback .city-bridge-rails path { opacity: .9; transform: none; }
.services-city.is-fallback .city-particles { opacity: .48; }
.services-city.is-fallback .city-dust i { opacity: var(--alpha); }
.services-city.is-fallback .city-reflection { opacity: .65; }

.services-city.has-no-motion-path .data-particle,
.services-city.has-no-motion-path .bridge-data-pulse,
.services-city.has-no-motion-path .bridge-data-trail {
  display: none;
}

@media (max-width: 800px), (hover: none) and (pointer: coarse), (max-height: 500px) and (max-width: 900px) {
  /* Keep the city build on mobile, but bring the first visible motion forward. */
  .services-city.is-mobile-active .platform-side,
  .services-city.is-mobile-active .platform-edge {
    animation-delay: 0s;
    animation-duration: 2.2s;
  }
  .services-city.is-mobile-active .platform-grid {
    animation-delay: .15s;
    animation-duration: 2.3s;
  }
  .services-city.is-mobile-active .platform-inset {
    animation-delay: .3s;
    animation-duration: 2.4s;
  }
  .services-city.is-mobile-active .city-satellite {
    animation-delay: .45s;
    animation-duration: 2.5s;
  }
  .services-city.is-mobile-active .structure--content { --build-delay: .45s !important; }
  .services-city.is-mobile-active .structure--services { --build-delay: .65s !important; }
  .services-city.is-mobile-active .structure--nav { --build-delay: .85s !important; }
  .services-city.is-mobile-active .city-structure--central { --build-delay: 1.05s !important; }
  .services-city.is-mobile-active .structure--card-left { --build-delay: 1.2s !important; }
  .services-city.is-mobile-active .structure--card-right { --build-delay: 1.35s !important; }
  .services-city.is-mobile-active .city-structure,
  .services-city.is-mobile-active .central-rise-motion {
    animation-duration: 2.8s;
  }
  .services-city.is-mobile-active .energy-array,
  .services-city.is-mobile-active .wind-turbine,
  .services-city.is-mobile-active .energy-hub,
  .services-city.is-mobile-active .energy-service-line,
  .services-city.is-mobile-active .antenna-array,
  .services-city.is-mobile-active .utility-grid {
    animation-delay: 2.1s;
    animation-duration: 2.2s;
  }

  .services-city.is-mobile-active .city-underlight {
    opacity: .5;
    animation: city-underlight-idle 9.6s ease-in-out infinite alternate;
  }
  .services-city.is-mobile-active .tower-halo {
    opacity: .38;
    animation: city-central-idle 10.5s ease-in-out infinite alternate;
  }
  .services-city.is-mobile-active .tower-backglow {
    opacity: .16;
    animation: city-tower-breathe 12s ease-in-out -4s infinite alternate;
  }
  .services-city.is-mobile-active .city-beacon {
    opacity: .68;
    animation: city-beacon-idle 9.2s ease-in-out infinite alternate;
  }
  .services-city.is-mobile-active .city-reflection {
    opacity: .6;
    animation: city-reflection-idle 10.8s ease-in-out infinite alternate;
  }
  .services-city.is-mobile-active .turbine-blades {
    animation: city-turbine-spin 7.5s linear infinite;
  }

  .services-city.is-mobile-active .city-particles--mid circle,
  .services-city.is-mobile-active .building-window-flicker,
  .services-city.is-mobile-active .building-window-pulse path,
  .services-city.is-mobile-active .antenna-beacon {
    filter: none;
  }

  .services-city.is-mobile-active .city-stage {
    transform: none;
    transform-style: flat;
    will-change: auto;
  }

  .services-city.is-mobile-active {
    contain: none;
  }

  .services-city.is-mobile-active .city-model {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-city *,
  .services-city *::before,
  .services-city *::after {
    animation: none !important;
    transition: none !important;
  }

  .city-atmosphere,
  .city-dust,
  .city-shadow,
  .city-underlight,
  .platform-side,
  .platform-edge,
  .platform-grid,
  .platform-inset,
  .city-bridge,
  .city-bridge-lanes,
  .city-bridge-rails,
  .city-satellite,
  .city-structure,
  .energy-array,
  .wind-turbine,
  .energy-hub,
  .energy-service-line,
  .antenna-array,
  .utility-grid,
  .tower-halo,
  .tower-backglow,
  .central-core,
  .city-beacon,
  .city-particles,
  .city-reflection {
    opacity: 1;
    transform: none;
  }

  .city-shadow { opacity: .72; }
  .city-underlight { opacity: .58; }
  .platform-grid { opacity: .78; }
  .city-structure--central { opacity: 1; transform: scale(.82); }
  .central-rise-motion { opacity: 1; transform: none; }
  .city-bridge { opacity: .9; }
  .city-bridge-lanes { opacity: .82; }
  .city-bridge-rails { opacity: .9; }
  .city-bridge-lanes path { opacity: .82; transform: none; }
  .city-bridge-rails path { opacity: .9; transform: none; }
  .city-satellite,
  .energy-array,
  .wind-turbine,
  .energy-hub,
  .energy-service-line,
  .antenna-array,
  .utility-grid { opacity: .9; }
  .tower-halo { opacity: .76; }
  .tower-backglow { opacity: .2; }
  .central-core { opacity: .78; }
  .city-particles { opacity: .48; }
  .city-dust { opacity: 1; }
  .city-dust i { opacity: var(--alpha); }
  .antenna-beacon { opacity: .45; }
  .city-reflection { opacity: .65; }

  .city-stage,
  .city-model,
  .city-layer {
    transform: none !important;
    will-change: auto;
  }
}