.formatto-clients {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  width: 100%;
  padding: 8rem 20rem;
  background: var(--color-background);
}

.formatto-clients__content {
  display: flex;
  flex: 0 0 27.96rem;
  flex-direction: column;
  gap: 2.5rem;
  width: 27.96rem;
  word-break: break-word;
}

.formatto-clients__heading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.formatto-clients__eyebrow,
.formatto-clients h2,
.formatto-clients__text,
.formatto-clients__map p {
  margin: 0;
  font-family: var(--font-body);
}

.formatto-clients__eyebrow {
  color: #00588a;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01rem;
}

.formatto-clients h2 {
  color: var(--color-blue-600);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025rem;
}

.formatto-clients__text {
  color: #002f4c;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01125rem;
}

.formatto-clients__map {
  position: relative;
  flex: 0 0 44.3125rem;
  width: 44.3125rem;
  margin-top: 0.7675rem;
}

.formatto-clients__map img {
  width: 44.3125rem;
  height: 21.8725rem;
}

.formatto-clients__map p {
  position: absolute;
  left: 16.5625rem;
  bottom: 0.3125rem;
  max-width: 18rem;
  color: var(--color-blue-600);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01rem;
  white-space: nowrap;
}

@media (min-width: 1367px) and (max-width: 1919px) {
  .formatto-clients {
    padding: 6.667vw 16.667vw;
  }
}

@media (max-width: 1919px) {
  .formatto-clients {
    gap: 3.333vw;
    padding: 6.667vw 16.667vw;
  }

  .formatto-clients__content {
    flex-basis: 23.3vw;
    gap: 2.083vw;
    width: 23.3vw;
  }

  .formatto-clients__heading {
    gap: 1.25vw;
  }

  .formatto-clients__eyebrow {
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }

  .formatto-clients h2 {
    font-size: 2.083vw;
    letter-spacing: -0.021vw;
  }

  .formatto-clients__text {
    font-size: 0.938vw;
    letter-spacing: -0.009vw;
  }

  .formatto-clients__map {
    flex-basis: 36.927vw;
    width: 36.927vw;
    margin-top: 0.409vw;
  }

  .formatto-clients__map img {
    width: 36.927vw;
    height: 18.227vw;
  }

  .formatto-clients__map p {
    left: 13.802vw;
    bottom: 0.26vw;
    max-width: 15vw;
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }
}

@media (min-width: 1367px) and (max-width: 1919px) {
  .formatto-clients {
    padding-inline: 12vw;
  }

  .formatto-clients__content {
    flex-basis: 31vw;
    width: 31vw;
  }

  .formatto-clients__eyebrow,
  .formatto-clients__text,
  .formatto-clients__map p {
    font-size: clamp(16px, 0.938vw, 18px);
  }

  .formatto-clients h2 {
    max-width: 31vw;
    font-size: clamp(24px, 2.083vw, 40px);
  }

  .formatto-clients__text {
    max-width: 31vw;
  }
}

@media (max-width: 1366px) {
  .formatto-clients__eyebrow {
    font-size: clamp(14px, 0.833vw, 16px);
  }

  .formatto-clients h2 {
    font-size: clamp(20px, 2.083vw, 40px);
  }

  .formatto-clients__text,
  .formatto-clients__map p {
    font-size: clamp(14px, 0.938vw, 18px);
  }

  .formatto-clients__map {
    flex-basis: clamp(430px, 36.927vw, 709px);
    width: clamp(430px, 36.927vw, 709px);
  }

  .formatto-clients__map img {
    width: clamp(430px, 36.927vw, 709px);
    height: clamp(212px, 18.227vw, 350px);
  }
}

