/* Node header, Oct 23 2026. Quiet gold circuit in the page header; the page's icon sits in the node. */
.has-nh .page-hero{position:relative;isolation:isolate}
.has-nh .page-hero>*:not(.nh){position:relative;z-index:2}
.nh{position:absolute;inset:0 calc(50% - 50vw);z-index:1;pointer-events:none}
.nh-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nh-net .tr{fill:none;stroke:rgba(220,160,68,.16);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nh-net .pad{fill:rgba(220,160,68,.28)}
.nh-net .en{fill:none;stroke:#F1CC8A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(241,204,138,.9));opacity:0}
.nh-net .spark{fill:#FFE2A8;filter:drop-shadow(0 0 6px #F1CC8A);opacity:0}
html.light .nh-net .tr{stroke:rgba(150,98,20,.22)}
html.light .nh-net .pad{fill:rgba(150,98,20,.35)}
html.light .nh-net .en{stroke:#B07418;filter:drop-shadow(0 0 3px rgba(220,160,68,.7))}
html.light .nh-net .spark{fill:#DCA044;filter:drop-shadow(0 0 4px #DCA044)}
/* The node: a square chip frame on the right of the header. */
/* Sits a little below centre so the Pause motion control above it stays clear. */
/* Oct 24: one fixed size and position on every page, so every node and its lines look the same. */
.nh-node{position:absolute;right:max(48px,calc(50vw - 590px));top:150px;width:250px;aspect-ratio:1}
@media (min-width:1001px){.has-nh .page-hero{min-height:470px}}
.nh-net{overflow:hidden}
.nh-ring{position:absolute;inset:0;border-radius:22px;border:1.5px solid rgba(220,160,68,.28);background:radial-gradient(120% 120% at 50% 40%,rgba(220,160,68,.05),rgba(18,18,18,.0) 60%);transition:border-color .6s ease,box-shadow .9s ease}
.nh-ring::before{content:"";position:absolute;inset:10px;border-radius:14px;border:1px solid rgba(220,160,68,.12)}
.nh-core{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(241,204,138,.28),rgba(241,204,138,0));opacity:0;transition:opacity 1s ease}
html.light .nh-ring{border-color:rgba(150,98,20,.3);background:radial-gradient(120% 120% at 50% 40%,rgba(220,160,68,.08),rgba(250,248,245,0) 60%)}
.nh-icon{position:absolute;inset:4%;display:grid;place-items:center}
.nh-icon .bp,.nh-icon .bo{display:block;width:100%;height:100%;position:relative}
.nh-icon .bo-still{width:100%;height:100%;object-fit:contain}
/* Powered state (also the still for phones, slow connections and reduced motion). */
.nh.on .nh-ring{border-color:rgba(220,160,68,.7);box-shadow:0 0 0 1px rgba(220,160,68,.12),0 0 38px -6px rgba(220,160,68,.45),inset 0 0 30px -12px rgba(220,160,68,.5)}
html.light .nh.on .nh-ring{border-color:rgba(176,116,24,.75);box-shadow:0 0 30px -8px rgba(220,160,68,.45),inset 0 0 26px -12px rgba(220,160,68,.35)}
.nh.on .nh-core{opacity:1}
.nh.on .nh-net .tr{stroke:rgba(220,160,68,.26)}
html.light .nh.on .nh-net .tr{stroke:rgba(150,98,20,.3)}
/* Before power: the icon waits, dim and still. A lit copy sits on top, hidden until the power up reveals it from the bottom. */
.nh-icon>.bp{transition:opacity .6s ease,filter .6s ease}
.nh.armed .nh-icon>.bp{opacity:.22;filter:grayscale(1) brightness(.7)}
.nh-lit{position:absolute;inset:0;clip-path:inset(100% 0 0 0);pointer-events:none}
.nh-lit .bo{display:block;width:100%;height:100%}
.nh.charging .nh-lit{clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.45,0,.2,1)}
.nh.charged .nh-lit{clip-path:inset(0 0 0 0)}
.nh.charged .nh-icon>.bp{opacity:0}
/* The scan line rises with the reveal. */
.nh-scan{position:absolute;left:6%;right:6%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#F1CC8A 20%,#FFE9C2 50%,#F1CC8A 80%,transparent);box-shadow:0 0 14px 3px rgba(241,204,138,.55);opacity:0;pointer-events:none}
html.light .nh-scan{background:linear-gradient(90deg,transparent,#B07418 20%,#DCA044 50%,#B07418 80%,transparent);box-shadow:0 0 10px 2px rgba(220,160,68,.45)}
@keyframes nhScan{0%{bottom:0;opacity:0}10%{opacity:1}88%{opacity:1}100%{bottom:100%;opacity:0}}
.nh.charging .nh-scan{animation:nhScan 1.15s cubic-bezier(.45,0,.2,1) forwards}
/* A small lift and settle as it powers up. */
@keyframes nhLift{0%{transform:scale(.95)}55%{transform:scale(1.04) translateY(-6px)}100%{transform:none}}
.nh.charging .nh-icon{animation:nhLift 1.2s cubic-bezier(.2,.8,.2,1)}
/* Alive: after power on, the icon breathes and floats a little. Desktop only. */
@keyframes nhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes nhCore{0%,100%{opacity:.75}50%{opacity:1}}
.nh.live .nh-lit .bo{animation:nhFloat 5.5s ease-in-out infinite}
.nh.live .nh-core{animation:nhCore 4s ease-in-out infinite}
.paused .nh *,.reduced .nh *{animation:none!important}
/* Text keeps the left side; the node never sits under it. */
@media (min-width:1001px){.has-nh .page-hero h1,.has-nh .page-hero .hero-bottom{max-width:min(720px,56%)}.has-nh .page-hero .hero-bottom{grid-template-columns:1fr}.has-nh .page-hero .page-intro{max-width:none}}
/* The icon now lives in the header, so the copy of it below the header goes. */
.has-nh .service-signature{display:none}
.has-nh .blx-hero-art{display:none}
.has-nh .sector-hero-visual{display:none}
/* Phones and tablets: the node sits under the intro as a finished still; the long traces stay hidden. */
@media (max-width:1000px){
  .nh{position:relative;inset:auto;margin:36px auto 8px;width:min(200px,52%);aspect-ratio:1;order:9}
  .has-nh .page-hero{display:flex;flex-direction:column}
  .nh-net{display:none}
  .nh-node{position:absolute;left:0;top:0;right:auto;width:100%;height:100%;transform:none}
  .has-nh .page-hero{min-height:0}
}
/* Stills (phones, slow connections, reduced motion) show the lit icon straight away. */
.paused .nh-lit,.reduced .nh-lit{clip-path:inset(0 0 0 0)!important}
.paused .nh-scan,.reduced .nh-scan{display:none}