:root {
  color-scheme: dark;
}

.reach-out-page {
  min-height: 100vh;
  margin: 0;
  color: #fff7f9;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(255,23,76,.20),
      transparent 34%
    ),
    radial-gradient(
      circle at 15% 82%,
      rgba(255,66,109,.12),
      transparent 34%
    ),
    #080305;
}

.reach-out-shell {
  width:
    min(
      1180px,
      calc(100% - 32px)
    );

  margin: 0 auto;
  padding: 28px 0 70px;
}

.reach-out-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.reach-out-nav a {
  padding: 10px 15px;

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

  border-radius: 999px;

  color: #ffd7e0;
  text-decoration: none;

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

.reach-out-panel {
  display: grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(360px,1.1fr);

  gap:
    clamp(
      32px,
      6vw,
      80px
    );

  padding:
    clamp(
      28px,
      6vw,
      70px
    );

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

  border-radius: 32px;

  background:
    linear-gradient(
      145deg,
      rgba(30,14,21,.97),
      rgba(11,6,9,.97)
    );

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.34);
}

.reach-out-eyebrow {
  color: #ff426d;

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .16em;
}

.reach-out-copy h1 {
  margin:
    .45rem 0
    1rem;

  font-size:
    clamp(
      4rem,
      9vw,
      8rem
    );

  line-height: .86;
}

.reach-out-lead {
  max-width: 600px;

  color: #d9adb8;

  font-size:
    clamp(
      1rem,
      2vw,
      1.18rem
    );

  line-height: 1.7;
}

.reach-out-access-note {
  margin-top: 30px;
  padding: 18px;

  border:
    1px solid
    rgba(255,142,170,.15);

  border-radius: 18px;

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

.reach-out-access-note strong,
.reach-out-access-note span {
  display: block;
}

.reach-out-access-note span {
  margin-top: 5px;
  color: #d9adb8;
}

.reach-out-form {
  display: grid;
  gap: 17px;
}

.reach-out-row {
  display: grid;

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

  gap: 14px;
}

.reach-out-form label {
  display: grid;
  gap: 7px;

  color: #ffd7e0;

  font-size: .86rem;
  font-weight: 700;
}

.reach-out-optional {
  color:
    rgba(255,215,224,.48);

  font-size: .72rem;
}

.reach-out-form input,
.reach-out-form textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 14px 15px;

  border:
    1px solid
    rgba(255,142,170,.16);

  border-radius: 14px;

  outline: none;

  color: #fff7f9;

  background:
    rgba(5,2,4,.7);

  font: inherit;
}

.reach-out-form input:focus,
.reach-out-form textarea:focus {
  border-color:
    rgba(255,66,109,.72);

  box-shadow:
    0 0 0 3px
    rgba(255,23,76,.08);
}

#reach-out-submit {
  min-height: 52px;

  border: 0;
  border-radius: 999px;

  color: #fff;

  font-size: 1rem;
  font-weight: 800;

  cursor: pointer;

  background:
    linear-gradient(
      90deg,
      #ff174c,
      #ff426d
    );
}

#reach-out-submit:disabled {
  cursor: wait;
  opacity: .58;
}

.reach-out-status {
  min-height: 24px;
  margin: 0;

  color: #d9adb8;
}

.reach-out-status[data-state="success"] {
  color: #b8f5d2;
}

.reach-out-status[data-state="warning"] {
  color: #ffd28a;
}

.reach-out-status[data-state="error"] {
  color: #ff9db3;
}

@media (max-width: 820px) {

  .reach-out-panel {
    grid-template-columns: 1fr;
  }

  .reach-out-row {
    grid-template-columns: 1fr;
  }

}