/* ==========================================================
   DAWN CONTACT PAGE
   Uses global variables/fonts/components from style.css
========================================================== */


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

.contact-hero {

  position: relative;

  overflow: hidden;

  padding:
    175px 0 105px;

  background:

    radial-gradient(
      circle at 0% 0%,
      rgba(24,76,125,.27),
      transparent 35%
    ),

    radial-gradient(
      circle at 90% 20%,
      rgba(72,87,204,.12),
      transparent 30%
    ),

    linear-gradient(
      140deg,
      #07111c 0%,
      #030608 52%,
      #07111c 100%
    );

}


.contact-grid-bg {

  position: absolute;

  inset: 0;

  opacity: .05;

  pointer-events: none;

  background-image:

    linear-gradient(
      rgba(105,200,250,.08) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(105,200,250,.08) 1px,
      transparent 1px
    );

  background-size:
    68px 68px;

}


.contact-orb {

  position: absolute;

  border-radius: 50%;

  filter:
    blur(105px);

  pointer-events: none;

}


.contact-orb-one {

  width: 470px;
  height: 470px;

  left: -200px;
  top: 260px;

  background:
    rgba(57,150,220,.08);

}


.contact-orb-two {

  width: 520px;
  height: 520px;

  right: -200px;
  top: 50px;

  background:
    rgba(125,112,255,.065);

}



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

.contact-hero-heading {

  position: relative;

  z-index: 2;

  max-width:
    920px;

  margin-bottom:
    53px;

}


.contact-hero-heading h1 {

  max-width:
    900px;

  margin-top:
    22px;

  font-size:
    clamp(
      54px,
      5.4vw,
      78px
    );

  line-height:
    .99;

  letter-spacing:
    -4.5px;

}


.contact-hero-heading h1 span {

  display: block;

  color: transparent;

  background:

    linear-gradient(
      90deg,
      var(--blue),
      var(--violet)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}


.contact-hero-heading > p {

  max-width:
    680px;

  margin-top:
    25px;

  font-size:
    16px;

}



/* ==========================================================
   MAIN PANEL
========================================================== */

.contact-main-panel {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    .72fr 1.28fr;

  overflow: hidden;

  border-radius:
    23px;

  border:
    1px solid
    rgba(105,200,250,.18);

  background:

    radial-gradient(
      circle at 90% 5%,
      rgba(86,91,219,.09),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #142139,
      #09131f
    );

  box-shadow:
    0 45px 110px
    rgba(0,0,0,.35);

}


.contact-main-panel::before {

  content: "";

  position: absolute;

  top: 0;
  left: 10%;

  width: 42%;
  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--blue),
      var(--violet),
      transparent
    );

}



/* ==========================================================
   INTRO LEFT
========================================================== */

.contact-intro {

  padding:
    51px 46px;

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

  background:

    radial-gradient(
      circle at 0% 0%,
      rgba(57,137,202,.07),
      transparent 34%
    ),

    rgba(6,14,24,.32);

}


.contact-intro-label {

  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1.6px;

}


.contact-intro h2 {

  margin-top:
    18px;

  font-size:
    clamp(
      34px,
      3.2vw,
      46px
    );

  letter-spacing:
    -2.1px;

}


.contact-intro h2 span {

  display: block;

}


.contact-intro > p {

  max-width:
    450px;

  margin-top:
    17px;

  font-size:
    13px;

}



/* POINTS */

.contact-intro-points {

  display: grid;

  gap: 10px;

  margin-top:
    34px;

}


.contact-intro-points > div {

  padding:
    13px;

  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 13px;

  align-items: center;

  border-radius:
    11px;

  border:
    1px solid
    rgba(155,187,218,.08);

  background:
    rgba(255,255,255,.012);

}


.contact-point-icon {

  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  color:
    var(--blue);

  border:
    1px solid
    rgba(105,200,250,.13);

  background:
    rgba(105,200,250,.045);

}


.contact-point-icon svg {

  width:
    16px;

  height:
    16px;

}


.contact-intro-points strong {

  display: block;

  font-size:
    11px;

}


.contact-intro-points small {

  display: block;

  margin-top:
    4px;

  color:
    #74869a;

  font-size:
    9px;

  line-height:
    1.45;

}



/* DIRECT CONTACT */

.contact-direct {

  margin-top:
    42px;

  padding-top:
    29px;

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

}


.contact-direct-title {

  display: block;

  margin-bottom:
    13px;

  color:
    #718296;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.4px;

}


.contact-direct-item {

  min-height:
    65px;

  padding:
    11px 8px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap:
    12px;

  align-items:
    center;

  border-bottom:
    1px solid
    rgba(155,187,218,.07);

  transition:
    transform .2s ease,
    background .2s ease;

}


