/* Konnex /contact-us (CONTACT-US-01; Matt design review 25 Oct 2026). Ported from the approved board using the site's tokens.
   Loads AFTER colors_and_type.css, styles.css and nav-dark-hero.css, and ONLY on contact-us.html. Every selector is scoped under
   body.kx-contact (the same pattern as v2/home.css and v2/about.css). Type roles: Fraunces 600 headings · Inter body/buttons ·
   DM Mono 500 labels, never below 12px. */

body.kx-contact {
  --kxh-text-on-dark-2: #D6D3D1;   /* body copy on dark panels (~11:1) */
  --kxh-line-dark: #3A3633;        /* hairlines and card borders on dark */
  --kxc-nav-h: 76px;               /* fixed dark-hero nav (v2/nav-dark-hero.css): hero clearance; 60px / 56px below */
  --kxc-field-bg: #151413;         /* inputs sit one step darker than the card */
  --kxc-field-line: #57534E;
  --kxc-error: #F87171;            /* border + icon */
  --kxc-error-text: #FCA5A5;       /* message text (~8:1 on the card) */
  margin: 0; background: var(--panel-bg); color: var(--panel-text); font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  overflow-x: hidden; -webkit-text-size-adjust: 100%;
}
.kx-contact *, .kx-contact *::before, .kx-contact *::after { box-sizing: border-box; }
.kx-contact img, .kx-contact svg { max-width: 100%; }
.kx-contact [hidden] { display: none !important; }
.kx-contact a { color: inherit; }
.kx-contact a:focus-visible, .kx-contact button:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

