.contact-page {
  position: relative;
  isolation: isolate;
}

.contact-page::before,
.contact-page::after {
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  pointer-events: none;
  content: "";
}

.contact-page::before {
  top: 0;
  height: 52rem;
  opacity: 0.42;
  background-image:
    linear-gradient(118deg, transparent 0 31%, rgb(158 161 156 / 0.06) 31.1% 31.25%, transparent 31.35% 100%),
    linear-gradient(68deg, transparent 0 66%, rgb(158 161 156 / 0.045) 66.1% 66.25%, transparent 66.35% 100%),
    radial-gradient(circle at 24% 22%, rgb(158 161 156 / 0.07), transparent 20rem);
}

.contact-page::after {
  bottom: 4rem;
  height: 38rem;
  opacity: 0.48;
  background: radial-gradient(ellipse at 42% 100%, rgb(158 161 156 / 0.09), transparent 62%);
  animation: contact-fog-drift 22s ease-in-out infinite alternate;
}

.contact-page .section {
  position: relative;
}

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

.contact-page__intro-copy .eyebrow {
  margin-block-end: var(--space-4);
}

.contact-page__intro-copy h1 {
  margin-block-end: var(--space-6);
  font-size: clamp(3.25rem, 6vw, 4rem);
}

.contact-page__intro-copy p {
  max-width: 42.5rem;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.contact-page__section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  margin-block-end: var(--space-6);
}

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

.contact-page__section-heading h2,
.contact-page__details-rail h2,
.contact-page__guidance-intro h2 {
  margin-block-end: 0;
}

.contact-page__route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: var(--border-default);
  background: var(--color-stone-line);
}

.contact-page__route-grid > * {
  width: 100%;
  min-width: 0;
}

.contact-page__route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-3);
  background: var(--color-basalt);
  padding: var(--space-5);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-page__route-card--featured {
  border-block-start: 2px solid var(--color-ember);
}

.contact-page__route-card:hover,
.contact-page__route-card:focus-within {
  background: var(--color-basalt-raised);
  box-shadow: inset 2px 0 0 var(--color-ember);
}

.contact-page__route-marker,
.contact-page__guidance-number {
  color: var(--color-ember-bright);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: var(--leading-xs);
  text-transform: uppercase;
}

.contact-page__route-card h3 {
  margin: 0;
  font-size: clamp(1.625rem, 2.5vw, 2rem);
}

.contact-page__route-card p {
  margin: 0;
  max-width: 34ch;
}

.contact-page__route-button {
  width: max-content;
  min-width: 44px;
  margin-block-start: var(--space-1);
  border: 1px solid var(--color-stone-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ash-primary);
  padding: 0.625rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.contact-page__route-button:hover {
  border-color: var(--color-ember);
  background: var(--color-ember-deep);
  color: #fff;
}

.contact-page__details-layout {
  display: grid;
  grid-template-columns: minmax(15.625rem, 0.3fr) minmax(0, 0.7fr);
  gap: var(--space-10);
  width: 100%;
  min-width: 0;
}

.contact-page__details-layout > * {
  width: 100%;
  min-width: 0;
}

.contact-page__details-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-3);
}

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

.contact-page__details-rail p {
  max-width: 26rem;
}

.contact-page__ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border: var(--border-default);
  background: var(--color-stone-line);
}

.contact-page__ledger > * {
  width: 100%;
  min-width: 0;
}

.contact-page__ledger-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.23fr) minmax(0, 0.77fr);
  gap: var(--space-5);
  align-items: start;
  background: var(--color-basalt);
  padding: var(--space-5);
}

.contact-page__ledger-row--primary {
  box-shadow: inset 2px 0 0 var(--color-ember);
}

.contact-page__ledger-label {
  min-width: 0;
  color: var(--color-ash-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-sm);
}

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

.contact-page__contact-link {
  width: max-content;
  max-width: 100%;
  color: var(--color-ember-bright);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-xl);
}

.contact-page__ledger-content p {
  width: min(100%, 35rem);
  margin: 0;
}

.contact-page__ledger-content address {
  color: var(--color-ash-primary);
  font-size: var(--text-lg);
  font-style: normal;
  line-height: var(--leading-lg);
}

.contact-page__form-shell {
  width: min(100%, 53.75rem);
  min-width: 0;
}

