/* ============================================================
   HITIKET — CONTACT PAGE
============================================================ */


/* ============================================================
   HEADER NAVIGATION
============================================================ */

.contact-nav {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-left: auto;
}

.contact-nav a {
  position: relative;

  padding: 10px 0;

  color: var(--ocean);

  font-size: 11px;
  font-weight: 600;

  text-decoration: none;

  transition: color 0.16s ease;
}

.contact-nav a:hover {
  color: var(--brand);
}

.contact-nav a.active {
  color: var(--brand);
}

.contact-nav a.active::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 2px;
  left: 0;

  height: 2px;

  border-radius: 999px;

  background: var(--brand);
}


/* ============================================================
   HERO
============================================================ */

.contact-hero {
  padding: 105px 0 86px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fdfd 100%
    );
}

.contact-hero-inner {
  max-width: 820px;

  margin-left: 0;
}

.contact-eyebrow {
  margin: 0 0 19px;

  color: var(--brand);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 2.3px;

  text-transform: uppercase;
}

.contact-hero h1 {
  margin: 0 0 25px;

  color: var(--ocean);

  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 700;

  letter-spacing: -3.2px;
  line-height: 1.02;
}

.contact-intro {
  max-width: 680px;

  margin: 0;

  color: var(--muted);

  font-size: 14px;
  font-weight: 400;

  line-height: 1.85;
}


/* ============================================================
   CONTACT CARDS
============================================================ */

.contact-section {
  padding: 74px 0 88px;

  background: #ffffff;
}

.contact-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;
}

.contact-card {
  position: relative;

  min-height: 300px;

  padding: 36px;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: #ffffff;

  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.contact-card:hover {
  transform: translateY(-3px);

  border-color: rgba(13, 183, 183, 0.35);

  box-shadow:
    0 18px 50px
    rgba(7, 59, 76, 0.08);
}

.contact-card-featured {
  background: var(--ice);
}

.contact-card-number {
  margin-bottom: 45px;

  color: var(--brand);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1.6px;
}

.contact-card h2 {
  margin: 0 0 14px;

  color: var(--ocean);

  font-size: 23px;
  font-weight: 700;

  letter-spacing: -0.7px;
}

.contact-card p {
  max-width: 490px;

  margin: 0 0 31px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.8;
}

.contact-email {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  color: var(--ocean);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;

  transition: color 0.16s ease;
}

.contact-email span {
  color: var(--brand);

  font-size: 18px;

  transition:
    transform 0.16s ease;
}

.contact-email:hover {
  color: var(--brand);
}

.contact-email:hover span {
  transform: translateX(4px);
}


/* ============================================================
   PARTNER INFORMATION
============================================================ */

.contact-partner-section {
  padding: 88px 0;

  background: #f8fbfb;
}

.contact-partner-grid {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(0, 1.2fr);

  gap: 90px;

  align-items: start;
}

.contact-partner-grid h2 {
  max-width: 430px;

  margin: 0;

  color: var(--ocean);

  font-size: clamp(30px, 3vw, 43px);
  font-weight: 700;

  letter-spacing: -1.5px;

  line-height: 1.12;
}

.contact-partner-copy {
  max-width: 650px;
}

.contact-partner-copy p {
  margin: 0 0 18px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.85;
}

.contact-partner-copy p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   BUSINESS INFORMATION
============================================================ */

.contact-info-section {
  padding: 44px 0 68px;

  background: #ffffff;
}

.contact-info-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.contact-info-grid > div {
  padding: 27px 24px;

  border-right: 1px solid var(--border);
}

.contact-info-grid > div:first-child {
  padding-left: 0;
}

.contact-info-grid > div:last-child {
  border-right: 0;
}

.contact-info-grid span,
.contact-info-grid strong {
  display: block;
}

.contact-info-grid span {
  margin-bottom: 8px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 1.1px;

  text-transform: uppercase;
}

.contact-info-grid strong {
  color: var(--ocean);

  font-size: 11px;
  font-weight: 700;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

  .contact-nav {
    gap: 18px;
  }

  .contact-nav a {
    font-size: 10px;
  }

  .contact-hero {
    padding:
      105px
      0
      66px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-partner-grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .contact-info-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .contact-info-grid > div:nth-child(2) {
    border-right: 0;
  }

  .contact-info-grid > div:nth-child(3),
  .contact-info-grid > div:nth-child(4) {
    border-top: 1px solid var(--border);
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 680px) {

  .contact-nav {
    gap: 15px;

    overflow-x: auto;

    white-space: nowrap;
  }

  .contact-nav a {
    font-size: 9px;
  }

  .contact-hero {
    padding:
      78px
      0
      52px;
  }

  .contact-hero h1 {
    margin-bottom: 18px;

    font-size: 42px;

    letter-spacing: -2px;
  }

  .contact-intro {
    font-size: 11px;
  }

  .contact-section {
    padding:
      45px
      0
      55px;
  }

  .contact-card {
    min-height: auto;

    padding: 28px;
  }

  .contact-card-number {
    margin-bottom: 30px;
  }

  .contact-card h2 {
    font-size: 20px;
  }

  .contact-partner-section {
    padding:
      56px
      0;
  }

  .contact-partner-copy p {
    font-size: 11px;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-grid > div {
    padding:
      20px
      0;

    border-right: 0;

    border-top: 1px solid var(--border);
  }

  .contact-info-grid > div:first-child {
    border-top: 0;
  }

}