/* ============================================================
   FifthStar — Contact page (Design Language v1.0)
   Loaded AFTER assets/base.css (shared brand system). This file holds
   ONLY contact-page layout & components; tokens, fonts, nav, .btn,
   .glass-card, .section, .final, .foot come from base.css.
   ============================================================ */

/* === Hero === */
.contact-hero{position:relative;overflow:hidden;padding:5.5rem 0 3.2rem}
.contact-hero::before{content:"";position:absolute;left:50%;top:14%;width:34rem;height:34rem;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--accent-soft),transparent 62%);opacity:.5;pointer-events:none;z-index:0}
.contact-hero .wrap{position:relative;z-index:2}
.contact-hero .eyebrow{margin-bottom:.7rem}
.contact-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.4rem 0 1rem;max-width:20ch}
.contact-hero .tagline{font-size:1.12rem;color:var(--mute);max-width:42rem;line-height:1.6}
.pledge-pill{display:inline-flex;align-items:center;gap:.5rem;margin:1.3rem 0 0;padding:.5rem 1rem;border-radius:9999px;border:1px solid var(--gold);background:var(--glass);color:var(--ink);font-size:.9rem;font-weight:600}
.pledge-pill .tick{color:var(--gold);font-weight:700}

/* === Main grid: form + contact methods === */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;max-width:66rem;margin:2.6rem auto 0;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:1.8rem}}

/* === Form card === */
.form-card{display:flex;flex-direction:column;gap:1.1rem;padding:2rem 1.9rem;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--accent-glass)}
.form-card h2{font-size:1.5rem;margin-bottom:.2rem}
.form-card .form-intro{color:var(--mute);font-size:.98rem;line-height:1.55;margin-bottom:.4rem}
.cap-field{display:flex;flex-direction:column;gap:.4rem}
.cap-field label{font-size:.85rem;font-weight:600;color:var(--ink)}
.cap-opt{color:var(--mute);font-weight:400}
.cap-req{color:var(--gold)}
.cap-field input,
.cap-field textarea,
.cap-field select{
  font:inherit;font-size:.95rem;padding:.7rem .9rem;border-radius:.6rem;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  border:1px solid var(--line);color:var(--ink);width:100%;
  transition:border-color .2s;
}
.cap-field textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.cap-field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A89E8C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}
.cap-field input:focus,
.cap-field textarea:focus,
.cap-field select:focus{outline:none;border-color:var(--gold)}
.cap-field input::placeholder,
.cap-field textarea::placeholder{color:var(--mute)}
.cap-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.cap-row{grid-template-columns:1fr}}
.cap-submit{margin-top:.4rem;justify-content:center;width:100%}
.cap-note{font-size:.8rem;color:var(--mute);text-align:center;margin-top:.3rem;line-height:1.5}
.cap-note a{color:var(--gold);font-weight:600}
.cap-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* spam honeypot */
.form-ok{display:none;flex-direction:column;gap:.8rem;align-items:center;text-align:center;padding:1.5rem 1rem}
.form-ok.show{display:flex}
.form-ok .ok-mark{width:3rem;height:3rem;border-radius:9999px;border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700}
.form-ok h3{font-size:1.4rem}
.form-ok p{color:var(--mute);font-size:.98rem;line-height:1.6;max-width:30rem}

/* === Contact methods panel === */
.methods{display:flex;flex-direction:column;gap:.85rem}
.methods .panel-h{font-family:var(--head-font);font-weight:700;font-size:1.3rem;margin-bottom:.2rem}
.methods .panel-sub{color:var(--mute);font-size:.92rem;line-height:1.5;margin-bottom:.6rem}
.method{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:1rem;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--accent-glass);transition:border-color .25s,transform .25s,filter .25s}
a.method:hover{border-color:var(--gold);transform:translateY(-2px);filter:brightness(1.05)}
.method .m-ic{width:1.5rem;height:1.5rem;color:var(--gold);flex:none;margin-top:.12rem}
.method .m-ic svg{width:100%;height:100%;display:block}
.method .m-body{display:flex;flex-direction:column;gap:.12rem;min-width:0;flex:1}
.method .m-name{font-weight:600;font-size:.95rem;color:var(--ink)}
.method .m-val{font-size:.9rem;color:var(--mute);word-break:break-word;line-height:1.45}
.method .m-tag{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:.18rem .5rem;border-radius:9999px;margin-left:auto;align-self:flex-start;flex:none;white-space:nowrap}
.method--off{opacity:.72;border-style:dashed}
.method--off .m-ic{color:var(--mute)}
.method--off .m-val{font-style:italic}

/* === "What happens next" strip === */
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:64rem;margin:2.8rem auto 0}
@media(max-width:760px){.next-steps{grid-template-columns:1fr}}
.stepc .body{color:var(--mute);font-size:.98rem;line-height:1.6}

/* === Submit button states === */
.cap-submit{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem}
.cap-submit .btn-spinner{display:none;width:1.2rem;height:1.2rem;color:currentColor;animation:spin 1s linear infinite}
.cap-submit .btn-spinner svg{display:block;width:100%;height:100%}
.cap-submit.is-loading .btn-spinner{display:inline-block}
.cap-submit:disabled{opacity:.85;cursor:not-allowed}
@keyframes spin{to{transform:rotate(360deg)}}

/* === Success / error panels === */
.form-ok,.form-err{display:none;flex-direction:column;gap:.8rem;align-items:center;text-align:center;padding:1.5rem 1rem;animation:cfPanelIn .45s cubic-bezier(.2,.8,.2,1) both}
.form-ok.show,.form-err.show{display:flex}
@keyframes cfPanelIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.form-ok .ok-mark,.form-err .err-mark{width:3rem;height:3rem;border-radius:9999px;border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center}
.form-ok .ok-mark svg,.form-err .err-mark svg{width:1.5rem;height:1.5rem}
.form-ok h3,.form-err h3{font-size:1.4rem;font-family:var(--head-font)}
.form-ok p,.form-err p{color:var(--mute);font-size:.98rem;line-height:1.6;max-width:30rem}

/* Error panel uses a softer amber/red tone */
.form-err .err-mark{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.form-err h3{color:var(--gold)}
.form-err .btn{margin-top:.4rem}