/* ==========================================================================
   Attic Salt — shared "Let's work together" contact section
   Self-contained. Mirrors the home page (#contact) section 1:1 without
   depending on Elementor / UAEL / CF7 styles.

   The home page and the five project/AI pages still render this band through
   the ported Elementor markup, so every value below is matched to what those
   pages compute: a 40px-radius, borderless card — NOT the square
   var(--as-r-surface) treatment the rest of the site uses for flat surfaces.
   If you change one side, measure the other.
   ========================================================================== */

.as-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 600px;
  padding: 70px;
  background-image: url("/assets/media/2025/08/powai_bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}

.as-contact * { box-sizing: border-box; }

.as-contact__card {
  width: 410px;
  max-width: 100%;
  background-color: var(--as-card-bg);
  /* Borderless with a deep radius, like the home page. A hairline border plus
     square corners is what made this card read as a box next to it. */
  border: 0;
  border-radius: 40px;
  /* 67px, not 84 — the Elementor pages end with the submit <p>'s 37px margin
     plus CF7's empty response div, and this is what makes both cards the same
     height to the pixel. */
  padding: 50px 40px 67px 45px;
  text-align: left;
}

.as-contact__title {
  margin: 0 0 25px;
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
  font-style: normal;
  line-height: 1.0714em;
  letter-spacing: -0.6px;

  /* Was #B9C896 — 1.75:1 on the card, unreadable. The home page renders the
     title in plain foreground with no accent rule, so this does too; the green
     dash that used to sit after it also forced the heading onto two lines. */
  color: var(--as-fg);
}

.as-contact__lede {
  margin: 0 0 15px;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2em;
  color: var(--as-fg-mute);
}

.as-contact__form { margin: 0; }

.as-contact__field {
  display: block;
  /* 37px + the 44px field block reproduces the home page's 81px field pitch. */
  margin: 0 0 37px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.2631em;
  letter-spacing: -0.3px;
  color: var(--as-fg);
}

.as-contact__field input,
.as-contact__field textarea {
  display: block;
  width: 100%;
  margin: 3px 0;
  padding: 0;
  background-color: transparent;
  border: 0;
  /* Full-strength rule, as on the home page. var(--as-rule) at 16% alpha left
     the underlines almost invisible over the card. */
  border-bottom: 1px solid var(--as-fg);
  border-radius: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--as-fg-mute);
  -webkit-appearance: none;
  appearance: none;
}

.as-contact__field textarea { resize: vertical; }

.as-contact__field input:focus,
.as-contact__field textarea:focus {
    border-bottom-color: var(--as-green);
}

.as-contact .as-hp { display: none !important; }

@media (max-width: 1024px) {
  .as-contact { padding: 30px; }
  .as-contact__card { width: 320px; padding: 40px 37px; }
  .as-contact__title { font-size: 23px; margin-bottom: 20px; }
}

@media (max-width: 767px) {
  .as-contact { padding: 20px; }
  .as-contact__card { width: 100%; padding: 35px 30px; border-radius: 20px; }
  .as-contact__title { font-size: 22px; margin-bottom: 15px; }
}