main.contact-page {
  background: var(--color-warm-ivory);
}

.contact-page .contact-container {
  width: min(100% - (2 * var(--container-padding)), var(--container-max));
  margin-inline: auto;
}

.contact-page .contact-section-marker {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  color: var(--color-aged-brass);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.contact-page .contact-section-marker::before {
  width: var(--space-6);
  height: 1px;
  flex: 0 0 var(--space-6);
  background: var(--color-aged-brass);
  content: "";
}

.contact-page .contact-hero {
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--color-slate-950);
  color: var(--color-warm-ivory);
}

.contact-page .contact-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 0;
  column-gap: var(--space-5);
  row-gap: var(--space-7);
}

.contact-page .contact-hero-copy {
  grid-column: 2 / span 7;
  min-width: 0;
}

.contact-page .contact-hero-copy .display-xl {
  max-width: 14ch;
}

.contact-page .contact-hero-lead {
  max-width: 52ch;
  margin-block-end: 0;
  color: var(--color-bone);
}

.contact-page .contact-hero-rail {
  display: flex;
  grid-column: 10 / span 3;
  flex-direction: column;
  min-width: 0;
  align-self: end;
  gap: var(--space-5);
}

.contact-page .contact-hero-rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-aged-brass);
}

.contact-page .contact-hero-rail .button {
  width: fit-content;
  max-width: 100%;
}

.contact-page .contact-route-section {
  padding-block: var(--section-space);
  background: var(--color-bone);
}

.contact-page .contact-route-heading {
  display: flex;
  flex-direction: column;
  width: min(100%, 30ch);
  min-width: 0;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.contact-page .contact-route-heading h2 {
  margin: 0;
}

.contact-page .contact-route-heading p {
  margin: 0;
  color: var(--color-ink-muted);
}

.contact-page .contact-route-directory {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(13.5rem, auto));
  min-width: 0;
  gap: var(--space-5);
}

.contact-page .contact-route-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-line-dark);
  gap: var(--space-5);
  transition: border-color var(--transition-base);
}

.contact-page .contact-route-card:hover {
  border-color: var(--color-aged-brass);
}

.contact-page .contact-route-card--poker {
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
  border-color: var(--color-line-light);
  background: var(--color-deep-bottle-green);
  color: var(--color-warm-ivory);
}

.contact-page .contact-route-card--dining {
  grid-column: 7 / span 3;
  grid-row: 1;
  background: var(--color-warm-ivory);
  color: var(--color-slate-950);
}

.contact-page .contact-route-card--group {
  grid-column: 10 / span 3;
  grid-row: 2;
  border-color: var(--color-line-light);
  background: var(--color-dark-walnut);
  color: var(--color-warm-ivory);
}

.contact-page .contact-route-card-header {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
}

.contact-page .contact-route-index {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
  color: var(--color-aged-brass);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
}

.contact-page .contact-route-index::after {
  width: var(--space-6);
  height: 1px;
  background: var(--color-aged-brass);
  content: "";
}

.contact-page .contact-route-card h3,
.contact-page .contact-route-card p {
  margin: 0;
}

.contact-page .contact-route-card p {
  max-width: 44ch;
}

.contact-page .contact-route-card .button {
  width: fit-content;
  max-width: 100%;
  margin-top: auto;
}

.contact-page .contact-form-section {
  padding-block: var(--section-space);
  background: var(--color-slate-950);
  color: var(--color-warm-ivory);
}

.contact-page .contact-form-header {
  display: flex;
  flex-direction: column;
  width: calc((100% - (11 * var(--space-5))) / 12 * 5 + (4 * var(--space-5)));
  min-width: 0;
  margin-inline-start: calc((100% - (11 * var(--space-5))) / 12 + var(--space-5));
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.contact-page .contact-form-header h2,
.contact-page .contact-form-header p {
  margin: 0;
}

.contact-page .contact-form-header p {
  max-width: 48ch;
  color: var(--color-bone);
}

.contact-page .contact-form-panel {
  width: calc((100% - (11 * var(--space-5))) / 12 * 10 + (9 * var(--space-5)));
  min-width: 0;
  margin-inline: auto;
  padding: var(--space-6);
  border: 1px solid var(--color-line-dark);
  background: var(--color-warm-ivory);
  color: var(--color-slate-950);
}

.contact-page .contact-form-panel form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-6);
}

.contact-page .contact-error-summary {
  display: none;
  padding: var(--space-4);
  border: 1px solid #8d2d24;
  background: #f7e5df;
  color: #561d16;
}

.contact-page .contact-error-summary.is-visible {
  display: block;
}

