/* Topbar ............................................................... */

.selector-topbar {
  --_font-size: clamp(0.85rem, calc(0.82rem + 0.188vw), 1rem);
  --_logo-size: clamp(4.8rem, calc(4.35rem + 2.25vw), 6rem);
  --_logo-offset: clamp(0.5rem, calc(0.35rem + 0.75vw), 1.25rem);
  --_item-gap: clamp(1.25rem, calc(0.8rem + 2.25vw), 4.5rem);
  --_nav-offset-y: -0.08em;
  position: relative;
  z-index: var(--z-index-dropdown);
  font-size: var(--_font-size);
}
.selector-topbar__inner {
  position: relative;
  min-block-size: clamp(2.6rem, calc(2.35rem + 1.25vw), 3.85rem);
  padding-inline-start: calc(var(--_logo-size) + var(--_logo-offset));
}
.selector-topbar__logo {
  position: absolute;
  inset-block-start: var(--_logo-offset);
  inset-inline-start: 0;
  inline-size: var(--_logo-size);
  z-index: var(--z-index-dropdown);
}
.selector-topbar__logo > a {
  display: block;
}
.selector-topbar__logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.selector-topbar__navigation {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  -webkit-transform: translateY(var(--_nav-offset-y));
  transform: translateY(var(--_nav-offset-y));
}
.selector-topbar__list {
  align-items: center;
  gap: var(--_item-gap);
}
a.selector-topbar__link {
  color: var(--text-white);
  border-block-end-color: transparent;
  font-family: var(--ff-body-sb);
  font-size: var(--_font-size);
  line-height: 1;
  white-space: nowrap;
}
a.selector-topbar__link.hi,
a.selector-topbar__link:hover {
  color: color-mix(in srgb, var(--text-white) 75%, var(--bg-accent-500));
  border-block-end-color: currentColor;
}
a.selector-topbar__link:focus-visible {
  color: var(--text-white);
  border-block-end-color: currentColor;
  outline: 0.1rem dashed var(--text-white);
  outline-offset: 0.2rem;
}
@media screen and (max-width: 991px) {
  .selector-topbar {
    --_logo-size: clamp(3.75rem, 15vw, 5rem);
    --_logo-offset: 0.3rem;
    --_item-gap: clamp(1rem, 3vw, 1.85rem);
    --_font-size: clamp(1.075rem, calc(1rem + 0.375vw), 1.225rem);
  }
  .selector-topbar__inner {
    min-block-size: clamp(2.5rem, 12vw, 3.5rem);
    padding-inline-start: calc(var(--_logo-size) + 0.75rem);
  }
}
@media screen and (max-width: 575px) {
  .selector-topbar {
    --_logo-size: 3.4rem;
    --_item-gap: clamp(0.75rem, 2.8vw, 1.2rem);
    --_font-size: clamp(0.975rem, 4.375vw, 1.075rem);
  }
  .selector-topbar__inner {
    min-block-size: 2.6rem;
    padding-inline-start: calc(var(--_logo-size) + 0.5rem);
  }
}
@media screen and (max-width: 360px) {
  .selector-topbar__list {
    gap: 0.6rem;
  }
  a.selector-topbar__link {
    font-size: 0.925rem;
  }
}

/* Intro ............................................................... */

.selector-section__intro-row {
  align-items: flex-start;
  row-gap: clamp(1.5rem, calc(1.2rem + 1.5vw), 3rem);
}
.selector-section__title {
  padding-inline-start: clamp(3rem, calc(1.4rem + 8vw), 10rem);
}
.selector-section__title h1 {
  font-family: var(--ff-heading);
  font-size: clamp(2rem, calc(1.6rem + 2.5vw), 4rem);
  font-weight: var(--fw-sb);
  line-height: 1.08;
  text-wrap: balance;
}
.selector-section__paragraph {
  max-inline-size: 25rem;
}
.selector-section__paragraph p {
  margin: 0;
}
.selector-section__circles {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 991px) {
  .selector-section__title {
    padding-inline-start: 0;
  }
  .selector-section__paragraph {
    max-inline-size: 36rem;
    margin-inline: auto;
  }
  .selector-section__circles {
    justify-content: center;
  }
}

/* Selector-Grid ............................................................... */

