/* ============================================================ *
 * Contact page — page-contact.php
 * Two-column layout: form (left, larger) + info card (right).
 * Stacks below 880px. Captcha + status messages are scoped here.
 * ============================================================ */

.contact-hero{padding:var(--sp-6) 0 var(--sp-3)}
.contact-hero h1{max-width:18ch}
.contact-hero h1 em{font-style:normal;background:var(--grad-cyan);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-hero .lede{font-size:var(--t-lg);max-width:58ch;color:var(--ink-soft);margin-top:var(--sp-3);font-weight:400}

.contact-grid{
  display:grid;gap:var(--sp-4);grid-template-columns:1.6fr 1fr;
  padding:var(--sp-4) 0 var(--sp-6);align-items:start;
}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}

/* ----- Form ----- */
.contact-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--sp-4);box-shadow:var(--shadow-soft,0 4px 14px rgba(21,19,28,.05));
  position:relative;
}
.contact-form h2{font-size:1.4rem;margin-bottom:.4rem}
.contact-form .sub{color:var(--ink-mute);font-size:var(--t-sm);margin-bottom:var(--sp-3)}

.contact-field{display:block;margin-bottom:var(--sp-3)}
.contact-field > label{
  display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);
  margin-bottom:.35rem;letter-spacing:.005em;
}
.contact-field > label .req{color:var(--hot-deep);margin-left:.15rem}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field select,
.contact-field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--rad-sm);
  background:var(--paper);transition:border-color .15s, box-shadow .15s, background .15s;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  outline:none;border-color:var(--hot);background:#fff;
  box-shadow:0 0 0 3px rgba(255,46,136,.18);
}
.contact-field textarea{min-height:160px;resize:vertical;line-height:1.55}
.contact-field input.is-error,
.contact-field select.is-error,
.contact-field textarea.is-error{border-color:var(--hot-deep);background:rgba(255,46,136,.04)}
.contact-field-error{
  margin:.35rem 0 0;color:var(--hot-deep);font-size:var(--t-xs);font-weight:600;
}

/* Inline two-up row (name + email) on wider forms */
.contact-row{display:grid;gap:var(--sp-2);grid-template-columns:1fr 1fr}
@media (max-width:540px){.contact-row{grid-template-columns:1fr}}

/* Honeypot — visually hidden, screen-reader visible (so we can warn humans
 * who land on it via tab order); positioned off-screen so it never paints. */
.contact-hp{
  position:absolute !important;left:-10000px !important;top:auto !important;
  width:1px !important;height:1px !important;overflow:hidden !important;
}

/* Captcha block */
.nctl-captcha{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad-sm);
  padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0 var(--sp-3);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;
}
.nctl-captcha__label{font-size:var(--t-sm);font-weight:600;color:var(--ink);margin:0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.nctl-captcha__q{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--ink);font-variation-settings:"opsz" 72,"SOFT" 30}
.nctl-captcha__input{
  width:5.5rem;font:inherit;font-size:1rem;text-align:center;
  padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--rad-sm);
  background:#fff;
}
.nctl-captcha__input:focus{outline:none;border-color:var(--cyan-deep,#00A6B5);box-shadow:0 0 0 3px rgba(0,213,229,.2)}
.nctl-captcha__refresh{
  background:transparent;border:0;color:var(--ink-mute);font-size:var(--t-xs);
  cursor:pointer;padding:.3rem .5rem;border-radius:var(--rad-pill);
  transition:color .2s, background .2s;
}
.nctl-captcha__refresh:hover{color:var(--hot-deep);background:rgba(255,46,136,.08)}
.nctl-captcha__hint{flex-basis:100%;font-size:var(--t-xs);color:var(--ink-mute);margin:.1rem 0 0}

/* Submit / status */
.contact-submit-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.contact-status{margin:0;padding:.6rem .9rem;border-radius:var(--rad-sm);font-size:var(--t-sm);font-weight:600;flex:1 1 240px}
.contact-status:empty{display:none}
.contact-status--loading{background:rgba(0,213,229,.12);color:var(--cyan-deep,#0090a0)}
.contact-status--ok{background:rgba(199,242,60,.25);color:#3a5a00}
.contact-status--error{background:rgba(255,46,136,.1);color:var(--hot-deep)}

/* Submitted state (form replaced with success message) */
.contact-form.is-submitted [data-contact-fields][hidden]{display:none}
.contact-form.is-submitted .contact-status--ok{
  font-size:1.1rem;padding:var(--sp-3);text-align:center;line-height:1.5;
  background:linear-gradient(135deg, rgba(199,242,60,.3), rgba(0,213,229,.18));
  color:var(--ink);
}

/* ----- Info card (right column) ----- */
.contact-info{
  background:var(--ink);color:var(--paper);border-radius:var(--rad);
  padding:var(--sp-3);position:sticky;top:var(--sp-4);
}
.contact-info h3{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.contact-info p,.contact-info li{color:rgba(250,247,242,.82);font-size:var(--t-sm);line-height:1.6}
.contact-info ul{list-style:none;padding:0;margin:var(--sp-2) 0}
.contact-info ul li{padding:.45rem 0;border-bottom:1px solid rgba(250,247,242,.12)}
.contact-info ul li:last-child{border-bottom:0}
.contact-info ul li strong{color:#fff;display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.18em;margin-bottom:.15rem}
.contact-info a{color:var(--lime);border-bottom:1px solid rgba(199,242,60,.4)}
.contact-info a:hover{border-color:var(--lime)}
.contact-info .resp-block{
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid rgba(250,247,242,.15);
}
.contact-info .resp-block .eyebrow{color:var(--lime)}
.contact-info .resp-block .eyebrow::before{background:var(--grad-lime)}

@media (max-width:880px){.contact-info{position:static}}