/* NEUCLIPS — CONTACT. Hero architecture A: Cinematic Center.
   The quietest room on the site. Three sections only. */

/* ══ K1 — HERO · Cinematic Center ══════════════════════════════ */
.khero {
  position: relative; isolation: isolate;
  min-height: 84svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(var(--s16), 10vh, var(--s24)) clamp(var(--s5), 4vw, var(--s16));
  overflow: hidden;
}
.khero img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.55) contrast(1.04);
  transform: scale(1.05);
  animation: k-settle 2.6s var(--spring-smooth) 0.15s forwards;
}
@keyframes k-settle { to { transform: scale(1); } }
.khero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(56% 44% at 50% 64%, rgba(10,10,10,0.34) 0%, rgba(10,10,10,0.8) 100%),
    linear-gradient(to bottom, rgba(10,10,10,0.8) 0%, transparent 38%, var(--base) 100%);
}
/* A `ch` measure here is measured in the CONDENSED display face, which is why a
   20ch container collapsed the headline to one word per line. Use a real measure. */
.khero__inner { max-width: min(880px, 92vw); }
.khero h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(38px, 5.2vw + 8px, 96px);
  line-height: 0.98; letter-spacing: -0.012em;
  text-wrap: balance;
  margin-top: var(--s5);
}
.khero h1 em { font-style: normal; color: var(--signal); }
.khero p {
  margin: var(--s6) auto 0;
  max-width: 34ch;                 /* body face — a ch measure is correct here */
  color: var(--ink-70); font-size: var(--t-lg);
}

/* ══ K2 — FORM · editorial, not UI chrome ══════════════════════
   Fields are hairline-underlined rows. No boxes, no filled inputs. */
.form { padding: clamp(var(--s16), 7vw, var(--s32)) clamp(var(--s5), 4vw, var(--s16)) clamp(var(--s20), 8vw, var(--s40)); }
.form__inner { max-width: 780px; margin: 0 auto; }
.form__head { margin-bottom: var(--s12); }
.form__head h2 { font-family: var(--display); text-transform: uppercase; font-size: var(--t-xl); line-height: 1; }
.form__head p { margin-top: var(--s4); color: var(--ink-52); font-size: var(--t-sm); max-width: 52ch; }
.vfield { display: block; margin-bottom: var(--s10); }
.vfield > span {
  display: block; margin-bottom: var(--s3);
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-52);
  transition: color var(--d-base) var(--ease-snap);
}
.vfield input, .vfield textarea, .vfield select {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--ink-30);
  padding: var(--s3) 0 var(--s4);
  font-size: var(--t-lg); color: var(--ink);
  border-radius: 0;
  transition: border-color var(--d-base) var(--ease-snap);
}
.vfield textarea { resize: vertical; min-height: 6.5em; line-height: 1.5; }
.vfield select { appearance: none; cursor: pointer; }
.vfield input::placeholder, .vfield textarea::placeholder { color: var(--ink-30); }
.vfield input:focus, .vfield textarea:focus, .vfield select:focus {
  outline: none; border-bottom-color: var(--signal);
}
.vfield:focus-within > span { color: var(--signal); }
.form__act { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; margin-top: var(--s12); }
.form__act p { color: var(--ink-30); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; }

/* ══ K3 — ROUTES · mirrors the Home fork ═══════════════════════ */
.routes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ink-12);
  border-top: 1px solid var(--ink-12);
}
.routes__r {
  background: var(--base);
  padding: clamp(var(--s10), 5vw, var(--s24)) clamp(var(--s6), 4vw, var(--s16));
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: var(--s4);
  transition: background var(--d-base) var(--ease-snap);
}
.routes__r:hover { background: var(--surface); }
.routes__r h3 { font-family: var(--display); text-transform: uppercase; line-height: 0.94; }
/* two different type treatments — same fork logic as the home page */
.routes__r--a h3 { font-size: clamp(30px, 4.4vw, 68px); }
.routes__r--b h3 { font-size: clamp(24px, 3vw, 46px); letter-spacing: 0.005em; }
.routes__r p { color: var(--ink-52); font-size: var(--t-sm); max-width: 36ch; }
.routes__go {
  margin-top: var(--s4);
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 700; color: var(--signal);
}
.routes__go b { display: block; transition: transform var(--d-base) var(--spring-snappy); }
.routes__r:hover .routes__go b { transform: translateX(6px); }
@media (max-width: 760px) { .routes { grid-template-columns: 1fr; } }

