/* Selected Interlock: outline to particles, then the real identity moves into Home. */
#loader{transition:opacity 180ms ease;touch-action:none}
#loader.handoff-flight{opacity:0;transition:opacity 160ms ease}
.keybridge-loader{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.7rem;width:min(76vw,28rem);max-width:calc(100vw - 2rem);font-size:inherit;direction:ltr}
.keybridge-loader .kb-loader-symbol{position:relative;width:clamp(7.5rem,16vw,12rem);aspect-ratio:1;flex:0 0 auto}
.keybridge-loader .kb-loader-symbol>svg,.keybridge-loader .kb-loader-symbol>img,.keybridge-loader .kb-loader-symbol>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;object-fit:contain;pointer-events:none}
.keybridge-loader .kb-loader-static{opacity:0}
.keybridge-loader .kb-loader-wordmark{display:block;width:100%;height:auto;max-width:100%;opacity:.95;animation:kb-loader-typeset 420ms cubic-bezier(.22,1,.36,1) 40ms both}
@keyframes kb-loader-typeset{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.keybridge-loader .is-loader-canvas-ready>.kb-loader-solid,.keybridge-loader .is-loader-canvas-ready>.kb-loader-static{visibility:hidden}
/* Static artwork still resolves if Canvas is unavailable. */
#loader.sweep .kb-loader-solid{opacity:0;transition:opacity 390ms ease 45ms}
#loader.sweep .kb-loader-static{opacity:1;transition:opacity 390ms ease 45ms}
html[data-hero-handoff] .keybridge-hero .hero-grid,html[data-hero-handoff] .keybridge-hero .hcell--name,html[data-hero-handoff] .keybridge-hero .hero-inner,html[data-hero-handoff] .keybridge-hero #heroTitle,html[data-hero-handoff] .keybridge-hero #heroTitle .line{overflow:visible!important}
html[data-hero-handoff] .keybridge-hero #heroTitle .line-in{opacity:1!important;transform:none!important;transition:none!important}
/* A precise aperture and type masks share the measured flight clock.
   The phone clearance gate stays in the loader; no extra time is added. */
html[data-hero-handoff] .keybridge-hero .hcell--panels{opacity:var(--kb-inquiry-visible,0)!important;pointer-events:none!important;transition:none!important}
html[data-hero-handoff] #hero .hpanel--one{clip-path:inset(0 calc(50% - var(--kb-panel-reveal,0)*50%) round 4.5rem)}
html[data-hero-handoff] #hero .hp-motto{clip-path:inset(0 calc(100% - var(--kb-heading-reveal,0)*100%) 0 0);transform:translate3d(0,calc(8px - var(--kb-heading-reveal,0)*8px),0)}
html[data-hero-handoff] #hero .hp-line{clip-path:inset(0 calc(100% - var(--kb-detail-reveal,0)*100%) 0 0)}
html[data-hero-handoff] #hero .hp-foot{clip-path:inset(0 calc(100% - var(--kb-links-reveal,0)*100%) 0 0);transform:translate3d(0,calc(10px - var(--kb-links-reveal,0)*10px),0)}
html[dir=rtl][data-hero-handoff] #hero .hp-motto{clip-path:inset(0 0 0 calc(100% - var(--kb-heading-reveal,0)*100%))}
html[dir=rtl][data-hero-handoff] #hero .hp-line{clip-path:inset(0 0 0 calc(100% - var(--kb-detail-reveal,0)*100%))}
html[dir=rtl][data-hero-handoff] #hero .hp-foot{clip-path:inset(0 0 0 calc(100% - var(--kb-links-reveal,0)*100%))}
@media(max-width:720px){html[data-hero-handoff] #hero .hpanel--one{clip-path:inset(0 calc(50% - var(--kb-panel-reveal,0)*50%) round 2rem)}}
@media(max-height:420px){.keybridge-loader{gap:1rem;width:min(50vw,24rem)}.keybridge-loader .kb-loader-symbol{width:6.5rem}}
@media(prefers-reduced-motion:reduce){#loader{display:none!important}.keybridge-loader *{animation:none!important;transition:none!important}}
.keybridge-footer-symbol{flex:0 0 auto;width:clamp(5.5rem,8vw,8rem);height:auto;max-width:100%;min-width:0;direction:ltr}
.keybridge-footer-symbol img{display:block;width:100%;height:auto;max-width:100%}
.f3-mark{direction:ltr;unicode-bidi:isolate;text-transform:uppercase;letter-spacing:0}
.f3-markwrap{direction:ltr;padding-block:.15rem;min-width:0}
/* The selected horizontal logo replaces the retired four-letter composition. The existing
   inquiry panel and page-to-page scroll choreography remain intact. */
.keybridge-hero{background:var(--teal-deep);min-height:38rem}
.keybridge-hero .hero-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.keybridge-hero .hero-grid::before{display:none}
.keybridge-hero .hcell--open{display:none}
.keybridge-hero .hcell--name{grid-column:1;grid-row:1;background:transparent;color:var(--paper);padding:8rem var(--gutter) 2.5rem;align-items:flex-end}
.keybridge-hero .hcell--panels{grid-column:1;grid-row:2}
.keybridge-hero .hpanel--one{padding:2rem var(--gutter);min-height:17rem;gap:2rem}
.keybridge-hero .hp-head{max-width:60rem}
.keybridge-hero .hpanel--one .hp-motto{max-width:32ch}
.keybridge-hero h1,.keybridge-hero[dir="rtl"] h1,[dir="rtl"] .keybridge-hero h1{font-family:var(--display);font-size:0;line-height:1;letter-spacing:0;text-align:start;direction:ltr}
.keybridge-hero h1 .keybridge-hero-wordmark{display:block;color:var(--paper);background:none;line-height:1;min-width:0}
.keybridge-hero-wordmark img{display:block;width:auto;height:min(22svh,16rem);max-width:100%;object-fit:contain;object-position:left center}
[dir="rtl"] .keybridge-hero .herolock{direction:ltr;text-align:left}
@media(max-width:720px){
 .keybridge-hero{height:auto;min-height:0;position:relative}
 .keybridge-hero .hero-grid{position:relative;min-height:0;grid-template-rows:auto auto}
 .keybridge-hero .hcell--name{padding:7.5rem var(--gutter) 2.5rem;min-height:15rem}
 .keybridge-hero-wordmark img{width:100%;height:auto;max-width:100%}
 .keybridge-hero .hpanel--one{padding:1.5rem var(--gutter) 2rem;min-height:0;gap:1.6rem}
 .keybridge-hero .hpanel--one .hp-motto{font-size:clamp(1.25rem,5.1vw,1.6rem);max-width:none}
 .keybridge-hero .hpanel--one .hp-foot{align-items:flex-start;flex-direction:column;gap:1.2rem}
}
@media(max-height:600px) and (min-width:721px){
 .keybridge-hero{position:relative;height:auto;min-height:0}
 .keybridge-hero .hero-grid{position:relative}
 .keybridge-hero .hcell--name{padding-top:8rem}
}

/* Identity hero clearance: decorative nav rules stop before full-width titles.
   Their scale/fold animation stays owned by the shared navigation controller. */
body:has(#ba-title) .site-head .hcol .hline{height:calc(clamp(10rem,21vh,14rem) - 2rem)}
@media(min-width:768px) and (max-width:991px){
 body:has(#ba-title) .site-head .hcol .hline{height:10rem}
}
@media(max-width:767px){
 body:has(#ba-title) .site-head .hcol .hline{height:7rem}
}
@media(min-width:640px) and (max-width:720px),(min-width:721px) and (max-height:600px){
 body:has(.keybridge-hero) .site-head .hcol .hline{height:7rem}
}