/* ════════════════════════════════════════════════════════════════════════════
   Contact page — layered on top of /legal/legal.css
   Only the form-specific pieces live here; nav, footer, hero, tokens and the
   page background all come from legal.css so this page can never drift from
   /terms and /privacy.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────────────── */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:26px;
  align-items:start;
  margin:6px 0 40px;
}

/* ── Panels ───────────────────────────────────────────────────────────────── */
.c-panel{
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,var(--panel-2),rgba(10,17,32,.42));
  padding:30px 32px;
}
.c-panel-h{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 14px;
  font-weight:500;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.c-form{display:block;}
.c-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.c-field{margin-bottom:17px;min-width:0;}
.c-field label{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:7px;
  font-weight:500;
}
.c-field label .req{color:var(--orange);margin-left:3px;}
.c-field label .opt{
  color:var(--muted);
  letter-spacing:.8px;
  text-transform:none;
  font-size:10px;
  margin-left:5px;
}

.c-field input,
.c-field select,
.c-field textarea{
  width:100%;
  box-sizing:border-box;
  background:rgba(2,5,14,.62);
  border:1px solid var(--line-2);
  border-radius:9px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:14.5px;
  padding:12px 14px;
  transition:border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance:none;
  appearance:none;
}
.c-field textarea{
  min-height:158px;
  resize:vertical;
  line-height:1.6;
}
.c-field input::placeholder,
.c-field textarea::placeholder{color:rgba(180,195,215,.34);}

.c-field input:hover,
.c-field select:hover,
.c-field textarea:hover{border-color:rgba(255,255,255,.2);}

.c-field input:focus,
.c-field select:focus,
.c-field textarea:focus{
  outline:none;
  border-color:var(--orange);
  background:rgba(2,5,14,.85);
  box-shadow:0 0 0 3px rgba(255,122,0,.14);
}

/* Native select needs an explicit arrow once appearance is stripped */
.c-select-wrap{position:relative;}
.c-select-wrap::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:8px;height:8px;
  margin-top:-6px;
  border-right:2px solid var(--ink-2);
  border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg);
  pointer-events:none;
}
.c-field select option{background:#0A1120;color:var(--ink);}

/* ── Validation ───────────────────────────────────────────────────────────── */
.c-field.invalid input,
.c-field.invalid select,
.c-field.invalid textarea{
  border-color:#ff6b5e;
  box-shadow:0 0 0 3px rgba(255,107,94,.13);
}
.c-err{
  display:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.4px;
  color:#ff8b80;
  margin-top:6px;
}
.c-field.invalid .c-err{display:block;}

/* ── Counter ──────────────────────────────────────────────────────────────── */
.c-meta-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.c-count{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.6px;
  color:var(--muted);
  flex:none;
}
.c-count.warn{color:var(--orange-hi);}
.c-count.over{color:#ff8b80;}

/* ── Honeypot ─────────────────────────────────────────────────────────────── */
/* Positioned off-screen rather than display:none — some bots deliberately skip
   fields that are display:none or type=hidden, but will happily fill this one.
   aria-hidden + tabindex=-1 keep it away from screen readers and keyboard tab
   order, so no real user can ever reach it. */
.c-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ── Submit ───────────────────────────────────────────────────────────────── */
.c-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:22px;
}
.c-submit{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#0a0400;
  background:linear-gradient(180deg,var(--orange-glow),var(--orange-dk));
  border-radius:9px;
  padding:14px 30px;
  transition:transform .16s var(--ease), box-shadow .2s, filter .2s;
  box-shadow:0 6px 22px rgba(255,90,0,.24);
}
.c-submit:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(255,90,0,.34);
}
.c-submit:active:not(:disabled){transform:translateY(0);}
.c-submit:disabled{
  cursor:not-allowed;
  filter:grayscale(.55) brightness(.72);
  box-shadow:none;
}
.c-note{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.5px;
  color:var(--muted);
  line-height:1.5;
}

