/* Kontor Yard — the public site. Dark, gallery-grade. Geist family-wide (spine/BRAND.md);
   the product gradients are the only colour, treated as precious objects on near-black. */
:root {
  --bg:#0a0b0e; --bg-2:#101217; --bg-3:#15171e;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --paper:#f4f3f0; --muted:#a2a8b4; --faint:#6c7382;
  --accent:#38bdf8; --good:#34d399;
  --maxw:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--paper);
  font-family:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,textarea,select { font:inherit; } button { cursor:pointer; }
::selection { background:rgba(56,189,248,.25); }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  height:78px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(22px,5vw,60px); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5; background:rgba(10,11,14,.72); backdrop-filter:blur(16px);
}
.brand-lockup { display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--paper); }
.parent-mark { display:block; width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); }
.brand-tile { display:block; }
.brand-tile svg { width:100%; height:100%; display:block; }
.brand-words { display:grid; gap:2px; }
.brand-words b { font-size:15px; font-weight:600; letter-spacing:.2em; }
.brand-words span { color:var(--faint); font-size:10.5px; font-weight:450; letter-spacing:.04em; }
.site-header nav { display:flex; gap:26px; align-items:center; }
.site-header nav a { color:var(--muted); text-decoration:none; font-size:14px; letter-spacing:.01em; transition:color .2s; }
.site-header nav a:hover { color:var(--paper); }
.nav-cta {
  border:1px solid var(--line-2); background:none; color:var(--paper); font-size:13px; font-weight:500;
  padding:9px 18px; border-radius:999px; letter-spacing:.02em; transition:border-color .2s, background .2s;
}
.nav-cta:hover { border-color:var(--paper); background:rgba(255,255,255,.04); }

main { max-width:var(--maxw); margin:auto; padding:0 clamp(22px,5vw,60px); }

/* ── Shared type ────────────────────────────────────────── */
.eyebrow,.section-kicker {
  color:var(--faint); font-size:11px; letter-spacing:.24em; font-weight:600;
  text-transform:uppercase; margin:0 0 22px;
}
h1,h2 { font-weight:600; }
.family h2,.story h2,.fit-section h2 {
  font-size:clamp(30px,4.4vw,54px); letter-spacing:-.035em; line-height:1.02; margin:0;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  min-height:min(88vh,780px); display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:clamp(32px,5vw,72px); padding:clamp(70px,11vh,130px) 0 clamp(64px,10vh,110px);
}
.hero h1 {
  font-size:clamp(44px,6vw,88px); letter-spacing:-.045em; line-height:.97;
  max-width:13ch; margin:0;
}
.lede { color:var(--muted); font-size:clamp(17px,1.6vw,21px); max-width:44ch; line-height:1.55; margin:30px 0 40px; }