@media (max-width: 1024px) {
  .formatto-clients {
    padding-inline: 5vw;
  }

  .formatto-clients__content {
    flex-basis: 29.125vw;
    gap: 2.083vw;
    width: 29.125vw;
  }

  .formatto-clients__eyebrow {
    font-size: clamp(14px, 0.833vw, 16px);
  }

  .formatto-clients h2 {
    font-size: clamp(22px, 2.083vw, 40px);
  }

  .formatto-clients__text {
    font-size: clamp(14px, 0.938vw, 18px);
  }

  .formatto-clients__map p {
    font-size: clamp(14px, 0.833vw, 16px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .formatto-clients {
    gap: 3.333vw;
    min-height: 32.682vw;
    padding: 6.667vw 11.719vw;
  }

  .formatto-clients__content {
    flex-basis: 29.98vw;
    gap: 2.083vw;
    width: 29.98vw;
  }

  .formatto-clients__heading {
    gap: 1.25vw;
  }

  .formatto-clients h2,
  .formatto-clients__text {
    max-width: 29.98vw;
  }

  .formatto-clients__eyebrow {
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }

  .formatto-clients h2 {
    font-size: 2.083vw;
    letter-spacing: -0.021vw;
  }

  .formatto-clients__text {
    font-size: 1.172vw;
    letter-spacing: -0.012vw;
  }

  .formatto-clients__map {
    flex-basis: 43.372vw;
    width: 43.372vw;
    margin-top: 0.293vw;
  }

  .formatto-clients__map img {
    width: 43.372vw;
    height: 21.409vw;
  }

  .formatto-clients__map p {
    left: 16.211vw;
    bottom: 0.293vw;
    max-width: 19.531vw;
    font-size: 0.979vw;
    letter-spacing: -0.01vw;
  }
}

@media (max-width: 767px) {
  .formatto-clients {
    flex-direction: column;
    gap: 10.43vw;
    padding: 16.688vw 8.344vw;
  }

  .formatto-clients__content {
    flex-basis: auto;
    gap: 6.258vw;
    width: 100%;
  }

  .formatto-clients__heading {
    gap: 4.172vw;
  }

  .formatto-clients__eyebrow {
    font-size: 3.65vw;
    letter-spacing: -0.037vw;
  }

  .formatto-clients h2 {
    font-size: 7.301vw;
    letter-spacing: -0.073vw;
  }

  .formatto-clients__text {
    font-size: 4.172vw;
    letter-spacing: -0.042vw;
  }

  .formatto-clients__map {
    flex-basis: auto;
    width: 100%;
    margin-top: 0;
  }

  .formatto-clients__map img {
    width: 100%;
    height: auto;
  }

  .formatto-clients__map p {
    left: 37.809vw;
    bottom: 1.304vw;
    max-width: 70.404vw;
    font-size: 3.129vw;
    letter-spacing: -0.031vw;
  }
}

@media (min-width: 1409px) and (max-width: 1919px) {
  .formatto-clients {
    padding-right: calc((100vw - 80rem) / 2);
    padding-left: calc((100vw - 80rem) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1408px) {
  .formatto-clients {
    gap: 4.542229vw;
    padding: 9.084457vw 5vw;
  }

  .formatto-clients__content {
    flex-basis: 31.750177vw;
    gap: 2.838893vw;
    width: 31.750177vw;
  }

  .formatto-clients__heading {
    gap: 1.703335vw;
  }

  .formatto-clients__eyebrow,
  .formatto-clients__map p {
    font-size: 1.135557vw;
    letter-spacing: -0.011356vw;
  }

  .formatto-clients h2 {
    font-size: 2.838893vw;
    letter-spacing: -0.028389vw;
  }

  .formatto-clients__text {
    font-size: 1.277502vw;
    letter-spacing: -0.012775vw;
  }

  .formatto-clients__map {
    flex-basis: 50.33357vw;
    width: 50.33357vw;
    margin-top: 0.87154vw;
  }

  .formatto-clients__map img {
    width: 50.33357vw;
    height: 24.840358vw;
  }

  .formatto-clients__map p {
    left: 18.807665vw;
    bottom: 0.354862vw;
    max-width: 20.440028vw;
  }
}

@media (max-width: 767px) {
  .formatto-clients {
    padding-right: 5vw;
    padding-left: 5vw;
  }
}

@media (min-width: 1409px) and (max-width: 1919px) {
  .formatto-clients {
    gap: 4rem;
  }

  .formatto-clients__content {
    flex-basis: 27.96rem;
    gap: 2.5rem;
    width: 27.96rem;
  }

  .formatto-clients__heading {
    gap: 1.5rem;
  }

  .formatto-clients__eyebrow,
  .formatto-clients__map p {
    font-size: 1rem;
    letter-spacing: -0.01rem;
  }

  .formatto-clients h2 {
    max-width: none;
    font-size: 2.5rem;
    letter-spacing: -0.025rem;
  }

  .formatto-clients__text {
    max-width: none;
    font-size: 1.125rem;
    letter-spacing: -0.01125rem;
  }

  .formatto-clients__map {
    flex-basis: 44.3125rem;
    width: 44.3125rem;
    margin-top: 0.7675rem;
  }

  .formatto-clients__map img {
    width: 44.3125rem;
    height: 21.8725rem;
  }

  .formatto-clients__map p {
    left: 16.5625rem;
    bottom: 0.3125rem;
    max-width: 18rem;
  }
}

.formatto-clients__map {
  aspect-ratio: 709 / 350;
}

.formatto-clients__map img {
  display: block;
  width: 100%;
  height: auto;
}

.formatto-clients__map p {
  left: 37.38%;
  bottom: 1.43%;
  max-width: 40.62%;
}

.formatto-clients__hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.formatto-clients__hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: clamp(0.875rem, 1.3vw, 1.125rem);
  height: clamp(1.125rem, 1.65vw, 1.4375rem);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.formatto-clients__hotspot::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  background: rgba(0, 135, 213, 0.18);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 220ms ease, transform 220ms ease;
}

.formatto-clients__hotspot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.1875rem 0.25rem rgba(0, 47, 76, 0.18));
  transition: transform 220ms ease, filter 220ms ease;
}

.formatto-clients__hotspot--base {
  z-index: 3;
  width: clamp(1.5rem, 2.45vw, 2.25rem);
  height: clamp(1.875rem, 3.05vw, 2.8125rem);
}

.formatto-clients__hotspot--base img {
  opacity: 0;
  filter: drop-shadow(0 0.25rem 0.4375rem rgba(0, 88, 138, 0.28));
}

.formatto-clients__hotspot--base::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #003f66;
  filter: drop-shadow(0 0.25rem 0.4375rem rgba(0, 88, 138, 0.28));
  mask: url("../../images/icons/research-online-benefit-compliance.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icons/research-online-benefit-compliance.svg") center / contain no-repeat;
  transition: transform 220ms ease, filter 220ms ease;
}

