body.motion-black-monolith {
  --matrix-tail-color: rgba(202, 208, 205, 0.46);
  --matrix-lead-color: rgba(255, 255, 255, 0.94);
  min-height: 100%;
  color: #fff;
  background: #000;
  isolation: isolate;
}

.motion-black-monolith .matrix-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  pointer-events: none;
}

.motion-black-monolith.matrix-intro-pending .matrix-canvas {
  opacity: 0.94;
}

.motion-black-monolith.matrix-intro-pending :is(
  .site-header,
  main,
  .site-footer,
  .variant-switcher
) {
  opacity: 0;
}

.motion-black-monolith :is(
  .site-header,
  main,
  .site-footer,
  .variant-switcher
) {
  transition: opacity 300ms ease-out;
}

.motion-black-monolith .matrix-intro--silver {
  background: radial-gradient(circle at 50% 50%, rgba(201, 210, 214, 0.12), transparent 34%);
  opacity: 1;
  transition: opacity 320ms ease-out;
}

.motion-black-monolith .matrix-intro--silver.is-exiting {
  opacity: 0;
  pointer-events: none;
}

.motion-black-monolith .matrix-intro--silver .matrix-intro__title {
  gap: 14px;
  filter: none;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 420ms ease-out, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-black-monolith .matrix-intro--silver.is-title-visible .matrix-intro__title {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.motion-black-monolith .matrix-intro--silver .matrix-intro__title::before {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(76vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(220, 228, 232, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 31%, rgba(194, 204, 209, 0.12) 31.5%, transparent 32.2%);
  box-shadow: 0 0 90px rgba(182, 194, 200, 0.16), inset 0 0 70px rgba(235, 241, 244, 0.05);
  transform: translate(-50%, -50%) scale(0.7) rotate(-10deg);
  animation: silver-matrix-core 1.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
  content: "";
}

.motion-black-monolith .matrix-intro--silver .matrix-intro__title::after {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(88vw, 920px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 207, 212, 0.38), #f1f6f8, rgba(196, 207, 212, 0.38), transparent);
  box-shadow: 0 0 18px rgba(225, 233, 237, 0.82), 0 0 54px rgba(174, 188, 194, 0.36);
  transform: translate(-50%, -50%) scaleX(0);
  animation: silver-matrix-scan 1.28s 120ms cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
  content: "";
}

body.experimental-27-july.matrix-monochrome .matrix-intro--silver .matrix-intro__wordmark-title {
  color: #e7ecef;
  text-shadow: 0 0 7px rgba(242, 247, 249, 0.98), 0 0 28px rgba(196, 207, 212, 0.76), 0 0 82px rgba(157, 172, 179, 0.38);
}

body.experimental-27-july.matrix-monochrome .matrix-intro--silver .matrix-intro__wordmark-subtitle {
  color: rgba(220, 228, 232, 0.92);
  text-shadow: 0 0 18px rgba(183, 196, 202, 0.58);
}

@keyframes silver-matrix-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-18deg); }
  42% { opacity: 0.76; }
  100% { opacity: 0.34; transform: translate(-50%, -50%) scale(1) rotate(8deg); }
}

@keyframes silver-matrix-scan {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); }
}

.motion-black-monolith .site-header,
.motion-black-monolith main,
.motion-black-monolith .site-footer {
  position: relative;
  z-index: 1;
}

.motion-black-monolith .site-header {
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(255, 255, 255, 0.18);
}

.motion-black-monolith .hero {
  position: relative;
  min-height: calc(100svh - var(--locked-header-height, 78px));
  overflow: hidden;
}

.motion-black-monolith .hero::before {
  position: absolute;
  z-index: -1;
  inset: 7% 3%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.56);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.72), 0 34px 100px rgba(0, 0, 0, 0.52);
  content: "";
}

.motion-black-monolith .hero::after {
  position: absolute;
  z-index: 2;
  top: 22%;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.48);
  animation: monolith-hero-scan 620ms ease-out both;
  pointer-events: none;
  content: "";
}

.motion-black-monolith .hero-copy {
  transform: none;
}

.motion-black-monolith .hero-offer-panel {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.72);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.54), inset 0 0 42px rgba(255, 255, 255, 0.025);
}

.motion-black-monolith #hero-title {
  color: #fff;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.15);
}

.motion-black-monolith :is(
  .segment-heading,
  .case-segment__title,
  .editorial-heading
)::before {
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
}

.motion-black-monolith :is(
  .capability-grid article,
  .portfolio-card,
  .editorial-faq__list,
  .lead-modal__scrim,
  .header-menu__panel
) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.motion-black-monolith .capability-grid article,
.motion-black-monolith .portfolio-card,
.motion-black-monolith .editorial-faq__list {
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.motion-black-monolith .business-segment,
.motion-black-monolith .editorial-faq {
  content-visibility: auto;
  contain-intrinsic-height: auto 1100px;
}

.motion-black-monolith.monolith-ready :is(
  .hero-promise,
  .pill-switch,
  .hero-actions,
  .segment-heading,
  .case-segment__title,
  .capability-grid > article,
  .portfolio-card,
  .editorial-faq details
) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 260ms ease-out var(--monolith-delay, 0ms),
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1) var(--monolith-delay, 0ms);
}

.motion-black-monolith.monolith-ready :is(
  .hero-promise,
  .pill-switch,
  .hero-actions,
  .segment-heading,
  .case-segment__title,
  .capability-grid > article,
  .portfolio-card,
  .editorial-faq details
).monolith-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-black-monolith::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms ease-out, transform 420ms ease-out;
  pointer-events: none;
  content: "";
}

.motion-black-monolith.monolith-light-blue::after {
  opacity: 0.32;
  transform: scale(1.05);
  background: radial-gradient(ellipse at 50% 20%, rgba(41, 149, 255, 0.62), transparent 68%);
}

.motion-black-monolith.monolith-light-red::after {
  opacity: 0.3;
  transform: scale(1.05);
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 45, 78, 0.6), transparent 68%);
}

@keyframes monolith-hero-scan {
  from { opacity: 0; transform: translateY(-26px) scaleX(0.2); }
  48% { opacity: 0.86; }
  to { opacity: 0; transform: translateY(96px) scaleX(1); }
}

@media (max-width: 700px) {
  .motion-black-monolith .matrix-canvas {
    opacity: 0.62;
  }

  .motion-black-monolith .hero::before {
    inset: 5% 10px;
  }

  .motion-black-monolith .hero-offer-panel {
    background: rgba(0, 0, 0, 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-black-monolith *,
  .motion-black-monolith *::before,
  .motion-black-monolith *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .motion-black-monolith :is(
    .hero-promise,
    .pill-switch,
    .hero-actions,
    .segment-heading,
    .case-segment__title,
    .capability-grid > article,
    .portfolio-card,
    .editorial-faq details
  ) {
    opacity: 1 !important;
    transform: none !important;
  }
}
