/* One dark split section on the hero-sub paper texture: personality copy
   left, white form card right. The header sits on the dark bg, so
   nav/logo/menu-mark flip to off-white within this scope only — same
   approach as hero-sub.css; site.css stays untouched. */

.contact {
  position: relative;
  background-color: var(--dozen-dark);
  background-image: url("../../img/hero-sub-texture.jpg");
  background-image: image-set(
    url("../../img/hero-sub-texture-m.avif") type("image/avif"),
    url("../../img/hero-sub-texture-m.webp") type("image/webp"),
    url("../../img/hero-sub-texture.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

/* ---------- Dark header variant ---------- */

.contact .site-header .logo {
  color: var(--light-purple);
}

.contact .site-header__nav-list a {
  color: var(--off-white);
}

.contact .site-header .nav-toggle[aria-expanded="false"] .nav-toggle__mark {
  background: var(--off-white);
}

/* ---------- Split hero ---------- */

.contact__hero {
  padding-bottom: var(--space-60);
}

.contact__pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  /* Bottom padding reserves the D-mark's corner: the accent is absolutely
     positioned, so on a short mobile column it would otherwise sit on the
     copy. */
  padding: var(--space-60) 0 calc(var(--space-40) + 150px);
}

.contact__eyebrow {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--dozen-teal);
}

.contact__heading {
  color: var(--off-white);
  line-height: 1.2;
}

.contact__copy {
  margin: 0;
  font-size: 1.125rem;
  color: var(--light-purple);
}

.contact__mark {
  position: absolute;
  bottom: var(--space-40);
  left: 0;
  width: 120px;
  height: 120px;
  background: currentColor;
  color: var(--dozen-teal);
  opacity: 0.35;
  -webkit-mask: url("../../img/logo-d.svg") center / contain no-repeat;
  mask: url("../../img/logo-d.svg") center / contain no-repeat;
  pointer-events: none;
}

/* ---------- Form card ---------- */

.contact__card {
  background: var(--pure-white);
  border-radius: 24px;
  padding: var(--space-40);
  box-shadow: 0 20px 60px rgba(51, 51, 51, 0.25);
}

.contact__card--thanks {
  background: linear-gradient(
    color-mix(in srgb, var(--dozen-teal) 8%, var(--pure-white)),
    var(--pure-white)
  );
}

.contact__form {
  position: relative;
}

.contact__intro {
  margin: 0 0 var(--space-40);
  font-weight: var(--weight-heading);
  color: var(--dozen-dark);
}

.contact__fields {
  display: grid;
  gap: var(--space-10) var(--space-20);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact__label {
  font-weight: var(--weight-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--dozen-dark);
}

/* Muted-purple support tones, darkened from --light-purple for the white
   card: #75709a carries 4.6:1 (small text), #928cc0 carries 3.1:1 (input
   boundaries per non-text contrast). */
.contact__optional {
  color: #75709a;
}

.contact__input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #928cc0;
  border-radius: 12px;
  background: var(--pure-white);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 1rem;
  line-height: 1.375; /* 52px single-line boxes with the 14px pads */
  color: var(--dozen-dark);
}

.contact__input::placeholder {
  color: #75709a;
}

/* Focus reads as a 2px blue border without moving the box: the real border
   only changes color, the extra pixel and the halo are box-shadow. Replaces
   the global outline with an equally visible treatment. */
.contact__input:focus-visible {
  outline: none;
  border-color: var(--dozen-blue);
  box-shadow:
    0 0 0 1px var(--dozen-blue),
    0 0 0 4px rgba(81, 63, 199, 0.12);
}

.contact__input--textarea {
  resize: vertical;
}

.contact__field.is-invalid .contact__input {
  border-color: var(--dozen-red);
}

.contact__error {
  margin: 0;
  min-height: 1.21875rem; /* one 13px line reserved — no jump when copy lands */
  font-size: 0.8125rem;
  line-height: 1.5;
  /* Darkened from --dozen-red: 3.6:1 on white fails AA at this size;
     the border keeps the brand red, the copy carries 4.6:1. */
  color: #c84d20;
}

/* Form-level send failure (distinct from the per-field validation errors). */
.contact__status {
  margin: var(--space-20) 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #c84d20;
}

/* Honeypot: off-screen rather than display:none, since some bots skip
   hidden fields. */
.contact__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-20);
  padding: var(--space-20) var(--space-40);
  border: 0;
  border-radius: 60px;
  background: var(--gradient-blue-deep);
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--pure-white);
  cursor: pointer;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.contact__submit:hover:not(:disabled),
.contact__submit:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.contact__submit:disabled {
  cursor: default;
}

/* ---------- Thank-you state ---------- */

.contact__thanks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.contact__thanks[hidden] {
  display: none;
}

.contact__thanks-mark {
  width: 56px;
  height: 56px;
  background: currentColor;
  color: var(--dozen-teal);
  -webkit-mask: url("../../img/logo-d.svg") center / contain no-repeat;
  mask: url("../../img/logo-d.svg") center / contain no-repeat;
}

.contact__thanks-heading {
  color: var(--dozen-dark);
}

.contact__thanks-copy {
  margin: 0;
  color: var(--dozen-dark);
}

.contact__thanks-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-20);
  padding: var(--space-20) var(--space-40);
  border: 2px solid var(--dozen-blue);
  border-radius: 60px;
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--dozen-blue);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.contact__thanks-cta:hover,
.contact__thanks-cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: no-preference) {
  .contact__thanks {
    animation: contact-thanks-in 250ms ease-out;
  }

  @keyframes contact-thanks-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
  .contact {
    background-image: image-set(
      url("../../img/hero-sub-texture.avif") type("image/avif"),
      url("../../img/hero-sub-texture.webp") type("image/webp"),
      url("../../img/hero-sub-texture.jpg") type("image/jpeg")
    );
  }

  .contact__hero {
    padding-block: var(--space-100) var(--space-120);
  }

  /* Both columns stretch to the row, so the pitch tracks the (taller) card
     and the D-mark anchors level with the card's bottom edge. */
  .contact__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 80px;
    min-height: 579px;
  }

  .contact__pitch {
    padding: 0;
  }

  .contact__heading {
    line-height: var(--h1-leading);
  }

  .contact__copy {
    font-size: 1.25rem;
  }

  .contact__mark {
    bottom: 0;
    width: 180px;
    height: 180px;
  }

  .contact__card {
    padding: var(--space-60);
  }

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

  .contact__field--message {
    grid-column: 1 / -1;
  }

  .contact__submit {
    width: auto;
  }
}