.contact-drawer-open { overflow: hidden; }

.contact-drawer {
  position: fixed;
  z-index: 1000;
  inset: 0;
}

.contact-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  opacity: 0;
  transition: opacity 280ms var(--ease);
}

@supports (backdrop-filter: blur(3px)) {
  .contact-drawer-backdrop { backdrop-filter: blur(3px); }
}

.contact-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 540px);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(2rem, 5vw, 4rem);
  padding-bottom: max(clamp(2rem, 5vw, 4rem), env(safe-area-inset-bottom));
  background: var(--paper);
  box-shadow: var(--shadow);
  outline: none;
  transform: translateX(100%);
  transition: transform 280ms var(--ease);
  -webkit-overflow-scrolling: touch;
}

.contact-drawer.is-open .contact-drawer-backdrop { opacity: 1; }
.contact-drawer.is-open .contact-drawer-panel { transform: translateX(0); }

.contact-drawer-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}

.contact-drawer-close:hover { background: var(--cream); transform: rotate(4deg); }
.contact-drawer-close:focus-visible { outline: 2px solid var(--clay-soft); outline-offset: 3px; }
.contact-drawer-close span { position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; background: currentColor; transform-origin: center; }
.contact-drawer-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.contact-drawer-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.contact-drawer-header { padding-top: 1.75rem; }
.contact-drawer-header .eyebrow { margin-right: 3.5rem; }
.contact-drawer-header h2,
.contact-drawer-success h2 { margin-top: 0.8rem; font-size: clamp(3rem, 7vw, 4.6rem); }
.contact-drawer-header h2 em { color: var(--clay); }
.contact-drawer-header > p:last-child { margin-top: 1.25rem; color: var(--muted); font-size: 0.9375rem; }

.contact-request-form { margin-top: 2rem; }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-field { min-width: 0; }
.contact-field-message { grid-column: 1 / -1; }
.contact-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.42rem; color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
.contact-field label > span:not([aria-hidden]) { color: var(--muted); font-size: 0.6875rem; font-weight: 400; }

.contact-field input,
.contact-field select,
.contact-field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.55);
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  outline: none;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}

.contact-field textarea { min-height: 136px; resize: vertical; }
.contact-field textarea::placeholder { color: var(--muted); opacity: 0.72; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); background: var(--paper); }
.contact-field [aria-invalid="true"] { border-color: var(--clay); }
.contact-field-error { min-height: 1.25rem; padding-top: 0.2rem; color: var(--clay); font-size: 0.6875rem; line-height: 1.35; }

.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.contact-form-status {
  margin-bottom: 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--clay-soft);
  border-radius: calc(var(--radius) * 0.55);
  background: var(--cream);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.contact-form-status a { color: var(--clay); text-underline-offset: 0.18em; }

.contact-submit { width: 100%; justify-content: center; }
.contact-submit:disabled { cursor: wait; opacity: 0.68; transform: none; }
.contact-privacy { margin-top: 1rem; color: var(--muted); font-size: 0.6875rem; line-height: 1.55; }

.contact-drawer-success { display: flex; min-height: calc(100dvh - 8rem); flex-direction: column; justify-content: center; }
.contact-drawer-success > p:not(.eyebrow) { margin-top: 1.2rem; color: var(--muted); }
.contact-drawer-success .button { align-self: flex-start; margin-top: 1.8rem; }

@media (max-width: 640px) {
  .contact-drawer-panel { width: 100%; padding: 1.35rem 1rem max(1.5rem, env(safe-area-inset-bottom)); }
  .contact-drawer-close { top: 0.85rem; right: 0.85rem; }
  .contact-drawer-header { padding-top: 2.3rem; }
  .contact-drawer-header h2,
  .contact-drawer-success h2 { font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .contact-request-form { margin-top: 1.6rem; }
  .contact-form-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .contact-field-message { grid-column: auto; }
  .contact-field textarea { min-height: 122px; }
  .contact-drawer-success { min-height: calc(100dvh - 3rem); }
  .contact-drawer-success .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-drawer-backdrop,
  .contact-drawer-panel,
  .contact-drawer-close { transition-duration: 1ms; }
}