/* the Talk to us link on its own page: subtle fill, not a new colour (nav + compact phone link + drawer) */
.kx-contact .kx-nav-cta[aria-current="page"], .kx-contact .kx-nav-talk[aria-current="page"] { background: var(--terracotta-glow); }
.kx-contact .kx-mobile-link[aria-current="page"] { color: var(--kxh-terracotta-text, #A94418); font-weight: 600; }

.kx-contact .wrap { max-width: var(--measure-grid); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- section: dot-grid dark panel, copy left, form card right ---------- */
.kx-contact .contact { padding-top: var(--kxc-nav-h); background-color: var(--panel-bg);
  background-image: radial-gradient(rgba(250,250,248,.06) 1px, transparent 1px); background-size: 22px 22px; }
.kx-contact .contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr;
  grid-template-areas: "intro form" "pilot form"; gap: 32px 72px; align-items: start;
  padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(64px, 8vw, 112px); }
.kx-contact .contact__intro { grid-area: intro; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.kx-contact .contact__card { grid-area: form; min-width: 0; background: var(--panel-surface); border: 1px solid var(--kxh-line-dark);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); position: relative; }
.kx-contact .contact__pilot { grid-area: pilot; min-width: 0; max-width: 520px; background: var(--panel-surface); border: 1px solid var(--kxh-line-dark);
  border-radius: var(--radius-lg); padding: 22px 24px; }

.kx-contact .thread { display: flex; align-items: center; gap: 10px; margin: 0; }
.kx-contact .thread__dots { display: inline-flex; align-items: center; gap: 4px; }
.kx-contact .thread__dots i { display: block; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.kx-contact .thread__dots i:first-child { border: 1.5px solid var(--terracotta); }
.kx-contact .thread__dots i:last-child { background: var(--terracotta); }
.kx-contact .thread__dots b { display: block; width: 16px; height: 1px; background: var(--terracotta); }
.kx-contact .thread__text { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--terracotta); }

.kx-contact .display { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.kx-contact .contact__h1 { font-size: clamp(2.375rem, 4.2vw, 3.5rem); line-height: 1.05; }
.kx-contact .lede { margin: 0; max-width: 30em; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: var(--kxh-text-on-dark-2); }
.kx-contact .contact__mail { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--panel-text-secondary); }
.kx-contact .contact__mail a { display: inline-block; padding: 10px 0; color: var(--panel-text); text-underline-offset: 3px; overflow-wrap: anywhere; }

.kx-contact .label { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.kx-contact .pilot__label { margin: 0 0 6px; color: var(--panel-text-secondary); }
.kx-contact .pilot__list { margin: 0; padding: 0; list-style: none; }
.kx-contact .pilot__list li { display: flex; gap: 18px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--kxh-line-dark); font-weight: 600; font-size: 16px; }
.kx-contact .pilot__list li:last-child { padding-bottom: 2px; }
.kx-contact .pilot__n { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--terracotta); }

/* ---------- form ---------- */
.kx-contact .cf { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.kx-contact .cf__h { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: 0; }
.kx-contact .cf__row { display: flex; flex-wrap: wrap; gap: 20px; }
.kx-contact .cf__row > .cf__field { flex: 1 1 220px; }
.kx-contact .cf__field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kx-contact .cf__label { font-size: 15px; font-weight: 600; }
.kx-contact .cf__req { color: var(--panel-text-secondary); font-weight: 400; }
.kx-contact .cf__in { display: block; width: 100%; min-height: 48px; padding: 12px 14px; background: var(--kxc-field-bg); border: 1px solid var(--kxc-field-line);
  border-radius: var(--radius-sm); color: var(--panel-text); font: inherit; font-size: 16px; }
.kx-contact .cf__in:focus { outline: 3px solid var(--terracotta); outline-offset: 2px; border-color: var(--terracotta); }
.kx-contact .cf__in[aria-invalid="true"] { border-color: var(--kxc-error); }
.kx-contact textarea.cf__in { min-height: 132px; resize: vertical; line-height: 1.5; }
.kx-contact select.cf__in { appearance: none; -webkit-appearance: none; padding-right: 40px; background-repeat: no-repeat; background-size: 5px 5px;
  background-image: linear-gradient(45deg, transparent 50%, var(--panel-text-secondary) 50%), linear-gradient(135deg, var(--panel-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; }
.kx-contact select.cf__in option { color: #1C1917; background: #FAFAF8; }
.kx-contact .cf__hint { font-size: 14px; color: var(--panel-text-secondary); }
.kx-contact .cf__err { font-size: 14px; color: var(--kxc-error-text); }
.kx-contact .cf__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.kx-contact .cf__alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--kxc-error); border-radius: 10px;
  background: rgba(248,113,113,.08); font-size: 15px; line-height: 1.45; }
.kx-contact .cf__alert:focus { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.kx-contact .cf__alert svg { flex: none; margin-top: 2px; color: var(--kxc-error-text); }
.kx-contact .cf__alert b { font-weight: 600; }

.kx-contact .cf__notice { margin: 0; font-size: 14px; line-height: 1.55; color: var(--panel-text-secondary); }
.kx-contact .cf__notice a { color: var(--panel-text); text-underline-offset: 3px; }
.kx-contact .cf__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.kx-contact .cf__note { font-size: 14px; color: var(--panel-text-secondary); }
.kx-contact .noscript-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--kxh-text-on-dark-2); }
.kx-contact .noscript-note a { color: var(--panel-text); text-underline-offset: 3px; }

.kx-contact .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: var(--radius-sm);
  border: 0; text-decoration: none; font: inherit; font-weight: 600; font-size: 17px; cursor: pointer; }
.kx-contact .btn svg { width: 18px; height: 18px; flex: none; }
.kx-contact .btn--primary { background: var(--terracotta); color: var(--fg1); }
.kx-contact .btn--primary:hover { background: #D4612E; }
.kx-contact .btn--primary:disabled { opacity: .7; cursor: progress; }
.kx-contact .btn--outline { min-height: 52px; padding: 0 24px; border: 1px solid #6F6A65; background: none; color: var(--panel-text); font-size: 16px; }
.kx-contact .btn--outline:hover { border-color: var(--panel-text); }
.kx-contact .textbtn { background: none; border: 0; padding: 12px 0; color: var(--panel-text); font: inherit; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- confirmation (replaces the form inside the same card) ---------- */
.kx-contact .done { display: flex; flex-direction: column; gap: 18px; padding: 8px 0; }
.kx-contact .done__tick { width: 52px; height: 52px; border-radius: 50%; background: var(--terracotta); color: var(--fg1); display: inline-flex; align-items: center; justify-content: center; }
.kx-contact .done__h { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: 0; }
.kx-contact .done__h:focus { outline: none; }
.kx-contact .done__body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--kxh-text-on-dark-2); overflow-wrap: anywhere; }
.kx-contact .done__body b { color: var(--panel-text); font-weight: 600; }
.kx-contact .done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 4px; }

/* ---------- <= 1000px: one column. heading block, then the form card, then the pilot card ---------- */
@media (max-width: 1000px) {
  .kx-contact .contact__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "pilot"; gap: 32px; }
  .kx-contact .contact__pilot { max-width: none; }
}
@media (max-width: 767px) {
  .kx-contact { --kxc-nav-h: 60px; }
  .kx-contact .contact__grid { padding-top: 32px; padding-bottom: 56px; gap: 28px; }
  .kx-contact .contact__intro { gap: 18px; }
  .kx-contact .contact__h1 { font-size: 38px; line-height: 1.06; }
  .kx-contact .contact__card { padding: 22px 18px; }
  .kx-contact .cf__submit .btn { width: 100%; }
  .kx-contact .done__actions .btn { width: 100%; }
}
@media (max-width: 767px) and (max-height: 700px) { .kx-contact { --kxc-nav-h: 56px; } }