/* ============================================================
   FORWARD THINKING ENGINEER — phase-1 mock
   Language: warm graphite, instrument amber, engineering annotations.
   ============================================================ */

:root {
  --bg: #12130f;
  --bg-raised: #181a14;
  --ink: #ede8dc;
  --ink-dim: #9a968a;
  --ink-faint: #5d5b52;
  --amber: #f2a33c;
  --amber-bright: #ffc46b;
  --line: rgba(237, 232, 220, 0.14);
  --line-faint: rgba(237, 232, 220, 0.07);
  --serif: "Fraunces", georgia, serif;
  --sans: "Instrument Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --pad: clamp(1.25rem, 4vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); }
em { font-style: italic; }

::selection { background: var(--amber); color: var(--bg); }

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem var(--pad);
  border-bottom: 1px solid var(--line-faint);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.wordmark { font-size: 0.78rem; letter-spacing: 0.14em; font-weight: 500; }
.masthead-cta {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.masthead-cta:hover { border-color: var(--amber); }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 8vh, 6rem) var(--pad) clamp(3rem, 7vh, 5rem);
  max-width: 1440px;
  margin: 0 auto;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 1.6rem;
}

h1 {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
h1 em { color: var(--amber-bright); font-weight: 320; }

.subhead {
  color: var(--ink-dim);
  max-width: 34rem;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  margin-bottom: 2.2rem;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-primary, .btn-ghost, .btn-run {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
  border: 1px solid var(--amber);
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
  cursor: pointer;
}
.btn-primary { background: var(--amber); color: #191305; font-weight: 500; }
.btn-primary:hover { background: var(--amber-bright); }
.btn-ghost { color: var(--ink-dim); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-dim); }

/* ---------- 3D stage ---------- */
.stage { width: 100%; }

.stage-inner {
  position: relative;
  aspect-ratio: 1 / 1.06;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px),
    radial-gradient(ellipse 75% 60% at 50% 42%, #1c1e17 0%, var(--bg) 78%);
  background-size: 44px 44px, 44px 44px, cover;
  overflow: hidden;
}

.stage-inner img,
.stage-inner canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
#hero-canvas { opacity: 0; transition: opacity 600ms ease; }
.stage-inner.is-live #hero-canvas { opacity: 1; }
.stage-inner.is-live #hero-fallback { opacity: 0; transition: opacity 600ms ease; }

/* corner ticks — engineering-drawing register marks */
.tick {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--ink-dim);
  border-style: solid;
  border-width: 0;
  z-index: 2;
}
.tick-tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.tick-tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.tick-bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.tick-br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

.stage-label {
  position: absolute;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  color: var(--ink-dim);
  z-index: 2;
}
.label-tl { top: 14px; left: 30px; max-width: 44%; }
.label-tr { top: 14px; right: 30px; color: var(--amber); max-width: 50%; text-align: right; }

/* console under the stage */
.stage-console {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.btn-run {
  background: transparent;
  color: var(--amber);
  flex-shrink: 0;
}
.btn-run:hover:not(:disabled) { background: var(--amber); color: #191305; }
.btn-run:disabled { opacity: 0.35; cursor: default; }

.statuses { list-style: none; font-size: 0.68rem; letter-spacing: 0.09em; }
.statuses li { color: var(--ink-faint); padding: 0.18rem 0; transition: color 300ms ease; }
.statuses li span { color: inherit; }
.statuses li[data-state="pass"] { color: var(--ink-dim); }
.statuses li[data-state="pass"] span { color: var(--amber); }

/* ---------- thesis ---------- */
.thesis {
  border-top: 1px solid var(--line-faint);
  padding: clamp(4rem, 10vh, 7rem) var(--pad);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.thesis-line {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.12;
  margin-bottom: 1.8rem;
}
.thesis-line em { color: var(--amber-bright); }
.thesis-body { color: var(--ink-dim); max-width: 44rem; margin: 0 auto; }

/* ---------- ladder ---------- */
.ladder {
  border-top: 1px solid var(--line-faint);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad);
  max-width: 1440px;
  margin: 0 auto;
}
.section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 2.5rem;
}
.ladder-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}
.ladder-list li {
  border-left: 1px solid var(--line-faint);
  padding: 0.4rem 1.6rem 0.6rem;
}
.step-no { font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.12em; }
.ladder-list h3 {
  font-family: var(--serif);
  font-weight: 420;
  font-size: 1.55rem;
  margin: 0.5rem 0 0.8rem;
}
.ladder-list p { color: var(--ink-dim); font-size: 0.94rem; }

/* ---------- commitments plate ---------- */
.plate-section {
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad);
  max-width: 1440px;
  margin: 0 auto;
}
.plate-section .plate { max-width: 1100px; }
.plate {
  border: 1px solid var(--line);
  background: var(--bg-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.plate > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--line-faint);
  border-right: 1px solid var(--line-faint);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}
