/* footer */
.abcftrefgmaster {
  margin-block-start: 5em;
  margin-block-end: 1.5em;
}

.abcftrefgpanel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 1.6em 1.2em 1.2em;
  border-radius: 2em;
  background: linear-gradient(to top, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 60%);
}

.abcftrefgpanel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
  pointer-events: none;
}

.abcftrefgpanel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--primary-color);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) left top / 44px 44px no-repeat, linear-gradient(#000 0 0) right top / 44px 44px no-repeat, linear-gradient(#000 0 0) left bottom / 44px 44px no-repeat, linear-gradient(#000 0 0) right bottom / 44px 44px no-repeat;
  mask: linear-gradient(#000 0 0) left top / 44px 44px no-repeat, linear-gradient(#000 0 0) right top / 44px 44px no-repeat, linear-gradient(#000 0 0) left bottom / 44px 44px no-repeat, linear-gradient(#000 0 0) right bottom / 44px 44px no-repeat;
}

.abcftrefggrid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

.abcftrefgbrand,
.abcftrefglinks,
.abcftrefgsvc {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
}

.abcftrefgbrandtitle {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
}

.abcftrefgbrandtitle i {
  color: var(--primary-color);
}

.abcftrefgdesc {
  max-width: 36ch;
  font-size: clamp(0.9rem, 0.87rem + 0.2vw, 1rem);
  line-height: 1.75;
  color: color-mix(in srgb, var(--helper-color) 75%, transparent);
}

.abcftrefgh {
  font-size: clamp(0.85rem, 0.82rem + 0.2vw, 1rem);
  font-weight: 600;
  line-height: 1.2;
  color: color-mix(in srgb, var(--primary-color) 70%, var(--helper-color));
}

.abcftrefglist {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.abcftrefglist a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 0.55em 0.5em;
  border-radius: 0.75em;
  color: color-mix(in srgb, var(--helper-color) 90%, transparent);
  font-size: clamp(0.9rem, 0.87rem + 0.2vw, 1rem);
  line-height: 1.35;
  transition: background-color 0.25s, color 0.25s;
}

.abcftrefglist a:hover,
.abcftrefglist a:focus-visible {
  background-color: color-mix(in srgb, var(--primary-color) 13%, transparent);
  color: var(--helper-color);
}

.abcftrefgn {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.65rem, 0.62rem + 0.15vw, 0.75rem);
  font-weight: 600;
  color: color-mix(in srgb, var(--primary-color) 70%, var(--helper-color));
}

.abcftrefgarrow {
  color: color-mix(in srgb, var(--helper-color) 60%, transparent);
  font-size: 0.8em;
  transition: transform 0.35s, color 0.25s;
}

.abcftrefglist a:hover .abcftrefgarrow,
.abcftrefglist a:focus-visible .abcftrefgarrow {
  color: var(--primary-color);
  transform: translateX(-3px);
}

.abcftrefgmark {
  width: 100%;
  height: clamp(7.5rem, 26vw, 21rem);
}

.abcftrefgbottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding-top: 1.2em;
  border-top: 1px solid color-mix(in srgb, var(--helper-color) 8%, transparent);
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  color: color-mix(in srgb, var(--helper-color) 60%, transparent);
}

.abcftrefgtop {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--helper-color);
  font-size: clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem);
  transition: color 0.25s;
}

.abcftrefgtop i {
  color: var(--primary-color);
}

.abcftrefgtop:hover {
  color: color-mix(in srgb, var(--primary-color) 70%, var(--helper-color));
}

@media (min-width: 768px) {
  .abcftrefgpanel {
    padding: 2.5em 2em 1.5em;
  }

  .abcftrefggrid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.5em;
  }

  .abcftrefgbrand {
    flex: 1 1 100%;
  }

  .abcftrefglinks {
    flex: 1 1 12em;
  }

  .abcftrefgsvc {
    flex: 2 1 22em;
  }

  .abcftrefgservices {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .abcftrefgservices li {
    flex: 1 1 45%;
  }

  .abcftrefgbottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .abcftrefgpanel {
    padding: 3em 3em 1.5em;
  }

  .abcftrefgbrand {
    flex: 1.25 1 16em;
    align-items: flex-start;
    text-align: start;
  }

  .abcftrefglinks,
  .abcftrefgsvc {
    align-items: flex-start;
  }

  .abcftrefglist a {
    justify-content: flex-start;
  }

  .abcftrefgarrow {
    margin-inline-start: auto;
  }
}

[dir="ltr"] .abcftrefglist a:hover .abcftrefgarrow,
[dir="ltr"] .abcftrefglist a:focus-visible .abcftrefgarrow {
  transform: translateX(3px);
}