/* Document header — same shape as the legal pages, tighter bottom spacing
     ahead of the form. */
  .doc-header { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(36px, 4.5vw, 56px); }
  .doc-title { margin: 0; font-size: clamp(2.5rem, 5.4vw, 4.5rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.02; color: var(--text-primary); text-wrap: balance; }

  /* Two-column body: form (primary) + aside. */
  .contact-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(40px, 6vw, 80px); align-items: start; border-top: 1px solid var(--border-default); padding-top: clamp(32px, 4vw, 48px); }
  @media (max-width: 960px) { .contact-body { grid-template-columns: 1fr; gap: 40px; } }

  .contact-intro { max-width: 60ch; margin: 0 0 30px; font-size: 1.25rem; line-height: 1.55; color: var(--text-primary); letter-spacing: -0.003em; }

  /* Form. */
  .contact-form { margin: 0; max-width: 660px; display: flex; flex-direction: column; gap: 22px; }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field-label { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
  .field-label .req { color: var(--brand); }
  .field-label .optional { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: 13px 15px;
    transition: border-color .15s var(--ease-out-quart), box-shadow .15s var(--ease-out-quart), background-color .15s var(--ease-out-quart);
    -webkit-appearance: none;
    appearance: none;
  }
  .field textarea { min-height: 150px; resize: vertical; }
  .field input::placeholder,
  .field textarea::placeholder { color: var(--text-tertiary); }
  .field input:hover,
  .field select:hover,
  .field textarea:hover { border-color: var(--border-strong); }
  .field input:focus,
  .field select:focus,
  .field textarea:focus { outline: none; border-color: var(--brand); background: var(--surface-subtle); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent); }

  /* Custom select chevron (appearance is stripped above). */
  .field select { padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239a96a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; }

  /* Invalid state + inline error. */
  .field.is-invalid input,
  .field.is-invalid select,
  .field.is-invalid textarea { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 16%, transparent); }
  .field-error { margin: 0; min-height: 0; font-size: 0.85rem; line-height: 1.4; color: var(--brand-hover); display: flex; align-items: center; gap: 6px; }
  .field-error[hidden] { display: none; }
  .field-error svg { flex-shrink: 0; }

  /* Honeypot — hidden from people, visible to naive bots. */
  .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

  /* Submit row. */
  .form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
  .form-actions .note { font-size: 0.85rem; color: var(--text-tertiary); line-height: 1.4; }

  /* Sending state: the submit button is disabled while the request is in
     flight, and reads as busy rather than switched off (base .btn disabled
     styling is for CTAs that cannot be used yet). */
  .btn[disabled] { opacity: 0.6; cursor: progress; }

  /* Spinner shown while sending. */
  .btn .spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in oklab, white 45%, transparent); border-top-color: var(--text-primary); animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .btn .spinner { animation-duration: 1.6s; } }

  /* Top-level banner (server / network errors). */
  .form-banner { display: none; gap: 12px; align-items: flex-start; padding: 16px 18px; margin-bottom: 4px; border-radius: 12px; border: 1px solid; font-size: 0.9375rem; line-height: 1.5; }
  .form-banner.is-visible { display: flex; }
  .form-banner.is-error { background: color-mix(in oklab, var(--brand) 12%, var(--surface-subtle)); border-color: color-mix(in oklab, var(--brand) 45%, var(--border-default)); color: var(--text-primary); }
  .form-banner svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
  .form-banner a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

  /* Success panel (replaces the form). */
  .form-success { display: none; flex-direction: column; gap: 16px; max-width: 560px; padding: 32px; background: var(--surface-subtle); border: 1px solid var(--border-default); border-radius: 16px; }
  .form-success.is-visible { display: flex; }
  .form-success .check { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklab, var(--success) 18%, transparent); border: 1px solid color-mix(in oklab, var(--success) 55%, transparent); color: var(--success); }
  .form-success h2 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.015em; color: var(--text-primary); }
  .form-success p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-muted); }
  .form-success p strong { color: var(--text-primary); font-weight: 600; }

  /* Aside. */
  .contact-aside { display: flex; flex-direction: column; gap: 16px; }
  .aside-card { background: var(--surface-subtle); border: 1px solid var(--border-default); border-radius: 14px; padding: 22px; }
  .aside-card h2 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); }
  .aside-card .email-link { display: inline-flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 600; color: var(--brand); text-decoration: none; }
  .aside-card .email-link:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
  .aside-card p { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); }
  .aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .aside-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 0.9375rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--border-default) 60%, transparent); transition: color .15s var(--ease-out-quart); }
  .aside-list li:last-child a { border-bottom: 0; }
  .aside-list a:hover { color: var(--text-primary); }
  .aside-list a .arrow { color: var(--text-tertiary); transition: transform .2s var(--ease-out-quart), color .15s; }
  .aside-list a:hover .arrow { color: var(--brand); transform: translateX(3px); }