.contact-page {
  position: relative;
}

.contact-page section {
  position: relative;
}

.contact-intro {
  overflow: hidden;
  padding-block: var(--space-10) var(--space-9);
  background-image: linear-gradient(rgba(64, 51, 107, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(64, 51, 107, 0.1) 1px, transparent 1px), radial-gradient(circle at 90% 42%, rgba(240, 42, 155, 0.14), transparent 22rem);
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, auto;
}

.contact-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-width: 0;
}

.contact-intro__copy {
  z-index: 1;
  width: min(100%, 42.5rem);
  min-width: 0;
}

.contact-intro__copy .lead {
  max-width: 42.5rem;
}

.contact-intro__context {
  max-width: 40rem;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-magenta);
  color: var(--color-text-primary);
}

.contact-intro__callout {
  width: min(100%, 42.5rem);
}

.contact-intro__rune {
  position: absolute;
  inset: 15% 5% auto auto;
  width: min(29vw, 23rem);
  aspect-ratio: 1;
  border: 1px solid rgba(91, 231, 242, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 4rem rgba(240, 42, 155, 0.14), inset 0 0 3rem rgba(91, 231, 242, 0.05);
  opacity: 0.7;
}

.contact-intro__rune::before,
.contact-intro__rune::after,
.contact-intro__rune span {
  position: absolute;
  content: "";
  display: block;
}

.contact-intro__rune::before {
  inset: 13%;
  border: 1px solid rgba(240, 42, 155, 0.55);
  transform: rotate(45deg);
}

.contact-intro__rune::after {
  inset: 29%;
  border: 1px solid rgba(91, 231, 242, 0.48);
  border-radius: 50%;
}

.contact-intro__rune span:first-child {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(var(--color-cyan), transparent 46%, var(--color-magenta));
}

.contact-intro__rune span:nth-child(2) {
  top: 50%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-magenta), transparent 46%, var(--color-cyan));
}

.contact-intro__rune span:nth-child(3) {
  inset: 41%;
  border: 1px solid var(--color-text-primary);
  transform: rotate(45deg);
}

.contact-workspace__heading {
  width: min(100%, 45rem);
  min-width: 0;
}

.contact-workspace__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 7fr);
  align-items: start;
  min-width: 0;
}

.contact-workspace__grid > * {
  min-width: 0;
}

.contact-categories {
  grid-column: 1;
}

.contact-form-panel {
  grid-column: 3;
  scroll-margin-top: 7rem;
}

.contact-workspace__grid::before {
  grid-column: 2;
  align-self: stretch;
  justify-self: center;
  width: 1px;
  min-height: 100%;
  background: linear-gradient(180deg, transparent, var(--color-cyan) 18%, var(--color-magenta) 82%, transparent);
  content: "";
}

.contact-form-panel__content,
.contact-categories__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.contact-form-panel__content > *,
.contact-categories__content > * {
  min-width: 0;
  margin: 0;
}

.contact-form-panel__intro {
  max-width: 36rem;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.contact-form__field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.contact-form__field:nth-child(3),
.contact-form__field:nth-child(4),
.contact-form__field:nth-child(5),
.contact-form__actions {
  grid-column: 1 / -1;
}

.contact-form__field > * {
  min-width: 0;
  margin: 0;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  min-height: 2.75rem;
  background: var(--color-void);
}

.contact-form textarea {
  min-height: 11rem;
}

.contact-form__optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

.contact-form__help {
  max-width: 36rem;
  color: var(--color-text-muted);
  font-size: var(--text-14);
  line-height: 1.43;
}

.contact-form__error {
  display: none;
  color: var(--color-magenta-bright);
  font-size: var(--text-14);
  font-weight: 600;
  line-height: 1.43;
}

.contact-form__field.is-invalid .contact-form__error {
  display: block;
}

.contact-form__field.is-invalid input,
.contact-form__field.is-invalid select,
.contact-form__field.is-invalid textarea {
  border-color: var(--color-magenta-bright);
}

.contact-form__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-form__actions > * {
  min-width: 0;
  margin: 0;
}

.contact-form__privacy {
  max-width: 36rem;
  color: var(--color-text-muted);
  font-size: var(--text-14);
  line-height: 1.43;
}

.contact-form-panel__reassurance {
  max-width: 36rem;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-default);
  color: var(--color-text-secondary);
  font-size: var(--text-14);
  line-height: 1.5;
}

