/* TALK TO US — the three enquiry forms.
   Borrows the careers page's shell and type, so this reads as part of the
   same site rather than a form bolted on the side. */

.tku { background: var(--white); color: var(--black); }

.tku__wrap { width: min(72rem, calc(100vw - 2.4rem)); margin: 0 auto; }

.tku__hero {
  background: var(--blue); color: var(--white);
  padding: calc(var(--nav-disc) + 2.6rem) 0 2.2rem;
}
.tku__hero .kicker { color: rgba(255,255,255,0.72); }
.tku__h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.02;
  margin: 0.2rem 0 0.6rem;
}
.tku__line { max-width: 46rem; font-size: clamp(0.95rem, 1.5vw, 1.1rem); line-height: 1.6; opacity: 0.92; }

/* the three tabs — links, so the right form is there on the first paint */
.tku__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.tku__tab {
  padding: 0.55rem 1.1rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.92rem;
  background: rgba(255,255,255,0.14); color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.34);
}
.tku__tab:hover { background: rgba(255,255,255,0.26); }
.tku__tab.is-on { background: var(--white); color: var(--blue); border-color: var(--white); }

.tku__body { padding: 2.4rem 0 4rem; }
.tku__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 2.4rem; }

/* ---- the form ---- */
.tku__form { display: flex; flex-direction: column; gap: 1rem; }
.tku__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tku__form label { display: block; font-weight: 700; font-size: 0.86rem; }
.tku__hint { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.6; margin-top: 0.15rem; }
.tku__must {
  font-weight: 700; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue); margin-left: 0.35rem;
}
.tku__form input, .tku__form select, .tku__form textarea {
  width: 100%; margin-top: 0.35rem; font: 400 0.95rem 'Inter', sans-serif; color: var(--black);
  padding: 0.65rem 0.85rem; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.16);
  background: var(--white);
}
.tku__form textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.tku__form input:focus, .tku__form select:focus, .tku__form textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent;
}

.tku__acts { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.3rem; }
.tku__acts .btn { font-size: 0.95rem; padding: 0.7rem 1.6rem; }
.tku__small { font-size: 0.76rem; opacity: 0.58; line-height: 1.5; max-width: 24rem; }

/* THE HONEYPOT. Off-screen rather than display:none — some robots skip what
   is display:none, and none of them read aria-hidden. A person never reaches
   it: it is out of the viewport and out of the tab order. */
.tku__pot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

.tku__done {
  background: color-mix(in srgb, var(--blue) 9%, var(--white));
  border: 1.5px solid color-mix(in srgb, var(--blue) 34%, transparent);
  border-radius: 16px; padding: 0.9rem 1.1rem; margin-bottom: 1.4rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.tku__done b { font-size: 1rem; }
.tku__done span { font-size: 0.86rem; opacity: 0.75; line-height: 1.5; }

/* ---- the other way ---- */
.tku__aside {
  background: #f4f8ff; border-radius: 20px; padding: 1.5rem 1.4rem;
  align-self: start; font-size: 0.9rem; line-height: 1.6;
}
.tku__aside h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.tku__aside p { margin-bottom: 0.9rem; }
.tku__aside a { color: var(--blue); }
.tku__big { font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .tku__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .tku__row { grid-template-columns: 1fr; }
}