.contact-page main { background: var(--paper); }

.contact-opening {
  color: var(--cream);
  background: linear-gradient(108deg, #212b21f7 12%, #243022ee 53%, #28362bc9),
    url("../assets/photos/ozark-river-habitat.webp") center 62% / cover no-repeat,
    var(--forest);
}
.contact-opening-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.65rem, 6vw, 6rem);
  padding-block: clamp(8.45rem, 11vw, 10.15rem) clamp(2.45rem, 6vw, 5.1rem);
}
.contact-intro .index { color: var(--sand); }
.contact-intro h1 {
  margin-block: .13em .15em;
  font-size: clamp(3.7rem, 8vw, 8rem);
  line-height: .84;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: wrap;
}
.contact-intro > p:not(.eyebrow) { max-width: 46ch; color: #e9e6d7; font-size: clamp(1rem, 1.45vw, 1.16rem); }
.contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: 1.25rem; }
.contact-process-link { margin-top: .35rem; color: var(--sand); }

.contact-inquiry {
  padding: clamp(1.25rem, 3.35vw, 2.9rem);
  border: 1px solid #ddd0b3;
  border-radius: 8px;
  background: #f8f2e5;
  box-shadow: .35rem .35rem 0 #121b145c;
  color: var(--ink);
}
.contact-inquiry .section-heading h2 { font-size: clamp(2.6rem, 4.7vw, 4.6rem); }
.contact-inquiry .section-heading > p:not(.eyebrow) { margin-top: .55rem; }
.contact-form { display: grid; gap: .95rem; margin-top: 1.25rem; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.contact-field { display: grid; gap: .32rem; }
.contact-field label { font-size: .88rem; font-weight: 700; }
.contact-field label span { margin-left: .25rem; color: var(--soft-ink); font-size: .77rem; font-weight: 400; }
.contact-field input, .contact-field textarea {
  width: 100%;
  min-height: 46px;
  padding: .6rem .72rem;
  border: 1px solid #aaa38f;
  border-radius: 4px;
  background: #fffcf4;
  color: var(--ink);
  font: 400 1rem/1.45 var(--body);
}
.contact-field textarea { min-height: 5.8rem; resize: vertical; }
.contact-field :is(input, textarea)::placeholder { color: #66695c; opacity: 1; }
.contact-form .button { border: 0; font: 700 .92rem/1.2 var(--body); cursor: pointer; }
.contact-form .button:disabled { cursor: wait; opacity: .65; }
.contact-form-status { color: var(--soft-ink); font-size: .88rem; }
.contact-form-status:not(:empty) { margin-top: .75rem; }
.contact-email { margin-top: .85rem; color: var(--soft-ink); font-size: .86rem; overflow-wrap: anywhere; }
.contact-email a { color: var(--rust); text-underline-offset: .2em; }

.contact-booking { padding-block: clamp(2.7rem, 6vw, 5.5rem); }
.contact-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.95rem, 2.3vw, 2.1rem);
  margin: clamp(1.2rem, 3vw, 2.3rem) 0 0;
  padding: 0;
  list-style: none;
}
.contact-steps li { padding-top: .78rem; border-top: 2px solid #a7926f; }
.contact-steps .eyebrow { color: var(--rust); letter-spacing: .1em; }
.contact-steps h3 { margin-top: .42rem; font-size: clamp(1.75rem, 3.15vw, 2.75rem); line-height: 1; text-wrap: wrap; }
.contact-steps h3 + p { max-width: 37ch; margin-top: .44rem; color: var(--soft-ink); }

.contact-dropoff { background: #e2e3d4; }
.contact-dropoff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(1.3rem, 6vw, 5.5rem);
  align-items: center;
  padding-block: clamp(2.25rem, 5.5vw, 4.85rem);
}
.contact-dropoff-grid .section-heading .text-link { margin-top: .55rem; color: var(--rust); }
.contact-location {
  padding: clamp(1rem, 3.2vw, 2.15rem);
  border-top: 3px solid #9f865f;
  border-radius: 5px;
  background: #313b2e;
  color: var(--cream);
}
.contact-location .eyebrow { color: var(--sand); }
.contact-location address { margin: .5rem 0 .48rem; font: 700 clamp(1.85rem, 3.3vw, 2.9rem)/1.03 var(--head); }
.contact-location > p:not(.eyebrow) { color: #e5dfd1; }
.contact-location .text-link { margin-top: .25rem; color: var(--sand); }

.contact-faq { padding-block: clamp(2.7rem, 5.8vw, 5.1rem); }

@media (max-width: 1040px) {
  .contact-opening-grid { gap: clamp(1.55rem, 3vw, 3rem); }
  .contact-intro h1 { font-size: clamp(3.45rem, 7.5vw, 5.75rem); }
}
@media (max-width: 760px) {
  .contact-opening-grid, .contact-dropoff-grid, .contact-steps { grid-template-columns: minmax(0, 1fr); }
  .contact-opening-grid { padding-block: clamp(7.65rem, 22vw, 8.45rem) 2.5rem; }
  .contact-intro h1 { font-size: clamp(3.85rem, 12vw, 6rem); }
  .contact-steps h3 + p { max-width: 50ch; }
}
@media (max-width: 475px) {
  .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .contact-actions { gap: .35rem .8rem; }
}