.contact-form__summary {
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-magenta);
  background: rgba(240, 42, 155, 0.1);
  color: var(--color-text-primary);
}

.contact-form__summary p {
  margin: 0;
  color: inherit;
  font-size: var(--text-14);
  line-height: 1.43;
}

.contact-form__status .contact-confirmation {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-signal);
  border-inline-start: 3px solid var(--color-signal);
  background: rgba(183, 246, 209, 0.09);
}

.contact-form__status .contact-confirmation > * {
  min-width: 0;
  margin: 0;
}

.contact-form__status .contact-confirmation h3 {
  color: var(--color-signal);
  font-size: var(--text-22);
}

.contact-categories__intro {
  font-size: var(--text-14);
  line-height: 1.5;
}

.contact-categories__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-categories__list li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}

.contact-categories__list li > * {
  min-width: 0;
}

.contact-categories__number {
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: var(--text-14);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.contact-categories__number--magenta {
  color: var(--color-magenta-bright);
}

.contact-categories__list h4,
.contact-categories__list p {
  margin: 0;
}

.contact-categories__list h4 {
  font-size: var(--text-16);
}

.contact-categories__list p {
  color: var(--color-text-secondary);
  font-size: var(--text-14);
  line-height: 1.5;
}

.contact-scope__heading {
  width: min(100%, 45rem);
  min-width: 0;
}

.contact-scope__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  align-items: stretch;
  min-width: 0;
}

.contact-scope__grid > * {
  min-width: 0;
}

.contact-scope__panel:first-child {
  grid-column: 1;
}

.contact-scope__panel:last-child {
  grid-column: 3;
}

.contact-scope__rune {
  position: relative;
  grid-column: 2;
  min-width: 0;
}

.contact-scope__rune::before,
.contact-scope__rune::after,
.contact-scope__rune span {
  position: absolute;
  content: "";
  display: block;
}

.contact-scope__rune::before {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, var(--color-cyan), var(--color-magenta), transparent);
}

.contact-scope__rune::after {
  top: 39%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(91, 231, 242, 0.6);
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-scope__rune span:first-child {
  top: 41%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-magenta);
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-scope__rune span:nth-child(2) {
  top: 58%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-cyan);
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-scope__panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.contact-scope__panel > * {
  min-width: 0;
  margin: 0;
}

.contact-scope__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-start: 1.25rem;
}

.contact-scope__list li {
  min-width: 0;
}

.contact-scope__route {
  width: min(100%, 47.5rem);
  margin: var(--space-6) auto 0;
}

.contact-scope__route p {
  margin: 0;
}

.contact-corrections {
  overflow: hidden;
  background: radial-gradient(circle at 27% 12%, rgba(240, 42, 155, 0.1), transparent 20rem);
}

.contact-corrections__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--space-6);
  align-items: start;
  min-width: 0;
}

.contact-corrections__grid > * {
  min-width: 0;
}

.contact-corrections__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-corrections__intro > * {
  min-width: 0;
  margin: 0;
}

.contact-corrections__intro .lead {
  max-width: 100%;
}

.contact-corrections__return {
  margin-top: var(--space-2);
}

.contact-corrections__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-corrections__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.contact-corrections__steps > * {
  min-width: 0;
}

.contact-step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.contact-step > * {
  min-width: 0;
  margin: 0;
}

.contact-step h3 {
  font-size: var(--text-22);
}

.contact-step p {
  font-size: var(--text-14);
  line-height: 1.55;
}

.contact-step__number {
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: var(--text-28);
  font-weight: 700;
  line-height: 1;
}

.contact-step--magenta {
  border-color: var(--color-magenta);
}

.contact-step--magenta .contact-step__number {
  color: var(--color-magenta-bright);
}

