#contact-page {
  background: var(--color-cream-50);
}

#contact-page .contact-hero {
  overflow: hidden;
  padding-block: var(--space-9);
  background:
    radial-gradient(circle at 75% 44%, rgb(232 185 107 / 14%), transparent 28rem),
    var(--color-forest-950);
}

#contact-page .contact-hero__grid,
#contact-page .contact-poker-band__grid,
#contact-page .contact-form-section__grid,
#contact-page .contact-planning__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
}

#contact-page .contact-hero__content {
  display: flex;
  grid-column: 1 / span 6;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 33.75rem;
}

#contact-page .contact-hero__content > * {
  min-width: 0;
  margin: 0;
}

#contact-page .contact-hero__content h1 {
  font-size: var(--text-display);
}

#contact-page .contact-hero__content p:not(.eyebrow) {
  max-width: 33.75rem;
  font-size: var(--text-body-large);
  line-height: 1.55;
}

#contact-page .contact-hero__field {
  grid-column: 7 / span 6;
  min-width: 0;
  border-inline-start: 1px solid rgb(184 137 69 / 65%);
}

#contact-page .contact-hero__action {
  margin-top: var(--space-2);
}

#contact-page .contact-pathways__intro {
  width: 50%;
  min-width: 0;
  max-width: 38.75rem;
}

#contact-page .contact-pathways__intro > :last-child,
#contact-page .contact-direct__intro > :last-child,
#contact-page .contact-form-section__guidance > :last-child,
#contact-page .contact-planning__heading > :last-child,
#contact-page .contact-clarification__content > :last-child {
  margin-block-end: 0;
}

#contact-page .contact-pathways__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

#contact-page .contact-pathway-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-cream-100);
}

#contact-page .contact-pathway-card > * {
  min-width: 0;
  margin: 0;
}

#contact-page .contact-pathway-card .eyebrow {
  color: var(--color-muted-600);
}

#contact-page .contact-pathway-card h3 {
  font-size: var(--text-h3);
}

#contact-page .contact-pathway-card p:not(.eyebrow) {
  flex: 1 1 auto;
  width: 100%;
}

#contact-page .contact-pathway-card a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-weight: 700;
}

#contact-page .contact-pathway-card--poker {
  border-top: 3px solid var(--color-brass-500);
}

#contact-page .contact-pathway-card--poker::before {
  content: "♢";
  color: var(--color-brass-500);
  font-size: 1.4rem;
  line-height: 1;
}

#contact-page .contact-pathway-card--groups {
  border-top: 3px solid var(--color-wood-700);
}

#contact-page .contact-poker-band {
  overflow: hidden;
  padding-block: var(--space-9);
}

#contact-page .contact-poker-band__content {
  display: flex;
  grid-column: 1 / span 7;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 40rem;
}

#contact-page .contact-poker-band__content > * {
  min-width: 0;
  margin: 0;
}

#contact-page .contact-poker-band__content > p:not(.eyebrow) {
  max-width: 40rem;
  font-size: var(--text-body-large);
}

#contact-page .contact-poker-band__closing {
  font-size: var(--text-body);
}

#contact-page .contact-poker-band__panel {
  grid-column: 8 / span 5;
  min-width: 0;
  margin-block: calc(var(--space-4) * -1);
  background: linear-gradient(180deg, rgb(138 90 60 / 34%), rgb(138 90 60 / 5%));
  border-inline-start: 1px solid rgb(247 240 228 / 18%);
}

#contact-page .contact-assurances {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

#contact-page .contact-assurance {
  min-width: 0;
  border-inline-start: 2px solid var(--color-brass-500);
  padding-inline-start: var(--space-4);
}

#contact-page .contact-assurance h3,
#contact-page .contact-assurance p {
  margin: 0;
}

#contact-page .contact-assurance h3 {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
}

#contact-page .contact-direct__panel {
  min-width: 0;
  border-radius: var(--radius-md);
  padding: var(--space-7);
  background: var(--color-cream-100);
}

#contact-page .contact-direct__intro {
  width: 50%;
  min-width: 0;
  max-width: 35rem;
}

#contact-page .contact-direct__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-6);
}

#contact-page .contact-direct__item,
#contact-page .contact-direct__venue-note {
  min-width: 0;
}

#contact-page .contact-direct__item p:not(.contact-placeholder) {
  max-width: 28.75rem;
}

