.contact {
  background: var(--ivory);
  color: var(--espresso);
  padding: clamp(12px, 2vw, 28px) var(--edge) clamp(64px, 7vw, 112px);
}
.contact__inner { max-width: 760px; margin-inline: auto; }
.contact__heading { margin: 0; font-weight: 400; }
.contact__toggle, .contact__submit {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  min-height: 48px;
  padding: 10px 0 17px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.contact__toggle {
  width: 100%;
  font: 400 clamp(21px, 2.4vw, 32px)/1.25 "Neue Montreal", sans-serif;
}
.contact__cta-text { position: relative; }
.contact__cta-text::after {
  content: "";
  position: absolute;
  inset: calc(100% + 8px) auto auto 0;
  width: 24px;
  height: 1px;
  background: var(--sky);
  transition: width var(--line-duration) var(--ease-reveal);
}
.contact button:focus-visible .contact__cta-text::after { width: 100%; }
.contact__arrow {
  display: inline-block;
  flex-shrink: 0;
  font-size: .9em;
  line-height: 1;
  transition: transform var(--line-duration) var(--ease-reveal);
}
.contact__toggle[aria-expanded="true"] .contact__arrow { transform: rotate(90deg); }
.contact__submit .contact__arrow { font-size: 19px; }
@media (hover: hover) and (pointer: fine) {
  .contact button:hover .contact__cta-text::after { width: 100%; }
  .contact__submit:hover .contact__arrow { transform: translate(2px, -2px); }
}

.contact__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  overflow-anchor: none;
  transition: grid-template-rows 500ms cubic-bezier(.22, .61, .36, 1), visibility 0s 500ms;
}
.contact__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.contact__panel.is-positioning { transition: none; }
html:has(.contact__panel.is-framing) { overflow-anchor: none; }
.contact__clip { min-height: 0; overflow: hidden; }
.contact__form {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(24px, 3.4vw, 42px) 0 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 210ms ease, transform 260ms ease;
}
.contact__panel.is-open .contact__form {
  opacity: 1;
  transform: none;
  transition: opacity 330ms 100ms ease, transform 380ms 70ms cubic-bezier(.22, .61, .36, 1);
}
.contact__intent { min-inline-size: 0; border: 0; margin: 0; padding: 0; }
.contact__intent legend { padding: 0; margin-bottom: 4px; }
.contact__choices { display: flex; flex-wrap: wrap; gap: 2px clamp(16px, 3.2vw, 38px); }
.contact__choice { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.contact__choice span { padding-block: 5px; border-bottom: 2px solid transparent; }
.contact__choice input:checked + span { border-bottom-color: var(--sky); }
.contact__choice input:focus-visible + span { outline: 2px solid var(--espresso); outline-offset: 4px; }
.contact__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.contact__field { min-width: 0; }
.contact__field label, .contact__intent legend { display: block; font-size: 16px; line-height: 1.35; }
.contact__hint { font-size: 12px; color: var(--clay); margin-inline-start: 4px; }
.contact__field :is(input, textarea) {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 7px 2px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--clay);
  background: transparent;
  color: inherit;
  font: 350 16px/1.45 "Neue Montreal Text", sans-serif;
}
.contact__field textarea { min-height: 76px; resize: vertical; }
.contact__field :is(input, textarea):focus { outline: 2px solid var(--espresso); outline-offset: -2px; }
.contact__field [aria-invalid="true"] { border-bottom-color: #8a3f30; }
.contact__error, .contact__status { font: 350 14px/1.5 "Neue Montreal Text", sans-serif; margin: 8px 0 0; }
.contact__error { color: #8a3f30; }
.contact__status { color: var(--clay); }
.contact__error:empty, .contact__status:empty { margin: 0; }
.contact__submit { font: 400 13px/1.5 "Neue Montreal", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.contact button:focus-visible { outline-color: var(--espresso); outline-offset: 3px; }
.contact__submit:focus-visible { outline-offset: -2px; }

@media (max-width: 767px) {
  .contact__fields { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the full form in view on short screens while preserving 44px controls. */
@media (max-height: 660px), (max-width: 1279px) and (max-height: 740px) {
  .contact__toggle, .contact__submit { min-height: 44px; padding-block: 4px 13px; }
  .contact__form { gap: 8px; padding-block: 8px 4px; }
  .contact__intent legend { margin-bottom: 0; }
  .contact__choices { column-gap: 12px; font-size: 14px; }
  .contact__fields { row-gap: 6px; }
  .contact__field label, .contact__intent legend { font-size: 15px; line-height: 1.2; }
  .contact__field textarea { min-height: 52px; padding-block: 4px; line-height: 1.35; }
}

.contact__field :is(input, textarea) { scroll-margin-block: calc(var(--low-header-height, 82px) + 10px) 14px; }
@media (max-width: 1279px) and (max-height: 540px) and (orientation: landscape) {
 .contact .contact__form { row-gap: 12px; }
 .contact .contact__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
 .contact__field textarea { min-height: 64px; }
}