.contact-page .contact-error-summary h3,
.contact-page .contact-error-summary p,
.contact-page .contact-error-summary ul {
  margin: 0;
}

.contact-page .contact-error-summary {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-page .contact-error-summary.is-visible {
  display: flex;
}

.contact-page .contact-error-summary a {
  color: inherit;
}

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

.contact-page .contact-core-grid > *,
.contact-page .contact-conditional-grid > * {
  min-width: 0;
}

.contact-page .contact-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-2);
}

.contact-page .contact-field--full {
  grid-column: 1 / -1;
}

.contact-page .contact-field label,
.contact-page .contact-checkbox-label {
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-meta);
}

.contact-page .contact-required {
  color: var(--color-dark-walnut);
}

.contact-page .contact-field-help {
  max-width: 55ch;
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.contact-page .contact-field-error {
  display: none;
  margin: 0;
  color: #8d2d24;
  font-size: var(--text-meta);
  font-weight: 700;
  line-height: var(--leading-meta);
}

.contact-page .contact-field.is-invalid .contact-field-error {
  display: block;
}

.contact-page .contact-field.is-invalid input,
.contact-page .contact-field.is-invalid select,
.contact-page .contact-field.is-invalid textarea {
  border-color: #8d2d24;
}

.contact-page .contact-conditional {
  display: none;
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-line-dark);
}

.contact-page .contact-conditional.is-active {
  display: block;
}

.contact-page .contact-conditional legend {
  padding-inline: var(--space-2);
  color: var(--color-deep-bottle-green);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.contact-page .contact-conditional-intro {
  max-width: 60ch;
  margin-block: 0 var(--space-5);
  color: var(--color-ink-muted);
}

.contact-page .contact-final-fieldset {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-dark);
  gap: var(--space-4);
}

.contact-page .contact-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: var(--space-3);
}

.contact-page .contact-checkbox-wrap input {
  width: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  margin-top: 0.18rem;
}

.contact-page .contact-checkbox-label {
  min-width: 0;
}

.contact-page .contact-processing-note {
  max-width: 60ch;
  margin: 0;
  color: var(--color-ink-muted);
}

.contact-page .contact-submit-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-4);
}

.contact-page .contact-submit-row .button {
  width: fit-content;
  max-width: 100%;
}

.contact-page .contact-submit-note {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

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

.contact-page .contact-confirmation.is-visible {
  display: flex;
}

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

.contact-page .contact-guidance-section {
  padding-block: var(--section-space);
  background: var(--color-bone);
}

.contact-page .contact-guidance-panel {
  width: calc((100% - (11 * var(--space-5))) / 12 * 9 + (8 * var(--space-5)));
  min-width: 0;
  margin-inline: auto;
}

.contact-page .contact-guidance-heading {
  display: flex;
  flex-direction: column;
  width: min(100%, 34ch);
  min-width: 0;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.contact-page .contact-guidance-heading h2,
.contact-page .contact-guidance-heading p {
  margin: 0;
}

.contact-page .contact-guidance-heading p {
  color: var(--color-ink-muted);
}

.contact-page .contact-guidance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 8fr);
  min-width: 0;
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line-dark);
  column-gap: var(--space-5);
}

.contact-page .contact-guidance-row > * {
  min-width: 0;
}

.contact-page .contact-guidance-index {
  color: var(--color-aged-brass);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
}

.contact-page .contact-guidance-row h3,
.contact-page .contact-guidance-row p {
  margin: 0;
}

.contact-page .contact-guidance-row p {
  max-width: 62ch;
}

.contact-page .contact-process-section {
  padding-block: var(--section-space);
  background: var(--color-warm-ivory);
}

.contact-page .contact-process-header {
  display: flex;
  flex-direction: column;
  width: calc((100% - (11 * var(--space-5))) / 12 * 5 + (4 * var(--space-5)));
  min-width: 0;
  margin-inline-start: calc((100% - (11 * var(--space-5))) / 12 + var(--space-5));
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.contact-page .contact-process-header h2,
.contact-page .contact-process-header p {
  margin: 0;
}

.contact-page .contact-process-header p {
  max-width: 46ch;
  color: var(--color-ink-muted);
}

.contact-page .contact-process-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: calc((100% - (11 * var(--space-5))) / 12 * 10 + (9 * var(--space-5)));
  min-width: 0;
  margin-inline: auto;
  border-block: 1px solid var(--color-line-dark);
}

.contact-page .contact-process-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-5);
  gap: var(--space-3);
}

