/* A single stage for related Drupal Views, not three vertical block cards. */
/* The related field fades into the shared main canvas at both edges.
   Its native ::before/::after own the continuous orbits and light sweep;
   the section gradient must not be resized or scrolled by global CSS. */
.apx-related{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(38px,4vw,58px) 0;
  background:transparent;
}
.apx-related::before{content:none}
.apx-related::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 32%,#d7a7ff08 49%,transparent 65%);background-size:220% 100%;animation:apxShineBand 13s linear infinite}
@keyframes apxShowOrbits{to{transform:rotate(20deg)}}
.apx-related__header{margin:0 0 28px}.apx-related__header h2{font-size:clamp(38px,5vw,72px);line-height:1.06;letter-spacing:-.055em;margin:13px 0 0}
.apx-related__header .apx-mark{color:#ffdf65}
.apx-related .apx-container{position:relative;z-index:1}
/* JS adds apx-showcase-ready; fallback retains native blocks if JS is disabled. */
.apx-related[data-apx-related]{--spot:#b589ff}
.apx-related__tabs{grid-column:1;display:grid;gap:10px;align-self:start}
.apx-showcase-tab{width:100%;padding:17px 20px;min-height:64px;text-align:left;cursor:pointer;color:#ecdeff;font-weight:750;font-size:clamp(14px,1.2vw,18px);line-height:1.35;background:#ffffff08;border:1px solid #ae8adb55;border-radius:15px;transition:transform 1.1s var(--apx-silk),border-color .9s ease,background 1.2s ease,box-shadow 1.2s ease}
.apx-showcase-tab:hover{transform:scale(1.008);border-color:#FFD700;color:#fff;box-shadow:0 0 18px #ffd70027}
.apx-showcase-tab:focus-visible{outline:2px solid #ffe9a2;outline-offset:3px}
.apx-showcase-tab[aria-selected=true]{color:#fff;background:linear-gradient(100deg,#7140a9,#38294e);border-color:#FFD700;box-shadow:inset 4px 0 #FFD700,0 14px 32px #0004}


@media(max-width:820px){.apx-related.apx-showcase-ready>.apx-container{display:block}.apx-related__tabs{display:flex;overflow-x:auto;gap:8px;margin:0 0 15px;scrollbar-width:thin}.apx-showcase-tab{min-width:180px;flex:0 0 70%;min-height:60px}.apx-related__header h2{font-size:clamp(37px,9vw,58px)}}

/* Views tab interface is owned only by showcase.css.
   Drupal Views remains the source of all panel content. */
/* Service uses a slightly taller target, while the mobile rail remains scrollable. */
.apx-site--service .apx-showcase-tab{flex:0 1 auto;width:100%;white-space:normal;max-width:none;border:1px solid #c7a5ee55;border-radius:14px;background:#e7d3ff0c;font-size:clamp(15px,1.2vw,18px);font-weight:710;padding:18px 22px;text-align:left;transition:transform 1.1s var(--apx-silk),border-color .9s ease,background 1.2s ease,box-shadow 1.2s ease}
.apx-site--service .apx-showcase-tab:hover{transform:scale(1.008);border-color:#dec3ffcc;background:#9765c03d}
@media(max-width:760px){
 .apx-site--service .apx-showcase-tab{flex:0 0 230px;width:230px}
}

/* Drupal Views panel: single canonical owner; editorial fields remain native. */
.apx-site .apx-related__track{
  grid-column:2;position:relative;isolation:isolate;min-width:0;min-height:280px;
  overflow:hidden;border-radius:24px;padding:clamp(20px,2.6vw,38px);
  border:1px solid #bfb2f093;
  background:linear-gradient(145deg,#2d2449,#202a48 75%,#142d40);
  box-shadow:0 30px 85px #08051670,inset 0 1px #ffffff30;
  transition:border-color 1.35s cubic-bezier(.22,1,.36,1),box-shadow 1.45s ease,translate 1.4s cubic-bezier(.22,1,.36,1),transform 1.25s cubic-bezier(.22,1,.36,1);
}
.apx-site .apx-related__track::before{
  content:"";position:absolute;inset:-35%;pointer-events:none;
  background:radial-gradient(circle at var(--mx,68%) var(--my,10%),#af9fff2a,transparent 43%);
  animation:apxSpotDrift 16s ease-in-out infinite alternate;
}
.apx-site .apx-related__track::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,68%) var(--my,24%),#ffe79a24,#af93ff11 42%,transparent 75%),linear-gradient(115deg,transparent 24%,#fff7c00e 46%,transparent 69%);
  opacity:.7;transition:opacity 1.5s ease;
}
.apx-site .apx-related__track:is(:hover,:focus-within){
  transform:perspective(1250px) rotateX(var(--apx-tilt-x,0deg)) rotateY(var(--apx-tilt-y,0deg)) scale(1.008);
  border-color:#d8b8ffb0;box-shadow:0 30px 85px #08051670,0 0 37px #bd91ef21,inset 0 1px #ffffff35;
}
.apx-site .apx-related__track:is(:hover,:focus-within)::after{opacity:1}
/* Panel opacity, blur and content entrances are exclusively owned by
   showcase.js (WAAPI). CSS is responsible for natural layout only. */
.apx-site .apx-related__track .apx-showcase-panel{position:relative;z-index:2}
.apx-site .apx-related__track .apx-showcase-panel[hidden]{display:none}

.apx-site .apx-related__track :where(.views-row,.view-content){display:block;max-width:none;width:100%;background:none;border:0;box-shadow:none;padding:0;margin:0}
.apx-site .apx-related__track .apx-showcase-panel .views-row{display:flex;flex-direction:column;gap:0}
.apx-site .apx-related__track :is(.views-field-title,h2,h3){
  color:#fff5c4;text-shadow:0 6px 29px #0008;
  text-align:center;font-size:clamp(26px,2.45vw,37px);line-height:1.22;
  font-weight:800;letter-spacing:-.025em;margin:4px auto 24px;max-width:26ch;
}
.apx-site .apx-related__track .views-field-title a{display:inline-block;text-decoration:none;border-bottom:1px solid #ffe07d88;padding-bottom:7px}
.apx-site .apx-related__track :is(.views-field-field-image,picture,img){border-radius:15px}
.apx-site .apx-related__track .views-field-field-image{
  display:block;position:relative;isolation:isolate;overflow:hidden;
  margin:0 0 24px;border-radius:15px;background:radial-gradient(ellipse at center,#162b47,#050d19 75%);
}
.apx-site .apx-related__track .views-field-field-image::after{
  content:"";position:absolute;inset:-50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,#b9d7ff29 48%,transparent 57%);
  transform:translateX(-67%) rotate(9deg);animation:apx20ImageGleam 14s ease-in-out infinite;
}
.apx-site .apx-related__track :is(img,picture){display:block;width:100%;height:auto;max-width:100%;overflow:hidden}
.apx-site .apx-related__track img{
  max-height:460px;object-fit:contain;transform-origin:50% 45%;
  transition:transform 2.3s cubic-bezier(.22,1,.36,1),filter 2.3s ease;
}
.apx-site .apx-related__track:is(:hover,:focus-within) img{transform:scale(1.045) rotate(.32deg);filter:brightness(1.1) saturate(1.2)}
.apx-site .apx-related__track :is(.views-field-body,.views-field-field-body){
  display:block;max-width:none;text-align:center;font-size:clamp(14px,1.1vw,17px);
  line-height:1.8;color:#dbe8f4;letter-spacing:.005em;
  border:0;border-top:1px solid #ffd56a4a;border-radius:0;
  padding:20px clamp(8px,1vw,16px) 0;margin:17px 0 0;
  background:linear-gradient(180deg,#16243b70,transparent 95%);box-shadow:none;
}
.apx-site .apx-related__track :is(.views-field-body,.views-field-field-body) .field-content{
  display:block;max-width:none;text-align:center;font-size:inherit;line-height:inherit;color:inherit;
}
.apx-site .apx-related__track :is(.views-field-body,.views-field-field-body) p{margin:0 0 .7em}
.apx-site .apx-related__track a{color:#dffafc;text-decoration:none}
.apx-site .apx-related__track a:hover{color:#ffe98b}
@media(min-width:821px){
  .apx-site .apx-related__track{grid-column:2;grid-row:4 / span 2;align-self:stretch}
}
@media(max-width:820px){.apx-site .apx-related__track{padding:20px}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.apx-site .apx-related__track:is(:hover,:focus-within){transform:none}}
@media(max-width:600px){
  .apx-site .apx-related__track :is(.views-field-body,.views-field-field-body){padding-inline:12px}
  .apx-site .apx-related__track :is(.views-field-title,h2,h3){font-size:24px}
}
/* This reveal is a desktop-only enhancement. Without the behavior (or on
   mobile/reduced-motion), server-rendered Views remain immediately visible. */
@media screen and (min-width:1121px) and (prefers-reduced-motion:no-preference){
 html.apx-motion-boot .apx-site .apx-related:not(.apx-related--inview) :is(.apx-related__tabs,.apx-related__track){opacity:0;translate:0 42px;filter:blur(7px)}
 html.apx-motion-boot .apx-site .apx-related :is(.apx-related__tabs,.apx-related__track){transition:opacity 1.65s var(--apx-silk),translate 1.85s var(--apx-silk),filter 1.65s ease,transform 1.35s cubic-bezier(.2,.8,.2,1),border-color 1.35s ease,box-shadow 1.45s ease}
 html.apx-motion-boot .apx-site .apx-related.apx-related--inview :is(.apx-related__tabs,.apx-related__track){opacity:1;translate:0 0;filter:none}
}
@keyframes apxSpotDrift{to{transform:translate(4%,-5%)}}
@keyframes apx20ImageGleam{0%,30%{transform:translateX(-67%) rotate(9deg)}75%,100%{transform:translateX(66%) rotate(9deg)}}
/* Related Views owns its captions and spacing at every breakpoint. */
.apx-site .apx-related .apx-editorial-signal--related{margin:5px 0 28px;color:#fff1ab}
.apx-site .apx-related .apx-region-code--related{margin-top:0;margin-bottom:clamp(25px,3vw,40px)}
@media(max-width:820px){.apx-site .apx-related .apx-region-code--related{margin-top:-14px}}
/* Related Views stage and interactive network console. This component owns both. */
@media (min-width:821px){
 .apx-related.apx-showcase-ready>.apx-container{display:grid;grid-template-columns:minmax(230px,.56fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;column-gap:clamp(20px,3.7vw,60px);row-gap:12px;align-items:start}
 .apx-related.apx-showcase-ready .apx-related__header{grid-column:1/-1;grid-row:1;margin-bottom:2px}
 .apx-site .apx-related .apx-editorial-signal--related{grid-column:1/-1;grid-row:2}
 .apx-site .apx-related .apx-region-code--related{grid-column:1/-1;grid-row:3}
 .apx-site .apx-related__tabs{grid-column:1;grid-row:4;align-self:start}
 .apx-site .apx-related-console{grid-column:1;grid-row:5;align-self:start}
}
.apx-site .apx-related-console{appearance:none;position:relative;isolation:isolate;display:block;width:100%;min-width:0;min-height:224px;margin-top:3px;padding:15px 17px 10px;border-radius:20px;overflow:hidden;cursor:pointer;text-align:left;color:#c3f8ef;background:radial-gradient(ellipse at var(--apx-net-x,55%) var(--apx-net-y,45%),#21688666,transparent 67%),linear-gradient(145deg,#101b37,#172c48 53%,#30234c);border:1px solid #7cecd38a;box-shadow:inset 0 1px #ffffff20,0 18px 42px #07071578;transition:border-color .8s ease,background-color .8s ease,box-shadow .8s ease}
.apx-site .apx-related-console::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#a8fff213 50%,transparent 75%);background-size:250% 100%;animation:apxNetShine 12s linear infinite}
.apx-site .apx-related-console:where(:hover,:focus-visible){border-color:#ffe98c;box-shadow:0 20px 44px #0009,0 0 35px #83f4de2b,inset 0 1px #ffffff4d}
.apx-related-console__head,.apx-related-console__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1;font:800 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em;color:#b5e9e2;white-space:nowrap}
.apx-related-console__head>span:first-child{display:flex;align-items:center;gap:8px}
.apx-related-console__mode{color:#ffe391}
.apx-related-console__led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#78f4d6;box-shadow:0 0 0 4px #78f4d61c,0 0 18px #78f4d6;animation:apxNetLed 2.7s ease-in-out infinite}
.apx-related-console__graphic{display:block;width:100%;height:auto;max-height:180px;margin:5px 0 7px;overflow:visible;filter:drop-shadow(0 0 5px #80f8e031);pointer-events:none}
.apx-net-links{stroke-dasharray:9 8;animation:apxNetPackets 11s linear infinite;opacity:.85}
.apx-net-rings{transform-origin:241px 108px;animation:apxNetOrbit 29s linear infinite}
.apx-net-nodes{fill:#a6fef0;stroke:#08283c;stroke-width:3;filter:drop-shadow(0 0 7px #5cf8df)}
.apx-net-nodes circle:nth-child(3){fill:#ffe6a0;animation:apxNetCore 3.8s ease-in-out infinite;transform-origin:241px 108px}
.apx-net-pings{stroke:#8cefe6;stroke-width:2;fill:none;transform-origin:241px 108px}
.apx-net-pings circle{animation:apxNetPing 5.4s ease-out infinite}
.apx-net-pings circle:nth-child(2){animation-delay:-2.7s}
.apx-net-packets circle{animation:apxNetSpark 3.8s ease-in-out infinite alternate}
.apx-net-packets circle:nth-child(2){animation-delay:-1.7s}.apx-net-packets circle:nth-child(3){animation-delay:-3.1s}
.apx-related-console__foot{padding-top:3px;color:#a2b7cd}
.apx-related-console__foot i{font-style:normal;color:#77f7dc;margin:0 6px}
.apx-related-console__hint{color:#ffdc88}
.apx-site .apx-related-console.apx-motion-boost{background:radial-gradient(ellipse at var(--apx-net-x,55%) var(--apx-net-y,45%),#6e427988,transparent 67%),linear-gradient(145deg,#1c2045,#28214f 65%,#124e50);border-color:#ffd980}
.apx-motion-boost .apx-net-links{animation-duration:2.5s;stroke-width:2.6}.apx-motion-boost .apx-net-rings{animation-duration:7s}.apx-motion-boost .apx-net-pings circle{animation-duration:1.9s}.apx-motion-boost .apx-net-packets circle{animation-duration:1.2s}
@keyframes apxNetShine{to{background-position:-250% 0}}
@keyframes apxNetPackets{to{stroke-dashoffset:-153}}
@keyframes apxNetOrbit{to{transform:rotate(360deg)}}
@keyframes apxNetPing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(5.6)}}
@keyframes apxNetCore{50%{transform:scale(1.23)}}
@keyframes apxNetSpark{50%{opacity:.24;transform:translateY(-8px)}}
@media(max-width:820px){.apx-site .apx-related-console{margin:0 0 15px;min-height:0;max-width:560px}.apx-related-console__graphic{max-height:145px}}



/* Keyboard focus is as clear as pointer hover; geometry remains stable. */
.apx-site .apx-related-console:focus-visible{outline:2px solid #ffe9a2;outline-offset:4px}
@media(prefers-reduced-motion:reduce){
 .apx-site .apx-related-console,.apx-site .apx-related-console::before,.apx-related-console__led,.apx-net-links,.apx-net-rings,.apx-net-nodes circle,.apx-net-pings circle,.apx-net-packets circle{animation:none;transition:none}
}

@media(prefers-reduced-motion:reduce){
  .apx-site .apx-showcase-tab{transition:none}
  .apx-site .apx-showcase-tab:hover{transform:none}
  .apx-site .apx-related__track::before,.apx-site .apx-related__track .views-field-field-image::after{animation:none}
  .apx-site .apx-related__track img{animation:none;transition:none}
  .apx-site .apx-related__track .apx-showcase-panel{animation:none;transition:none}
  html.apx-motion-boot .apx-site .apx-related :is(.apx-related__tabs,.apx-related__track){opacity:1;translate:none;filter:none;transition:none}
}

/* v105: the full Views related-services stage receives the same slow,
   unobtrusive motion. Existing tab transitions own transform and opacity. */
@keyframes apxRelatedSway {
  0%,100% { translate: 0 0; }
  28% { translate: 0 -4px; }
  60% { translate: 0 2px; }
}
@media(prefers-reduced-motion:no-preference) {
  .apx-site .apx-related.apx-related--inview .apx-related__track {
    animation:apxRelatedSway 24s ease-in-out infinite;
  }
  .apx-site .apx-related.apx-related--inview .apx-related__track:is(:hover,:focus-within){animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce) {
  .apx-site .apx-related__track {animation:none;translate:none;transition:none}
}

@media(max-width:1120px){
  .apx-site .apx-related.apx-related--inview .apx-related__track{animation:none}
  .apx-site .apx-related__track .views-field-field-image::after{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .apx-site .apx-related__track .views-field-field-image::after{animation:none}
}