.plate dt { color: var(--ink-faint); }
.plate dd { color: var(--ink); text-align: right; }
.plate-note {
  color: var(--ink-dim);
  font-size: 0.94rem;
  margin-top: 1.6rem;
  max-width: 40rem;
}

/* ---------- contact ---------- */
.contact {
  border-top: 1px solid var(--line-faint);
  padding: clamp(4.5rem, 12vh, 8rem) var(--pad);
  text-align: center;
}
.contact-line {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  margin-bottom: 1rem;
}
.contact-line em { color: var(--amber-bright); }
.contact-body { color: var(--ink-dim); margin-bottom: 2.2rem; }

/* ---------- footer ---------- */
.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.4rem var(--pad);
  border-top: 1px solid var(--line-faint);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .stage { max-width: 560px; margin: 0 auto; }
}

/* ============================================================
   Polish layer: grain, micro-interactions, menu, footer, reveals
   ============================================================ */

/* faint film grain — materiality without noise */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* buttons: tactile hover */
.btn-primary, .btn-ghost, .btn-run {
  transition: transform 160ms ease, box-shadow 160ms ease,
              background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(242, 163, 60, 0.22);
}
.btn-ghost:hover { background: rgba(242, 163, 60, 0.07); }
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 3px;
}

/* nav: canonical base (page files must not redefine) */
.nav { display: flex; gap: 1.6rem; }
.nav a {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  text-decoration: none;
  padding-bottom: 2px;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--amber); }

/* nav: animated underline */
.nav a { position: relative; border-bottom: none !important; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* mobile menu */
.menu-btn {
  display: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
}
.menu-overlay.is-open { display: flex; }
.menu-overlay nav { display: flex; flex-direction: column; gap: 0.4rem; }
.menu-overlay a.m-link {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(2rem, 8vw, 2.8rem);
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-faint);
}
.menu-overlay a.m-link[aria-current="page"] { color: var(--amber-bright); }
.menu-overlay .m-cta {
  margin-top: 2rem;
  align-self: flex-start;
}
.menu-overlay .m-email {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.menu-close {
  position: absolute;
  top: 1.1rem;
  right: var(--pad);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}
body.menu-open { overflow: hidden; }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: inline-block; }
  .masthead-cta { display: none; }
}

/* big footer */
.footer-big {
  border-top: 1px solid var(--line-faint);
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad) 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1440px;
  margin: 0 auto;
}
.footer-big .f-word { font-size: 0.78rem; letter-spacing: 0.14em; font-weight: 500; }
.footer-big .f-line {
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-dim);
  max-width: 22rem;
}
.footer-big nav { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-big nav a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  text-decoration: none;
}
.footer-big nav a:hover { color: var(--amber); }
.footer-big .f-meta { font-size: 0.64rem; letter-spacing: 0.1em; color: var(--ink-faint); }
.footer-big .f-meta a { color: var(--ink-dim); text-decoration: none; }
.footer-big .f-meta a:hover { color: var(--amber); }
.footer-big .f-copy { margin-top: 1.6rem; }

/* scroll reveals (JS adds .js to <html>; blocks stay visible without it) */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms ease, transform 650ms ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn-primary:hover { transform: none; }
}

/* plate rows: tactile */
.plate > div { transition: background 180ms ease; }
.plate > div:hover { background: color-mix(in srgb, var(--amber) 5%, transparent); }

/* ============================================================
   POP layer: commanding masthead, raised type scale, kinetic type
   ============================================================ */