.contact-direct-item:hover {

  transform:
    translateX(4px);

  background:
    rgba(105,200,250,.025);

}


.contact-direct-item > span {

  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    9px;

  color:
    var(--blue);

  background:
    rgba(105,200,250,.04);

}


.contact-direct-item > span svg {

  width:
    15px;

  height:
    15px;

}


.contact-direct-item small {

  display:
    block;

  color:
    #68798c;

  font-size:
    7px;

  letter-spacing:
    1px;

}


.contact-direct-item strong {

  display:
    block;

  margin-top:
    3px;

  font-size:
    10px;

}


.contact-direct-item > svg {

  width:
    13px;

  height:
    13px;

  color:
    #64798e;

}



/* ==========================================================
   FORM
========================================================== */

.contact-form-area {

  padding:
    45px;

}


.contact-form-head {

  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  padding-bottom:
    25px;

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

}


.contact-form-head > div > span {

  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1.5px;

}


.contact-form-head h3 {

  margin-top:
    6px;

  font-size:
    22px;

}


.contact-form-status {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--cyan);

  font-size:
    9px;

}


.contact-form-status i {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--cyan);

  animation:
    pulse 1.6s infinite;

}



/* FORM */

.contact-form {

  margin-top:
    28px;

}


.form-row {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;

  margin-bottom:
    16px;

}


.form-group {

  display:
    grid;

  gap:
    8px;

}


.form-group-full {

  margin-bottom:
    16px;

}


.form-group label {

  color:
    #aeb9c5;

  font-size:
    10px;

  font-weight:
    600;

}


.form-group label span {

  color:
    var(--blue);

}


.form-group input,
.form-group select,
.form-group textarea {

  width:
    100%;

  border:
    1px solid
    rgba(155,187,218,.12);

  outline:
    none;

  border-radius:
    10px;

  background:
    rgba(4,10,17,.50);

  color:
    #edf2f7;

  font-family:
    "Inter",
    sans-serif;

  font-size:
    12px;

  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;

}


.form-group input,
.form-group select {

  height:
    52px;

  padding:
    0 15px;

}


.form-group textarea {

  min-height:
    145px;

  padding:
    15px;

  resize:
    vertical;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

  color:
    #536476;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

  border-color:
    rgba(105,200,250,.38);

  background:
    rgba(7,17,28,.72);

  box-shadow:
    0 0 0 3px
    rgba(105,200,250,.035);

}


.form-group select {

  appearance:
    none;

  cursor:
    pointer;

}


.form-group select option {

  color:
    #dce5ed;

  background:
    #0b1521;

}


.select-wrap {

  position:
    relative;

}


.select-wrap select {

  padding-right:
    42px;

}


.select-wrap > svg {

  position:
    absolute;

  right:
    15px;

  top:
    50%;

  width:
    15px;

  height:
    15px;

  transform:
    translateY(-50%);

  color:
    #6d8298;

  pointer-events:
    none;

}



/* SUBMIT */

.contact-submit {

  width:
    100%;

  min-height:
    57px;

  margin-top:
    4px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border:
    0;

  border-radius:
    10px;

  cursor:
    pointer;

  color:
    #061018;

  background:

    linear-gradient(
      135deg,
      #b9eaff,
      #70c7fa
    );

  font-size:
    13px;

  font-weight:
    800;

  box-shadow:
    0 14px 32px
    rgba(60,167,225,.14);

  transition:
    box-shadow .25s ease;

}


.contact-submit:hover {

  box-shadow:
    0 20px 42px
    rgba(60,167,225,.22);

}


.contact-submit svg {

  width:
    15px;

  height:
    15px;

}


.contact-form-note {

  margin-top:
    13px;

  color:
    #627487;

  text-align:
    center;

  font-size:
    9px;

}



/* ==========================================================
   WHAT HAPPENS NEXT
========================================================== */

.contact-next-section {

  background:

    radial-gradient(
      circle at 85% 5%,
      rgba(41,88,151,.07),
      transparent 28%
    ),

    #05090d;

}


.contact-next-heading {

  max-width:
    790px;

  margin-bottom:
    48px;

}


.contact-next-heading p {

  max-width:
    590px;

  margin-top:
    17px;

}


.contact-next-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    16px;

}


.contact-next-card {

  position:
    relative;

  min-height:
    340px;

  padding:
    28px;

  overflow:
    hidden;

  border-radius:
    18px;

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

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(60,125,181,.05),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #101823,
      #080d13
    );

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}


.contact-next-card:hover {

  transform:
    translateY(-7px);

  border-color:
    var(--border-hover);

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.25);

}


.next-card-number {

  position:
    absolute;

  right:
    24px;

  top:
    24px;

  color:
    #586c80;

  font-size:
    9px;

}


