.contact-page { background: var(--ink); }

@media (min-width: 769px) {
  .contact-hero__title,
  .contact-content__heading,
  .contact-grid { margin-left: var(--pc-frame-gutter); }
}

.contact-hero {
  position: relative;
  height: calc(700 * var(--pc));
  overflow: hidden;
  background: #05090b;
}

.contact-hero__background,
.contact-hero__background img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-hero__background img { object-fit: cover; }

.contact-hero__title {
  position: absolute;
  z-index: 2;
  left: calc(179 * var(--pc));
  top: calc(288 * var(--pc));
  width: calc(1100 * var(--pc));
  color: #fff;
  font-family: var(--display);
  font-size: calc(92 * var(--pc));
  font-weight: 900;
  line-height: calc(110 * var(--pc));
  letter-spacing: calc(-1.84 * var(--pc));
}

.contact-hero__title span { display: block; }
.contact-hero__title span:first-child { background: linear-gradient(90deg, #fff 38%, #a8a8a8); background-clip: text; color: transparent; }
.contact-hero__title span:last-child { background: linear-gradient(180deg, var(--green), #b3e255); background-clip: text; color: transparent; }

.contact-content {
  position: relative;
  height: calc(1000 * var(--pc));
  overflow: hidden;
  color: #000;
  background:
    radial-gradient(ellipse at -6% 80%, rgba(246,255,143,.14), transparent 34%),
    radial-gradient(ellipse at 105% 8%, rgba(56,137,110,.14), transparent 28%),
    #fefffd;
}

.contact-content__heading {
  position: absolute;
  left: calc(192 * var(--pc));
  top: calc(144 * var(--pc));
  width: calc(672 * var(--pc));
}

.contact-content__heading h2 {
  width: 100%;
  margin-top: calc(32 * var(--pc));
  font-family: var(--display);
  font-size: calc(82 * var(--pc));
  font-weight: 700;
  line-height: calc(88 * var(--pc));
  letter-spacing: calc(-.82 * var(--pc));
}

.contact-grid {
  position: absolute;
  left: calc(192 * var(--pc));
  top: calc(421 * var(--pc));
  width: calc(1548 * var(--pc));
  height: calc(502 * var(--pc));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: calc(120 * var(--pc)) calc(120 * var(--pc));
  column-gap: calc(16 * var(--pc));
  row-gap: calc(126 * var(--pc));
}

.contact-card {
  position: relative;
  height: calc(211 * var(--pc));
  padding: calc(25 * var(--pc));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  border: calc(1 * var(--pc)) solid rgba(40,42,44,.6);
  border-radius: calc(20 * var(--pc));
  background: #1a1d20;
  color: #fff;
  transition: border-color .25s ease, transform .25s ease;
}

.contact-card:hover { border-color: var(--green); transform: translateY(calc(-12 * var(--pc))); }
.contact-card--projects { height: calc(207 * var(--pc)); }
.contact-card--support { height: calc(209 * var(--pc)); }
.contact-card--careers { grid-column: 1; grid-row: 2; }
.contact-card--finance { grid-column: 2; grid-row: 2; }
.contact-card--address { grid-column: 3; grid-row: 2; }

.contact-card__top {
  width: 100%;
  padding-bottom: calc(12 * var(--pc));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f8ffea;
  font-size: calc(16 * var(--pc));
  font-weight: 400;
  line-height: normal;
}

.contact-card__top img { flex: none; max-width: none; }
.contact-card--general .contact-card__top img { width: calc(25 * var(--pc)); height: calc(25 * var(--pc)); }
.contact-card--projects .contact-card__top img { width: calc(24 * var(--pc)); height: calc(19 * var(--pc)); }
.contact-card--support .contact-card__top img { width: calc(26 * var(--pc)); height: calc(23 * var(--pc)); }
.contact-card--careers .contact-card__top img { width: calc(25 * var(--pc)); height: calc(26 * var(--pc)); }
.contact-card--finance .contact-card__top img { width: calc(22 * var(--pc)); height: calc(22 * var(--pc)); }
.contact-card--address .contact-card__top img { width: calc(20 * var(--pc)); height: calc(25 * var(--pc)); }

.contact-card__bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 * var(--pc));
  font-size: calc(20 * var(--pc));
  font-weight: 500;
  line-height: normal;
}

.contact-card__bottom strong { color: #9ae600; font-weight: 500; }

@media (max-width: 768px) {
  .contact-hero { height: calc(600 * var(--m)); }
  .contact-hero__title {
    left: calc(22 * var(--m));
    top: calc(397 * var(--m));
    width: calc(341 * var(--m));
    font-size: calc(54 * var(--m));
    line-height: calc(56 * var(--m));
    letter-spacing: calc(-1.62 * var(--m));
  }

  .contact-content {
    height: calc(1691 * var(--m));
    background:
      radial-gradient(ellipse at -10% 66%, rgba(246,255,143,.12), transparent 32%),
      radial-gradient(ellipse at 105% 12%, rgba(56,137,110,.12), transparent 28%),
      #fefffd;
  }

  .contact-content__heading {
    left: calc(20 * var(--m));
    top: calc(57 * var(--m));
    width: calc(339 * var(--m));
  }

  .contact-content__heading h2 {
    margin-top: calc(39 * var(--m));
    font-size: calc(40 * var(--m));
    line-height: calc(44 * var(--m));
    letter-spacing: calc(-.4 * var(--m));
  }

  .contact-grid {
    left: calc(21 * var(--m));
    top: calc(257 * var(--m));
    width: calc(348 * var(--m));
    height: calc(1360 * var(--m));
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--m));
  }

  .contact-card,
  .contact-card--careers,
  .contact-card--finance {
    width: 100%;
    height: calc(211 * var(--m));
    padding: calc(25 * var(--m));
    border-width: calc(1 * var(--m));
    border-radius: calc(20 * var(--m));
  }

  .contact-card--projects { height: calc(207 * var(--m)); }
  .contact-card--support { height: calc(209 * var(--m)); }
  .contact-card:hover { transform: none; }

  .contact-card__top {
    padding-bottom: calc(12 * var(--m));
    font-size: calc(16 * var(--m));
  }

  .contact-card--general .contact-card__top img { width: calc(25 * var(--m)); height: calc(25 * var(--m)); }
  .contact-card--projects .contact-card__top img { width: calc(24 * var(--m)); height: calc(19 * var(--m)); }
  .contact-card--support .contact-card__top img { width: calc(26 * var(--m)); height: calc(23 * var(--m)); }
  .contact-card--careers .contact-card__top img { width: calc(25 * var(--m)); height: calc(26 * var(--m)); }
  .contact-card--finance .contact-card__top img { width: calc(22 * var(--m)); height: calc(22 * var(--m)); }
  .contact-card--address .contact-card__top img { width: calc(20 * var(--m)); height: calc(25 * var(--m)); }

  .contact-card__bottom {
    gap: calc(4 * var(--m));
    font-size: calc(16 * var(--m));
  }

  .contact-card__bottom strong { font-size: calc(20 * var(--m)); }
}