/* ════════════════════════════════════════════════════════════════════════
   Contact — ported from the Claude Design prototype Murikual-Kontakt.dc.html.
   Tokens, the base reset, the button and the language switch are in site.css.
   Deliberate changes to the prototype are marked PORT.
   ════════════════════════════════════════════════════════════════════════ */
.kt,.kt *{box-sizing:border-box}
/* svh, not vh: see the note in home.css — this one only pushes the footer
   to the bottom on a short page, but 100vh would make every page taller
   than the screen on iOS. */
.kt{min-height:100vh;min-height:100svh;background:var(--surface-page);font-family:var(--font-sans),system-ui,sans-serif;color:var(--text-primary);display:flex;flex-direction:column;transition:background .45s var(--ease-out)}
.kt a{text-decoration:none;color:inherit}
.kt-wrap{max-width:1100px;margin:0 auto;padding:0 clamp(24px,5vw,60px);width:100%}
/* The prototype pushed the content down with a fixed top padding sized for
   its canvas. The page is short, so it centres in the viewport instead and
   keeps only enough top padding to clear the floating nav. */
.kt-main{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center;
  flex:1;align-content:center;padding:clamp(88px,10vw,120px) clamp(24px,5vw,60px) clamp(48px,6vw,80px)}
@media(max-width:820px){.kt-main{grid-template-columns:1fr;gap:44px}}
.kt-ey{display:inline-flex;align-items:center;gap:9px;font:var(--fw-semibold) 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.kt-ey::before{content:"";width:22px;height:1.5px;background:var(--brand-500)}
.kt-h1{font:var(--fw-heavy) clamp(40px,5vw,68px)/0.98 var(--font-display);letter-spacing:-0.04em;margin:20px 0 0;text-wrap:balance}
.kt-ital{font-family:var(--font-serif);font-style:italic;font-weight:var(--fw-regular);color:var(--brand-500)}
.kt-lead{font:var(--text-body-lg);color:var(--text-secondary);margin:22px 0 0;line-height:1.6;max-width:44ch}
.kt-details{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.kt-drow{display:flex;align-items:center;gap:14px}
.kt-dic{width:42px;height:42px;border-radius:12px;background:var(--brand-050);color:var(--brand-600);display:inline-flex;align-items:center;justify-content:center;flex:none}
.mk-dark .kt-dic{background:rgba(79,116,255,.16);color:var(--brand-300)}
.kt-dic svg{width:19px;height:19px}
.kt-dk{font:var(--fw-semibold) 12px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.kt-dv{font:var(--fw-semibold) 16px/1.3 var(--font-sans);color:var(--text-primary);margin-top:4px}
.kt-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-sm)}
.kt-field{margin-bottom:16px}
.kt-label{display:block;font:var(--fw-semibold) 13px/1 var(--font-sans);color:var(--text-primary);margin-bottom:8px}
.kt-input,.kt-textarea{width:100%;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:12px;padding:13px 15px;font:var(--fw-regular) 15px/1.4 var(--font-sans);color:var(--text-primary);outline:none;transition:border-color .2s,box-shadow .2s}
.kt-input:focus,.kt-textarea:focus{border-color:var(--brand-500);box-shadow:var(--shadow-focus)}
.kt-textarea{resize:vertical;min-height:120px}

.kt-submit{width:100%;margin-top:6px;background:var(--warm-900);color:#fff;border:0;border-radius:999px;padding:16px;font:var(--fw-semibold) 16px/1 var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .2s}
.kt-submit:hover{background:var(--brand-500)}
/* Same near-black as .mk-btn--primary, and the same problem in dark mode: on a
   --warm-950 page a --warm-900 button is a slightly different rectangle, not a
   button. It takes its own hover blue as its resting state there. */
.mk-dark .kt-submit{background:var(--brand-500)}
.mk-dark .kt-submit:hover{background:var(--brand-400)}
.kt-submit svg{width:18px;height:18px}
.kt-submit[disabled]{opacity:.6;cursor:progress}
.kt-note{font:var(--text-caption);color:var(--text-muted);margin-top:14px;text-align:center}
.kt-sent{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 0}
.kt-sent.show{display:flex}
.kt-form.hide{display:none}
.kt-check{width:56px;height:56px;border-radius:50%;background:var(--brand-500);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.kt-check svg{width:28px;height:28px}

/* PORT: the prototype could only succeed, so it had nowhere to say that a
   send failed. A real submit can. */
.kt-error{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--red-050);color:var(--red-500);font:var(--text-body-sm);text-align:center}
.mk-dark .kt-error{background:rgba(192,68,47,.14)}
.kt-error:not(.show){display:none}

/* PORT: same fix as the homepage footer — below 560px the last column clipped
   the email address. */
.kt-chips{display:flex;flex-wrap:wrap;gap:8px}
.kt-chip{font:var(--fw-semibold) 13px/1 var(--font-sans);color:var(--text-secondary);background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:999px;padding:9px 14px;cursor:pointer;transition:all .18s}
.kt-chip:hover{border-color:var(--brand-400);color:var(--text-primary)}

/* PORT: the prototype's chips were <span>s toggled in the canvas runtime, so
   they carried no value and could not be reached by keyboard. They are real
   checkboxes here — same look, but they submit, tab, and toggle with Space. */
.kt-chip input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.kt-chip:has(input:checked){background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.kt-chip:has(input:focus-visible){box-shadow:var(--shadow-focus)}