/* ============================================================================
   copyleast — Contact page styles
   Hero+form band, bento grid, dark sidebar, reach cards, testimonials.
   ========================================================================== */

/* ── Hero + form band (one washed section) ────────────────────────────────── */
.contact-hero {
  position: relative;
  overflow: hidden;
  background: var(--neutral-100);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}
@media (min-width: 768px) {
  .contact-hero {
    padding-top: var(--sp-24);
    padding-bottom: var(--sp-20);
  }
}
.contact-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 32rem at 8% -8%, rgba(255, 94, 0, 0.14), transparent 60%),
    radial-gradient(42rem 30rem at 94% 4%, rgba(255, 160, 77, 0.16), transparent 58%),
    radial-gradient(34rem 26rem at 82% 98%, rgba(255, 122, 31, 0.1), transparent 60%);
}
.contact-hero__inner {
  position: relative;
}
.contact-hero__head {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.contact-hero__title {
  margin-top: var(--sp-5);
  color: var(--neutral-950);
}
.contact-hero__sub {
  margin-inline: auto;
  margin-top: var(--sp-6);
  max-width: 36rem;
  color: var(--neutral-500);
}

/* ── Bento grid ───────────────────────────────────────────────────────────── */
.contact-bento {
  margin-top: var(--sp-12);
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .contact-bento {
    margin-top: var(--sp-16);
  }
}
@media (min-width: 1024px) {
  .contact-bento {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact-bento__form {
    grid-column: span 2;
  }
  .contact-bento__aside {
    grid-column: 3;
    grid-row: span 2;
  }
}

/* ── Contact form card ────────────────────────────────────────────────────── */
.contact-form {
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
@media (min-width: 768px) {
  .contact-form {
    padding: var(--sp-8);
  }
}
.contact-form__row {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}
/* Space the textarea field below the name/email row. (The two fields *inside*
   the row are spaced by the grid gap — never add margin between them, or the
   second cell drops below the first.) */
.contact-form__row + .contact-form__field {
  margin-top: var(--sp-4);
}
.contact-form__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.contact-form__alt {
  font-size: 0.875rem;
  color: var(--neutral-500);
  text-underline-offset: 4px;
}
.contact-form__alt:hover {
  color: var(--neutral-950);
  text-decoration: underline;
}

/* Sent-confirmation state */
.contact-form--sent {
  text-align: center;
}
.contact-form__sent-icon {
  margin-inline: auto;
}
.contact-form__sent-title {
  margin-top: var(--sp-5);
  color: var(--neutral-950);
}
.contact-form__sent-body {
  margin-inline: auto;
  margin-top: var(--sp-2);
  max-width: 24rem;
  color: var(--neutral-500);
}
.contact-form__sent-body a {
  font-weight: 500;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Dark sidebar ─────────────────────────────────────────────────────────── */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  color: var(--neutral-0);
  background-image: radial-gradient(
    130% 110% at 22% -5%,
    #525252 0%,
    #292929 42%,
    #0a0a0a 100%
  );
}
.contact-aside__fig {
  width: 150px;
}
.contact-aside__pitch {
  flex: 1;
}
.contact-aside__pitch p:first-child {
  color: var(--neutral-0);
}
.contact-aside__pitch p:last-child {
  margin-top: var(--sp-2);
  color: var(--neutral-400);
}
.contact-aside__email {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.contact-aside__email-title {
  margin-top: var(--sp-4);
  font-weight: 600;
  color: var(--neutral-950);
}
.contact-aside__email-note {
  margin-top: var(--sp-1);
  color: var(--neutral-400);
}
.contact-aside__email-link {
  margin-top: var(--sp-4);
  display: flex;
  height: 52px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding-inline: 1.75rem;
  font-weight: 500;
  color: var(--neutral-800);
  background: var(--neutral-200);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.contact-aside__email-link:hover {
  background: var(--neutral-300);
}

/* ── Reach cards (Press / Schools) ────────────────────────────────────────── */
.reach-card__title {
  margin-top: var(--sp-4);
  font-weight: 600;
  color: var(--neutral-950);
}
.reach-card__body {
  margin-top: var(--sp-1);
  color: var(--neutral-500);
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.testimonials {
  margin-top: 3.5rem;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}
.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
@media (min-width: 768px) {
  .testimonial {
    padding: var(--sp-8);
  }
}
.testimonial__glyph {
  color: var(--brand-500);
}
.testimonial__quote {
  margin-top: var(--sp-3);
  flex: 1;
  color: var(--neutral-700);
  line-height: 1.65;
}
.testimonial__person {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.testimonial__initials {
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--neutral-950);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
}
.testimonial__name {
  font-weight: 600;
  color: var(--neutral-950);
}
.testimonial__role {
  color: var(--neutral-500);
}