.formatto-clients__hotspot span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  z-index: 10;
  min-width: max-content;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  color: var(--color-blue-50);
  background: var(--color-blue-600);
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.85vw, 0.875rem);
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition: opacity 220ms ease, transform 220ms ease;
  white-space: nowrap;
}

.formatto-clients__hotspot span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.5rem;
  height: 0.5rem;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}

.formatto-clients__hotspot.is-active::before,
.formatto-clients__hotspot:focus-visible::before {
  opacity: 1;
  transform: scale(1.85);
}

.formatto-clients__hotspot--base.is-active::before,
.formatto-clients__hotspot--base:focus-visible::before {
  transform: scale(2.15);
}

.formatto-clients__hotspot.is-active img,
.formatto-clients__hotspot:focus-visible img {
  filter: drop-shadow(0 0.25rem 0.4375rem rgba(0, 88, 138, 0.3));
  transform: scale(1.08);
}

.formatto-clients__hotspot--base.is-active::after,
.formatto-clients__hotspot--base:focus-visible::after {
  filter: drop-shadow(0 0.3125rem 0.5rem rgba(0, 88, 138, 0.34));
  transform: scale(1.08);
}

.formatto-clients__hotspot.is-active span,
.formatto-clients__hotspot:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.formatto-clients__hotspot:focus-visible {
  outline: 0.125rem solid var(--color-blue-600);
  outline-offset: 0.125rem;
}

@media (hover: hover) and (pointer: fine) {
  .formatto-clients__hotspot:hover::before {
    opacity: 1;
    transform: scale(1.85);
  }

  .formatto-clients__hotspot--base:hover::before {
    transform: scale(2.15);
  }

  .formatto-clients__hotspot:hover img {
    filter: drop-shadow(0 0.25rem 0.4375rem rgba(0, 88, 138, 0.3));
    transform: scale(1.08);
  }

  .formatto-clients__hotspot--base:hover::after {
    filter: drop-shadow(0 0.3125rem 0.5rem rgba(0, 88, 138, 0.34));
    transform: scale(1.08);
  }

  .formatto-clients__hotspot:hover span {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 767px) {
  .formatto-clients__map p {
    left: 50%;
    bottom: -6vw;
    width: 90vw;
    max-width: 90vw;
    text-align: center;
    transform: translateX(-50%);
  }
}