/* ============================================================
   CONTACT — "Open a Channel"
   Calmer + more focused than the other pages. Uses the frozen
   system (tokens.css + main.css). No new colors / no new metaphors.
   ============================================================ */

/* shared imagery-pattern base (documented in DESIGN_SYSTEM.md §8.1) */
.ximg { overflow: hidden; }
.xphoto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; will-change: transform; }
.xscrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ximg > .container { position: relative; z-index: 2; }

.ph-tag { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-deep); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); border-radius: 2px; padding: 2px 6px; display: inline-block; }

/* ---------- 01 · HERO (blueprint, concise channel concept) ---------- */
.contact-hero { padding-top: 132px; padding-bottom: var(--s9); }
.contact-hero .eyebrow { color: var(--bp-draft); margin-bottom: var(--s5); }
.contact-hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-live); box-shadow: 0 0 10px var(--cyan-live); }
.contact-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 0.96; max-width: 18ch; color: var(--bp-ink); }
.contact-hero h1 .accent { color: var(--bp-draft); }
.contact-hero .hero-sub { margin-top: var(--s6); max-width: 52ch; font-size: 1.14rem; color: color-mix(in srgb, var(--bp-ink) 82%, transparent); }
/* channel status line */
.channel { margin-top: var(--s7); display: flex; align-items: center; gap: var(--s4); max-width: 640px; }
.channel .end { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-draft); white-space: nowrap; }
.channel .wire { position: relative; flex: 1; height: 1px; background: var(--bp-line); }
.channel .wire .pkt { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-live); box-shadow: 0 0 8px var(--cyan-live); transform: translate(-50%, -50%); }
.fonts-ready .channel .wire .pkt { animation: chanflow 3.4s linear infinite; }
@keyframes chanflow { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.channel .status { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-live); white-space: nowrap; }
.hero-direct { margin-top: var(--s6); font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.04em; color: var(--bp-draft); }
.hero-direct a { color: var(--bp-ink); text-decoration: underline; text-underline-offset: 3px; }
.hero-direct a:hover { color: var(--cyan-live); }

/* ---------- 02 · THE CONVERSATION (vellum: form + aside) ---------- */
.conversation { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: var(--s10); align-items: start; }

/* routing chips */
.routing { margin-bottom: var(--s7); }
.routing .rlabel { display: block; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vl-ink-soft); margin-bottom: var(--s4); }
.category { display: flex; flex-wrap: wrap; gap: var(--s2); }
.category button { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: var(--s3) var(--s4); border: 1px solid var(--vl-line); border-radius: 2px; color: var(--vl-ink-soft); background: transparent; transition: color var(--t-micro), border-color var(--t-micro), background var(--t-micro); }
.category button:hover { color: var(--vl-ink); border-color: var(--vl-ink); }
.category button.active { color: var(--red-deep); border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }

/* form fields */
.field { margin-bottom: var(--s5); }
.field > label { display: block; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vl-ink-soft); margin-bottom: var(--s3); }
.field > label .req { color: var(--red); }
.field input, .field textarea { width: 100%; background: color-mix(in srgb, var(--vl-paper-2) 55%, transparent); border: 1px solid var(--vl-line); border-radius: 2px; padding: var(--s4); font-family: var(--f-body); font-size: 1rem; color: var(--vl-ink); transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--vl-ink) 38%, transparent); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); background: var(--vl-paper-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent); }
.field textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.field.error input, .field.error textarea { border-color: var(--red); }
.field .err-msg { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--red-deep); transition: max-height var(--t-base), opacity var(--t-base), margin var(--t-base); }
.field.error .err-msg { max-height: 40px; opacity: 1; margin-top: var(--s2); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }

.form-actions { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.form-note { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--vl-ink) 62%, transparent); }

/* success state — borderless, left-accent (matches the editorial grid, not a card) */
.form-success { display: none; border-left: 3px solid var(--cyan-live); padding: var(--s2) 0 var(--s2) var(--s6); }
.contact-form.sent .form-body { display: none; }
.contact-form.sent .form-success { display: block; }
.form-success .sent-summary { margin-top: var(--s5); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--vl-ink-soft); }
.form-success .sent-summary b { color: var(--vl-ink); }
.form-success .ok { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-live); display: flex; align-items: center; gap: var(--s3); }
.form-success .ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-live); box-shadow: 0 0 10px var(--cyan-live); }
.form-success h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--vl-ink); margin-top: var(--s4); }
.form-success p { margin-top: var(--s3); color: var(--vl-ink-soft); max-width: 46ch; }
.form-success a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; }

/* aside: direct contact + trust */
.contact-aside { border-left: 1px solid var(--vl-line); padding-left: var(--s8); }
.aside-block { margin-bottom: var(--s8); }
.aside-block h4 { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s5); }
.direct-row { padding: var(--s4) 0; border-top: 1px solid var(--vl-line); }
.direct-row:last-child { border-bottom: 1px solid var(--vl-line); }
.direct-row .dk { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vl-ink-soft); }
.direct-row .dv { display: block; margin-top: var(--s2); font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; color: var(--vl-ink); }
.direct-row a.dv:hover { color: var(--red-deep); }
.trust-list { display: grid; gap: 0; }
.trust-list .ti { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--vl-line); font-size: 0.96rem; color: var(--vl-ink); }
.trust-list .ti:last-child { border-bottom: 1px solid var(--vl-line); }
.trust-list .ti .tk { color: var(--red); font-family: var(--f-mono); }

/* ---------- 03 · WHAT HAPPENS NEXT (carbon, calm close) ---------- */
.next { position: relative; }
.next-x { opacity: 0.22; filter: grayscale(0.5) brightness(0.6) contrast(1.06); -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000, transparent 80%); }
.next-scrim { background: linear-gradient(180deg, var(--cb-black) 10%, color-mix(in srgb, var(--cb-black) 55%, transparent) 50%, var(--cb-black) 100%); }
.next-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--s8); border-top: 1px solid var(--cb-line); }
.next-step { position: relative; padding: var(--s6) var(--s5) var(--s6) 0; }
.next-step:not(:last-child)::after { content: "→"; position: absolute; right: var(--s4); top: var(--s6); color: var(--bp-draft); font-family: var(--f-mono); opacity: 0.6; }
.next-step .ns-n { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; color: var(--bp-draft); }
.next-step h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--cb-bone); margin-top: var(--s3); }
.next-step p { margin-top: var(--s2); font-size: 0.92rem; color: var(--cb-bone-soft); max-width: 24ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .conversation { grid-template-columns: 1fr; gap: var(--s8); }
  .contact-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--vl-line); padding-top: var(--s7); }
}
@media (max-width: 760px) {
  .contact-hero { padding-top: 112px; }
  .channel { flex-wrap: wrap; gap: var(--s3); }
  .channel .wire { min-width: 80px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .next-path { grid-template-columns: 1fr; }
  .next-step { padding-right: 0; border-bottom: 1px solid var(--cb-line); }
  .next-step:not(:last-child)::after { content: "↓"; right: auto; left: 0; top: auto; bottom: -2px; }
  .rev-seam .mono { display: none; }
}