.button {
  border:0; border-radius:999px; padding:17px 34px; color:#0a0b0e; background:var(--paper);
  font-weight:600; font-size:15px; letter-spacing:.01em; white-space:nowrap; transition:transform .18s, opacity .2s;
}
.button:hover { transform:translateY(-2px); opacity:.92; }
.button-dark { background:var(--paper); color:#0a0b0e; }

/* Hero entrance + animated collection panel */
@keyframes hero-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.hero-copy > * { animation:hero-in .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy .eyebrow { animation-delay:.04s; }
.hero-copy h1 { animation-delay:.10s; }
.hero-copy .lede { animation-delay:.18s; }
.hero-copy .button { animation-delay:.26s; }
.hero-panel {
  position:relative; align-self:stretch; min-height:360px; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:24px; overflow:hidden;
  padding:clamp(28px,3vw,42px);
  background:radial-gradient(140% 120% at 100% 0%, rgba(56,189,248,.12), transparent 55%), var(--bg-2);
  animation:hero-in .8s .18s cubic-bezier(.2,.7,.2,1) both;
}
.hp-track { position:relative; flex:1; }
.hp-item {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:18px;
  opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s ease; pointer-events:none;
}
.hp-item.is-active { opacity:1; transform:none; }
.hp-item .brand-tile { width:76px; height:76px; border-radius:18px; overflow:hidden; }
.hp-dsc { font-family:"Geist Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0; }
.hp-line { font-size:clamp(21px,2.3vw,29px); line-height:1.2; letter-spacing:-.02em; font-weight:500; color:var(--paper); margin:0; max-width:17ch; }
.hp-dots { display:flex; gap:8px; margin-top:26px; }
.hp-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.16); transition:all .35s ease; }
.hp-dots i.on { background:var(--accent); width:24px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) {
  .hero-copy > *, .hero-panel { animation:none; }
  .hp-item { transition:none; }
}

/* ── The apps ───────────────────────────────────────────── */
.family { text-align:center; padding:clamp(70px,11vh,130px) 0; border-top:1px solid var(--line); }
.family-lede { max-width:56ch; margin:26px auto 0; color:var(--muted); font-size:clamp(16px,1.5vw,19px); line-height:1.6; }

.lens-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1000px; margin:56px auto 0; text-align:left; }
.lens {
  border:1px solid var(--line); background:var(--bg-2); border-radius:20px; padding:30px 30px 28px;
  display:flex; flex-direction:column; gap:16px; transition:border-color .25s, transform .25s, background .25s;
}
.lens:hover { border-color:var(--line-2); transform:translateY(-3px); background:var(--bg-3); }
.lens .head { display:flex; align-items:center; gap:15px; }
.lens .head .brand-tile { width:54px; height:54px; flex:none; border-radius:13px; overflow:hidden; }
.lens-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.lens .dsc {
  font-family:"Geist Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0;
}
.lens .sell { font-size:16px; font-weight:600; letter-spacing:-.02em; margin:0; color:var(--paper); }
.lens .head .status { margin:0 0 0 auto; align-self:flex-start; }
.lens ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.lens li { position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.lens li::before { content:"—"; position:absolute; left:0; color:var(--accent); }
.lens li b { color:var(--paper); font-weight:500; }
.lens-proof { margin:auto 0 0; padding-top:6px; font-size:12px; line-height:1.45; color:var(--good); font-weight:500; }
.lens-proof::before { content:"●  "; font-size:9px; vertical-align:middle; }

.status {
  font-size:10.5px; font-weight:500; letter-spacing:.02em; color:var(--muted);
  border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; white-space:nowrap; background:rgba(255,255,255,.02);
}
.status-live { color:var(--good); border-color:rgba(52,211,153,.32); background:rgba(52,211,153,.07); }
.status-yard { color:var(--faint); border-color:var(--line-2); background:none; }
.status-pilot { color:var(--accent); border-color:rgba(56,189,248,.32); background:rgba(56,189,248,.07); }
.status-soon { color:#e9b872; border-color:rgba(233,184,114,.3); background:rgba(233,184,114,.07); }

.family-hook { margin:64px 0 0; display:grid; gap:8px; }
.family-hook i { font-size:clamp(20px,2.2vw,26px); font-weight:500; letter-spacing:-.02em; font-style:italic; color:var(--paper); }
.family-hook span { color:var(--faint); font-size:13px; letter-spacing:.02em; }

/* ── Origin story ───────────────────────────────────────── */
.story {
  text-align:center; padding:clamp(90px,14vh,150px) 0; background:var(--bg-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.story-mark { display:block; margin:0 auto 30px; color:var(--faint); }
.story h2 { max-width:20ch; margin:0 auto 34px; }
.story p { max-width:60ch; margin:0 auto 20px; font-size:clamp(16px,1.55vw,19px); line-height:1.7; color:var(--muted); }
.story p:last-child { margin-bottom:0; }
.story p b { color:var(--paper); font-weight:500; }

/* ── Made to fit ────────────────────────────────────────── */
.fit-section { text-align:center; padding:clamp(80px,12vh,130px) 0 clamp(50px,8vh,80px); }
.fit-section h2 { margin-bottom:16px; }
.fit-section p:last-child { margin:0 auto; max-width:52ch; color:var(--muted); font-size:clamp(16px,1.5vw,18px); line-height:1.6; }

/* ── Final CTA ──────────────────────────────────────────── */
.final-cta {
  margin:0 0 clamp(60px,9vh,100px); border:1px solid var(--line-2); border-radius:24px;
  padding:clamp(40px,6vw,72px); background:
    radial-gradient(120% 160% at 100% 0%, rgba(56,189,248,.12), transparent 55%), var(--bg-2);
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.final-cta h2 { margin:0 0 12px; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.035em; line-height:1.03; }
.final-cta p { margin:0; max-width:52ch; line-height:1.6; color:var(--muted); font-size:16px; }
.final-cta .button { min-width:220px; }

footer { text-align:center; color:var(--faint); font-size:12.5px; padding:44px 24px 60px; display:grid; gap:6px; border-top:1px solid var(--line); }
footer p { margin:0; letter-spacing:.02em; }
footer b { color:var(--paper); font-weight:600; letter-spacing:.14em; }

/* ── Early-access form (dark modal) ─────────────────────── */
.form-dialog {
  padding:0; border:1px solid var(--line-2); border-radius:22px; width:min(600px,calc(100% - 28px));
  color:var(--paper); background:var(--bg-2); box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.form-dialog::backdrop { background:rgba(6,7,10,.72); backdrop-filter:blur(6px); }
.form-shell { padding:38px; position:relative; }
.dialog-close { position:absolute; right:20px; top:16px; border:0; background:none; font-size:26px; color:var(--faint); line-height:1; }
.dialog-close:hover { color:var(--paper); }
.progress { height:2px; background:rgba(255,255,255,.08); margin:-38px -38px 34px; }
.progress span { display:block; width:25%; height:100%; background:var(--accent); transition:width .3s ease; }
.form-step { display:none; }
.form-step.is-active { display:block; }
.form-step h2,.thank-you h2 { margin:0 0 26px; letter-spacing:-.035em; font-size:clamp(26px,3vw,34px); font-weight:600; }
.form-step label { display:block; font-size:12px; font-weight:600; letter-spacing:.02em; margin:0 0 18px; color:var(--muted); }
.optional { color:var(--faint); font-weight:400; }
.form-step input,.form-step textarea,.form-step select {
  width:100%; display:block; border:1px solid var(--line-2); border-radius:11px; padding:14px;
  margin-top:9px; color:var(--paper); background:var(--bg); transition:border-color .2s;
}
.form-step input::placeholder,.form-step textarea::placeholder { color:var(--faint); }
.form-step input:focus,.form-step textarea:focus,.form-step select:focus { outline:0; border-color:var(--accent); }
.form-step input { min-height:50px; }
.form-step select {
  appearance:none; -webkit-appearance:none; min-height:50px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat;
}
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-step textarea { resize:vertical; }
.textarea-label { margin-top:18px; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.choice-grid label { margin:0; position:relative; }
.choice-grid input { position:absolute; opacity:0; }
.choice-grid span { border:1px solid var(--line-2); border-radius:11px; min-height:50px; display:flex; align-items:center; padding:12px; color:var(--muted); font-size:14px; transition:all .18s; }
.choice-grid input:checked + span { color:var(--paper); border-color:var(--accent); background:rgba(56,189,248,.1); font-weight:500; }
.form-quote { color:var(--muted); border-left:2px solid var(--accent); margin:28px 0 0; padding-left:15px; font-size:14px; font-style:italic; line-height:1.5; }
.form-actions { display:flex; justify-content:space-between; gap:12px; margin-top:30px; align-items:center; }
.form-actions .button { margin-left:auto; padding:14px 28px; }
.text-button { border:0; background:none; padding:8px 0; font-weight:500; color:var(--muted); }
.text-button:hover { color:var(--paper); }
.form-error { min-height:20px; color:#f4a4a4; margin:12px 0 0; font-size:14px; }
.thank-you { padding:18px 0; }
.honeypot { position:absolute; left:-10000px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:860px) {
  .site-header { height:64px; }
  .site-header nav a { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-panel { display:none; }
  .lens-grid { grid-template-columns:1fr; gap:16px; }
  .lens { padding:26px 24px; }
  .final-cta { flex-direction:column; align-items:flex-start; }
  .final-cta .button { width:100%; text-align:center; }
  .field-pair { grid-template-columns:1fr; }
  .form-shell { padding:30px 22px; }
  .progress { margin:-30px -22px 30px; }
}