/* The selected Interlock is a large spatial field. Words retain their own layer. */
.kb-particle-field{position:absolute;pointer-events:none;overflow:hidden;isolation:isolate}
.kb-particle-field canvas,.kb-particle-field [data-particles-fallback]{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.kb-particle-field.is-particles-ready [data-particles-fallback]{visibility:hidden}
.keybridge-hero .kb-particle-field{z-index:1;right:-10vw;top:5%;width:68vw;height:92%;max-width:none;max-height:none;opacity:.93;mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.55) 13%,#000 28%);-webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.55) 13%,#000 28%)}
.keybridge-hero .hero-grid{z-index:2;pointer-events:none}
.keybridge-hero .hcell--panels{pointer-events:auto}
.keybridge-hero .hcell--name{padding-bottom:2rem;position:relative;z-index:2}
.keybridge-hero .keybridge-hero-wordmark{display:flex!important;align-items:center;gap:clamp(1rem,2.2vw,2.4rem);width:min(69vw,68rem);max-width:100%;filter:drop-shadow(0 2px 12px rgba(1,27,28,.5))}
.keybridge-hero .keybridge-hero-wordmark>.kb-hero-lead{flex:0 0 clamp(5rem,10vw,10rem);width:clamp(5rem,10vw,10rem);height:auto;max-width:19%;object-fit:contain}
.keybridge-hero .keybridge-hero-wordmark>.kb-hero-word{display:block;flex:1 1 auto;min-width:0;width:0;height:auto;max-width:none;object-fit:contain}
.keybridge-hero .hpanel--one{z-index:2}
.keybridge-hero .hp-head,.keybridge-hero .hp-foot{pointer-events:auto}
.keybridge-hero .hpanel--one>.kb-aqua-paint{opacity:.3}
.keybridge-hero .hero-inner{width:100%}
/* Footer artwork is a static matching particle form, keeping mobile height and CPU bounded. */
.keybridge-footer-symbol img{object-fit:contain}
@media(min-width:721px) and (max-height:650px){
 .keybridge-hero .kb-particle-field{top:6rem;height:30rem;width:63vw}
 .keybridge-hero .hcell--name{padding-top:17rem}
}
@media(max-width:720px){
 .keybridge-hero .kb-particle-field{top:4.3rem;right:-17vw;width:124vw;height:124vw;opacity:.96;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 72%,transparent 99%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 72%,transparent 99%)}
 .keybridge-hero .hcell--name{padding-top:calc(80vw + 5.5rem);padding-bottom:1.65rem;min-height:0}
 .keybridge-hero .keybridge-hero-wordmark{width:100%;gap:.8rem}
 .keybridge-hero .keybridge-hero-wordmark>.kb-hero-lead{flex-basis:3.5rem;width:3.5rem;max-width:18%}
 .keybridge-hero .keybridge-hero-wordmark>.kb-hero-word{height:auto;width:0}
}
@media(prefers-reduced-motion:reduce){.kb-particle-field canvas{transition:none}}

/* Lightweight phone identity. Only its image breathes; the host remains free
   for the measured loader flight. No canvas or pointer listeners on phones. */
.kb-particle-field picture{display:contents}
.kb-particle-field.is-particles-static [data-particles-fallback]{visibility:visible;animation:kb-static-breathe 8s ease-in-out infinite alternate;animation-play-state:paused}
.kb-particle-field.is-particles-static.is-static-moving [data-particles-fallback]{animation-play-state:running}
html[data-hero-handoff] .kb-particle-field.is-particles-static [data-particles-fallback]{animation:none}
@keyframes kb-static-breathe{from{transform:scale(.985);opacity:.91}to{transform:scale(1.015);opacity:1}}
@media(prefers-reduced-motion:reduce){.kb-particle-field.is-particles-static [data-particles-fallback]{animation:none}}

@media(max-width:720px){
 #hero.keybridge-hero .kb-particle-field.is-particles-static{left:0;right:0;width:100%;mask-image:none;-webkit-mask-image:none}
}