/* =========================================
   GSP CONTACTS
   CLEAN GRID / RHYTHM
   ========================================= */

.contacts-main {
  --ct-1: 4px;
  --ct-2: 8px;
  --ct-3: 12px;
  --ct-4: 16px;
  --ct-5: 24px;
  --ct-6: 32px;
  --ct-7: 48px;
  --ct-8: 72px;

  overflow: hidden;
}


/* =========================================
   PAGE HEAD
   ========================================= */

.contacts-head {
  display: grid;

  grid-template-columns:
    minmax(0, 7fr)
    minmax(280px, 5fr);

  gap:
    var(--ct-7);

  align-items:
    end;

  padding:
    var(--ct-8) 0
    var(--ct-7);
}


.contacts-eyebrow {
  margin:
    0 0 var(--ct-4);

  color:
    var(--blue);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.3;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}


.contacts-title {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--text);

  font-size:
    clamp(48px, 5.5vw, 74px);

  font-weight:
    750;

  line-height:
    .98;

  letter-spacing:
    -.05em;
}


.contacts-lead {
  max-width:
    430px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.65;
}


/* =========================================
   PRIMARY CONTACTS
   ========================================= */

.contacts-primary {
  display: grid;

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

  gap:
    var(--ct-2);

  margin-bottom:
    var(--ct-2);
}


.contact-primary-card {
  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  gap:
    var(--ct-6);

  min-height:
    190px;

  padding:
    var(--ct-5);

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

  border-radius:
    var(--radius);

  background:
    #fff;

  color:
    var(--text);

  text-decoration:
    none;

  transition:
    border-color .16s ease,
    background .16s ease;
}


.contact-primary-card:hover {
  border-color:
    #ADB7BD;

  background:
    #F8F9F8;
}


.contact-card-label {
  color:
    #8A9197;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}


.contact-primary-value {
  min-width:
    0;

  overflow-wrap:
    anywhere;

  color:
    var(--text);

  font-size:
    clamp(22px, 2.7vw, 34px);

  font-weight:
    730;

  line-height:
    1.08;

  letter-spacing:
    -.035em;
}


.contact-primary-arrow {
  margin-top:
    var(--ct-3);

  color:
    var(--blue);

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.3;
}


/* =========================================
   ADDRESS / REQUISITES
   ========================================= */

.contacts-info-grid {
  display: grid;

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

  gap:
    var(--ct-2);
}


.contact-info-card {
  min-width: 0;

  padding:
    var(--ct-5);

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

  border-radius:
    var(--radius);

  background:
    #fff;
}


.contact-info-title {
  margin:
    var(--ct-5) 0 0;

  color:
    var(--text);

  font-size:
    20px;

  font-weight:
    720;

  line-height:
    1.15;

  letter-spacing:
    -.025em;
}


.contact-info-text {
  max-width:
    520px;

  margin-top:
    var(--ct-3);

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.65;
}


/* =========================================
   REQUISITES
   ========================================= */

.requisites {
  display: grid;

  margin-top:
    var(--ct-5);

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


.requisite-row {
  min-height:
    46px;

  display: grid;

  grid-template-columns:
    90px minmax(0, 1fr);

  gap:
    var(--ct-4);

  align-items:
    center;

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


.requisite-label {
  color:
    #8A9197;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .06em;
}


.requisite-value {
  color:
    var(--text);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    11px;

  font-weight:
    650;
}


/* =========================================
   CTA
   ========================================= */

.contacts-cta {
  display: grid;

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

  gap:
    var(--ct-7);

  align-items:
    center;

  margin:
    var(--ct-8) 0;

  padding:
    var(--ct-6);

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

  border-radius:
    var(--radius);

  background:
    #fff;
}


.contacts-cta-title {
  max-width:
    680px;

  margin:
    0;

  color:
    var(--text);

  font-size:
    clamp(30px, 3.8vw, 46px);

  font-weight:
    740;

  line-height:
    1;

  letter-spacing:
    -.04em;
}


.contacts-cta-text {
  max-width:
    520px;

  margin-top:
    var(--ct-3);

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.55;
}


.contacts-cta .btn {
  min-height:
    44px;

  white-space:
    nowrap;
}


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

@media (max-width: 980px) {

  .contacts-head {
    grid-template-columns:
      minmax(0, 1fr)
      300px;

    gap:
      var(--ct-6);
  }


  .contact-primary-value {
    font-size:
      24px;
  }

}


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

@media (max-width: 760px) {

  .contacts-main {
    --ct-7: 32px;
    --ct-8: 48px;
  }


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

    gap:
      var(--ct-4);

    padding:
      var(--ct-7) 0
      var(--ct-6);
  }


  .contacts-eyebrow {
    margin-bottom:
      var(--ct-3);
  }


  .contacts-title {
    font-size:
      clamp(39px, 12vw, 54px);
  }


  .contacts-lead {
    max-width:
      520px;
  }


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

    gap:
      var(--ct-2);

    margin-bottom:
      var(--ct-2);
  }


  .contact-primary-card {
    min-height:
      150px;

    gap:
      var(--ct-5);

    padding:
      var(--ct-4);
  }


  .contact-primary-value {
    font-size:
      23px;
  }


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

    gap:
      var(--ct-2);
  }


  .contact-info-card {
    padding:
      var(--ct-4);
  }


  .contact-info-title {
    margin-top:
      var(--ct-4);

    font-size:
      18px;
  }


  .requisites {
    margin-top:
      var(--ct-4);
  }


  .requisite-row {
    grid-template-columns:
      70px minmax(0, 1fr);

    gap:
      var(--ct-3);
  }


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

    gap:
      var(--ct-5);

    margin:
      var(--ct-8) 0;

    padding:
      var(--ct-5);
  }


  .contacts-cta-title {
    font-size:
      32px;
  }


  .contacts-cta .btn {
    width:
      100%;
  }

}


/* =========================================
   VERY SMALL MOBILE
   ========================================= */

@media (max-width: 370px) {

  .contacts-title {
    font-size:
      37px;
  }


  .contact-primary-value {
    font-size:
      20px;
  }


  .requisite-row {
    grid-template-columns:
      1fr;

    gap:
      var(--ct-1);

    padding:
      var(--ct-3) 0;
  }

}