/* =========================================================
   SKY HIGH FRAMES STUDIO
   CONTACT
   contact.css - v13
   ========================================================= */


/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-section {

  position: relative;

  z-index: 10;

  width: 100%;

  /*
     Pull the form upward into the lake / blue transition,
     similar to HOW.
  */

  margin-top: -220px;

  padding:

    0

    24px

    90px;

}


/* =========================================================
   CONTACT CARD
   ========================================================= */

.contact-card {

  width:
    min(
      820px,
      100%
    );

  margin:
    0 auto;

  padding:

    48px

    52px;

  border-radius:
    20px;

  background:

    linear-gradient(
      135deg,

      rgba(5, 25, 42, 0.94),

      rgba(2, 13, 26, 0.97)
    );

  border:

    1px solid
    rgba(73, 199, 255, 0.40);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:

    0 0 7px
    rgba(73, 199, 255, 0.50),

    0 0 22px
    rgba(73, 199, 255, 0.22),

    0 0 55px
    rgba(73, 199, 255, 0.09);

}


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

.contact-intro {

  margin-bottom:
    38px;

}


.contact-kicker {
  display: block;

  margin-bottom: 12px;

  color: #79ddff;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
}


.contact-intro h2 {

  color:
    #ffffff;

  font-size:

    clamp(
      28px,
      3vw,
      40px
    );

  font-weight:
    300;

  letter-spacing:
    0.015em;

}


.contact-intro p {

  margin-top:
    12px;

  color:
    rgba(
      255,
      255,
      255,
      0.60
    );

  font-size:
    15px;

  line-height:
    1.55;

}


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

.project-form {

  display:
    flex;

  flex-direction:
    column;

  gap:
    28px;

}


.form-grid {
  display: grid;

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

  gap:
    24px
    22px;
}


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

.form-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

}


/* =========================================================
   LABEL
   ========================================================= */

.form-group label {

  color:
    #79ddff;

  font-size:
    13px;

  font-weight:
    500;

  letter-spacing:
    0.16em;

}


/* =========================================================
   INPUTS
   ========================================================= */

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

  width:
    100%;

  padding:

    16px

    18px;

  color:
    #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    16px;

  line-height:
    1.5;

  background:

    rgba(
      1,
      11,
      22,
      0.72
    );

  border:

    1px solid
    rgba(
      73,
      199,
      255,
      0.25
    );

  border-radius:
    11px;

  outline:
    none;

  transition:

    border-color 0.25s ease,

    box-shadow 0.25s ease,

    background 0.25s ease;

}


.form-group select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 44px;

  background-image:
    linear-gradient(45deg, transparent 50%, #79ddff 50%),
    linear-gradient(135deg, #79ddff 50%, transparent 50%);

  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;
}


.form-group select option {
  color: #ffffff;
  background: #071e31;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

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

  color:

    rgba(
      255,
      255,
      255,
      0.30
    );

}


/* =========================================================
   FOCUS
   ========================================================= */

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

  background:

    rgba(
      3,
      18,
      32,
      0.90
    );

  border-color:

    rgba(
      73,
      199,
      255,
      0.85
    );

  box-shadow:

    0 0 5px
    rgba(73, 199, 255, 0.45),

    0 0 15px
    rgba(73, 199, 255, 0.14);

}


.privacy-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  color:
    rgba(
      238,
      243,
      247,
      0.64
    );

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


.privacy-consent input {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;
  margin-top: 2px;

  accent-color: #49c7ff;
}


.privacy-consent a {
  color: #79ddff;
  text-underline-offset: 3px;
}


/* =========================================================
   INVALID FIELD
   Only once user interacts with it.
   ========================================================= */

.form-group input:not(:placeholder-shown):invalid,
.form-group textarea:not(:placeholder-shown):invalid {

  border-color:

    rgba(
      255,
      120,
      120,
      0.50
    );

}


/* =========================================================
   TEXTAREA
   ========================================================= */

.form-group textarea {

  min-height:
    180px;

  resize:
    vertical;

}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.submit-button {

  align-self:
    flex-start;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    14px;

  margin-top:
    6px;

  padding:

    15px

    25px;

  color:
    #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    12px;

  font-weight:
    500;

  letter-spacing:
    0.14em;

  background:

    rgba(
      2,
      17,
      29,
      0.92
    );

  border:

    1px solid
    rgba(
      73,
      199,
      255,
      0.70
    );

  border-radius:
    999px;

  cursor:
    pointer;

  box-shadow:

    0 0 5px
    rgba(73, 199, 255, 0.48),

    0 0 16px
    rgba(73, 199, 255, 0.20);

  transition:

    box-shadow 0.25s ease,

    transform 0.25s ease,

    background 0.25s ease;

}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.submit-button:hover {

  transform:
    translateY(-2px);

  background:

    rgba(
      5,
      31,
      50,
      0.96
    );

  box-shadow:

    0 0 7px
    rgba(73, 199, 255, 0.75),

    0 0 22px
    rgba(73, 199, 255, 0.38),

    0 0 42px
    rgba(73, 199, 255, 0.16);

}


/* =========================================================
   STATUS MESSAGE
   ========================================================= */

.form-status {

  min-height:
    18px;

  font-size:
    14px;

  line-height:
    1.4;

}


.form-status.success {

  color:
    #79ddff;

}


.form-status.error {

  color:
    #ff9b9b;

}


/* =========================================================
   HONEYPOT
   ========================================================= */

.website-field {

  position:
    absolute;

  left:
    -9999px;

  width:
    1px;

  height:
    1px;

  overflow:
    hidden;

}


/* =========================================================
   FAQ
   ========================================================= */

.contact-faq {
  width:
    min(
      980px,
      calc(100% - 48px)
    );

  margin:
    0
    auto
    84px;
}


.contact-faq-heading {
  margin-bottom: 30px;
}


.contact-faq-heading h2 {
  color: #ffffff;

  font-size:
    clamp(
      28px,
      3.5vw,
      42px
    );

  font-weight: 300;
}


.faq-list {
  border-top:
    1px solid
    rgba(73, 199, 255, 0.24);
}


.faq-list details {
  border-bottom:
    1px solid
    rgba(73, 199, 255, 0.20);
}


.faq-list summary {
  position: relative;

  padding:
    22px
    42px
    22px
    0;

  color: #ffffff;

  font-size: 17px;
  font-weight: 500;

  cursor: pointer;
  list-style: none;
}


.faq-list summary::-webkit-details-marker {
  display: none;
}


.faq-list summary::after {
  content: "+";

  position: absolute;
  right: 4px;
  top: 50%;

  color: #79ddff;

  font-size: 24px;
  font-weight: 300;

  transform: translateY(-50%);
}


.faq-list details[open] summary::after {
  content: "−";
}


.faq-list details p {
  max-width: 760px;

  padding:
    0
    42px
    24px
    0;

  color:
    rgba(
      238,
      243,
      247,
      0.66
    );

  font-size: 15px;
  line-height: 1.7;
}


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

@media (max-width: 760px) {

  .contact-section {

    margin-top:
      -120px;

    padding:

      0

      16px

      70px;

  }


  .contact-card {

    padding:

      34px

      25px;

  }


  .project-form {

    gap:
      23px;

  }


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


  .submit-button {

    width:
      100%;

    justify-content:
      center;

  }


  .contact-faq {
    width: calc(100% - 32px);
    margin-bottom: 62px;
  }

}