.next-card-icon {

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    var(--blue);

  border:
    1px solid
    rgba(105,200,250,.14);

  background:
    rgba(105,200,250,.04);

}


.next-card-icon svg {

  width:
    19px;

  height:
    19px;

}


.next-card-label {

  display:
    block;

  margin-top:
    44px;

  color:
    var(--blue);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.4px;

}


.contact-next-card h3 {

  max-width:
    330px;

  margin-top:
    8px;

  font-size:
    22px;

  line-height:
    1.14;

}


.contact-next-card p {

  max-width:
    350px;

  margin-top:
    11px;

  font-size:
    12px;

}



/* ==========================================================
   DETAILS PANEL
========================================================== */

.contact-details-section {

  background:

    radial-gradient(
      circle at 10% 50%,
      rgba(28,89,143,.08),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #07101a,
      #05090d
    );

}


.contact-details-panel {

  display:
    grid;

  grid-template-columns:
    .82fr 1.18fr;

  overflow:
    hidden;

  border-radius:
    22px;

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

  background:
    linear-gradient(
      145deg,
      #132136,
      #09131f
    );

}


.contact-details-copy {

  padding:
    52px;

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

}


.contact-details-copy h2 {

  max-width:
    560px;

}


.contact-details-copy p {

  max-width:
    480px;

  margin-top:
    17px;

  font-size:
    13px;

}


.contact-details-list {

  display:
    grid;

}


.detail-row {

  min-height:
    135px;

  padding:
    29px 40px;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  gap:
    17px;

  align-items:
    center;

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

  transition:
    padding-left .25s ease,
    background .25s ease;

}


.detail-row:last-child {

  border-bottom:
    0;

}


a.detail-row:hover {

  padding-left:
    47px;

  background:
    rgba(105,200,250,.025);

}


.detail-row-icon {

  width:
    47px;

  height:
    47px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    12px;

  color:
    var(--blue);

  background:
    rgba(105,200,250,.05);

  border:
    1px solid
    rgba(105,200,250,.14);

}


.detail-row-icon svg {

  width:
    18px;

  height:
    18px;

}


.detail-row small {

  display:
    block;

  color:
    var(--blue);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.3px;

}


.detail-row strong {

  display:
    block;

  margin-top:
    6px;

  color:
    #dbe4ed;

  font-size:
    13px;

  line-height:
    1.6;

}


.detail-arrow {

  width:
    15px;

  height:
    15px;

  color:
    #658096;

}



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

.contact-final-section {

  background:
    #05090d;

}


.contact-final-card {

  position:
    relative;

  min-height:
    430px;

  display:
    grid;

  grid-template-columns:
    1fr .75fr;

  overflow:
    hidden;

  border-radius:
    22px;

  border:
    1px solid
    rgba(105,200,250,.18);

  background:

    radial-gradient(
      circle at 84% 32%,
      rgba(75,86,215,.14),
      transparent 31%
    ),

    linear-gradient(
      135deg,
      #152641,
      #0c1729
    );

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.25);

}


.contact-final-glow {

  position:
    absolute;

  width:
    430px;

  height:
    430px;

  right:
    -80px;

  top:
    -30px;

  border-radius:
    50%;

  background:
    rgba(95,89,230,.08);

  filter:
    blur(70px);

}


.contact-final-copy {

  position:
    relative;

  z-index:
    2;

  padding:
    58px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.contact-final-copy > span {

  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1.5px;

}


.contact-final-copy h2 {

  max-width:
    680px;

  margin-top:
    17px;

  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

}


.contact-final-copy h2 strong {

  display:
    block;

  color:
    var(--blue);

  font-weight:
    inherit;

}


.contact-final-copy p {

  max-width:
    540px;

  margin-top:
    18px;

}


.contact-final-copy .btn {

  width:
    fit-content;

  margin-top:
    27px;

}



/* FINAL VISUAL */

.contact-final-visual {

  position:
    relative;

  min-height:
    430px;

  display:
    grid;

  place-items:
    center;

}


.final-orbit {

  position:
    absolute;

  border-radius:
    50%;

  border:
    1px solid
    rgba(105,200,250,.11);

}


.final-orbit-one {

  width:
    310px;

  height:
    310px;

}


.final-orbit-two {

  width:
    225px;

  height:
    225px;

  border-color:
    rgba(142,145,255,.13);

}


.final-contact-card {

  position:
    relative;

  z-index:
    2;

  width:
    245px;

  padding:
    27px;

  border-radius:
    16px;

  border:
    1px solid
    rgba(105,200,250,.19);

  background:
    linear-gradient(
      145deg,
      #0e1a2a,
      #07111b
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.34);

}


.final-contact-icon {

  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    #061018;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

}


.final-contact-icon svg {

  width:
    20px;

  height:
    20px;

}


.final-contact-card small {

  display:
    block;

  margin-top:
    25px;

  color:
    var(--blue);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.25px;

}


.final-contact-card strong {

  display:
    block;

  margin-top:
    8px;

  font-size:
    16px;

  line-height:
    1.4;

}


.final-contact-card > div {

  margin-top:
    22px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--cyan);

  font-size:
    9px;

}


