/* ============================================================
   contact.css — CONTACT page-specific styles.
   Shared chrome + hero + page-hero + banner + primitives in /site.css.
   ============================================================ */

/* ---- GET IN TOUCH (intro + form) ---- */
.get-touch { padding: 74px 0 92px; }
.get-grid { display: grid; grid-template-columns: 440px 1fr; gap: 32px; align-items: start; }
.get-intro .serif-title { margin-bottom: 22px; }
.get-intro .gt-sub {
  font-family: var(--sans); font-weight: 400;
  font-size: 30px; line-height: 38px; letter-spacing: -0.03em; color: var(--ink);
  margin-bottom: 22px; max-width: 380px;
}
.get-intro p { color: var(--ink-soft); font-size: 15px; line-height: 23px; max-width: 380px; }

/* form */
.cform { display: grid; gap: 20px; }
.cform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; letter-spacing: -0.02em; color: var(--navy);
  background: var(--white); border: 1px solid #c6d0d8; border-radius: 10px;
  padding: 15px 18px; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: #9fb0bc; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23506d85' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px;
}
.field textarea { min-height: 168px; resize: vertical; }
.cform .submit { justify-self: start; margin-top: 4px; }

/* ---- OUR LOCATION (.our-loc + location cards) is shared in site.css ---- */

/* ---- WHEREVER YOU ARE (water band) ---- */
.where { background: var(--water); }
.where-grid { display: grid; grid-template-columns: 596px 1fr; gap: 64px; align-items: center; padding: 42px 0; }
.where-media img { width: 596px; height: 596px; object-fit: cover; display: block; }
.where-cap { margin-top: 10px; font-size: 12px; line-height: 16px; letter-spacing: -0.02em; color: var(--cap); }
.where-cap .dot { color: var(--teal); }
.where-text .serif-title { color: var(--teal); font-size: 44px; line-height: 54px; margin-bottom: 20px; max-width: 460px; }
.where-text p { color: var(--ink-soft); font-size: 17px; line-height: 26px; max-width: 420px; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .get-grid { grid-template-columns: 1fr; gap: 40px; }
  .where-grid { grid-template-columns: 1fr; gap: 0; }
  .where-text { padding: 40px var(--gutter); }
  .where-cap { padding-left: 0; }
}
@media (max-width: 760px) {
  .cform .row, .loc-grid { grid-template-columns: 1fr; }
}