/* ============================================================
   Knightica IL - contact block.
   Sits at the foot of every page, above the footer. Two panels
   meeting on a shared edge, like two squares of a board: the
   terracotta square is WhatsApp (fastest), the cream square is
   the form (considered). The response time under each is what
   makes the hierarchy honest, so it is typeset, not hidden.
   Everything is namespaced under .kn-contact to stay clear of
   the page styles.
   ============================================================ */

.kn-contact{
  --kc-terra: var(--terra, #A02F06);
  --kc-terra-deep: var(--terra-deep, #6E1F02);
  --kc-cream: var(--cream, #F2F1EB);
  --kc-warm: var(--cream-warm, #E8E2D0);
  --kc-ink: var(--ink, #14100D);
  --kc-sky: var(--sky, #A5CFF9);
  --kc-line: rgba(20,16,13,0.14);
  --kc-display: var(--font-display, system-ui, sans-serif);
  --kc-mono: var(--font-mono, ui-monospace, Menlo, monospace);
  /* one gap between every stacked element: button, button, terminal */
  --kc-gap: 16px;
  /* transparent, so the fixed .chess-field (z-index:-1) keeps drifting
     behind this section the way it does behind the rest of the page */
  background: transparent;
  color: var(--kc-ink);
  padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 6vw, 84px);
  scroll-margin-top: 84px;
  direction: rtl;
}

.kn-contact .kc-inner{
  width: min(720px, calc(100% - clamp(28px, 6vw, 96px)));
  margin: 0 auto;
}

/* ---------- heading ---------- */

.kn-contact .kc-eyebrow{
  font-family: var(--kc-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kc-terra);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.kn-contact .kc-eyebrow::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kc-line);
}

.kn-contact .kc-title{
  font-family: var(--kc-display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.kn-contact .kc-title .kc-em{ color: var(--kc-terra); }

.kn-contact .kc-lede{
  font-family: var(--kc-display);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: rgba(20,16,13,0.66);
  max-width: 46ch;
  margin: 0 0 clamp(30px, 3.6vw, 46px);
}

/* ---------- the two squares ---------- */

.kn-contact .kc-board{ display: block; }

.kn-contact .kc-square{ position: relative; min-width: 0; }

.kn-contact .kc-square--soon{
  color: var(--kc-ink);
  display: flex;
  flex-direction: column;
}

/* the terminal window, same frame as contact/ */
.kn-contact .kc-tw{
  border: 1.5px solid var(--kc-ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--kc-cream);
  box-shadow: 0 14px 34px rgba(20,16,13,0.09);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kn-contact .kc-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--kc-warm);
  border-bottom: 1.5px solid var(--kc-ink);
  flex: none;
}
.kn-contact .kc-dots{ display: flex; gap: 7px; }
.kn-contact .kc-dots i{ width: 11px; height: 11px; border-radius: 50%; display: block; }
.kn-contact .kc-dots i:nth-child(1){ background: var(--kc-terra); }
.kn-contact .kc-dots i:nth-child(2){ background: var(--ink-soft, #3D332D); }
.kn-contact .kc-dots i:nth-child(3){ background: var(--kc-sky); }
.kn-contact .kc-file{
  margin-inline-start: auto;
  font-family: var(--kc-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(20,16,13,0.55);
  direction: ltr;
}

.kn-contact .kc-wrap{ position: relative; flex: 1; display: flex; flex-direction: column; }
.kn-contact .kc-pad{
  padding: clamp(22px, 2.4vw, 30px);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kn-contact .kc-lead{
  font-family: var(--kc-display);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.25;
  color: var(--kc-ink);
  margin: 0 0 22px;
}

.kn-contact .kc-field{ display: block; margin: 0 0 18px; }
.kn-contact .kc-field > label{
  display: block;
  font-family: var(--kc-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: rgba(20,16,13,0.5);
  margin: 0 0 7px;
}

/* message field: mono ghost text types itself in behind the caret */
.kn-contact .kc-ta-wrap{ position: relative; flex: 1 1 0%; min-width: 0; width: 100%; overflow: hidden; }
.kn-contact .kc-ta-wrap textarea{ position: relative; z-index: 1; display: block; }
.kn-contact .kc-ghost{
  position: absolute; inset-inline: 0; top: 0; z-index: 2;
  pointer-events: none; padding: 8px 0;
  font-family: var(--kc-mono); font-size: 15px; line-height: 1.4;
  color: rgba(20,16,13,0.42);
  white-space: pre-wrap; word-wrap: break-word;
  transition: opacity 280ms ease-out;
}
.kn-contact .kc-ghost.is-hidden{ opacity: 0; }
.kn-contact .kc-ghost-prefix{ font-weight: 700; }
.kn-contact .kc-caret{
  display: inline-block; width: 0.55em; height: 1em;
  background: var(--kc-terra); vertical-align: -0.15em;
  margin-inline-start: 1px;
  animation: kc-blink 0.85s step-end infinite;
}
.kn-contact .kc-ghost.is-focused .kc-caret,
.kn-contact .kc-ghost.is-typed-out .kc-caret{ display: none; }
@keyframes kc-blink{ 50%{ background: transparent; } }

/* consent */
.kn-contact .kc-consent{
  display: flex; align-items: flex-start; gap: 12px;
  margin: 10px 0 18px; cursor: pointer;
  font-family: var(--kc-mono); font-size: 11.5px;
  letter-spacing: 0.02em; line-height: 1.55;
  color: rgba(20,16,13,0.5);
}
.kn-contact .kc-consent input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kn-contact .kc-cbox{
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--kc-ink); border-radius: 5px;
  background: var(--kc-cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.kn-contact .kc-cbox svg{
  width: 12px; height: 12px; fill: none; stroke: var(--kc-cream);
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity .12s ease;
}
.kn-contact .kc-consent input:checked + .kc-cbox{ background: var(--kc-terra); border-color: var(--kc-terra); }
.kn-contact .kc-consent input:checked + .kc-cbox svg{ opacity: 1; }
.kn-contact .kc-consent input:focus-visible + .kc-cbox{ outline: 2px solid var(--kc-sky); outline-offset: 2px; }
.kn-contact .kc-consent a{ color: var(--kc-terra); text-decoration: underline; }
.kn-contact .kc-consent a:hover{ color: var(--kc-terra-deep); }
.kn-contact .kc-consent.is-invalid{ color: var(--kc-terra); }
.kn-contact .kc-consent.is-invalid .kc-cbox{ border-color: var(--kc-terra); }

/* success, typed out. The caret rides the end of whichever line is still
   being written, so the panel reads as terminal output rather than as a
   finished block that faded in. */
.kn-contact .kc-typed{ min-height: 1em; }
.kn-contact .kc-typed.is-typing::after{
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: var(--kc-terra);
  vertical-align: -0.15em;
  margin-inline-start: 2px;
  animation: kc-blink 0.85s step-end infinite;
}
.kn-contact .kc-thanks .kc-head{ margin-bottom: 12px; }
.kn-contact .kc-thanks .kc-copy{ margin-bottom: 0; }
.kn-contact .kc-thanks #kc-ty-body{ margin-bottom: 4px; }

/* Fades in after the invite line finishes typing, so it arrives as the next
   thing to do rather than competing with the reply. Each button wears its own
   platform colour, the same call already made for the WhatsApp button. */
.kn-contact .kc-ty-follow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.kn-contact .kc-ty-follow.is-in{ opacity: 1; transform: none; }

.kn-contact .kc-ty-btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  color: var(--kc-cream);
  text-decoration: none;
  font-family: var(--kc-display);
  font-weight: 700;
  font-size: 14px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kn-contact .kc-ty-btn svg{ width: 18px; height: 18px; flex: none; }
.kn-contact .kc-ty-btn:hover{ transform: translateY(-2px); }

.kn-contact .kc-ty-btn--ig{ background: var(--kc-terra); border-color: var(--kc-terra); }
.kn-contact .kc-ty-btn--ig:hover{
  background: var(--kc-terra-deep); border-color: var(--kc-terra-deep);
  box-shadow: 0 10px 24px rgba(160,47,6,0.26);
}
.kn-contact .kc-ty-btn--ig:focus-visible{ outline: 3px solid var(--kc-ink); outline-offset: 3px; }

.kn-contact .kc-ty-btn--li{ --li-blue: #0A66C2; --li-blue-deep: #08528F;
  background: var(--li-blue); border-color: var(--li-blue); }
.kn-contact .kc-ty-btn--li:hover{
  background: var(--li-blue-deep); border-color: var(--li-blue-deep);
  box-shadow: 0 10px 24px rgba(10,102,194,0.28);
}
.kn-contact .kc-ty-btn--li:focus-visible{ outline: 3px solid var(--kc-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .kn-contact .kc-ty-follow{ transition: none; }
  .kn-contact .kc-ty-btn:hover{ transform: none; }
}

/* fills as the required fields are completed */
.kn-contact .kc-progress{
  position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  background: rgba(160,47,6,0.14);
  overflow: hidden;
}
.kn-contact .kc-progress i{
  position: absolute; inset: 0; display: block;
  background: var(--kc-terra);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 420ms cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){ .kn-contact .kc-progress i{ transition: none; } }

/* ---------- shared square furniture ---------- */

.kn-contact .kc-kicker{
  font-family: var(--kc-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.kn-contact .kc-square--now .kc-kicker{ color: rgba(242,241,235,0.72); }
.kn-contact .kc-square--soon .kc-kicker{ color: rgba(20,16,13,0.55); }

.kn-contact .kc-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.kn-contact .kc-square--now .kc-dot{ background: var(--kc-sky); }

.kn-contact .kc-head{
  font-family: var(--kc-display);
  font-weight: 700;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.12;
  margin: 0 0 10px;
}
/* The primary route gets the bigger voice. */
.kn-contact .kc-square--now .kc-head{
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.kn-contact .kc-copy{
  font-family: var(--kc-display);
  font-size: 15px;
  line-height: 1.62;
  margin: 0 0 24px;
  max-width: 34ch;
}
.kn-contact .kc-square--now .kc-copy{ font-size: 16.5px; max-width: 30ch; }
.kn-contact .kc-square--now .kc-copy{ color: rgba(242,241,235,0.82); }
.kn-contact .kc-square--soon .kc-copy{ color: rgba(20,16,13,0.66); }

/* ---------- WhatsApp action ---------- */

/* WhatsApp: black at rest, carrying the platform's own green only in the mark
   itself, then terracotta on hover so it answers the booking button below it.
   The green mark goes white on terracotta, where green would muddy. Plus a
   short wobble: the one bit of play in the block, everything else stays still. */
.kn-contact .kc-wa{
  --wa-green: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 var(--kc-gap);
  background: var(--kc-ink);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--kc-display);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 22px;
  border: 1.5px solid var(--kc-ink);
  border-radius: 100px;
  box-shadow: 0 8px 22px rgba(20,16,13,0.24);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kn-contact .kc-wa svg{
  width: 19px; height: 19px; flex: none;
  fill: var(--wa-green);
  transition: fill .18s ease;
}
.kn-contact .kc-wa:hover{
  background: var(--kc-terra);
  border-color: var(--kc-terra);
  box-shadow: 0 14px 30px rgba(160,47,6,0.38);
  animation: kc-wobble .5s ease-in-out;
}
.kn-contact .kc-wa:hover svg{ fill: #FFFFFF; }
@keyframes kc-wobble{
  0%,100%{ transform: rotate(0) }
  18%{ transform: rotate(-1.3deg) }
  38%{ transform: rotate(1.1deg) }
  58%{ transform: rotate(-0.7deg) }
  78%{ transform: rotate(0.4deg) }
}
@media (prefers-reduced-motion: reduce){
  .kn-contact .kc-wa:hover{ animation: none; }
}
.kn-contact .kc-wa:focus-visible{ outline: 3px solid var(--wa-green); outline-offset: 3px; }

/* ---------- form ---------- */


/* terminal line: a terracotta prompt, then the caret, on a hairline rule */
.kn-contact .kc-line{
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  border-bottom: 1px solid rgba(20,16,13,0.25);
  transition: border-color 140ms ease;
}
.kn-contact .kc-line:focus-within{ border-bottom-color: var(--kc-terra); }
.kn-contact .kc-line--multi{ align-items: flex-start; }
.kn-contact .kc-prompt{
  color: var(--kc-terra);
  font-family: var(--kc-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  padding-top: 8px;
  user-select: none;
  direction: ltr;
}
.kn-contact .kc-field input,
.kn-contact .kc-field textarea{
  font-family: var(--kc-mono);
  font-size: 15px;
  line-height: 1.4;
  color: var(--kc-ink);
  background: transparent;
  border: 0;
  padding: 8px 0;
  width: 100%;
  outline: none;
  caret-color: var(--kc-terra);
}
.kn-contact .kc-field textarea{ resize: vertical; min-height: 78px; }
.kn-contact .kc-field input::placeholder,
.kn-contact .kc-field textarea::placeholder{ color: rgba(20,16,13,0.32); }
.kn-contact .kc-field.is-invalid .kc-line,
.kn-contact .kc-field.is-invalid .kc-phone{ border-bottom-color: var(--kc-terra); }
/* phone: a plain underlined row. intl-tel-input inserts its own wrapper
   (flag + dial code + input) and lays itself out, so this must NOT be a flex
   container fighting it for space. */
.kn-contact .kc-phone{
  border-bottom: 1px solid rgba(20,16,13,0.25);
  transition: border-color 140ms ease;
  /* The whole row runs LTR: flag, dial code, then the number, reading from
     the left the way a phone number does in every language. */
  direction: ltr;
  text-align: left;
}
.kn-contact .kc-phone:focus-within{ border-bottom-color: var(--kc-terra); }
.kn-contact .kc-phone input{
  width: 100%;
  direction: ltr;
  text-align: left;
}

.kn-contact .kc-field .kc-opt{
  display: inline-block;
  background: var(--kc-sky);
  color: var(--kc-ink);
  padding: 1px 7px;
  margin-inline-start: 6px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: 2px;
  opacity: 1;
}

.kn-contact .kc-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kn-contact .kc-submit{
  display: block;
  width: 100%;
  margin-top: 6px;
  background: var(--kc-terra);
  color: var(--kc-cream);
  border: 0;
  border-radius: 100px;
  padding: 16px 18px;
  font-family: var(--kc-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.kn-contact .kc-submit:hover:not(:disabled){ background: var(--kc-terra-deep); }
.kn-contact .kc-submit:disabled{ background: var(--kc-terra-deep); opacity: 0.7; cursor: progress; }
.kn-contact .kc-submit:focus-visible{ outline: 2px solid var(--kc-ink); outline-offset: 3px; }

.kn-contact .kc-formerr{
  margin: 4px 0 12px;
  padding: 10px 12px;
  background: rgba(160,47,6,0.08);
  border-inline-start: 3px solid var(--kc-terra);
  font-family: var(--kc-display);
  font-size: 14px;
  color: var(--kc-ink);
}
.kn-contact .kc-formerr[hidden]{ display: none; }

.kn-contact .kc-err{
  display: none;
  margin-top: 6px;
  font-family: var(--kc-display);
  font-size: 13px;
  color: var(--kc-terra);
}
.kn-contact .kc-field.is-invalid .kc-err{ display: block; }

/* ---------- success ---------- */

.kn-contact .kc-thanks{
  display: none;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
}
.kn-contact .kc-square--soon.is-sent .kc-form-wrap{ display: none; }
.kn-contact .kc-square--soon.is-sent .kc-thanks{ display: flex; }
.kn-contact .kc-thanks .kc-check{
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--kc-terra);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.kn-contact .kc-thanks .kc-check svg{ width: 22px; height: 22px; stroke: var(--kc-terra); fill: none; stroke-width: 2.6; }

/* ---------- footnote ---------- */

/* Booking sits under the form as the third route. Filled black: quieter than
   the green above it, heavier than the outline it replaced. */
/* a <button>, not an <a href="#">: an empty hash navigates to the top of the
   document before Cal gets a chance to open, which reads as the page jumping. */
.kn-contact .kc-book{
  display: flex;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 var(--kc-gap);
  padding: 13px 22px;
  background: var(--kc-ink);
  color: var(--kc-cream);
  text-decoration: none;
  font-family: var(--kc-display);
  font-weight: 700;
  font-size: 14.5px;
  border: 1.5px solid var(--kc-ink);
  border-radius: 100px;
  box-shadow: 0 8px 22px rgba(20,16,13,0.10);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kn-contact .kc-book svg{ width: 17px; height: 17px; flex: none; }
.kn-contact .kc-book:hover{
  background: var(--kc-terra);
  border-color: var(--kc-terra);
  color: var(--kc-cream);
  box-shadow: 0 14px 30px rgba(160,47,6,0.30);
  animation: kc-wobble .5s ease-in-out;
}
@media (prefers-reduced-motion: reduce){
  .kn-contact .kc-book:hover{ animation: none; }
}
.kn-contact .kc-book:focus-visible{ outline: 3px solid var(--kc-terra); outline-offset: 3px; }

/* ---------- entrance ---------- */

@media (prefers-reduced-motion: no-preference){
  .kn-contact .kc-square{
    clip-path: inset(0 0 100% 0);
    transition: clip-path .52s cubic-bezier(.22,.61,.36,1);
  }
  .kn-contact.is-in .kc-square{ clip-path: inset(0 0 0 0); }
  
}

/* ---------- responsive ---------- */

@media (max-width: 860px){
  .kn-contact .kc-board{ grid-template-columns: 1fr; }
  .kn-contact .kc-knight{ width: 150px; bottom: -30px; }
  .kn-contact .kc-wa{ align-self: stretch; }
}

}

/* ---------- intl-tel-input integration ----------
   Ported from contact/. The widget's internals (flag, dial code, dropdown)
   are a self-contained LTR component even on an RTL page, since dial codes
   and numbers read LTR everywhere, so it is forced LTR to stop it mirroring. */
.kn-contact .kc-field .iti{ width: 100%; direction: ltr; }
.kn-contact .kc-field .iti__tel-input{
  width: 100%;
  padding-block: 8px;
  background: transparent;
  border: 0;
  font-family: var(--kc-mono);
  font-size: 15px;
  color: var(--kc-ink);
  caret-color: var(--kc-terra);
  outline: none;
}
.kn-contact .iti--separate-dial-code .iti__selected-dial-code{
  color: var(--kc-ink);
  font-family: var(--kc-mono);
  font-size: 14px;
}
.kn-contact .iti__country-container,
.kn-contact .iti__selected-country-primary{ background: transparent; }
.kn-contact .iti__dropdown-content{
  background: var(--kc-cream);
  color: var(--kc-ink);
  font-family: var(--kc-display);
  border: 1px solid var(--kc-line);
  direction: ltr;
  text-align: left;
}
.kn-contact .iti__country.iti__highlight{ background: rgba(160,47,6,0.08); }

/* ---------- phone widget layout ----------
   intl-tel-input absolutely positions its country container and sets the
   input's padding inline to clear it. Its stylesheet also carries
   [dir="rtl"] rules which match here regardless of the local dir, because
   the page root is RTL, so the flag lands on the right while the number
   stays left and the row splits in half.

   Rather than out-specify all of that, take the positioning away: make the
   wrapper a flex row, put the country container back in normal flow, and
   neutralise the inline padding. Flag, dial code, number, in that order. */
.kn-contact .kc-phone .iti{ display: flex; align-items: center; width: 100%; }
.kn-contact .kc-phone .iti__country-container{
  position: static;
  flex: none;
  padding: 0;
  margin-inline-end: 8px;
}
.kn-contact .kc-phone .iti__selected-country{ height: auto; }
.kn-contact .kc-phone .iti__tel-input{
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0;
}

/* ---------- phone dropdown ----------
   The list renders inside the form, so it must be opaque and above the
   fields, or the ghost text in the message box reads straight through it.
   Backgrounds go on the panel, the search box and every row, since the
   library leaves the inner elements transparent. */
.kn-contact .kc-phone .iti__dropdown-content{
  background: var(--kc-cream);
  border: 1.5px solid var(--kc-ink);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(20,16,13,0.22);
  overflow: hidden;
  z-index: 20;
}
.kn-contact .kc-phone .iti__search-input{
  background: var(--kc-cream);
  color: var(--kc-ink);
  font-family: var(--kc-mono);
  font-size: 14px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--kc-line);
  width: 100%;
  outline: none;
}
.kn-contact .kc-phone .iti__search-input::placeholder{ color: rgba(20,16,13,0.4); }
.kn-contact .kc-phone .iti__country-list{
  background: var(--kc-cream);
  max-height: 240px;
}
.kn-contact .kc-phone .iti__country{
  background: var(--kc-cream);
  color: var(--kc-ink);
  font-family: var(--kc-display);
  font-size: 14px;
  padding: 9px 14px;
}
.kn-contact .kc-phone .iti__country.iti__highlight,
.kn-contact .kc-phone .iti__country:hover{ background: rgba(160,47,6,0.10); }
.kn-contact .kc-phone .iti__dial-code{ color: rgba(20,16,13,0.55); }
/* the field row has to sit above its neighbours while the list is open */
.kn-contact .kc-field:has(.iti--open){ position: relative; z-index: 20; }

/* One type treatment across the whole phone row. The library sets its own
   font on the input and on the dial code, so both are pinned back to the
   same mono face, size and weight the other fields use. */
.kn-contact .kc-phone .iti input.iti__tel-input,
.kn-contact .kc-phone .iti__selected-dial-code,
.kn-contact .kc-phone input[type="tel"]{
  font-family: var(--kc-mono) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--kc-ink);
}
.kn-contact .kc-phone .iti__selected-dial-code{ margin-inline-end: 2px; }