/* Hambank premium hero transformation — transparent branded artwork. */
.hero .hambank-morph-wrap,
body.page-home .hero .hambank-morph-wrap{
  display:block;position:relative;isolation:isolate;width:100%;height:580px;min-height:580px;
  background:transparent;border:0;box-shadow:none;overflow:hidden;border-radius:0;
  perspective:1100px;pointer-events:none;
}
.hero .hambank-morph-wrap::before{
  content:"";position:absolute;inset:10% 5% 5%;z-index:-1;border:0;box-shadow:none;
  background:radial-gradient(ellipse at center,rgba(13,123,132,.095),rgba(196,161,101,.04) 42%,transparent 72%);
  pointer-events:none;
}
.hambank-morph-wrap .hb-morph-sculpture{
  position:absolute;inset:0;display:flex;justify-content:center;align-items:center;
  backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity,filter;
  pointer-events:none;z-index:3;
}
.hambank-morph-wrap .hb-morph-sculpture img{
  display:block;object-fit:contain;max-width:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 18px 21px rgba(17,65,87,.11));
}
.hb-morph-fingerprint img{width:clamp(300px,100%,525px);height:96%;}
.hb-morph-mirror img{width:clamp(350px,108%,580px);height:99%;}
/* Autoplay: each state lasts two seconds, with a graceful 0.68s crossfade into the next.
   Only opacity and a tiny breathing-scale move; no clicks, sliders or rotational flips. */
