/* SUBTXT holding page: contact form + footer layer over subtxt-brand.css.
   Tokens from Figma "Contact Form" 2046:16 + site CSS (fl-btn metrics, --on-dark-soft, caption #8d8d8d). */
:root {
  --sx-soft: #a8a8ad;      /* --on-dark-soft */
  --sx-field-bg: #ffffff0a;
  --sx-field-line: #ffffff2e;
  --sx-field-line-hi: #ffffff80;
}
.sx-holding { margin: 0; }
.sx-holding main { display: block; }

/* ---------- contact section (Figma: 1512×560, copy 456 / form 624, gap 72, left edge 180) ---------- */
.sx-contact-section { padding: clamp(72px, 9vw, 136px) 24px; background: var(--sx-bg); }
.sx-contact__grid {
  max-width: 1152px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 456px) minmax(0, 1fr);
  gap: 48px clamp(40px, 5vw, 72px); align-items: center;
}
.sx-eyebrow {
  margin: 0 0 20px; font: 500 13px/18px var(--font-mono, ui-monospace), monospace; letter-spacing: .04em;
  text-transform: uppercase; color: #ffffff99;
}
.sx-contact__h.sx-h {
  text-align: left; font-size: clamp(38px, calc(56 * var(--u)), 56px) !important; line-height: .9 !important;
  letter-spacing: -.045em !important; margin: 0 0 20px;
}
.sx-contact__lead { max-width: 420px; margin: 0; font: 400 16px/24px var(--font-body, system-ui), sans-serif; color: var(--sx-soft); }