/* Spinner shown while submitting */
.c-spin{
  width:13px;height:13px;
  border:2px solid rgba(10,4,0,.3);
  border-top-color:#0a0400;
  border-radius:50%;
  animation:c-spin .6s linear infinite;
  display:none;
}
.is-sending .c-spin{display:block;}
@keyframes c-spin{to{transform:rotate(360deg);}}

/* ── Banner (form-level errors) ───────────────────────────────────────────── */
.c-banner{
  display:none;
  align-items:flex-start;
  gap:11px;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:20px;
  font-size:13.5px;
  line-height:1.58;
  border:1px solid rgba(255,107,94,.34);
  background:rgba(255,107,94,.08);
  color:#ffb3ac;
}
.c-banner.show{display:flex;}
.c-banner svg{flex:none;margin-top:1px;color:#ff8b80;}
.c-banner a{color:#ffd0cb;text-decoration:underline;}

/* ── Success state ────────────────────────────────────────────────────────── */
.c-success{
  display:none;
  text-align:center;
  padding:44px 32px 46px;
}
.c-success.show{display:block;}
.c-success-ico{
  width:60px;height:60px;
  margin:0 auto 20px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(57,211,83,.11);
  border:1px solid rgba(57,211,83,.4);
  color:var(--radar-green,#39d353);
}
.c-success h2{
  font-family:var(--cond);
  font-weight:800;
  font-style:italic;
  font-size:clamp(24px,3vw,31px);
  margin:0 0 12px;
  color:#fff;
  line-height:1.1;
}
.c-success p{
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.72;
  max-width:430px;
  margin:0 auto 10px;
}
.c-ref{
  display:inline-block;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:1.3px;
  color:var(--orange);
  background:rgba(255,122,0,.08);
  border:1px solid rgba(255,122,0,.26);
  border-radius:7px;
  padding:8px 16px;
  margin:16px 0 4px;
}
.c-success-actions{margin-top:26px;}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.c-side{display:grid;gap:18px;}
.c-side .c-panel{padding:24px 26px;}
.c-side h3{
  font-family:var(--cond);
  font-weight:700;
  font-style:italic;
  font-size:19px;
  color:#fff;
  margin:0 0 9px;
  line-height:1.15;
}
.c-side p{
  color:var(--ink-2);
  font-size:13.4px;
  line-height:1.68;
  margin:0 0 12px;
}
.c-side p:last-child{margin-bottom:0;}
.c-side a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(255,122,0,.3);}
.c-side a:hover{color:var(--orange-hi);border-bottom-color:var(--orange-hi);}

.c-side-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line-2);
  border-radius:8px;
  padding:11px 18px;
  text-decoration:none;
  transition:.2s;
  margin-top:4px;
}
.c-side-btn:hover{
  border-color:var(--orange);
  color:#fff;
  background:rgba(255,122,0,.07);
}

/* Small labelled list used by "What happens next" */
.c-steps{list-style:none;margin:0;padding:0;counter-reset:cstep;}
.c-steps li{
  counter-increment:cstep;
  position:relative;
  padding-left:30px;
  margin-bottom:13px;
  font-size:13.2px;
  line-height:1.6;
  color:var(--ink-2);
}
.c-steps li:last-child{margin-bottom:0;}
.c-steps li::before{
  content:counter(cstep);
  position:absolute;
  left:0;top:1px;
  width:20px;height:20px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--orange);
  background:rgba(255,122,0,.09);
  border:1px solid rgba(255,122,0,.28);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr;gap:20px;}
}
@media (max-width:620px){
  .c-row{grid-template-columns:1fr;gap:0;}
  .c-panel{padding:24px 20px;}
  .c-side .c-panel{padding:22px 20px;}
  .c-actions{gap:13px;}
  .c-submit{width:100%;justify-content:center;}
  .c-note{order:2;}
  .c-success{padding:36px 20px 38px;}
}
@media (max-width:400px){
  .c-panel{padding:20px 15px;}
  .c-side .c-panel{padding:19px 15px;}
  .c-field input,.c-field select,.c-field textarea{font-size:14px;padding:11px 12px;}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  .c-submit,.c-side-btn{transition:none;}
  .c-submit:hover:not(:disabled){transform:none;}
  .c-spin{animation-duration:1.6s;}
}