/* ============================================================
   CONTACT — masthead with direct channels, form + details rail,
   map frame, process triptych, closing banner
   ============================================================ */

.contact-open {
  padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  background-color: var(--c-ivory);
  background-image: radial-gradient(56% 64% at 88% 8%, var(--c-sage-pale), transparent 72%);
}

.contact-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.contact-open__text h1 { margin-block: 1rem 1.35rem; }

.contact-open__lede {
  max-width: 36rem;
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}

.contact-direct {
  display: grid;
  gap: 0.65rem;
  margin-top: 2rem;
  max-width: 30rem;
}

.contact-direct a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.15rem;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--d-norm) var(--ease),
              box-shadow var(--d-norm) var(--ease),
              translate var(--d-norm) var(--ease);
}
.contact-direct a:hover {
  border-color: var(--c-sage-light);
  box-shadow: var(--sh-md);
  translate: 0 -2px;
}

.contact-direct__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 50%;
  background-color: var(--c-sage-pale);
  color: var(--c-sage-deep);
}

.contact-direct__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.contact-direct__label {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.contact-direct__value {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.contact-open__media .media {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background-color: var(--c-sand);
}

/* ── Form + details ──────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}

.contact-form-wrap .section-header { margin-bottom: var(--s-6); }

.form-notice {
  display: flex;
  gap: 0.85rem;
  padding: 1.15rem 1.35rem;
  margin-bottom: var(--s-5);
  background-color: rgba(176, 141, 79, 0.08);
  border: 1px solid var(--c-beige);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}
.form-notice .icon { color: var(--c-gold); flex: none; margin-top: 0.15em; width: 1.3em; height: 1.3em; }
.form-notice strong { color: var(--c-ink); }
.form-notice a { color: var(--c-sage-deep); text-decoration: underline; }

.contact-form {
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}

.form-actions__note { font-size: var(--t-xs); color: var(--c-text-3); }

.contact-form .form-status { margin-top: var(--s-5); }
.contact-form .form-status a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ── Details rail ────────────────────────────────────────── */
.contact-details { display: grid; gap: 1rem; }

.contact-card {
  padding: 1.35rem 1.5rem;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}

.contact-card__title {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-sage-deep);
  margin-bottom: 0.95rem;
}

.contact-card__body { display: grid; gap: 0.6rem; font-size: var(--t-sm); color: var(--c-text-2); }
.contact-card__body strong { color: var(--c-ink); }

.contact-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: var(--lh-relaxed);
}
.contact-card__row .icon { color: var(--c-sage); flex: none; margin-top: 0.22em; }
.contact-card__row a { color: var(--c-text); font-weight: 500; }
.contact-card__row a:hover { color: var(--c-sage-deep); text-decoration: underline; }

/* ── Process triptych ────────────────────────────────────── */
.contact-modes {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.4fr) minmax(0, 0.55fr);
  gap: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  align-items: center;
}

.contact-modes__media .media {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background-color: var(--c-sand);
}

.contact-modes__text h2 { margin-block: 0.85rem 1.6rem; }

.contact-steps { display: grid; gap: 1.35rem; counter-reset: cs; }

.contact-steps li {
  position: relative;
  padding-left: 3rem;
  counter-increment: cs;
}
.contact-steps li::before {
  content: counter(cs);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--c-sage);
  color: var(--c-sage-deep);
  font-size: 0.78rem;
  font-weight: 600;
}

.contact-steps h3 { font-size: var(--t-md); margin-bottom: 0.35rem; }
.contact-steps p { font-size: var(--t-sm); line-height: var(--lh-relaxed); color: var(--c-text-2); }

/* ── Closing banner ──────────────────────────────────────────
   Split composition rather than a cropped full-bleed background:
   the photograph keeps its own aspect ratio and stays complete at
   every viewport. */
.contact-banner {
  background-color: var(--c-graphite);
  background-image: radial-gradient(70% 100% at 12% 0%, rgba(110, 130, 100, 0.22), transparent 62%);
  color: var(--c-on-dark-2);
  overflow: hidden;
}

.contact-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.75rem, 2rem + 3.4vw, 5rem);
}

.contact-banner__panel { max-width: 34rem; }
.contact-banner__panel h2 { color: var(--c-white); margin-block: 0.8rem 0.9rem; }
.contact-banner__panel p { color: var(--c-on-dark-2); line-height: var(--lh-relaxed); }
.contact-banner__panel .text-overline { color: var(--c-gold-light); }

.contact-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.85rem;
}

.contact-banner__media .media {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  background-color: rgba(255, 255, 255, 0.06);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  .contact-open__inner,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .contact-open__media { order: -1; max-width: 30rem; }

  .contact-details { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

  .contact-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-modes__text { grid-column: 1 / -1; order: -1; }

  .contact-banner__inner { grid-template-columns: minmax(0, 1fr); }
  .contact-banner__media { max-width: 32rem; }
}

@media (max-width: 620px) {
  .contact-modes { grid-template-columns: minmax(0, 1fr); }
  .contact-modes__media { max-width: 20rem; margin-inline: auto; }
  .form-actions .btn { width: 100%; }
  .contact-banner__actions .btn { flex: 1 1 100%; }
}