#contact-page .contact-placeholder {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-cream-50);
  color: var(--color-muted-600);
  font-variant-numeric: tabular-nums;
}

#contact-page .contact-direct__venue-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-wood-700);
  padding-top: var(--space-5);
}

#contact-page .contact-direct__venue-note p {
  max-width: 35rem;
  margin-bottom: 0;
}

#contact-page .contact-form-section {
  padding-block: var(--space-9);
}

#contact-page .contact-form-section__main {
  grid-column: 1 / span 9;
  min-width: 0;
}

#contact-page .contact-form-section__guidance {
  max-width: 40rem;
}

#contact-page .contact-required-note {
  color: var(--color-muted-600);
  font-size: var(--text-small);
}

#contact-page .contact-form-section__aside {
  align-self: start;
  grid-column: 10 / span 3;
  min-width: 0;
  margin-top: 4.7rem;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-forest-800);
  color: var(--color-cream-50);
}

#contact-page .contact-form-section__aside h3 {
  color: var(--color-cream-50);
}

#contact-page .contact-form-section__aside p:last-child {
  margin-bottom: 0;
}

#contact-page .contact-form__summary,
#contact-page .contact-form__success {
  min-width: 0;
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

#contact-page .contact-form__summary {
  background: var(--color-forest-950);
  color: var(--color-cream-50);
}

#contact-page .contact-form__summary h3,
#contact-page .contact-form__summary a {
  color: var(--color-cream-50);
}

#contact-page .contact-form__summary > :last-child,
#contact-page .contact-form__success > :last-child {
  margin-bottom: 0;
}

#contact-page .contact-form__success {
  border: 1px solid var(--color-success-700);
  background: var(--color-success-700);
  color: var(--color-cream-50);
}

#contact-page .contact-form__success h3 {
  color: var(--color-cream-50);
}

#contact-page .contact-form__fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-6);
}

#contact-page .contact-form__field {
  min-width: 0;
}

#contact-page .contact-form__field--name,
#contact-page .contact-form__field--email {
  grid-column: span 6;
}

#contact-page .contact-form__field--phone {
  grid-column: span 6;
}

#contact-page .contact-form__field--topic {
  grid-column: span 6;
}

#contact-page .contact-form__field--group-size,
#contact-page .contact-form__field--date {
  grid-column: span 3;
}

#contact-page .contact-form__field--message {
  grid-column: 1 / -1;
}

#contact-page .contact-form input,
#contact-page .contact-form select,
#contact-page .contact-form textarea {
  border-color: rgb(32 34 30 / 25%);
  background: var(--color-cream-100);
}

#contact-page .contact-form textarea {
  min-height: 10rem;
}

#contact-page .contact-help,
#contact-page .contact-field-error,
#contact-page .contact-form__privacy-note,
#contact-page .contact-form__status {
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

#contact-page .contact-help,
#contact-page .contact-form__privacy-note {
  color: var(--color-muted-600);
}

#contact-page .contact-field-error {
  color: var(--color-forest-950);
  font-weight: 700;
}

#contact-page .contact-form__review {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

#contact-page .contact-form__review > * {
  min-width: 0;
  margin: 0;
}

#contact-page .contact-checkbox {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-ink-900);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
}

#contact-page .contact-checkbox input {
  width: 1.125rem;
  min-width: 1.125rem;
  margin-top: 0.2rem;
}

#contact-page .contact-form__submit {
  min-height: 3rem;
  margin-top: var(--space-2);
}

#contact-page .contact-form__status {
  min-height: 1.3rem;
  color: var(--color-success-700);
  font-weight: 700;
}

#contact-page .contact-planning__heading {
  width: 58.333%;
  min-width: 0;
  max-width: 40rem;
}

#contact-page .contact-planning__grid {
  margin-top: var(--space-6);
  align-items: start;
}

#contact-page .contact-planning__guidance {
  display: flex;
  grid-column: 1 / span 7;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

#contact-page .contact-planning__item {
  min-width: 0;
}

#contact-page .contact-planning__item p {
  max-width: 37.5rem;
  margin-bottom: 0;
}

#contact-page .contact-mini-rule {
  width: 2.5rem;
  margin: 0 0 var(--space-3);
}

#contact-page .contact-checklist {
  grid-column: 8 / span 5;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-cream-100);
}

#contact-page .contact-checklist ul {
  margin-bottom: var(--space-4);
}

#contact-page .contact-checklist p:last-child {
  margin-bottom: 0;
}

