@layer components {
  .contact {
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) var(--rhythm);
  }
  .contact__h {
    font-family: var(--font-display);
    font-weight: var(--display-wght);
    font-variation-settings: 'wdth' var(--display-wdth);
    font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: var(--display-tracking);
  }
  .contact__lead {
    color: var(--ink-quiet);
    max-width: 46ch;
    margin: .85rem 0 clamp(1.5rem, 4vw, 2.5rem);
  }
  .form--contact { display: grid; gap: 1.1rem; }
  .contact--thanks .contact__lead { margin-bottom: 1.5rem; }
  .contact__back a { border-bottom: 1px solid var(--rule); }
  .contact__back a:hover { color: var(--accent); border-bottom-color: var(--accent); }

  /* Off-screen rather than display:none — some bots skip anything hidden. */
  .trap {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
  }
}

@layer components {
  /* Turnstile renders a fixed-size iframe; reserve its space so the Send
     button does not jump down when the widget finishes loading. */
  .turnstile { min-height: 65px; }
}