/* One aqua field, travelling slowly across the brand surfaces. */
:root{--kb-aqua-image:linear-gradient(112deg,#042f32 0%,#07514c 26%,#063b3d 50%,#09534e 73%,#042f32 100%)}
.foot3{background-color:#07403d;background-image:var(--kb-aqua-image)}
.kb-aqua-surface{isolation:isolate}
.kb-aqua-paint{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background-image:var(--kb-aqua-image);background-size:240% var(--kb-aqua-span,100%);background-position:0% var(--kb-aqua-y,0px);background-repeat:repeat-x;animation:kb-aqua-drift 34s linear infinite alternate;opacity:var(--kb-aqua-opacity,1)}
@keyframes kb-aqua-drift{from{background-position-x:0%}to{background-position-x:100%}}
.foot3.kb-aqua-surface{background-image:none}
.tf.kb-aqua-surface{background:var(--paper)}
.tf.kb-aqua-surface>.kb-aqua-paint,.cq.kb-aqua-surface>.kb-aqua-paint,.cq-wrap.kb-aqua-surface>.kb-aqua-paint{--kb-aqua-opacity:var(--cqg,0)}
.cq.kb-aqua-surface{background:linear-gradient(180deg,#0D1512,#090D0B)}
.cq-wrap.kb-aqua-surface{background:#070A09}
.pfade.kb-aqua-surface{background:var(--pf-base,var(--paper));height:clamp(3rem,9vh,7rem)}
.pfade.kb-aqua-surface>.kb-aqua-paint{--kb-aqua-opacity:var(--cqg,1);mask-image:linear-gradient(to bottom,transparent,#000);-webkit-mask-image:linear-gradient(to bottom,transparent,#000)}
.keybridge-hero.kb-aqua-surface{background:#07403d}
.keybridge-hero .hpanel--one.kb-aqua-surface{background:transparent}
.keybridge-hero .hpanel--one .hp-motto{background:none;color:var(--paper);-webkit-text-fill-color:currentColor}
/* Both white and ink remain explicit during the short paper-to-aqua crossing. */
main .sf-footer.tf.kb-aqua-surface{color:var(--kb-surface-ink,#000)}
html[data-aqua-paused] .kb-aqua-paint,html[data-aqua-hidden] .kb-aqua-paint{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.kb-aqua-paint{animation:none;background-position-x:45%}}

.foot3 .f3-motion-toggle{display:none}
html[data-aqua-ready] .foot3 .f3-motion-toggle{display:inline-flex}

/* When the complete mobile footer is visible, its navigation takes over.
   Focus in the header or an open menu immediately restores that header. */
@media(max-width:1000px){
 .site-head{transition:translate .24s var(--e-out)}
 html.kb-footer-view .site-head{translate:0 calc(-100% - 1rem);pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.site-head{transition:none}}