.contact-page .contact-process-step + .contact-process-step {
  border-inline-start: 1px solid var(--color-line-dark);
}

.contact-page .contact-process-number {
  color: var(--color-aged-brass);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
}

.contact-page .contact-process-step h3,
.contact-page .contact-process-step p {
  margin: 0;
}

.contact-page .contact-process-step p {
  max-width: 36ch;
  color: var(--color-ink-muted);
}

.contact-page .contact-closing-section {
  padding-block: var(--section-space-compact);
  background: var(--color-deep-bottle-green);
  color: var(--color-warm-ivory);
}

.contact-page .contact-closing-copy {
  display: flex;
  flex-direction: column;
  width: calc((100% - (11 * var(--space-5))) / 12 * 6 + (5 * var(--space-5)));
  min-width: 0;
  margin-inline: auto;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.contact-page .contact-closing-copy h2,
.contact-page .contact-closing-copy p {
  margin: 0;
}

.contact-page .contact-closing-copy p {
  max-width: 42ch;
  color: var(--color-bone);
}

.contact-page .contact-closing-copy .button {
  width: fit-content;
  max-width: 100%;
  margin-top: var(--space-2);
}

.contact-page .button--route {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.contact-page .button--route:hover {
  border-color: var(--color-deep-bottle-green);
  background: var(--color-deep-bottle-green);
  color: var(--color-warm-ivory);
}

.contact-page .contact-route-card--poker .button--route:hover,
.contact-page .contact-route-card--group .button--route:hover {
  border-color: var(--color-aged-brass);
  background: var(--color-aged-brass);
  color: var(--color-slate-950);
}

@media (max-width: 64.99rem) {
  .contact-page .contact-hero-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }

  .contact-page .contact-hero-copy {
    grid-column: 1 / -1;
  }

  .contact-page .contact-hero-rail {
    grid-column: 1 / -1;
    width: min(100%, 24rem);
    align-self: auto;
  }

  .contact-page .contact-route-directory {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .contact-page .contact-route-card--poker {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .contact-page .contact-route-card--dining {
    grid-column: 1 / span 4;
    grid-row: 2;
  }

  .contact-page .contact-route-card--group {
    grid-column: 5 / span 4;
    grid-row: 2;
  }

  .contact-page .contact-form-header,
  .contact-page .contact-process-header {
    width: 100%;
    margin-inline-start: 0;
  }

  .contact-page .contact-form-panel,
  .contact-page .contact-guidance-panel,
  .contact-page .contact-process-rail,
  .contact-page .contact-closing-copy {
    width: 100%;
  }
}

@media (max-width: 56.24rem) {
  .contact-page .contact-core-grid,
  .contact-page .contact-conditional-grid {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-field--full {
    grid-column: auto;
  }

  .contact-page .contact-process-rail {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-process-step + .contact-process-step {
    border-top: 1px solid var(--color-line-dark);
    border-inline-start: 0;
  }

  .contact-page .contact-process-step {
    padding-inline: 0;
  }
}

@media (max-width: 53.74rem) {
  .contact-page .contact-guidance-row {
    grid-template-columns: minmax(3rem, auto) minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .contact-page .contact-guidance-row p {
    grid-column: 2;
  }
}

@media (max-width: 47.99rem) {
  .contact-page .contact-hero {
    padding-block: 3.5rem;
  }

  .contact-page .contact-hero-grid,
  .contact-page .contact-route-directory {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-hero-copy,
  .contact-page .contact-hero-rail,
  .contact-page .contact-route-card--poker,
  .contact-page .contact-route-card--dining,
  .contact-page .contact-route-card--group {
    grid-column: 1;
    grid-row: auto;
  }

  .contact-page .contact-hero-copy .display-xl {
    max-width: 12ch;
  }

  .contact-page .contact-hero-rail,
  .contact-page .contact-hero-rail .button,
  .contact-page .contact-route-card .button,
  .contact-page .contact-submit-row .button,
  .contact-page .contact-closing-copy .button {
    width: 100%;
  }

  .contact-page .contact-route-directory {
    gap: var(--space-4);
  }

  .contact-page .contact-route-card,
  .contact-page .contact-form-panel {
    padding: var(--space-5);
  }

  .contact-page .contact-guidance-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .contact-page .contact-guidance-row p {
    grid-column: auto;
  }

  .contact-page .contact-guidance-row h3 {
    font-size: 1.5625rem;
  }

  .contact-page .contact-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-page .contact-closing-copy {
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .contact-page .contact-conditional.is-active {
    animation: contactConditionalIn 180ms ease both;
  }

  @keyframes contactConditionalIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}