.contact-step--signal {
  border-color: var(--color-signal);
}

.contact-step--signal .contact-step__number {
  color: var(--color-signal);
}

.contact-corrections__checklist {
  margin: 0;
  max-width: 45rem;
}

.contact-corrections__checklist p {
  margin: 0;
}

.contact-after__container {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.contact-after__container > * {
  min-width: 0;
  margin: 0;
}

.contact-after__heading,
.contact-after__sequence {
  width: min(100%, 42.5rem);
}

.contact-after__sequence {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-after__row {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-inline-start: 3px solid var(--color-cyan);
  background: var(--color-archive);
}

.contact-after__row > * {
  min-width: 0;
  margin: 0;
}

.contact-after__row h3 {
  font-size: var(--text-22);
}

.contact-after__row--magenta {
  border-inline-start-color: var(--color-magenta);
}

.contact-after__row--signal {
  border-inline-start-color: var(--color-signal);
}

.contact-after__privacy {
  width: min(100%, 38.75rem);
  color: var(--color-text-muted);
  font-size: var(--text-14);
  line-height: 1.5;
}

.contact-return {
  padding-block-start: var(--space-8);
}

.contact-return__panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  border-block-start: 2px solid var(--color-magenta);
  background: var(--color-indigo);
}

.contact-return__panel > * {
  min-width: 0;
}

.contact-return__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 35rem;
}

.contact-return__copy > * {
  min-width: 0;
  margin: 0;
}

.contact-return__action {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
}

@media (max-width: 67.49rem) {
  .contact-corrections__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-corrections__intro {
    width: min(100%, 45rem);
  }

  .contact-corrections__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-step {
    padding: var(--space-5);
  }
}

@media (max-width: 61.24rem) {
  .contact-workspace__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .contact-workspace__grid::before {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: stretch;
    width: auto;
    min-height: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-cyan), var(--color-magenta), transparent);
  }

  .contact-form-panel {
    grid-column: 1;
    grid-row: 1;
  }

  .contact-categories {
    grid-column: 1;
    grid-row: 3;
  }

  .contact-categories__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .contact-scope__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .contact-scope__panel:first-child,
  .contact-scope__panel:last-child {
    grid-column: 1;
  }

  .contact-scope__rune {
    display: none;
  }
}

@media (max-width: 57.49rem) {
  .contact-intro__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-intro__rune {
    display: none;
  }

  .contact-intro {
    background-image: linear-gradient(rgba(64, 51, 107, 0.12) 1px, transparent 1px), radial-gradient(circle at 100% 15%, rgba(240, 42, 155, 0.13), transparent 15rem);
    background-size: 2.5rem 2.5rem, auto;
  }
}

@media (max-width: 47.49rem) {
  .contact-intro {
    padding-block: var(--space-9) var(--space-8);
  }

  .contact-intro__copy,
  .contact-intro__copy .lead,
  .contact-intro__context,
  .contact-intro__callout,
  .contact-workspace__heading,
  .contact-scope__heading,
  .contact-after__heading,
  .contact-after__sequence,
  .contact-after__privacy {
    width: 100%;
    max-width: none;
  }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form__field:nth-child(3),
  .contact-form__field:nth-child(4),
  .contact-form__field:nth-child(5),
  .contact-form__actions {
    grid-column: 1;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    min-height: 3rem;
    font-size: var(--text-16);
  }

  .contact-form textarea {
    min-height: 12rem;
  }

  .contact-form__actions {
    align-items: stretch;
  }

  .contact-form__actions .button {
    width: 100%;
  }

  .contact-categories__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-scope__route {
    width: 100%;
    margin-top: var(--space-5);
  }

  .contact-corrections__grid {
    gap: var(--space-5);
  }

  .contact-step,
  .contact-after__row {
    padding: var(--space-4);
  }

  .contact-return__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .contact-return__copy {
    max-width: none;
  }

  .contact-return__action {
    justify-content: stretch;
  }

  .contact-return__action .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-intro__rune {
    animation: none;
  }
}
