/* ══════════════════════════════════════════════════════════════════════════
   Unplugged Ideas — Contact page.

   Everything shared with the other pages lives in site.css.
   ══════════════════════════════════════════════════════════════════════════ */

  /* ── PAGE HEADER ── */
  .page-header {
    padding: 160px 60px 60px;
    position: relative; overflow: hidden;
    border-bottom: 1px solid rgba(200,155,60,0.22);
  }
  .page-header-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 30%, rgba(200,155,60,0.15) 0%, transparent 70%);
    pointer-events: none;
  }
  .page-header-inner {
    max-width: 700px; margin: 0 auto; text-align: center;
    position: relative; z-index: 1;
  }
  .page-eyebrow {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
  }
  .page-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900; line-height: 1.05; color: var(--cream);
  }
  .page-divider {
    width: 60px; height: 2px;
    background: linear-gradient(to right, var(--gold), transparent);
    margin: 24px auto;
  }
  .page-sub {
    font-size: 1rem; line-height: 1.8;
    color: rgba(29,23,16,0.6);
    max-width: 520px; margin: 0 auto;
  }

  /* ── CONTACT FORM ── */
  .content-wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 64px 60px 120px;
  }

  .contact-form {
    display: flex; flex-direction: column; gap: 16px;
    text-align: left;
  }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  .form-group { display: flex; flex-direction: column; gap: 8px; }

  .form-group label {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(29,23,16,0.45);
  }

  .form-group input, .form-group textarea, .form-group select {
    background: #ffffff;
    border: 1px solid rgba(200,155,60,0.33);
    border-radius: 2px;
    padding: 14px 16px;
    color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.25s, background 0.25s;
    outline: none;
    -webkit-appearance: none;
  }

  .form-group select option { background: #fdf8ef; }

  .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: rgba(200,155,60,0.5);
    background: rgba(200,155,60,0.11);
  }

  .form-group textarea { resize: vertical; min-height: 130px; }

  .form-group .field-error {
    font-size: 0.78rem;
    color: #a53a2f;
    display: none;
  }
  .form-group.has-error input,
  .form-group.has-error textarea,
  .form-group.has-error select {
    border-color: #a53a2f;
  }
  .form-group.has-error .field-error { display: block; }

  /* The widget renders in its own iframe, so it takes spacing only. */
  #group-turnstile { margin-top: 8px; }

  .form-submit {
    display: inline-flex; justify-content: center; align-items: center; gap: 10px;
    padding: 16px 48px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; font-size: 0.88rem; letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none; border-radius: 2px;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s;
    box-shadow: 0 4px 24px rgba(200,155,60,0.3);
    margin-top: 8px;
  }
  .form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(200,155,60,0.5);
  }
  .form-submit:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none;
  }

  .form-note {
    font-size: 0.82rem; line-height: 1.7;
    color: rgba(29,23,16,0.45);
    margin-top: 24px; text-align: center;
  }
  .form-note a { color: var(--gold); }

  #form-success, #form-error {
    display: none;
    padding: 32px; border-radius: 4px;
    margin-top: 8px; text-align: center;
  }
  /* Revealed at the same specificity as the default above: .is-visible is a
     class and the default is an id in a later stylesheet, so the class on its
     own loses the cascade — which left every success and every rejection
     rendered into the page and shown to nobody. */
  #form-success.is-visible, #form-error.is-visible { display: block; }
  #form-success {
    background: rgba(200,155,60,0.18);
    border: 1px solid rgba(200,155,60,0.3);
  }
  /* The receipt reads the submission back: the address a reply will go to, and
     the service picked. Rows are addressed by class, not by position — the card
     holds a variable number of them. */
  .success-receipt {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 20px;
  }
  .success-receipt dt {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(29,23,16,0.45);
    margin-bottom: 4px;
  }
  .success-receipt dd {
    font-family: 'Playfair Display', serif; font-size: 1.15rem;
    color: var(--gold); word-break: break-word;
  }
  .success-note { color: rgba(29,23,16,0.6); font-size: 0.9rem; line-height: 1.7; }

  #form-error {
    background: rgba(165,58,47,0.08);
    border: 1px solid rgba(165,58,47,0.3);
  }
  #form-error p { color: #a53a2f; font-size: 0.9rem; }

  @media (max-width: 900px) {
    .page-header { padding: 130px 24px 48px; }
    .content-wrap { padding: 48px 24px 80px; }
    .form-row { grid-template-columns: 1fr; }
  }