#contact-page .contact-closing {
  padding-block: var(--space-8);
}

#contact-page .contact-closing__content {
  display: flex;
  width: 50%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 32.5rem;
}

#contact-page .contact-closing__content > * {
  min-width: 0;
  margin: 0;
}

#contact-page .contact-closing__content p {
  max-width: 32.5rem;
  font-size: var(--text-body-large);
}

#contact-page .contact-clarification {
  padding-block: var(--space-7);
}

#contact-page .contact-clarification__content {
  width: 50%;
  min-width: 0;
  max-width: 35rem;
  border-top: 1px solid var(--color-wood-700);
  padding-top: var(--space-4);
}

#contact-page .contact-clarification__content h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 700;
}

#contact-page .contact-clarification__content p {
  color: var(--color-muted-600);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (max-width: 64rem) {
  #contact-page .contact-pathways__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #contact-page .contact-pathway-card--groups {
    grid-column: 1 / span 1;
  }

  #contact-page .contact-planning__guidance {
    grid-column: 1 / span 8;
  }

  #contact-page .contact-checklist {
    grid-column: 1 / span 8;
    width: 100%;
    max-width: 40rem;
    margin-top: var(--space-6);
  }
}

@media (max-width: 56.25rem) {
  #contact-page .contact-hero {
    padding-block: var(--space-8);
  }

  #contact-page .contact-hero__content {
    grid-column: 1 / span 8;
  }

  #contact-page .contact-hero__field,
  #contact-page .contact-poker-band__panel {
    display: none;
  }

  #contact-page .contact-poker-band__content {
    grid-column: 1 / span 8;
  }

  #contact-page .contact-form-section__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  #contact-page .contact-form-section__main {
    grid-column: 1 / -1;
  }

  #contact-page .contact-form-section__aside {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--space-6);
  }
}

@media (max-width: 48rem) {
  #contact-page .contact-hero {
    padding-block: var(--space-7);
  }

  #contact-page .contact-hero__grid,
  #contact-page .contact-poker-band__grid,
  #contact-page .contact-form-section__grid,
  #contact-page .contact-planning__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }

  #contact-page .contact-hero__content,
  #contact-page .contact-poker-band__content,
  #contact-page .contact-form-section__main,
  #contact-page .contact-planning__guidance,
  #contact-page .contact-checklist {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  #contact-page .contact-hero__content h1 {
    font-size: var(--text-h1);
  }

  #contact-page .contact-pathways__intro,
  #contact-page .contact-direct__intro,
  #contact-page .contact-planning__heading,
  #contact-page .contact-closing__content,
  #contact-page .contact-clarification__content {
    width: 100%;
    max-width: none;
  }

  #contact-page .contact-pathways__grid,
  #contact-page .contact-direct__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  #contact-page .contact-pathway-card--groups,
  #contact-page .contact-direct__venue-note {
    grid-column: 1;
  }

  #contact-page .contact-direct__panel {
    padding: var(--space-5);
  }

  #contact-page .contact-poker-band {
    padding-block: var(--space-7);
  }

  #contact-page .contact-poker-band__content > p:not(.eyebrow) {
    max-width: none;
  }

  #contact-page .contact-form-section {
    padding-block: var(--space-7);
  }

  #contact-page .contact-form-section__aside {
    grid-column: 1;
    margin-top: 0;
  }

  #contact-page .contact-form__fields {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  #contact-page .contact-form__field--name,
  #contact-page .contact-form__field--email,
  #contact-page .contact-form__field--phone,
  #contact-page .contact-form__field--topic,
  #contact-page .contact-form__field--group-size,
  #contact-page .contact-form__field--date,
  #contact-page .contact-form__field--message {
    grid-column: 1;
  }

  #contact-page .contact-form textarea {
    min-height: 9rem;
  }

  #contact-page .contact-form__submit {
    width: 100%;
  }

  #contact-page .contact-planning__grid {
    margin-top: var(--space-5);
  }

  #contact-page .contact-checklist {
    margin-top: 0;
    padding: var(--space-4);
  }

  #contact-page .contact-closing {
    padding-block: var(--space-7);
  }

  #contact-page .contact-clarification {
    padding-block: var(--space-6);
  }
}

@media (max-width: 26.25rem) {
  #contact-page .contact-hero__action,
  #contact-page .contact-poker-band .button,
  #contact-page .contact-closing .button {
    width: 100%;
  }
}
