/*
 * XGene Stage 9 RC1i — focused corrective release.
 * Scope: definitive Article Contact XGene contrast, Expert single global-shell width,
 * and true CSS 3D governed-404 crystal lattice. Preserves RC1f scrollbar/mobile fixes.
 */

/* 1) Article CTA: force the actual Contact XGene decision action to dark teal
      with white text. JS also applies inline !important styles as a final guard
      against stored Gutenberg/legacy article rules. */
body.single-xg-article .xg-rc1i-contact-cta,
body.single-xg-article a[data-xg-rc1i-cta="contact"],
body.single-xg-article button[data-xg-rc1i-cta="contact"]{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:#066f76!important;background-color:#066f76!important;
  border-color:#055f65!important;text-decoration:none!important;
  opacity:1!important;visibility:visible!important;
  box-shadow:0 9px 22px rgb(6 111 118 / 24%)!important
}
body.single-xg-article .xg-rc1i-contact-cta:hover,
body.single-xg-article .xg-rc1i-contact-cta:focus-visible,
body.single-xg-article a[data-xg-rc1i-cta="contact"]:hover,
body.single-xg-article a[data-xg-rc1i-cta="contact"]:focus-visible{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:#054f55!important;background-color:#054f55!important;
  border-color:#04454a!important
}
body.single-xg-article .xg-rc1i-contact-cta *{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* 2) Expert single: retain full-width background but return all hero and
      downstream content to the canonical XGene 76rem shell. Earlier RCs widened
      this to 86/88rem, which drifted from the global site geometry. */
body.single-xg-expert .xg-expert-hero__grid,
body.single-xg-expert .xg-expert-context>.xg-shell,
body.single-xg-expert .xg190-related>.xg-shell,
body.single-xg-expert .xg-expert-next>.xg-shell{
  width:var(--xg-shell)!important;max-width:none!important;margin-inline:auto!important
}
body.single-xg-expert .xg-expert-hero__grid{
  grid-template-columns:minmax(0,.94fr) minmax(29rem,1.06fr)!important;
  gap:clamp(2.25rem,4vw,4rem)!important
}
body.single-xg-expert .xg-expert-hero h1{font-size:clamp(3.15rem,5vw,5.35rem)!important}
body.single-xg-expert .xg-expert-hero__lead{max-width:36rem!important}

/* 3) Governed 404 — true 3D lattice. 404 label is isolated in its own upper
      corner; crystal lives in a separate lower-left stage so the two cannot overlap. */
.xg-404-3d-scene{
  position:relative;min-height:33rem;overflow:hidden;isolation:isolate;
  border:1px solid rgb(255 255 255 / 18%);border-radius:1.7rem;
  background:
    radial-gradient(circle at 30% 72%,rgb(24 214 223 / 16%),transparent 28%),
    radial-gradient(circle at 78% 18%,rgb(17 93 246 / 15%),transparent 25%),
    linear-gradient(155deg,rgb(255 255 255 / 11%),rgb(255 255 255 / 3%));
  box-shadow:inset 0 1px rgb(255 255 255 / 10%);
}
.xg-404-3d-scene:before{content:"";position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgb(255 255 255 / 12%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 12%) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.xg-404-3d-scene__label{position:absolute;z-index:8;top:2.2rem;right:2.5rem;text-align:right;pointer-events:none}
.xg-404-3d-scene__label strong{display:block;font-size:clamp(6rem,9vw,9rem);line-height:.78;letter-spacing:-.08em;background:linear-gradient(135deg,#fff 5%,#72edf0 58%,#ff9564);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 12px 28px rgb(0 0 0 / 20%))}
.xg-404-3d-scene__label span{display:block;margin-top:.65rem;color:#a8ecee;font-size:.74rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.xg-404-3d-stage{position:absolute;z-index:3;left:3%;bottom:4.2rem;width:68%;height:72%;perspective:900px;perspective-origin:48% 48%;display:grid;place-items:center}
.xg-404-3d-crystal{position:relative;width:1px;height:1px;transform-style:preserve-3d;animation:xg404i-crystal-orbit 13s linear infinite}
.xg-404-3d-atom,.xg-404-3d-bond{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform,opacity}
.xg-404-3d-atom{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 11%,var(--atom) 26%,color-mix(in srgb,var(--atom) 72%,#001d32) 100%);box-shadow:0 0 0 3px rgb(255 255 255 / 18%),0 0 17px color-mix(in srgb,var(--atom) 72%,transparent);animation:xg404i-atom-pulse 2.5s ease-in-out infinite}
.xg-404-3d-atom:after{content:"";position:absolute;inset:5px;border:1px solid rgb(255 255 255 / 40%);border-radius:50%}
.xg-404-3d-bond{height:4px;width:58px;margin-top:-2px;transform-origin:left center;border-radius:999px;background:linear-gradient(90deg,rgb(255 255 255 / 15%),var(--bond),rgb(255 255 255 / 15%));box-shadow:0 0 8px color-mix(in srgb,var(--bond) 42%,transparent);opacity:.72;animation:xg404i-bond-energy 2.8s ease-in-out infinite}
.xg-404-3d-scene__route{position:absolute;z-index:9;bottom:1.35rem;padding:.65rem .9rem;border:1px solid rgb(255 255 255 / 35%);border-radius:.7rem;color:#fff!important;background:rgb(4 46 75 / 76%);font:800 .78rem/1.2 inherit;text-decoration:none!important}
.xg-404-3d-scene__route--primary{left:1.5rem}.xg-404-3d-scene__route--search{right:1.5rem;cursor:pointer}
@keyframes xg404i-crystal-orbit{0%{transform:rotateX(-16deg) rotateY(0deg) rotateZ(-4deg)}50%{transform:rotateX(14deg) rotateY(180deg) rotateZ(4deg)}100%{transform:rotateX(-16deg) rotateY(360deg) rotateZ(-4deg)}}
@keyframes xg404i-atom-pulse{0%,100%{filter:brightness(.92);opacity:.88}50%{filter:brightness(1.25);opacity:1}}
@keyframes xg404i-bond-energy{0%,100%{opacity:.44;filter:brightness(.8)}50%{opacity:.96;filter:brightness(1.32)}}
/* Fully suppress older 404 visual layers in case cached markup/style survives. */
.xg-404-crystal-scene,.xg-404-crystal-wrap,.xg-404-crystal,.xg-404-dog-scene,.xg-404-dog-motion,.xg-404-dog-photo,.xg-404-dog{display:none!important}

@media(max-width:1100px){
  body.single-xg-expert .xg-expert-hero__grid,
  body.single-xg-expert .xg-expert-context>.xg-shell,
  body.single-xg-expert .xg190-related>.xg-shell,
  body.single-xg-expert .xg-expert-next>.xg-shell{width:var(--xg-shell)!important}
  .xg-404-3d-scene{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .xg-404-3d-crystal,.xg-404-3d-atom,.xg-404-3d-bond{animation:none!important}
  .xg-404-3d-crystal{transform:rotateX(-10deg) rotateY(26deg) rotateZ(-3deg)!important}
}