:root{
  --cardondo-brand-ink:#171d2a;
  --cardondo-brand-accent:#f97316;
}

.cardondoBrand{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:9px;
  color:var(--cardondo-brand-ink);
  font-weight:850;
  letter-spacing:-.025em;
  line-height:1;
  text-decoration:none;
}

.cardondoBrand:visited{color:var(--cardondo-brand-ink)}

.cardondoBrandMark,
  .cv4BrandMark{
  position:relative;
  display:block;
  width:21px;
  height:27px;
  flex:0 0 21px;
  border:2.6px solid currentColor;
  border-radius:6px;
  background:transparent;
}

.cardondoBrandMark::before,
  .cv4BrandMark::before{
  position:absolute;
  left:-7px;
  top:2px;
  width:17px;
  height:23px;
  border:2.2px solid currentColor;
  border-radius:5px;
  transform:rotate(-8deg);
  transform-origin:50% 50%;
  content:"";
}

.cardondoBrandMark::after,
  .cv4BrandMark::after{
  position:absolute;
  right:-5px;
  top:-5px;
  width:7px;
  height:7px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--cardondo-brand-accent);
  box-shadow:0 1px 4px rgba(249,115,22,.18);
  content:"";
}

.cardondoBrandWordmark{
  display:block;
  color:inherit;
  white-space:nowrap;
}

@media(max-width:640px){
  .cardondoBrand{gap:8px}
  .cardondoBrandMark,
  .cv4BrandMark{
    width:19px;
    height:24px;
    flex-basis:19px;
    border-width:2.4px;
    border-radius:5px;
  }
  .cardondoBrandMark::before,
  .cv4BrandMark::before{
    left:-6px;
    top:2px;
    width:15px;
    height:20px;
    border-width:2px;
    border-radius:4px;
  }
  .cardondoBrandMark::after,
  .cv4BrandMark::after{
    right:-5px;
    top:-5px;
    width:7px;
    height:7px;
  }
}

@media(prefers-reduced-motion:no-preference){
  .cardondoBrandMark::after,
  .cv4BrandMark::after{transition:transform .16s ease}
  .cardondoBrand:hover .cardondoBrandMark::after,
  .cv4Brand:hover .cv4BrandMark::after{transform:translateY(-1px)}
}