.contact-main { padding-block-start: var(--header-nav-height); }

.contact-hero {
  min-height: 424px;
  padding-block: 130px 90px;
  background: var(--color-canvas);
}

.contact-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.contact-hero__eyebrow {
  color: var(--color-accent);
  font-size: var(--font-size-section-meta);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.contact-hero__title {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.contact-hero__title em { color: var(--color-accent); font-weight: inherit; }
.contact-hero__intro {
  max-width: 610px;
  color: var(--color-warm-grey);
  font-size: var(--font-size-body-lg);
  line-height: 1.7;
}
html.apl-contact-motion-boot .contact-hero__eyebrow,
html.apl-contact-motion-boot .contact-hero__title,
html.apl-contact-motion-boot .contact-hero__intro { opacity: 0; transform: translateY(16px); }

.contact-body { padding-block-end: 130px; background: var(--color-canvas); }
.contact-body__inner { display: grid; grid-template-columns: minmax(0, 796px) minmax(0, 420px); gap: 80px; align-items: start; }
.contact-form { display: flex; min-width: 0; flex-direction: column; gap: 28px; }
.contact-form__field { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.contact-form__field label {
  color: var(--color-warm-grey);
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.2;
  transition: transform 140ms ease-out;
}
.contact-form__field:focus-within label { transform: translateY(-2px); }
.contact-form__field input,
.contact-form__field textarea {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 14.7px 17px;
  border: 1px solid #8f8b84;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.7;
  outline: none;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: var(--color-warm-grey); opacity: 1; }
.contact-form__field input:hover,
.contact-form__field textarea:hover { border-color: #8f8b84; }
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border: 1.6px solid var(--color-accent);
  box-shadow: 0 0 0 3px rgb(0 79 50 / 12%);
}
.contact-form__field textarea { min-height: 150px; resize: none; }
.contact-form__actions { display: flex; align-items: center; margin-block-start: 36px; }
.contact-form__actions .site-cta { cursor: not-allowed; }
.contact-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.contact-details { min-width: 0; }
.contact-details__panel {
  min-height: 312px;
  padding: 40px 39px 36px;
  border: 1px solid #dcd8d0;
  border-radius: 20px;
  background: var(--color-surface);
}
.contact-details__panel h2 {
  margin-block-end: 28px;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-8);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.01em;
}
.contact-details__entry { display: flex; flex-direction: column; gap: 8px; }
.contact-details__label {
  color: var(--color-warm-grey);
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .18em;
}
.contact-details__entry a { color: var(--color-accent); font-size: var(--font-size-body-lg); line-height: 1.4; }
.contact-details__entry a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-details__entry--membership { margin-block-start: 24px; padding-block-start: 24px; border-block-start: 1px solid #dcd8d0; }
.contact-details__location { margin-block-start: 24px; }
.contact-details__image { aspect-ratio: 21 / 13; overflow: hidden; border-radius: 20px; }
.contact-details__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-details__location figcaption { margin-block-start: 24px; color: var(--color-warm-grey); font-size: var(--font-size-supporting-text); line-height: 1.2; letter-spacing: -.01em; }

@media (max-width: 1366px) {
  .contact-hero { min-height: 0; padding-block: 104px 72px; }
  .contact-body { padding-block-end: 104px; }
  .contact-body__inner { grid-template-columns: minmax(0, 1fr) minmax(300px, .53fr); gap: 48px; }
}
@media (max-width: 900px) {
  .contact-hero { padding-block: 80px 64px; }
  .contact-body__inner { grid-template-columns: 1fr; gap: 56px; }
  .contact-details { max-width: 520px; }
}
@media (max-width: 480px) {
  .contact-hero__inner,
  .contact-body__inner { width: min(100% - 48px, var(--container)); }
  .contact-hero { min-height: 268px; padding-block: 68px 48px; }
  .contact-hero__inner { gap: 18px; }
  .contact-hero__title { font-size: var(--font-size-page-title-compact); line-height: 1.08; }
  .contact-hero__intro { font-size: var(--font-size-body); line-height: 1.72; }
  .contact-body { padding-block-end: 72px; }
  .contact-body__inner { gap: 56px; }
  .contact-form { gap: 22px; }
  .contact-form__field input:focus,
  .contact-form__field textarea:focus { transform: translateY(-1px); }
  .contact-form__actions { margin-block-start: 0; }
  .contact-form__actions .site-cta { width: 100%; gap: 18px; }
  .contact-details__panel { min-height: 235px; padding: 28px 27px 24px; }
  .contact-details__panel h2 { margin-block-end: 20px; font-size: var(--font-size-h6); }
  .contact-details__entry { gap: 5px; }
  .contact-details__entry a { font-size: var(--font-size-body); }
  .contact-details__entry--membership { margin-block-start: 15px; padding-block-start: 15px; }
  .contact-details__location { margin-block-start: 18px; }
  .contact-details__image { aspect-ratio: 171 / 100; }
  .contact-details__location figcaption { margin-block-start: 18px; line-height: 1.5; }
}
@media (max-width: 360px) {
  .contact-hero { padding-block-start: 56px; }
  .contact-hero__title { font-size: var(--font-size-heading-mobile); }
  .contact-details__panel { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form__field label,
  .contact-form__field input,
  .contact-form__field textarea { transition: none; }
}