/* Dynamic scene and network motion; Drupal owns visible content and link semantics. */
:root{--apx-v2-ease:cubic-bezier(.22,1,.36,1);}
/* Retain every existing material/background layer; add only an optical edge
   on hover, never a replacement background or a new rectangular underlay. */
@media (hover:hover) and (pointer:fine){
 .apx-site :is(.apx-front-reason,.apx-hub-directory-card,.apx-hub-main-card,.apx-services-tile,.apx-contact-card):hover{
  border-color:#b0f8e57d;box-shadow:0 21px 48px #03091565,0 0 24px #90f8db15,inset 0 1px #ffffff2b;
 }
}
/* Magnetic motion is reserved for general CTAs. Contact messenger buttons
   are owned by contacts.css, not this global link controller. */
.apx-site .apx-button,.apx-site .apx-front-company__cta,.apx-site .apx-contact-scene__card a[href]:not(.contact-btn){
 translate:var(--apx-v2-magnet-x,0px) var(--apx-v2-magnet-y,0px);
 transition:translate .42s var(--apx-v2-ease),transform .5s var(--apx-v2-ease),box-shadow .7s ease,background .5s ease;
}
.apx-site .apx-button{position:relative;isolation:isolate;overflow:hidden}
.apx-site .apx-button::after{content:"";pointer-events:none;position:absolute;inset:-100% auto -100% -80%;width:38%;background:linear-gradient(90deg,transparent,#fff9e87a,transparent);transform:skewX(-22deg);opacity:0}
@media (hover:hover) and (pointer:fine){.apx-site .apx-button:hover::after{animation:apxV2ButtonGlint 1.25s ease-out 1}}
@keyframes apxV2ButtonGlint{0%{left:-80%;opacity:0}28%{opacity:.8}100%{left:150%;opacity:0}}
/* Hero core gains orbiting circuitry. Kept inside the hero instead of an extra substrate. */
.apx-v2-hero-circuits{position:absolute;inset:8%;pointer-events:none;transform:translate3d(var(--apx-v2-hero-x,0px),var(--apx-v2-hero-y,0px),0);transition:transform 1.6s var(--apx-v2-ease)}
.apx-v2-hero-circuits i{position:absolute;display:block;width:8px;height:8px;border-radius:50%;background:#a0f5e1;box-shadow:0 0 20px #7cf5e6;animation:apxV2Pulse 4.8s ease-in-out infinite}
.apx-v2-hero-circuits i:nth-child(1){top:8%;left:30%}
.apx-v2-hero-circuits i:nth-child(2){top:20%;right:8%;background:#ffe58a;animation-delay:1.1s}
.apx-v2-hero-circuits i:nth-child(3){bottom:12%;right:27%;background:#c8adff;animation-delay:2.2s}
.apx-v2-hero-circuits i:nth-child(4){bottom:21%;left:8%;animation-delay:3.2s}
@keyframes apxV2Pulse{0%,100%{opacity:.35;scale:.65}48%{opacity:1;scale:1.2}}
.apx-site .apx-hero__orb{filter:drop-shadow(0 0 24px #76f4d624)}
.apx-site .apx-hero.apx-reactor-on .apx-v2-hero-circuits i{animation-duration:1.8s}
/* Existing headings stay in original server HTML; no word splitting or cloned content. */
.apx-site h1,.apx-site :is(.apx-section-intro,.apx-front-section__heading,.apx-related__header) h2{
 text-shadow:0 0 1px #fff1;transition:filter 1.1s ease,text-shadow 1.5s ease;
}
.apx-site .apx-v2-title-lit{animation:apxV2TitleLight 1.65s var(--apx-v2-ease) 1 both}
@keyframes apxV2TitleLight{from{filter:brightness(.77)}to{filter:brightness(1)}}
.apx-site .apx-mark{background-image:linear-gradient(105deg,#8cf9df,#ffe18b,#bc9cff);background-size:190% auto;animation:apxV2ColorShift 14s ease-in-out infinite alternate;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes apxV2ColorShift{to{background-position:100% 50%}}
/* Front: journey is progressive enhancement of existing CMS-authored steps. */
.apx-site--front .apx-v2-process :is(ol,ul){position:relative;counter-reset:apx-v2-step}
.apx-site--front .apx-v2-process :is(ol,ul)>li{
 position:relative;counter-increment:apx-v2-step;transition:transform 1.1s var(--apx-v2-ease),border-color 1.1s ease,background-color 1.1s ease;
 border-left:2px solid #73eadc32;
}
.apx-site--front .apx-v2-process :is(ol,ul)>li.apx-v2-step-active{
 border-left-color:#ffe18a;transform:translateX(4px);background-color:#84f4db09;
}
.apx-site--front .apx-v2-process :is(ol,ul)>li.apx-v2-step-active::before{color:#ffe18a;box-shadow:0 0 12px #ffe08b30}
/* One continuous active progress rail attached directly to the original
   Drupal-authored steps, not a cloned/replaced process timeline. */
.apx-site--front .apx-v3-process-list{position:relative;isolation:isolate;--apx-v3-progress:0%}
.apx-site--front .apx-v3-process-list::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;pointer-events:none;
  background:linear-gradient(to bottom,#ffe5a3 0 var(--apx-v3-progress),#91eede36 var(--apx-v3-progress) 100%);
  box-shadow:0 0 12px #a4fae428;border-radius:4px;
}
.apx-site--front .apx-v3-process-list>li.apx-v2-step-active{border-left-color:transparent;}
@media(prefers-reduced-motion:reduce){
 .apx-v2-network__lines path[data-apx-v3-route],
 .apx-v2-network[data-apx-v3-route] .apx-v2-network__lines path[data-apx-v3-route]{animation:none;transition:none}
 .apx-site--front .apx-v3-process-list::before{background:#83f4dd80;box-shadow:none}
}

/* Table of contents - active section, preserving existing collapse interaction. */
.apx-site .apx-disclosure--toc .page-toc__link[aria-current="location"]{color:#ffe79a;text-shadow:0 0 14px #f6d46d33}
.apx-site .apx-disclosure--toc .page-toc__item:has(> .page-toc__link[aria-current="location"]){border-left-color:#ffe18a;background-color:#ffe18a0b}
/* Accordion sheen is attached to the actual open disclosure, without a new opaque rectangle. */
.apx-site :is(details[open],.apx-disclosure[open],.apx-disclosure.apx-is-open) > summary{color:#ffe79a}
.apx-site :is(details[open],.apx-disclosure[open],.apx-disclosure.apx-is-open){border-color:#7df9dc48}
/* New IT ecosystem: six real navigable URLs, central drawing has no impact on markup. */
.apx-v2-ecosystem{position:relative;isolation:isolate;padding:clamp(70px,7vw,105px) 0;overflow:clip}
.apx-v2-ecosystem__layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(28px,4vw,70px)}
.apx-v2-ecosystem__intro h2{font-size:clamp(36px,4.4vw,66px);max-width:13ch;line-height:1.08;letter-spacing:-.05em;margin:18px 0 22px;color:#fff}
.apx-v2-ecosystem__intro>p:not(.apx-eyebrow){line-height:1.85;color:#b9ccdc;max-width:42ch}
.apx-v2-ecosystem__hint{font:700 11px/1.6 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;color:#89efdb}
.apx-v2-network{position:relative;display:block;width:100%;aspect-ratio:600/360;min-height:260px;isolation:isolate}
.apx-v2-network__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.apx-v2-network__lines path{fill:none;stroke:#78eadc6b;stroke-width:1.8;stroke-dasharray:7 10;animation:apxV2Route 35s linear infinite}
.apx-v2-network__lines circle{fill:none;stroke:#bb9bfd36;stroke-width:1.2;stroke-dasharray:3 13;transform-origin:center;animation:apxV2Ring 65s linear infinite}
.apx-v2-network__lines circle:last-child{animation-direction:reverse}
@keyframes apxV2Route{to{stroke-dashoffset:-340}}
@keyframes apxV2Ring{to{rotate:360deg}}
.apx-v2-network__hub{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center;width:25%;max-width:135px;aspect-ratio:1;z-index:2;border:1px solid #83eddb76;border-radius:30%;background:radial-gradient(circle at 32% 22%,#3d9f9880,transparent 60%),linear-gradient(140deg,#132842,#221731);transform:rotate(-10deg);box-shadow:inset 0 0 40px #a3e7db14,0 0 60px #62eed630;animation:apxV2Core 10s ease-in-out infinite alternate}
.apx-v2-network__hub b{font:bold clamp(20px,3vw,39px)/1 ui-monospace,monospace;color:#afffea;letter-spacing:-.12em}
.apx-v2-network__hub small{
  font:700 8px/1 ui-monospace,monospace;color:#c6edeb;letter-spacing:.07em;
  white-space:nowrap;transition:color .55s ease;
}
@keyframes apxV2Core{to{transform:rotate(-5deg) translateY(-6px)}}
.apx-site .apx-v2-network__node{--apx-v2-node-scale:1;position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:24%;min-width:80px;min-height:61px;padding:10px 5px;translate:-50% -50%;border:1px solid #79f3db5b;border-radius:13px;background:linear-gradient(140deg,#112738e8,#262740ee);color:#f5fdff;text-align:center;text-decoration:none;box-shadow:inset 0 1px #ffffff18,0 15px 28px #0004;scale:var(--apx-v2-node-scale);transition:scale .65s var(--apx-v2-ease),background .65s,border-color .65s,box-shadow .65s}
.apx-v2-network__node b{font:850 clamp(13px,1.4vw,19px)/1 system-ui,sans-serif;letter-spacing:.08em;color:#ffe696}
.apx-v2-network__node small{font-size:11px;color:#b6d6e3}
.apx-v2-network__node:nth-of-type(1){left:15.83%;top:22.78%}
.apx-v2-network__node:nth-of-type(2){left:50%;top:9.7%}
.apx-v2-network__node:nth-of-type(3){left:86.67%;top:25.55%}
.apx-v2-network__node:nth-of-type(4){left:87.5%;top:78.3%}
.apx-v2-network__node:nth-of-type(5){left:50%;top:89.4%}
.apx-v2-network__node:nth-of-type(6){left:13.3%;top:78.3%}
.apx-v2-network__node:hover,.apx-v2-network__node:focus-visible,.apx-v2-network__node[data-apx-v2-active]{--apx-v2-node-scale:1.07;border-color:#ffe8a0;box-shadow:0 0 25px #ffe19a29,0 12px 32px #0008;outline-offset:3px}
.apx-v2-network__signal{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#ffe5a0;box-shadow:0 0 15px #ffe38a;pointer-events:none;translate:-50% -50%;animation:apxV2Signal 6s ease-in-out infinite}
@keyframes apxV2Signal{0%,100%{opacity:.2;scale:.5}50%{opacity:1;scale:1.4}}
.apx-v2-network:has(.apx-v2-network__node:hover) .apx-v2-network__hub,.apx-v2-network:has(.apx-v2-network__node:focus-visible) .apx-v2-network__hub{box-shadow:inset 0 0 40px #a3e7db14,0 0 85px #ffe7a354}
/* Motion & Interaction 2.1 — energy travels over the *existing* six network links.
   SVG paths are transparent and cannot form rectangular section substrates. */
.apx-v2-network__lines path[data-apx-v3-route]{
  stroke:#89f1db66;stroke-width:1.9;transition:stroke .55s ease,stroke-width .55s ease,opacity .55s ease,filter .55s ease;
}
.apx-v2-network[data-apx-v3-route] .apx-v2-network__lines path[data-apx-v3-route]{opacity:.16}
.apx-v2-network[data-apx-v3-route="web"] path[data-apx-v3-route="web"],.apx-v2-network[data-apx-v3-route="seo"] path[data-apx-v3-route="seo"],.apx-v2-network[data-apx-v3-route="api"] path[data-apx-v3-route="api"],.apx-v2-network[data-apx-v3-route="safe"] path[data-apx-v3-route="safe"],.apx-v2-network[data-apx-v3-route="cloud"] path[data-apx-v3-route="cloud"],.apx-v2-network[data-apx-v3-route="ops"] path[data-apx-v3-route="ops"]{
  opacity:1;stroke:#ffe89a;stroke-width:3.4;
  stroke-dasharray:3 15;filter:drop-shadow(0 0 6px #ffe49a);
  animation:apxV3SignalDash 1.4s linear infinite;
}
@keyframes apxV3SignalDash{to{stroke-dashoffset:-70}}
.apx-v2-network[data-apx-v3-route] .apx-v2-network__hub{
  border-color:#ffe5a3;box-shadow:inset 0 0 40px #a3e7db14,0 0 48px #ffe99b47,0 0 92px #7afbe224;
}

.apx-v2-network[data-apx-v3-route] .apx-v2-network__hub small{color:#ffe79a}

/* The final contact action intensifies when it enters the viewport. */
.apx-site .apx-contact-scene__card.apx-v2-contact-active{border-color:#ffe8a06e;box-shadow:0 0 38px #a6f9db15,0 18px 46px #0004,inset 0 1px #ffffff27;transition:transform .75s cubic-bezier(.2,.8,.2,1),border-color 1.4s ease,box-shadow 1.4s ease}
/* Hero/full page navigation: supported browsers use native cross-document transitions. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:apxV2Out .24s ease-in both}
::view-transition-new(root){animation:apxV2In .52s var(--apx-v2-ease) both}
@keyframes apxV2Out{to{opacity:.55;filter:brightness(.84)}}
@keyframes apxV2In{from{opacity:.82;filter:brightness(.9)}to{opacity:1;filter:brightness(1)}}
@media(max-width:850px){
 .apx-v2-ecosystem__layout{grid-template-columns:minmax(0,1fr)}
 .apx-v2-ecosystem__intro{text-align:center}
 .apx-v2-ecosystem__intro h2,.apx-v2-ecosystem__intro>p:not(.apx-eyebrow){max-width:none}
 .apx-v2-network{width:min(100%,600px);margin-inline:auto}
}
@media(max-width:480px){
 .apx-v2-ecosystem{padding:52px 0}
 .apx-v2-network{min-height:235px}
 .apx-v2-network__node{min-width:68px;min-height:55px;width:26%;padding:7px 4px}
 .apx-v2-network__node b{font-size:12px}
 .apx-v2-network__node small{font-size:9px}
 .apx-v2-network__hub{width:24%}
 .apx-v2-network__hub small{display:none}
}
@media(prefers-reduced-motion:reduce){
 .apx-site :is(.apx-button,.apx-front-company__cta,.apx-contact-scene__card a[href]){translate:none;transition:none}
 .apx-site :is(.apx-v2-hero-circuits i,.apx-v2-network__lines path,.apx-v2-network__lines circle,.apx-v2-network__hub,.apx-v2-network__signal,.apx-mark){animation:none;transition:none}
 .apx-site .apx-v2-title-lit{animation:none}
 .apx-site .apx-button:hover::after{animation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media print{.apx-v2-hero-circuits{display:none}.apx-v2-network :is(.apx-v2-network__lines,.apx-v2-network__signal){animation:none}}


/* Heading highlights and depth corners are component-owned; no floating
   full-section decorative traces are generated. */
/* A short luminous baseline uses the actual heading element: none of its
   text is split into spans or removed from the server-rendered DOM. */
.apx-site .apx-v4-heading{position:relative}
.apx-site .apx-v4-heading::after{
  content:"";position:absolute;bottom:-9px;left:0;
  width:clamp(42px,6vw,82px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,#83fbe6,#ffe29a 69%,transparent);
  box-shadow:0 0 17px #78fbe62a;pointer-events:none;
  opacity:0;transform:scaleX(.2);transform-origin:left center;
  transition:opacity 1.1s ease,transform 1.4s var(--apx-v2-ease);
}
.apx-site .apx-v4-heading.apx-v2-title-lit::after{
  opacity:.82;transform:scaleX(1);
  background-size:230% 100%;
  animation:apxV5TitleBeam 9s ease-in-out 2.2s infinite alternate;
}
/* Parallax is an independent translate, so existing image zoom keyframes,
   Drupal Responsive Image sources and their load/reveal transitions survive. */
.apx-site .apx-v4-photo{overflow:hidden}
.apx-site .apx-v4-photo>picture{
  translate:0 var(--apx-v4-photo-y,0px);scale:1.055;
  transition:translate .36s linear;
}
.apx-site .apx-v4-photo>img:not(picture img){
  translate:0 var(--apx-v4-photo-y,0px);scale:1.045;
  transition:translate .36s linear;
}
/* A tiny optical corner floats at a different pace from its parent card.
   It never replaces a card's background, CSS transform or hover behavior. */
.apx-site .apx-v4-depth{position:relative}
.apx-site .apx-v4-depth-corner{
  position:absolute;z-index:2;pointer-events:none;top:12px;right:12px;
  width:clamp(24px,3vw,46px);height:clamp(24px,3vw,46px);
  border-top:1px solid #a3fce466;border-right:1px solid #bca6ff70;
  border-radius:0 9px 0 0;opacity:.3;
  translate:0 var(--apx-v4-card-y,0px);
  transition:translate .4s linear,opacity 1s ease,border-color .9s ease;
}
.apx-site .apx-v4-depth:hover>.apx-v4-depth-corner,
.apx-site .apx-v4-depth:focus-within>.apx-v4-depth-corner{
  opacity:.9;border-color:#ffe18abe;
}
@media(max-width:767px){
  .apx-site .apx-v4-heading::after{left:50%;translate:-50% 0;transform-origin:center}
  .apx-site .apx-v4-photo>picture{scale:1.045}
  .apx-site .apx-v4-depth-corner{width:24px;height:24px;opacity:.22}
}
@media(prefers-reduced-motion:reduce){
  .apx-site .apx-v4-heading::after,
  .apx-site .apx-v4-depth-corner{animation:none;transition:none}
  .apx-site .apx-v4-photo>picture,
  .apx-site .apx-v4-photo>img:not(picture img),
  .apx-site .apx-v4-depth-corner{translate:none;scale:1}
}
@media print{
 .apx-site .apx-v4-heading::after,
 .apx-site .apx-v4-depth-corner{display:none}
 .apx-site .apx-v4-photo>picture,.apx-site .apx-v4-photo>img:not(picture img){translate:none;scale:1}
}


/* Motion & Interaction 2.3 — focused highlights, no large overlay planes.
   Decorations stay inside existing physical cards/hero geometry. */
/* Extra light orbit belongs to the already existing hero reactor. The small
   conic strokes are masked to a 2px circumference, never a coloured square. */
.apx-site .apx-hero__orb::after{
  content:"";position:absolute;inset:-8%;border-radius:30%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 14%,#8afbe5c0 16%,transparent 19% 42%,#ffe9a5ba 44%,transparent 47% 69%,#bca2fb8c 71%,transparent 74% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.65;filter:drop-shadow(0 0 7px #8df9e771);
  animation:apxV5RingScan 23s linear infinite;
}
@keyframes apxV5RingScan{to{rotate:360deg}}
.apx-site .apx-hero__glyph{
  text-shadow:0 0 16px #76f8e655,0 0 48px #83f5da40;
  animation:apxV5GlyphGlow 9s ease-in-out infinite alternate;
}
@keyframes apxV5GlyphGlow{
  from{text-shadow:0 0 11px #76f8e64b,0 0 35px #83f5da30}
  to{text-shadow:0 0 23px #b9ffedaf,0 0 62px #83f5da63}
}
.apx-site .apx-hero.apx-reactor-on .apx-hero__orb::after{
  animation-duration:6s;opacity:.95;
}
/* Local light strip follows the coordinates already written by Experience.
   No card background, box-shadow or border is replaced. */
.apx-site .apx-v5-reflective{position:relative}
.apx-site .apx-v5-reflective>.apx-v5-edge{
  position:absolute;z-index:4;top:0;left:var(--apx-v2-x,50%);
  width:clamp(58px,17%,118px);height:1px;
  transform:translateX(-50%);pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,#8efbe2 36%,#fff1b7 62%,transparent);
  box-shadow:0 0 11px #86ffe663;
  transition:left .23s ease-out,opacity .65s ease;
}
.apx-site .apx-v5-reflective>.apx-v5-edge::after{
  content:"";position:absolute;top:-2px;left:50%;height:5px;width:5px;
  border-radius:50%;background:#fff0b1;box-shadow:0 0 13px #fff0b1;
  transform:translateX(-50%);
}
.apx-site .apx-v5-reflective:is(:hover,:focus-within)>.apx-v5-edge{opacity:1}
/* A moving reflection on the already existing 2px heading underline. */

@keyframes apxV5TitleBeam{
  from{background-position:0% 50%;box-shadow:0 0 8px #7cfce733}
  to{background-position:100% 50%;box-shadow:0 0 17px #ffe69e66}
}
@media(hover:none), (pointer:coarse){
 .apx-site .apx-v5-reflective>.apx-v5-edge{display:none}
}
@media(prefers-reduced-motion:reduce){
 .apx-site .apx-hero__orb::after,
 .apx-site .apx-hero__glyph,
 .apx-site .apx-v4-heading.apx-v2-title-lit::after{animation:none}
 .apx-site .apx-v5-reflective>.apx-v5-edge{display:none}
}
@media print{
 .apx-site .apx-hero__orb::after,.apx-site .apx-v5-edge{display:none}
 .apx-site .apx-hero__glyph{animation:none}
}

/* WCAG motion preference, above all regular theme declarations by explicit
 * semantic root selectors; no exceptional cascade priority or JS patch. */
@media(prefers-reduced-motion:reduce){
  .apx-site[data-apx-site][data-apx-kind],
  .apx-site[data-apx-site][data-apx-kind] *,
  .apx-site[data-apx-site][data-apx-kind] *::before,
  .apx-site[data-apx-site][data-apx-kind] *::after{
    animation:none;
    transition-duration:0s;
  }
}