/* ============================================================
   ABOUT / CONTACT — page styles (prose, facts strip, contact
   form + success/error states). Carried from the approved comp.
   ============================================================ */

/* ---------------- ABOUT PROSE ---------------- */
.prose { max-width:64ch; }
.prose p { font-size:var(--body-l); color:#33342d; margin-bottom:1.2rem; }
.prose p:first-of-type { font-size:1.3rem; color:var(--spruce); line-height:1.5; }
/* editorial drop cap on the lead */
.prose p:first-of-type::first-letter {
  font-family:'Fraunces',serif; font-weight:600; font-size:3.6rem; line-height:0.8;
  float:left; margin:0.35rem 0.7rem 0 0; color:var(--goldenrod);
}

/* ---------------- FACTS ---------------- */
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; margin:2.5rem 0 0; box-shadow:var(--shadow-card); }
.fact { background:var(--paper); padding:1.6rem 1.3rem; position:relative; transition:background 0.16s; }
.fact::before { content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--goldenrod); transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease); }
.fact:hover { background:#fff; }
.fact:hover::before { transform:scaleX(1); }
.fact__num { font-family:'Fraunces',serif; font-size:1.9rem; color:var(--spruce); font-weight:600; line-height:1; }
.fact__label { font-size:0.8125rem; color:#5a5b52; margin-top:0.45rem; }

/* ---------------- CONTACT FORM ---------------- */
.contact-head { max-width:680px; }
.contact-head h2 { font-size:clamp(1.6rem,2.4vw,1.9rem); margin:0.6rem 0 0.75rem; }
.form__intro { color:#4a4b44; margin-bottom:1.4rem; max-width:60ch; }
.form { display:grid; gap:1.1rem; max-width:680px; }
.field { display:grid; gap:0.4rem; }
.field.row2 { grid-template-columns:1fr 1fr; gap:1.1rem; }
.field label { font-size:0.8125rem; font-weight:700; color:var(--spruce); letter-spacing:0.02em; }
.field label .req { color:var(--clay); }
.field input, .field textarea, .field select { font-family:inherit; font-size:0.95rem; color:var(--ink); background:var(--paper); border:1px solid var(--hairline); border-radius:6px; padding:0.7rem 0.85rem; width:100%; transition:border-color 0.14s, box-shadow 0.14s, background 0.14s; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--ridge); box-shadow:0 0 0 3px rgba(74,107,88,0.15); background:#fff; }
.field textarea { resize:vertical; min-height:140px; }
.field.has-error input, .field.has-error textarea { border-color:#b4552f; box-shadow:0 0 0 3px rgba(180,85,47,0.14); }
.field__error { font-size:0.75rem; font-weight:600; color:#b4552f; display:none; }
.field.has-error .field__error { display:block; }

.form__actions { display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; margin-top:0.3rem; }
.form__note { font-size:0.85rem; color:#6a6b62; }
.btn:disabled { opacity:0.6; cursor:default; }

/* submit failure (network / non-2xx) */
.form-error { display:none; font-size:0.875rem; font-weight:600; color:#b4552f; background:rgba(180,85,47,0.08); border:1px solid rgba(180,85,47,0.3); border-radius:6px; padding:0.7rem 0.9rem; }
.form-error.is-shown { display:block; }

.form-success { display:none; max-width:680px; background:var(--paper); border:1px solid var(--hairline); border-left:4px solid var(--ridge); border-radius:var(--radius-lg); padding:1.6rem 1.75rem; box-shadow:var(--shadow-card); }
.form-success.is-shown { display:block; animation:pop 0.4s var(--ease); }
@keyframes pop { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.form-success h3 { font-size:1.3rem; margin-bottom:0.5rem; display:flex; align-items:center; gap:0.6rem; }
.form-success p { color:#4a4b44; font-size:0.95rem; }
.form-success .check { width:26px; height:26px; border-radius:50%; background:var(--ridge); display:grid; place-items:center; flex:none; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:960px) {
  .facts { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .facts { grid-template-columns:1fr 1fr; }
  .field.row2 { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .fact::before { transform:scaleX(1); }
}