.selector-section__grid {
  padding-block-end: clamp(3rem, calc(2.2rem + 4vw), 7rem);
}
.selector-grid__row {
  row-gap: clamp(0.75rem, calc(0.66rem + 0.562vw), 1.2rem);
}
.selector-grid__card {
  position: relative;
  min-block-size: clamp(22rem, calc(19.8rem + 13.75vw), 33rem);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg-dark-700);
  -webkit-box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0%);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0%);
  transition:
    -webkit-transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 500ms ease;
}
.selector-grid__card::after {
  content: "";
  position: absolute;
  z-index: var(--z-index-default);
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(15 20 26 / 4%) 15%,
    rgb(15 20 26 / 18%) 45%,
    rgb(15 20 26 / 92%) 100%
  );
  pointer-events: none;
  transition: background-color 420ms ease;
}
.selector-grid__card::before {
  content: "";
  position: absolute;
  z-index: var(--z-index-above);
  inset: 0;
  background-color: rgb(15 20 26 / 0%);
  pointer-events: none;
  transition: background-color 420ms ease;
}
.selector-grid__card > picture {
  position: absolute;
  inset: 0;
}
.selector-grid__card picture,
.selector-grid__card picture img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.selector-grid__card picture img {
  transition:
    -webkit-transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
}
.selector-grid__content {
  position: absolute;
  z-index: calc(var(--z-index-above) + 1);
  inset-inline: 0;
  inset-block-end: 0;
  padding-block-start: clamp(1.5rem, calc(1.1rem + 2vw), 3.5rem);
  padding-block-end: clamp(1.1rem, calc(0.95rem + 0.75vw), 1.85rem);
  padding-inline: clamp(1.25rem, calc(0.95rem + 1.5vw), 2.75rem);
}
.selector-grid__title h3 {
  color: var(--text-white);
  font-family: var(--ff-heading);
  font-size: clamp(1.8rem, calc(1.7rem + 0.625vw), 2.3rem);
  font-weight: var(--fw-sb);
  line-height: 1.15;
  text-wrap: balance;
}
.selector-grid__address {
  margin-block: clamp(0.45rem, calc(0.4rem + 0.25vw), 0.7rem) 0;
  margin-inline: 0;
  color: var(--text-white);
  font-family: var(--ff-body-md);
  font-style: normal;
  line-height: 1.5;
}
.selector-grid__phone {
  margin-block-start: 0.05rem;
}
.selector-grid__phone a {
  font-family: var(--ff-body-md);
  color: var(--text-white);
  border-block-end-color: transparent;
}
.selector-grid__phone a:hover {
  color: var(--text-white);
  border-block-end-color: currentColor;
}
.selector-grid__phone a:focus-visible {
  outline: 0.1rem dashed var(--text-white);
  outline-offset: 0.2rem;
}
.selector-grid__cta {
  margin-block-start: clamp(0.65rem, calc(0.55rem + 0.5vw), 1.15rem);
}
.selector-grid__cta a.cta-link {
  --_hover-bg: color-mix(in srgb, var(--bg-white) 94%, transparent);
  --_focus-outline: var(--bg-white);
  min-inline-size: clamp(12rem, calc(10rem + 10vw), 18rem);
  padding-inline: clamp(1rem, calc(0.85rem + 0.75vw), 1.75rem);
}
.selector-grid__cta a.cta-link:hover,
.selector-grid__cta a.cta-link:focus-visible {
  color: var(--text-primary);
}
@media (hover: hover) and (pointer: fine) {
  .selector-grid__card:hover {
    -webkit-box-shadow: 0 1.4rem 2.75rem -0.9rem rgb(0 0 0 / 42%);
    box-shadow: 0 1.4rem 2.75rem -0.9rem rgb(0 0 0 / 42%);
    -webkit-transform: translateY(-0.45rem);
    transform: translateY(-0.45rem);
  }
  .selector-grid__card:hover::before {
    background-color: rgb(15 20 26 / 24%);
  }
  .selector-grid__card:hover picture img {
    filter: saturate(1.05) contrast(1.08) brightness(0.84);
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
  }
}
@media screen and (max-width: 991px) {
  .selector-grid__card {
    min-block-size: clamp(24rem, calc(20rem + 20vw), 32rem);
  }
}
@media screen and (max-width: 575px) {
  .selector-grid__cta a.cta-link {
    min-inline-size: 0;
    inline-size: 100%;
  }
}

/* Statistics ............................................................... */

.selector-section__statistics {
  padding-block: clamp(2.5rem, calc(2rem + 2.5vw), 5rem);
}
.selector-statistics__heading {
  margin-block-end: clamp(1.75rem, calc(1.55rem + 1.25vw), 2.75rem);
}
.selector-statistics__heading h2 {
  font-family: var(--ff-heading);
  font-size: clamp(1.2rem, calc(1.14rem + 0.375vw), 1.5rem);
  font-weight: var(--fw-sb);
  text-wrap: balance;
}
.selector-statistics__row {
  row-gap: clamp(0.75rem, calc(0.66rem + 0.562vw), 1.2rem);
}
.selector-statistics__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, calc(1.5rem + 2.5vw), 4.5rem);
  padding-block: clamp(1.5rem, calc(1.15rem + 1.75vw), 3.25rem);
  padding-inline: clamp(1.5rem, calc(1.15rem + 1.75vw), 3.25rem);
}
.selector-statistics__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.selector-statistics__value {
  display: flex;
  align-items: baseline;
  font-family: var(--ff-heading);
  font-size: clamp(2rem, calc(1.65rem + 2.188vw), 3.75rem);
  font-weight: var(--fw-sb);
  line-height: 1;
  white-space: nowrap;
}
.selector-statistics__value small {
  font-size: 0.65em;
}
.selector-statistics__number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: clamp(2.25rem, calc(2.1rem + 0.75vw), 3rem);
  block-size: clamp(2.25rem, calc(2.1rem + 0.75vw), 3rem);
  background-color: color-mix(in srgb, var(--bg-white) 24%, transparent);
  border-radius: 50%;
  font-family: var(--ff-body-md);
  font-size: clamp(0.95rem, calc(0.9rem + 0.25vw), 1.2rem);
}
.selector-statistics__paragraph {
  max-inline-size: 28rem;
}
.selector-statistics__paragraph p {
  font-family: var(--ff-body-md);
  margin: 0;
}
@media screen and (max-width: 991px) {
  .selector-statistics__card {
    gap: 2rem;
  }
}
@media screen and (max-width: 575px) {
  .selector-statistics__header {
    gap: 0.75rem;
  }
  .selector-statistics__value {
    white-space: normal;
  }
}