/* ═══ PASS 2 — CONTACT ══════════════════════════════════════════ */

/* K1 — over-scan for the parallax; the distant wall breathes */
.khero img { height: calc(100% + 110px); top: -55px; animation: k-settle 2.6s var(--spring-smooth) 0.15s forwards, breathe 11s var(--spring-smooth) 3s infinite; }
@keyframes breathe { 0%,100% { filter: brightness(1.55) contrast(1.04); } 50% { filter: brightness(1.85) contrast(1.06); } }

/* K2 — THE FORM ON PAPER. The one action on the site gets the warmest room. */
.form { background: var(--day); }
.form__head p { color: var(--day-52); }
.vfield input, .vfield textarea, .vfield select {
  color: var(--day-ink);
  border-bottom-color: var(--day-30);
}
.vfield input::placeholder, .vfield textarea::placeholder { color: var(--day-30); }
/* the focus rule is the mark's middle bar — the longest of the three */
.vfield input:focus, .vfield textarea:focus, .vfield select:focus {
  border-bottom-color: var(--day-ink);
  border-bottom-width: 3px;
}
.vfield:focus-within > span { color: var(--day-ink); }
.vfield:focus-within > span::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 5px; margin-left: 0.7em; background: var(--signal);
}
.form__act p { color: var(--day-30); }

/* K3 — routes become layered crop frames */
.routes { background: var(--day-12); border-top: 0; }
.routes__r { background: var(--day); }
.routes__r:hover { background: var(--day-2); }
.routes__r { position: relative; overflow: hidden; isolation: isolate; padding-top: 0; }
.routes__plate {
  margin: 0 calc(-1 * clamp(var(--s6), 4vw, var(--s16))) clamp(var(--s6), 3vw, var(--s10));
  height: clamp(150px, 22vh, 260px); overflow: hidden;
}
.routes__plate img {
  width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover;
  filter: grayscale(0.25);
  transition: filter var(--d-smooth) var(--ease-snap), transform 1s var(--spring-smooth);
}
.routes__r:hover .routes__plate img { filter: grayscale(0) brightness(1); transform: scale(1.04); }

/* K2b — validation state. The one action on the site cannot be the least
   finished thing on it. */
.vfield__err {
  display: none; font-style: normal;
  margin-top: var(--s2);
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: #8C2A10;                       /* 6.3:1 on paper — measured */
}
.vfield.is-bad .vfield__err { display: block; }
.vfield.is-bad input, .vfield.is-bad textarea { border-bottom-color: #8C2A10; border-bottom-width: 2px; }
.form__note {
  margin-top: var(--s6); min-height: 1.4em;
  font-size: var(--t-sm); color: var(--day-70);
}
.form__note[data-ok] {
  display: inline-block;
  padding: var(--s3) var(--s5);
  background: var(--signal); color: var(--day-ink); font-weight: 600;
}
.btn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }

/* honeypot: named `website` to match the Function's bot check. Off-screen rather
   than display:none so naive bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* submit states */
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.form__note[data-tone="ok"] {
  display: inline-block; padding: var(--s3) var(--s5);
  background: var(--signal); color: var(--day-ink); font-weight: 600;
}
.form__note[data-tone="err"] {
  display: block; color: #8C2A10; font-weight: 500;
}
form[data-sent="true"] .vfield, form[data-sent="true"] .form__act p { opacity: 0.45; }
form[data-sent="true"] .vfield input,
form[data-sent="true"] .vfield textarea,
form[data-sent="true"] .vfield select { pointer-events: none; }