/* Brand monogram: a V-shaped main and T-shaped feed with moving flow. */
.brand .brand-mark{
  width:48px;height:48px;flex:0 0 48px;clip-path:none;
  background:transparent;animation:none;will-change:auto;perspective:260px;
}
.network-logo{display:block;width:100%;height:100%;overflow:visible;transform-origin:center;animation:network-turn 14s cubic-bezier(.45,0,.2,1) infinite}
.logo-flow{stroke-dasharray:17 83;stroke-dashoffset:100;animation:network-flow 3.8s linear infinite}
.logo-feed{stroke-dasharray:22 78;stroke-dashoffset:100;animation:network-flow 3.8s linear infinite;animation-delay:-1.9s}
.logo-junction{animation:junction-light 3.8s ease-in-out infinite}
.brand:hover .logo-flow,.brand:hover .logo-feed{stroke-width:3.2}
.brand:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:4px}
@keyframes network-flow{to{stroke-dashoffset:0}}
@keyframes junction-light{0%,65%,100%{fill:#192226}35%{fill:#f36c21}}
@keyframes network-turn{0%,82%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* Low-contrast engineering artwork stays behind content and outside the gallery/map. */
#services,#process,.contact{position:relative;isolation:isolate}
#services:before,#process:before,.contact:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("/assets/network-drawing.webp");background-repeat:repeat-y;
  background-position:center;background-size:100% auto;
}
#services:before{opacity:.19;mix-blend-mode:multiply}
#process:before,.contact:before{filter:invert(1);mix-blend-mode:screen;opacity:.11}
#process:before{background-position:center bottom}
.contact:before{background-position:right bottom;opacity:.085}
#services>.wrap,#process>.wrap,.contact>.wrap{position:relative;z-index:1}
.services-head{position:relative}
@media(max-width:620px){
  .brand .brand-mark{width:39px;height:39px;flex-basis:39px}
  #services:before,#process:before,.contact:before{background-size:auto 100%;background-position:right center}
  #services:before{opacity:.1}
  #process:before,.contact:before{opacity:.065}
}
@media(prefers-reduced-motion:reduce){
  .network-logo,.logo-flow,.logo-feed,.logo-junction{animation:none}
  .logo-flow,.logo-feed{stroke-dasharray:none;opacity:.35}
}
