/* City of London Hero Overlay v1.3.0
   ADA-focused adjustments:
   - stronger text contrast via subtle heading backdrop
   - clear focus styling
   - finite animations that stop within 5 seconds
   - reduced motion support
   - 44px+ target sizes
*/

.clho-source{display:block}

.clho-wrap{
  box-sizing:border-box !important;
  z-index:80 !important;
  width:min(455px,34vw) !important;
  max-width:455px !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  text-align:left !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.clho-wrap.clho-mounted{
  position:absolute !important;
  left:clamp(18px,3.2vw,58px) !important;
  right:auto !important;
  bottom:clamp(18px,3.5vh,34px) !important;
  top:auto !important;
  transform:none !important;
}

.clho-title-shield{
  display:inline-block !important;
  margin:0 0 8px 0 !important;
  padding:8px 12px 9px 10px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(6,24,42,.74) 0%, rgba(6,24,42,.58) 60%, rgba(6,24,42,.28) 100%) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(1.5px) !important;
  -webkit-backdrop-filter:blur(1.5px) !important;
}

.clho-heading{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  text-shadow:0 2px 8px rgba(0,0,0,.52) !important;
}

.clho-script{
  display:block !important;
  margin:0 !important;
  color:#fff !important;
  font-family:"Segoe Script","Brush Script MT",cursive !important;
  font-size:clamp(22px,1.8vw,35px) !important;
  line-height:.95 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

.clho-heading>strong{
  display:block !important;
  margin:4px 0 0 !important;
  color:#fff !important;
  font-size:clamp(12px,.92vw,17px) !important;
  line-height:1.08 !important;
  letter-spacing:.04em !important;
  font-weight:800 !important;
}

.clho-tagline{
  display:block !important;
  margin-top:5px !important;
  color:#ffd84d !important;
  font-size:clamp(10px,.72vw,12px) !important;
  line-height:1.18 !important;
  font-weight:800 !important;
}

.clho-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:9px !important;
  align-items:end !important;
  margin:0 !important;
  padding:0 !important;
}

.clho-card{
  box-sizing:border-box !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  min-height:50px !important;
  margin:0 !important;
  padding:7px 28px 7px 60px !important;
  color:#ffffff !important;
  text-decoration:none !important;
  text-align:left !important;
  background:linear-gradient(180deg,rgba(5,49,89,.96),rgba(2,28,54,1)) !important;
  border:2px solid #4ac0ff !important;
  border-radius:999px !important;
  box-shadow:0 0 11px rgba(34,173,255,.24),0 7px 17px rgba(0,0,0,.20) !important;
  overflow:visible !important;
  transition:transform .15s ease,box-shadow .15s ease !important;
}

.clho-card:hover{
  transform:translateY(-2px) !important;
  color:#fff !important;
  box-shadow:0 0 17px rgba(34,173,255,.38),0 9px 20px rgba(0,0,0,.24) !important;
}

.clho-card:focus-visible{
  outline:4px solid #ffbf47 !important;
  outline-offset:4px !important;
  box-shadow:0 0 0 4px rgba(0,0,0,.30), 0 0 17px rgba(34,173,255,.38),0 9px 20px rgba(0,0,0,.24) !important;
}

.clho-copy{
  position:relative !important;
  z-index:4 !important;
  line-height:1.05 !important;
}

.clho-copy strong{
  color:#fff !important;
  font-size:clamp(10px,.74vw,13px) !important;
  line-height:1.05 !important;
  font-weight:800 !important;
}

.clho-arrow{
  position:absolute !important;
  right:8px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:4 !important;
  color:#b8ecff !important;
  font-size:17px !important;
  line-height:1 !important;
}

.clho-figure{
  position:absolute !important;
  left:-9px !important;
  bottom:-3px !important;
  width:64px !important;
  height:68px !important;
  z-index:5 !important;
  pointer-events:none !important;
}

.clho-figure img{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

.clho-worker{
  animation:clho-worker-vibe .72s ease-in-out 4 !important;
}

.clho-reporter{
  left:-6px !important;
  width:62px !important;
  height:64px !important;
  animation:clho-reporter-bob 1.8s ease-in-out 2 !important;
}

.clho-dust{
  position:absolute !important;
  bottom:4px !important;
  width:4px !important;
  height:4px !important;
  border-radius:50% !important;
  background:#d5ae78 !important;
  opacity:0 !important;
  animation:clho-dust 1.1s linear 3 !important;
}
.clho-dust.d1{left:14px !important}
.clho-dust.d2{left:22px !important;animation-delay:.18s !important}
.clho-dust.d3{left:30px !important;animation-delay:.36s !important}

.clho-typing{
  position:absolute !important;
  right:-2px !important;
  top:1px !important;
  display:flex !important;
  gap:3px !important;
  padding:4px 6px !important;
  border-radius:999px !important;
  background:#36a8f2 !important;
  box-shadow:0 0 9px rgba(54,168,242,.35) !important;
}
.clho-typing i{
  width:3px !important;
  height:3px !important;
  display:block !important;
  border-radius:50% !important;
  background:#fff !important;
  animation:clho-dot 1s ease-in-out 4 !important;
}
.clho-typing i:nth-child(2){animation-delay:.16s !important}
.clho-typing i:nth-child(3){animation-delay:.32s !important}

.clho-empty-builder-host{display:none !important}

@keyframes clho-worker-vibe{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(1px) rotate(-.5deg)}
}
@keyframes clho-reporter-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes clho-dust{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  30%{opacity:.9}
  100%{opacity:0;transform:translate(7px,-9px) scale(1.2)}
}
@keyframes clho-dot{
  0%,80%,100%{transform:scale(.7);opacity:.5}
  40%{transform:scale(1.1);opacity:1}
}

@media(max-width:900px){
  .clho-wrap{width:min(420px,55vw) !important}
}

@media(max-width:620px){
  .clho-wrap.clho-mounted{
    left:12px !important;
    bottom:14px !important;
    width:min(345px,91vw) !important;
  }
  .clho-title-shield{
    padding:7px 9px 8px 8px !important;
    margin-bottom:7px !important;
  }
  .clho-script{font-size:24px !important}
  .clho-heading>strong{font-size:11px !important}
  .clho-tagline{font-size:9px !important}
  .clho-actions{gap:7px !important}
  .clho-card{
    min-height:46px !important;
    padding:7px 23px 7px 53px !important;
  }
  .clho-figure{
    width:57px !important;
    height:60px !important;
  }
  .clho-reporter{
    width:54px !important;
    height:56px !important;
  }
  .clho-copy strong{font-size:9px !important}
  .clho-arrow{font-size:15px !important;right:7px !important}
}

@media(prefers-reduced-motion:reduce){
  .clho-wrap *,
  .clho-wrap *::before,
  .clho-wrap *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}