/* Contact page */

/* ---------- details ---------- */
.details-band { padding: 4.8rem 0 6.4rem; }
.details { margin: 0; display: grid; gap: 2.4rem; }
.details > div { padding-top: 1.6rem; border-top: 0.1rem solid var(--oat); }
.details dt { font: 600 1.15rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--crust); }
.details dd { margin: 0.6rem 0 0; font-size: 1.7rem; line-height: 1.7; }
.details dd small { display: block; font-size: 1.4rem; color: var(--muted); margin-top: 0.2rem; }
.details dd.ci-row { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1.2rem; align-items: start; }
.details dd.ci-row + dd.ci-row { margin-top: 0.8rem; }
.details .ci { color: var(--crust); margin-top: 0.35rem; }
.hours-line { display: block; white-space: nowrap; }
.details a { text-decoration: none; border-bottom: 0.1rem solid var(--oat); }
.details a:hover { border-color: var(--crust); color: var(--crust); }

/* ---------- getting here ---------- */
.ways { display: grid; gap: 2.8rem; margin-top: 3.2rem; }
.ways > div { padding-top: 1.6rem; border-top: 0.1rem solid var(--espresso); }
.ways h3 { margin: 0 0 0.8rem; font: 600 1.15rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--crust); }
.ways p { color: var(--muted); }

/* ---------- map ---------- */
.map-frame { width: 100%; height: 40rem; border: 0; display: block; background: var(--linen); filter: sepia(.18) saturate(.9); }
.map-actions { margin-top: 2.4rem; }
.map-actions .btn { width: 100%; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 2.4rem; margin: 3.2rem 0 0; }
.faq-list > div { padding-top: 1.6rem; border-top: 0.1rem solid var(--espresso); }
.faq-list dt { font: 400 2rem/1.3 var(--serif); }
.faq-list dd { margin: 0.8rem 0 0; color: var(--muted); }

/* ---------- message form ---------- */
.msg-grid { display: grid; gap: 3.2rem; }
.msg-text { margin-top: 1.6rem; color: var(--muted); }
.msg { position: relative; }
.msg-fields { display: grid; gap: 0.4rem 1.6rem; }
.field label { display: block; font: 600 1.15rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 0.6rem; }
.field input, .field textarea { width: 100%; height: 4.8rem; padding: 0 1.4rem; border: 0.1rem solid var(--oat); border-radius: 0.2rem; background: var(--cream); font: inherit; font-size: 1.6rem; color: inherit; }
.field textarea { height: 14rem; padding: 1.2rem 1.4rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--espresso); outline: none; box-shadow: 0 0 0 0.1rem var(--espresso); }
.field.invalid input, .field.invalid textarea { border-color: var(--error); }
.err { display: block; min-height: 2.2rem; font-size: 1.3rem; line-height: 2.2rem; color: var(--error); font-weight: 500; }
.msg-send { width: 100%; min-height: 5.2rem; border: 0; border-radius: 0.2rem; background: var(--crust); color: var(--cream); font: 600 1.3rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.msg-send:hover:not(:disabled) { background: var(--crust-dk); }
.msg-send:disabled { opacity: .6; cursor: default; }
.msg-status { margin-top: 1rem; min-height: 2rem; font-size: 1.3rem; line-height: 2rem; color: var(--error); font-weight: 500; }
.msg-thanks { position: absolute; inset: 0; display: none; place-content: center; text-align: center; background: var(--cream); padding: 2rem; }
.msg.sent .msg-body { visibility: hidden; }
.msg.sent .msg-thanks { display: grid; }
.msg-thanks h3 { font: 400 2.8rem/1.15 var(--serif); margin: 0; }
.msg-thanks p { margin-top: 1.2rem; color: var(--muted); }
.msg-thanks .preview { font-size: 1.3rem; font-style: italic; }

/* ================= desktop: 1000px and wider ================= */
@media (min-width: 1000px) {
  .details-band { padding: 6.4rem 0 9.6rem; }
  .details { grid-template-columns: 1.25fr 1.25fr 1fr; gap: 4.8rem; }
  .details .ci { margin-top: 0.45rem; }
  .details dd.ci-row { grid-template-columns: 2.4rem 1fr; }
  .details dd { font-size: 1.85rem; }
  .details dd small { font-size: 1.6rem; }

  .here-grid { display: grid; grid-template-columns: 40rem 1fr; gap: 8rem; align-items: start; }
  .ways { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 4.8rem; }
  .ways h3 { font-size: 1.2rem; }

  .map-frame { height: 56rem; }
  .map-actions { display: flex; justify-content: flex-end; }
  .map-actions .btn { width: auto; }

  .faq-grid { display: grid; grid-template-columns: 40rem 1fr; gap: 8rem; align-items: start; }
  .faq-list { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 4rem 4.8rem; }
  .faq-list dt { font-size: 2.3rem; }

  .msg-grid { grid-template-columns: 40rem 1fr; gap: 8rem; align-items: start; }
  .msg-fields { grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem 2.4rem; }
  .field.wide { grid-column: 1 / -1; }
  .field label { font-size: 1.2rem; }
  .field input, .field textarea { height: 5.2rem; font-size: 1.7rem; }
  .field textarea { height: 16rem; }
  .msg-send { width: auto; padding: 0 3.2rem; font-size: 1.4rem; min-height: 5.6rem; }
  .msg-thanks h3 { font-size: 3.6rem; }
}