.hb-morph-fingerprint{animation:hbFingerprintSoftFade 4s linear infinite both}
.hb-morph-mirror{animation:hbMirrorSoftFade 4s linear infinite both}
@keyframes hbFingerprintSoftFade{
  0%,33%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
  50%,83%{opacity:0;transform:translate3d(0,0,0) scale(.985);filter:blur(2px)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes hbMirrorSoftFade{
  0%,33%{opacity:0;transform:translate3d(0,0,0) scale(.985);filter:blur(2px)}
  50%,83%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate3d(0,0,0) scale(.985);filter:blur(2px)}
}
.hb-morph-light{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:0}
.hb-morph-light-one{width:80%;height:78%;background:radial-gradient(ellipse,rgba(59,191,185,.13),rgba(243,195,119,.08) 34%,transparent 67%);filter:blur(26px);animation:hbMorphAura 8s ease-in-out infinite}
.hb-morph-light-two{width:64%;height:70%;border:1px solid rgba(53,165,172,.08);box-shadow:0 0 85px rgba(31,179,175,0.039);animation:hbMorphAura 8s ease-in-out infinite reverse}
@keyframes hbMorphAura{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}38%,84%{opacity:1;transform:translate(-50%,-50%) scale(1.11)}}
.hb-morph-trails{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;opacity:.43;pointer-events:none}
.hb-morph-trails .hb-path{fill:none;stroke-linecap:round;stroke-width:2.5;stroke-dasharray:230 1380;filter:drop-shadow(0 0 6px rgba(75,218,218,.5))}
.hb-path-gold{animation:hbRibbonFlow 8s linear infinite,hbRibbonOpacity 8s ease-in-out infinite}
.hb-path-teal{animation:hbRibbonFlow 8s linear infinite reverse,hbRibbonOpacity 8s ease-in-out infinite .4s}
@keyframes hbRibbonFlow{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@keyframes hbRibbonOpacity{0%,15%,52%,64%,100%{opacity:.06}29%,36%,80%,88%{opacity:.85}}
.hb-morph-twinkle{position:absolute;width:6px;height:6px;border-radius:50%;background:#e3c994;box-shadow:0 0 0 5px #e3c9940d,0 0 16px 4px #f4e3bb;z-index:4;opacity:0;pointer-events:none;animation:hbSpark 8s ease-in-out infinite}
.hb-twinkle-1{left:25%;top:25%;animation-delay:.05s}.hb-twinkle-2{left:77%;top:62%;width:4px;height:4px;animation-delay:.28s}.hb-twinkle-3{left:69%;top:19%;width:3px;height:3px;animation-delay:.53s}
@keyframes hbSpark{0%,17%,52%,72%,100%{opacity:0;transform:scale(.5)}26%,34%,80%,89%{opacity:.9;transform:scale(1.2)}}
@media(max-width:1050px){.hero .hambank-morph-wrap,body.page-home .hero .hambank-morph-wrap{height:510px;min-height:510px}.hb-morph-mirror img{width:min(105%,530px)}.hb-morph-fingerprint img{width:min(95%,480px)}}
@media(max-width:850px){.hero .hambank-morph-wrap,body.page-home .hero .hambank-morph-wrap{height:460px;min-height:460px;max-width:640px;margin:0 auto}.hb-morph-mirror img{width:min(100%,520px);height:96%}.hb-morph-fingerprint img{width:min(88%,430px);height:95%}}
@media(max-width:560px){.hero .hambank-morph-wrap,body.page-home .hero .hambank-morph-wrap{height:365px;min-height:365px;width:100%;}.hb-morph-mirror img{width:100%;height:94%}.hb-morph-fingerprint img{width:92%;height:93%}.hb-morph-trails{opacity:.34}}
@media(prefers-reduced-motion:reduce){.hb-morph-fingerprint,.hb-morph-mirror,.hb-morph-light,.hb-morph-trails .hb-path,.hb-morph-twinkle{animation:none!important}.hb-morph-fingerprint{opacity:0;transform:none;filter:none}.hb-morph-mirror{opacity:1;transform:none;filter:none}.hb-morph-trails,.hb-morph-twinkle{display:none}}
/* On narrow screens, place the cinematic brand visual immediately after the promise,
   so it is visible before the paragraph and CTA stack. */
@media(max-width:700px){
  body.page-home .hero .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0!important}
  body.page-home .hero .hero-grid>.hero-copy{display:contents}
  body.page-home .hero .hero-copy>h1{order:1;margin:10px 0 2px}
  body.page-home .hero .hero-grid>.hambank-morph-wrap{order:2;height:310px;min-height:310px;margin:0 auto}
  body.page-home .hero .hero-copy>p{order:3;margin:12px 0 22px}
  body.page-home .hero .hero-copy>.hero-actions{order:4}
  body.page-home .hero .hero-copy>.hero-bullets{order:5}
  body.page-home .hero .hero-copy>.hero-kpis{order:6}
  body.page-home .hero .hero-copy>.micro{order:7}
  body.page-home .hero .hero-copy>.trustline{order:8}
}

/* The background remains the original site background, not baked into either image. */
.hambank-morph-wrap .hb-morph-trails{opacity:.12}

/* Requested revision: show only the fingerprint artwork, without cycling to the mirror. */
.hero .hambank-morph-wrap .hb-morph-fingerprint{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;}

/* 2026-11-04 | Focused hero visual refinement only.
   Keep the fingerprint fixed, restore the original caption and preserve the header-only install CTA. */
.hero #hambankMorph::before{
  background:
    radial-gradient(ellipse at 44% 45%,rgba(34,196,201,.20) 0%,rgba(51,170,187,.12) 37%,transparent 72%),
    radial-gradient(ellipse at 69% 41%,rgba(235,182,92,.15) 0%,transparent 60%);
}
.hero #hambankMorph .hb-morph-fingerprint img{
  height:84%;
  transform:translateY(-25px);
  filter:saturate(1.26) contrast(1.10) brightness(1.055) drop-shadow(0 23px 27px rgba(11,83,122,.20));
}
/* One distinct accent CTA; the remaining actions retain their original style. */
.hero .hero-actions-cta a.btn-primary[href^="mailto:"]{
  background:linear-gradient(125deg,#f6ddaa 0%,#e8bd70 100%)!important;
  color:#263e49!important;
  border:1px solid #ddb567!important;
  box-shadow:0 9px 22px rgba(169,117,43,.16)!important;
}
.hero .hero-actions-cta a.btn-primary[href^="mailto:"]:hover{
  background:linear-gradient(125deg,#f9e4ba 0%,#eec782 100%)!important;
}
@media(max-width:700px){
  .hero #hambankMorph .hb-morph-fingerprint img{height:77%;transform:translateY(-24px)}
  .hero #hambankMorph .hb-morph-caption{bottom:1px;right:4px;left:4px}
  .hero #hambankMorph .hb-morph-caption strong{font-size:18px;line-height:1.5}
  .hero #hambankMorph .hb-morph-caption span{font-size:12px;line-height:1.7}
}