@layer ramp {
  .p-contact__header h1 { margin-block: .25em; font-size: clamp(2.8rem, 7vw, 4.75rem); letter-spacing: -.04em; }
  .p-contact__header p:last-child { max-width: 55ch; color: var(--color-text-secondary); }
  .p-contact__grid { display: grid; align-items: start; gap: 1rem; }
  .p-contact__details, .p-contact__panel { min-width: 0; padding: clamp(1.25rem, 4vw, 2.75rem); }
  .p-contact__panel { scroll-margin-top: 6rem; }
  :root[data-theme="dark"] .p-contact__panel {
    --color-danger: color-mix(in srgb, var(--red-700) 35%, var(--color-danger-surface));
    --color-danger-border: var(--color-danger);
  }
  .p-contact__details h2, .p-contact__panel h2 { margin-top: 0; }
  .p-contact__details address { font-style: normal; }
  .p-contact__details a { overflow-wrap: anywhere; }
  .p-contact__form, .p-contact__field { display: grid; justify-items: start; gap: 1rem; }
  .p-contact__field { width: 100%; gap: .35rem; }
  .p-contact__field label { font-weight: 650; }
  .p-contact__field :is(input, textarea) {
    box-sizing: border-box; min-width: 0; width: 100%; min-height: 2.75rem; padding: .65rem .8rem;
    color: var(--color-text-primary); background: var(--color-surface-page); border: 1px solid var(--color-text-secondary);
    border-radius: .375rem; font: inherit;
  }
  .p-contact__field textarea { resize: vertical; }
  .p-contact__field span { color: var(--color-danger); }
  .p-contact__notice { padding: .75rem 1rem; border-inline-start: .2rem solid var(--color-success-border); background: var(--color-surface-subtle); }
  .p-contact__notice[role="alert"] { border-inline-start-color: var(--color-danger-border); }
  .p-contact__form p { margin: 0; font-size: .92rem; }
  @media (min-width: 48rem) { .p-contact__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
}