.contacts-hero {
  min-height: 720px;
  display: grid;
  align-items: center;
  padding: 148px 0 72px;
  color: var(--color-white);
  background:
    linear-gradient(90deg, rgb(0 48 135 / 18%) 1px, transparent 1px),
    linear-gradient(rgb(0 48 135 / 18%) 1px, transparent 1px),
    radial-gradient(circle at 78% 35%, #17395e 0, #101820 42%, #0b1116 100%);
  background-size: 64px 64px, 64px 64px, auto;
}

.contacts-hero .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-size: var(--text-small);
}

.contacts-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.55fr);
  align-items: center;
  gap: clamp(48px, 8vw, 128px);
}

.contacts-hero .breadcrumbs a,
.contacts-hero .breadcrumbs span {
  color: #b5c4d0;
}

.contacts-hero .breadcrumbs a {
  text-decoration: none;
}

.contacts-hero .breadcrumbs a:hover {
  color: var(--color-white);
}

.contacts-hero .button--ghost-light {
  color: var(--color-white);
  background: transparent;
  border-color: rgb(255 255 255 / 55%);
}

.contacts-hero .button--ghost-light:hover:not(:disabled) {
  background: rgb(255 255 255 / 10%);
  border-color: var(--color-white);
}

.contacts-hero__content h1 {
  max-width: 900px;
  margin: var(--space-6) 0;
  font-family: var(--font-heading);
  font-size: var(--text-display-lg);
  line-height: var(--leading-display-lg);
  letter-spacing: var(--tracking-display);
}

.contacts-hero__content > p {
  max-width: 650px;
  margin: 0;
  color: #c4d0d9;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.contacts-hero__actions,
.contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contacts-hero__actions {
  margin-top: var(--space-8);
}

.contacts-hero__card {
  display: grid;
  gap: var(--space-8);
  padding: 72px var(--space-8) var(--space-8);
  color: #9dc5ff;
  background: rgb(4 18 31 / 76%);
  border: 1px solid #45637c;
  backdrop-filter: blur(12px);
}

.contacts-hero__card p {
  margin: var(--space-2) 0 0;
  color: var(--color-white);
  line-height: var(--leading-body);
}

.contacts-hero__phone {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.contacts-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.contact-card {
  min-height: 350px;
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--color-surface);
  border: var(--border-default);
}

.contact-card__number {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  color: #a2afb8;
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

.contact-card h2 {
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}

.contact-card h2 a {
  color: inherit;
  text-decoration: none;
}

.contact-card p {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
}

.contact-card .text-link,
.contact-card__actions,
.contact-card__note {
  margin-top: auto;
}

.contact-card__note {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contacts-location {
  background: var(--color-surface);
}

.contacts-location__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.65fr) minmax(0, 1.35fr);
  align-items: stretch;
  gap: clamp(48px, 8vw, 120px);
}

.contacts-location__content h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-display);
}

.contacts-location__content p {
  max-width: 520px;
  margin: var(--space-6) 0 var(--space-8);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
}

.contacts-map {
  min-height: 480px;
  position: relative;
  overflow: hidden;
  color: var(--color-primary);
  background:
    linear-gradient(90deg, rgb(0 48 135 / 8%) 1px, transparent 1px),
    linear-gradient(rgb(0 48 135 / 8%) 1px, transparent 1px),
    #e9eff3;
  background-size: 48px 48px;
  border: 1px solid #c8d3db;
}

.contacts-map__road {
  position: absolute;
  height: 54px;
  background: var(--color-white);
  border: 1px solid #c6d1d9;
  box-shadow: 0 0 0 8px rgb(255 255 255 / 45%);
}

.contacts-map__road--one {
  width: 120%;
  top: 38%;
  left: -10%;
  transform: rotate(-8deg);
}

.contacts-map__road--two {
  width: 80%;
  top: 58%;
  left: 26%;
  transform: rotate(56deg);
}

.contacts-map__road--three {
  width: 68%;
  top: 18%;
  left: 36%;
  transform: rotate(86deg);
}

.contacts-map__pin {
  width: 34px;
  height: 34px;
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 48%;
  background: var(--color-primary);
  border: 8px solid var(--color-white);
  border-radius: 50% 50% 50% 0;
  box-shadow: var(--shadow-raised);
  transform: rotate(-45deg);
}

.contacts-map__caption {
  position: absolute;
  z-index: 2;
  right: var(--space-6);
  bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  color: var(--color-white);
  background: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 63.9375rem) {
  .contacts-hero__grid,
  .contacts-location__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contacts-hero__card {
    max-width: 720px;
  }

  .contacts-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-card {
    min-height: 280px;
  }
}

@media (max-width: 47.9375rem) {
  .contacts-hero {
    min-height: auto;
    padding: 116px 0 56px;
  }

  .contacts-hero__content h1 {
    font-size: var(--text-h1);
  }

  .contacts-hero__card,
  .contact-card {
    padding: 64px var(--space-6) var(--space-6);
  }

  .contacts-map {
    min-height: 360px;
  }
}