/* ---------- form ---------- */
.sx-form { display: grid; gap: 16px; min-width: 0; }
.sx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sx-field { display: grid; gap: 8px; min-width: 0; }
.sx-field__label {
  font: 500 12px/18px var(--font-mono, ui-monospace), monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--sx-soft);
}
.sx-input {
  width: 100%; min-width: 0; height: 52px; padding: 0 16px; border-radius: 10px; box-sizing: border-box;
  background: var(--sx-field-bg); border: 1px solid var(--sx-field-line); color: var(--sx-fg);
  font: 400 15px/22px var(--font-body, system-ui), sans-serif; letter-spacing: -.01em; -webkit-appearance: none; appearance: none;
  transition: border-color .18s, background .18s;
}
.sx-input::placeholder { color: var(--sx-mute); opacity: 1; }
.sx-input:hover { border-color: #ffffff47; }
.sx-input:focus { outline: none; border-color: var(--sx-field-line-hi); background: #ffffff0f; }
.sx-input.is-invalid { border-color: #fff; }
.sx-textarea { height: 132px; padding: 14px 16px; resize: vertical; min-height: 96px; }
.sx-select-wrap { position: relative; }
.sx-select { padding-right: 44px; cursor: pointer; color: var(--sx-fg); }
.sx-select:has(option[value=""]:checked), .sx-select option[value=""] { color: var(--sx-mute); }
.sx-select option { background: #0d0d0d; color: var(--sx-fg); }
.sx-select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 1.5px solid var(--sx-soft); border-bottom: 1.5px solid var(--sx-soft); transform: translateY(-70%) rotate(45deg);
}
.sx-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sx-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.sx-form__err { margin: 0; font: 500 12px/18px var(--font-mono, ui-monospace), monospace; letter-spacing: .04em; text-transform: uppercase; color: #ffffff99; }

/* button: fl-btn metrics (48 / r10 / 22px pad / 26px arrow disc), white on black */
.sx-submit {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 22px; border-radius: 10px; border: 0;
  background: var(--sx-fg); color: #111 !important; font: 500 15px/20px var(--font-body, system-ui), sans-serif; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s, transform .18s;
}
.sx-submit:hover { background: var(--sx-tile); }
.sx-submit:active { transform: translateY(1px); }
.sx-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sx-submit.is-busy { opacity: .7; pointer-events: none; }
.sx-submit__arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0000001f; color: #111; }

/* ---------- footer (Figma 2042:1373: tag 22, links 16, legal 12) ---------- */
.sx-footer { background: var(--sx-bg) !important; }
.sx-footer .sx-foot { padding: 40px 24px 48px; }
.sx-foot__links span { color: var(--sx-fg); font-size: 16px; line-height: 24px; }

/* ---------- thanks page ---------- */
.sx-thanks { min-height: 100svh; display: grid; align-content: center; justify-items: start; max-width: 1152px; margin: 0 auto; padding: 120px 24px 80px; box-sizing: border-box; }
.sx-thanks .sx-contact__lead { margin-bottom: 32px; }

/* ---------- hero ghost marquee (mobile: one full frame above the fold) ----------
   Wordmark 1501.36×225.547 and logomark 572.857×444.194 keep their desktop size (--u) and sit mid-frame;
   the ghost lines go massive and loop: a + b drift left, c + d drift right. */
/* all widths: the ghost line is a 2-copy marquee (a + b drift left, c + d drift right); desktop keeps its Figma size/positions */
.sx-hero__ghost {
  width: max-content !important; display: flex; will-change: transform;
  animation: sx-marquee-l 48s linear infinite;
}
.sx-hero__ghost i { font-style: normal; display: block; padding-right: .18em; }
.sx-hero__ghost--b { animation-duration: 40s; }
.sx-hero__ghost--c { animation-name: sx-marquee-r; animation-duration: 44s; }
.sx-hero__ghost--d { animation-name: sx-marquee-r; animation-duration: 52s; }
@media (max-width: 860px) {
  /* one full frame: wordmark + logomark at desktop size mid-frame, ghost lines 46vw packed tight (lh .8) against it */
  .sx-hero { height: 100svh !important; min-height: 560px; }
  /* wordmark + logomark always paint above the moving lines (WebKit promotes animated layers; pin the order),
     and the wordmark carries a black lane (box-shadow spread) so the lines never touch its letters */
  .sx-hero__mark { top: calc(50% - 112.77 * var(--u)); z-index: 4; transform: translateZ(0); background: var(--sx-bg); box-shadow: 0 0 0 1.4vw var(--sx-bg); }
  /* logomark SVG has a black square body: screen-blend so only the white star shows over the lines */
  .sx-hero__star { top: calc(50% - 191.1 * var(--u)); z-index: 5; transform: rotate(45deg) translateZ(0); mix-blend-mode: screen; }
  .sx-hero__ghost { z-index: 2; }
  .sx-hero__ghost { left: 0; font-size: 46vw; line-height: .8; letter-spacing: -.03em; }
  .sx-hero__ghost i { padding-right: .2em; }
  /* mark half-height = 112.77u ≈ 7.46vw; glyph sits ~.05em inside the .8em box */
  .sx-hero__ghost--a { top: calc(50% - 7.46vw + 2.6vw - 36.8vw - 36.8vw); animation-duration: 34s; opacity: .07; }
  .sx-hero__ghost--b { top: calc(50% - 7.46vw + 2.6vw - 36.8vw); animation-duration: 24s; }
  .sx-hero__ghost--c { top: calc(50% + 7.46vw - 3.4vw); animation-duration: 28s; }
  .sx-hero__ghost--d { top: calc(50% + 7.46vw - 3.4vw + 36.8vw); animation-duration: 38s; }
  .sx-hero__strap { bottom: max(22px, env(safe-area-inset-bottom, 0px) + 18px); }
}
@keyframes sx-marquee-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes sx-marquee-r { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .sx-hero__ghost { animation: none; transform: translate3d(-25%, 0, 0); } }

/* ---------- mobile ---------- */
@media (max-width: 960px) {
  .sx-contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .sx-contact__copy { max-width: 560px; }
}
@media (max-width: 560px) {
  .sx-contact-section { padding: 64px 16px 72px; }
  .sx-form__row { grid-template-columns: 1fr; }
  .sx-contact__h.sx-h { font-size: clamp(34px, 11vw, 44px) !important; }
  .sx-input { font-size: 16px; } /* iOS: no zoom on focus */
  .sx-submit { width: 100%; justify-content: space-between; padding-left: 20px; }
  .sx-footer .sx-foot { padding: 32px 16px 40px; }
  .sx-foot__tag { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sx-input, .sx-submit { transition: none; } }