/* masthead: from utility bar to statement */
.masthead { padding: 1.25rem var(--pad); }
.wordmark { font-size: 0.95rem; letter-spacing: 0.16em; font-weight: 600; display: inline-flex; align-items: center; }
.wordmark::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border: 2px solid var(--amber);
  margin-right: 0.75em;
  flex-shrink: 0;
}
.nav { gap: 2rem; }
.nav a { font-size: 0.78rem; letter-spacing: 0.14em; }
.masthead-cta {
  background: var(--amber);
  color: #191305 !important;
  border: 1px solid var(--amber);
  padding: 0.65rem 1.1rem;
  font-weight: 500;
  font-size: 0.74rem;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.masthead-cta:hover {
  background: var(--amber-bright);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(242, 163, 60, 0.28);
}
.menu-btn { font-size: 0.78rem; padding: 0.65rem 1.05rem; }

/* raised global type scale */
body { font-size: 1.125rem; }
.section-eyebrow, .eyebrow { font-size: 0.82rem; }
.thesis-line { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.contact-line { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.plate > div { font-size: 0.8rem; padding: 1.15rem 1.5rem; }
.footer-big nav a { font-size: 0.74rem; }
.footer-big .f-line { font-size: 1.15rem; }

/* engineering ticker */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  padding: 1.15rem 0;
}
.ticker-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: tick 30s linear infinite;
}
.ticker-track span {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.ticker-track span em { color: var(--amber); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ghost numerals: scale contrast behind process steps */
.ghost-no {
  position: absolute;
  top: -2.4rem;
  right: 0.6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(5rem, 9vw, 8.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 163, 60, 0.18);
  pointer-events: none;
  user-select: none;
}

/* masked line reveals for big statements */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; }
.lines .line-mask > span { text-wrap: balance; }
.js .lines .line-mask > span {
  transform: translateY(112%);
}
.js .lines.is-in .line-mask:nth-child(1) > span { animation: line-up 850ms 60ms cubic-bezier(0.22, 0.75, 0.2, 1) forwards; }
.js .lines.is-in .line-mask:nth-child(2) > span { animation: line-up 850ms 200ms cubic-bezier(0.22, 0.75, 0.2, 1) forwards; }
.js .lines.is-in .line-mask:nth-child(3) > span { animation: line-up 850ms 340ms cubic-bezier(0.22, 0.75, 0.2, 1) forwards; }
@keyframes line-up { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .js .lines .line-mask > span { transform: none; animation: none; }
}

/* staggered grid reveals */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 110ms; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 220ms; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 330ms; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   THE PLAQUE — machined commitment plate (templatizable: any .plate)
   ============================================================ */
.plate {
  position: relative;
  border: 1px solid rgba(237, 232, 220, 0.18);
  background:
    radial-gradient(140% 160% at var(--mx, 30%) var(--my, 20%), rgba(255, 214, 140, 0.10) 0%, transparent 46%),
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px),
    linear-gradient(158deg, #262a20 0%, #191c14 48%, #14160f 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.07),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55),
    0 18px 50px rgba(0, 0, 0, 0.45);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 300ms ease;
  will-change: transform;
}
/* corner screws */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 5px at 14px 14px, #3a3e34 40%, #0c0d09 55%, transparent 62%),
    radial-gradient(circle 5px at calc(100% - 14px) 14px, #3a3e34 40%, #0c0d09 55%, transparent 62%),
    radial-gradient(circle 5px at 14px calc(100% - 14px), #3a3e34 40%, #0c0d09 55%, transparent 62%),
    radial-gradient(circle 5px at calc(100% - 14px) calc(100% - 14px), #3a3e34 40%, #0c0d09 55%, transparent 62%);
}
/* reveal sheen sweep */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 224, 170, 0.09) 46%, rgba(255, 224, 170, 0.16) 50%, rgba(255, 224, 170, 0.09) 54%, transparent 70%);
  background-size: 300% 100%;
  background-position: 120% 0;
}
.js .is-in.plate::after, .js .is-in .plate::after {
  animation: sheen 1400ms 350ms cubic-bezier(0.3, 0.6, 0.2, 1) forwards;
}
@keyframes sheen { to { background-position: -60% 0; } }
.plate > div {
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  border-right: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  background: transparent;
}
.plate > div:hover { background: rgba(255, 200, 120, 0.045); }
.plate dt {
  color: #6d6a5c;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.plate dd {
  color: var(--amber-bright);
  text-shadow: 0 0 14px rgba(242, 163, 60, 0.35), 0 -1px 0 rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .plate { transform: none; }
  .js .is-in.plate::after, .js .is-in .plate::after { animation: none; }
}

/* small screens: the wordmark yields so MENU never clips */
@media (max-width: 480px) {
  .wordmark { font-size: 0.72rem; letter-spacing: 0.12em; }
  .wordmark::before { border-width: 1.5px; }
}

/* ============================================================
   LEAD MODAL — the workflow intake plaque
   ============================================================ */
.lead-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(10, 11, 8, 0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 240ms ease;
}
.lead-overlay.is-open { opacity: 1; }
.lead-overlay[hidden] { display: none; }

.lead-plaque {
  position: relative;
  width: min(620px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  padding: 2.4rem 2.4rem 2.2rem;
  transform: translateY(14px) scale(0.985);
  transition: transform 280ms cubic-bezier(0.22, 0.75, 0.2, 1);
}
.lead-overlay.is-open .lead-plaque { transform: none; }

.lead-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}
.lead-close:hover { color: var(--ink); border-color: var(--ink-dim); }

.lead-title {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  margin: 0.5rem 0 1.6rem;
}

.lead-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.lead-wide { grid-column: 1 / -1; }
.lead-field { display: flex; flex-direction: column; gap: 0.45rem; }
.lead-field > span {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}
.lead-field input,
.lead-field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: linear-gradient(180deg, #0d0e0a, #191c13);
  border: 1px solid rgba(237, 232, 220, 0.12);
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 0.75rem 0.9rem;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  resize: vertical;
}
.lead-field input:focus,
.lead-field textarea:focus {
  border-color: var(--amber);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 18px rgba(242, 163, 60, 0.18);
}
.lead-field textarea::placeholder, .lead-field input::placeholder { color: var(--ink-faint); }

.lead-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.5rem; flex-wrap: wrap; }
.lead-actions .btn-primary { border-radius: 3px; }
.lead-actions .btn-primary:disabled { opacity: 0.55; cursor: wait; transform: none; }
.lead-error { font-size: 0.66rem; letter-spacing: 0.1em; color: #d98b6b; }
.lead-error a { color: var(--amber); }

.lead-success { text-align: center; padding: 2.4rem 0 1.6rem; }
.lead-success-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--amber-bright);
  margin-bottom: 0.7rem;
}
.lead-success-sub { font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ink-dim); }