.final-contact-card > div i {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--cyan);

  animation:
    pulse 1.6s infinite;

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px) {

  .contact-main-panel,
  .contact-details-panel {

    grid-template-columns:
      1fr;

  }


  .contact-intro,
  .contact-details-copy {

    border-right:
      0;

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

  }


  .contact-next-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .contact-final-card {

    grid-template-columns:
      1fr;

  }

}



@media(max-width:768px) {

  .contact-hero {

    padding:
      135px 0 75px;

  }


  .contact-hero-heading h1 {

    font-size:
      clamp(
        44px,
        12vw,
        58px
      );

    line-height:
      1;

    letter-spacing:
      -3px;

  }


  .contact-hero-heading > p {

    font-size:
      15px;

  }


  .contact-intro,
  .contact-form-area {

    padding:
      32px 24px;

  }


  .form-row {

    grid-template-columns:
      1fr;

  }


  .contact-form-head {

    flex-direction:
      column;

  }


  .contact-next-grid {

    grid-template-columns:
      1fr;

  }


  .contact-next-card {

    min-height:
      290px;

  }


  .contact-details-copy {

    padding:
      36px 24px;

  }


  .detail-row {

    min-height:
      110px;

    padding:
      24px;

  }


  a.detail-row:hover {

    padding-left:
      24px;

  }


  .contact-final-copy {

    padding:
      40px 24px 20px;

  }


  .contact-final-copy .btn {

    width:
      100%;

  }


  .contact-final-visual {

    min-height:
      350px;

  }

}



@media(max-width:480px) {

  .contact-intro-points > div {

    align-items:
      flex-start;

  }


  .detail-row {

    grid-template-columns:
      auto 1fr;

  }


  .detail-arrow {

    display:
      none;

  }


  .final-orbit-one {

    width:
      270px;

    height:
      270px;

  }


  .final-orbit-two {

    width:
      200px;

    height:
      200px;

  }

}
/* ==========================================================
   OFFICE LOCATIONS
========================================================== */

.detail-locations {
  align-items: flex-start;
}

.location-content {
  width: 100%;
}

.location-list {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  margin-top: 14px;
}

.location-office {
  padding: 16px 18px;
  border: 1px solid rgba(155, 187, 218, .09);
  border-radius: 11px;
  background: rgba(255, 255, 255, .015);
}

.location-country {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.location-office strong {
  margin: 0;
  color: #cbd7e2;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
}

@media(max-width: 650px) {

  .location-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .location-office {
    padding: 14px;
  }

}

/* ==========================================================
   CONTACT FORM SUBMISSION STATES
========================================================== */

.contact-submit:disabled {
  cursor: not-allowed;
  opacity: .72;
}

.contact-submit.is-loading {
  pointer-events: none;
}


/* SPINNER */

.submit-spinner {
  width: 17px;
  height: 17px;

  border: 2px solid rgba(5, 15, 24, .22);
  border-top-color: #07111b;

  border-radius: 50%;

  animation: dawnFormSpin .7s linear infinite;
}

@keyframes dawnFormSpin {

  to {
    transform: rotate(360deg);
  }

}


/* RESPONSE */

.contact-form-response {
  display: none;

  margin-top: 15px;
  padding: 15px 16px;

  grid-template-columns: auto 1fr;
  gap: 12px;

  align-items: flex-start;

  border-radius: 11px;

  font-size: 11px;
  line-height: 1.55;
}


/* SUCCESS */

.contact-form-response.success {
  display: grid;

  border: 1px solid rgba(70, 220, 170, .18);

  background: rgba(70, 220, 170, .055);

  color: #bdeedc;
}


/* ERROR */

.contact-form-response.error {
  display: grid;

  border: 1px solid rgba(255, 110, 110, .18);

  background: rgba(255, 110, 110, .05);

  color: #efc0c0;
}


/* ICON */

.form-response-icon {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: rgba(255,255,255,.045);
}

.form-response-icon svg {
  width: 15px;
  height: 15px;
}


/* TEXT */

.contact-form-response strong {
  display: block;

  margin-bottom: 3px;

  color: #edf4f8;

  font-size: 11px;
}

.contact-form-response span {
  color: inherit;
}

.contact-form-response a {
  color: var(--blue);
  text-decoration: underline;
}