.contact-page__form-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  margin-block-end: var(--space-6);
}

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

.contact-page__form-intro p {
  width: min(100%, 38.75rem);
}

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

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

.contact-page__field-row > * {
  width: 100%;
  min-width: 0;
}

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

.contact-page__field label {
  margin: 0;
}

.contact-page__field-error,
.contact-page__field-help {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.contact-page__field-error {
  display: none;
  color: #f6c27d;
  font-weight: 700;
}

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

.contact-page__field-help {
  width: min(100%, 32.5rem);
}

.contact-page__field input[aria-invalid="true"],
.contact-page__field select[aria-invalid="true"],
.contact-page__field textarea[aria-invalid="true"] {
  border-color: var(--color-ember-bright);
  box-shadow: inset 0 0 0 1px var(--color-ember-bright);
}

.contact-page__field--message textarea {
  min-height: 11.25rem;
}

.contact-page__form-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  border-block-start: var(--border-default);
  padding-block-start: var(--space-5);
}

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

.contact-page__form-action > p {
  width: min(100%, 35rem);
  margin: 0;
}

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

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

.contact-page__form-status {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--color-ash-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-sm);
}

.contact-page__guidance-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: min(100%, 38.75rem);
  min-width: 0;
  margin-block-end: var(--space-6);
}

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

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

.contact-page__guidance-grid > * {
  width: 100%;
  min-width: 0;
}

.contact-page__guidance-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-3);
  border: var(--border-default);
  background: var(--color-basalt);
  box-shadow: var(--shadow-inset);
  padding: var(--space-5);
}

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

.contact-page__guidance-card p {
  max-width: 46ch;
}

.contact-page__editorial-panel {
  width: min(100%, 51.25rem);
  min-width: 0;
}

.contact-page__editorial-panel > .eyebrow {
  margin-block-end: var(--space-3);
}

.contact-page__editorial-panel > h2 {
  margin-block-end: var(--space-6);
}

.contact-page__editorial-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  width: min(100%, 45rem);
  min-width: 0;
}

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

.contact-page__editorial-copy section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.contact-page__editorial-copy section + section {
  border-block-start: var(--border-default);
  padding-block-start: var(--space-5);
}

.contact-page__editorial-copy h3,
.contact-page__editorial-copy p {
  margin: 0;
}

.contact-page__closing-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, auto);
  gap: var(--space-5) var(--space-6);
  width: 100%;
  min-width: 0;
  border: var(--border-default);
  border-inline-start: 2px solid var(--color-ember);
  background: var(--color-basalt);
  box-shadow: var(--shadow-inset);
  padding: var(--space-5);
}

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

.contact-page__closing-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2);
}

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

.contact-page__closing-copy p {
  width: min(100%, 37.5rem);
}

.contact-page__closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.contact-page__closing-actions > * {
  flex: 1 1 11.875rem;
  min-width: 11.875rem;
}

.contact-page__closing-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--color-stone-line);
  color: var(--color-ember-bright);
  padding: 0.625rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

.contact-page__postal-line {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  border-block-start: var(--border-default);
  padding-block-start: var(--space-3);
  color: var(--color-ash-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

@keyframes contact-fog-drift {
  from { transform: translateX(-1.5%); }
  to { transform: translateX(1.5%); }
}

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

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

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

@media (max-width: 50rem) {
  .contact-page__details-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .contact-page__details-rail p {
    max-width: 38.75rem;
  }
}

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

  .contact-page__closing-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 45rem) {
  .contact-page::before {
    opacity: 0.24;
  }

  .contact-page__intro-copy h1 {
    font-size: clamp(2.5rem, 11vw, 3rem);
    line-height: 1;
  }

  .contact-page__intro-copy p {
    font-size: var(--text-base);
    line-height: var(--leading-base);
  }

  .contact-page__route-card,
  .contact-page__ledger-row,
  .contact-page__guidance-card,
  .contact-page__closing-strip {
    padding: var(--space-4);
  }

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

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

  .contact-page__form-shell {
    width: 100%;
  }

  .contact-page__field--message textarea {
    min-height: 10rem;
  }

  .contact-page__action-row {
    align-items: stretch;
  }

  .contact-page__action-row .button {
    width: 100%;
  }

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

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

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