@media (max-width: 560px) {
  .lead-grid { grid-template-columns: 1fr; }
  .lead-plaque { padding: 1.8rem 1.4rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-overlay, .lead-plaque { transition: none; }
}

/* lead modal: presence + choreography */
.lead-overlay { background: radial-gradient(90% 90% at 50% 42%, rgba(10, 11, 8, 0.62) 0%, rgba(6, 7, 5, 0.88) 100%); }
.lead-plaque {
  border: 1px solid rgba(242, 163, 60, 0.26);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.07),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55),
    0 0 90px rgba(242, 163, 60, 0.09),
    0 34px 90px rgba(0, 0, 0, 0.65);
}
.lead-overlay.is-open .lead-field,
.lead-overlay.is-open .lead-actions {
  animation: lead-rise 520ms cubic-bezier(0.22, 0.75, 0.2, 1) both;
}
.lead-overlay.is-open .lead-grid .lead-field:nth-child(2) { animation-delay: 60ms; }
.lead-overlay.is-open .lead-grid .lead-field:nth-child(3) { animation-delay: 120ms; }
.lead-overlay.is-open .lead-grid .lead-field:nth-child(4) { animation-delay: 180ms; }
.lead-overlay.is-open .lead-actions { animation-delay: 240ms; }
@keyframes lead-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.lead-success-line { animation: lead-pop 600ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both; }
@keyframes lead-pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lead-overlay.is-open .lead-field, .lead-overlay.is-open .lead-actions, .lead-success-line { animation: none; }
}