/* ============================================================
   KosovaJob redesign — kontakt.php (KJContact, the operator's handoff of
   2026-10-23: httpdocs/somedirectory/about-contact-handoff,
   source/KJContact.dc.html). Every value below is the source's own inline
   style or shell rule, moved into classes; the build notes are in
   /root/kj-work/about-contact-1023/build-contact-notes.md.

   SCOPE. Only kontakt.php loads this file. Everything sits under
   main.kj-ct (+ body.kj-contact-page for the ground): nothing reaches the
   site header, drawer, footer or cookie banner. One rule sets html's
   scroll-padding on this page only (html:has(main.kj-ct)), so focus moves
   and keyboard tabbing stop below the sticky header.

   AFTER VERIFICATION (2026-10-23, verify/fix-contact-notes.md), on purpose
   against the design: the hero cards' text block keeps its min-content width
   (no e-mail address under the "Kopjo" pill or past the card); the hidden map
   and the closed FAQ answers are armed by new-ui/contact.js itself (.is-armed,
   .is-ready), never by html.js alone; Google Maps waits for the visitor's
   consent behind a placeholder; "Hap në Google Maps" switches colour at once
   (the design's: no transition); no overflow-x clip on phones; long names /
   e-mail addresses wrap in the thank-you panel; the "U kopjua" pill is 3px
   tighter a side for its 1.8 s; the send button is disabled until the script
   can send; a <noscript> note under the form's h2.

   BREAKPOINTS are the design's: desktop >= 1024, tablet <= 1023, phone
   <= 767 (as /rreth-nesh). The design's responsive hooks are written as
   page classes, because base.css already styles the bare attributes
   ([data-wrap], [data-side], [data-cols-*], [data-h1], [data-pad-m],
   [data-stack], [data-full-m]) for Batch 3, at 1099 / 759 and with other
   values. Hook -> class:
     [data-wrap]  .kj-ct-hero__grid, .kj-ct-main, .kj-ct-faq  (20px gutters <= 767)
     [data-side]  .kj-ct-hero__grid, .kj-ct-main__grid, .kj-ct-faq__grid  (one column <= 1023)
     [data-sec] / [data-sec-end]  .kj-ct-main, .kj-ct-faq  (40 top / 56 bottom <= 767)
     [data-cols-4] + [data-keep-2]  .kj-cf__topics  (2 columns <= 1023, still 2 <= 767)
     [data-cols-2]  .kj-cf__row  (one column <= 767)
     [data-h1] .kj-ct-h1 · [data-h2] .kj-cf__h2, .kj-ct-faq__h2 · [data-hm] .kj-cf-sent__h
     [data-pad-m]  .kj-cf, .kj-cf-sent (padding 20 <= 767)
     [data-stack]  .kj-cf__foot · [data-full-m]  .kj-cf__sendwrap
     [data-ct-in]  .kj-ct-in (the hero's blur-rise + its reduced-motion switch)

   base.css (loads before this file) also gives every button / a[href] the
   motion layer's transitions (0,1,2 / 0,2,2), inputs a 4px .14 focus ring
   (0,2,2) and buttons a scale(.97) press (0,3,2): the rules below carry the
   weight to put the design's own values back where they differ.

   TOKENS: page-local aliases onto tokens.css (same values as the design's
   tokens); the fonts are the design's stacks, written out.
   ============================================================ */

body.kj-contact-page { background: var(--kj-b1-page, #FFFEFD); }
/* the browser's own focus scrolling (keyboard tabbing) stops below the sticky site header (73px: base.css
   --kj-b3-chrome-h) and, signed in on a phone, above the 64px tab bar, with 16px to spare (new-ui/contact.js measures the
   same chrome for the focus moves it makes itself) */
html:has(main.kj-ct) { scroll-padding-top: calc(var(--kj-b3-chrome-h, 73px) + 16px); }
@media (max-width: 759px) {
  html:has(main.kj-ct):has(.kj-tabbar) { scroll-padding-bottom: 80px; }
}

.kj-ct {
  --ct-navy:          var(--kj-b3-navy, #041E42);
  --ct-strong:        var(--kj-b3-title, #041E42);
  --ct-body:          var(--kj-b3-body, #313C53);
  --ct-muted:         var(--kj-b3-muted, #6B7890);
  --ct-border:        var(--kj-b3-stroke, #E2E7EF);
  --ct-border-2:      var(--kj-b3-stroke-2, #CBD3E0);
  --ct-sunken:        var(--kj-b3-sunken, #EEF1F6);
  --ct-surface-muted: var(--kj-b3-page, #F6F8FB);
  --ct-coral-50:      var(--kj-coral-50, #FFF1EF);
  --ct-coral-300:     var(--kj-coral-300, #FF9D96);
  --ct-coral-400:     var(--kj-coral-400, #FE8079);
  --ct-coral-500:     var(--kj-coral-500, #FE616C);
  --ct-coral-600:     var(--kj-coral-600, #EE4753);
  --ct-coral-700:     var(--kj-coral-700, #CE3340);
  --ct-gold-300:      var(--kj-gold-300, #FFD195);
  --ct-gold-400:      var(--kj-gold-400, #FFC473);
  --ct-on-navy-muted: var(--kj-b3-on-navy-muted, #A9B6CC);
  --ct-grad:          var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  --ct-grad-navy:     var(--kj-b3-gradient-navy, linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%));
  --ct-success:       var(--kj-b3-success, #1E9E6A);
  --ct-success-bg:    var(--kj-b3-success-bg, #E7F6EF);
  --ct-danger-bg:     var(--kj-b3-danger-bg, #FDECEC);
  --ct-ring:          var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30));
  --ct-shadow-sm:     var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07));
  --ct-shadow-md:     var(--kj-shadow-md, 0 8px 20px -6px rgba(4, 30, 66, .12));
  --ct-shadow-accent: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
  --ct-ease:          var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1));
  --ct-in-ease:       cubic-bezier(.22, 1, .36, 1);
  --ct-display:       'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ct-text:          Mulish, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* the design's page root (L18) + the shell's route wrapper: the page fades in, the footer (outside main) does not */
  position: relative;
  display: block;
  background: var(--kj-b1-page, #FFFEFD);
  font-family: var(--ct-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ct-body);
  animation: kjPageIn .4s var(--ct-ease) both;
}
.kj-ct-nowrap { white-space: nowrap; }
.kj-ct-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus. The design draws none (the browser's own ring): a 2px ring, gold on the navy hero, coral on white. */
.kj-ct a:focus-visible,
.kj-ct button:focus-visible { outline: 2px solid var(--ct-coral-500); outline-offset: 2px; }
.kj-ct .kj-ct-hero a:focus-visible,
.kj-ct .kj-ct-hero button:focus-visible { outline-color: var(--ct-gold-300); }

/* ---------- 1. Hero (L21-76): navy, two glows, the logo-mark watermark ---------- */
.kj-ct-hero {
  position: relative;
  overflow: hidden;
  background: var(--ct-grad-navy);
  color: #fff;
  padding: 64px 0 76px;
}
.kj-ct-hero__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.kj-ct-hero__glow--coral {
  top: -260px; right: -180px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(254, 97, 108, .28), transparent 64%);
}
.kj-ct-hero__glow--gold {
  bottom: -320px; left: -220px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(255, 196, 115, .16), transparent 66%);
}
/* 420 wide at every width (base.css's img max-width: 100% would shrink it on phones) */
.kj-ct .kj-ct-hero__mark {
  position: absolute;
  right: -80px; bottom: -150px;
  width: 420px; height: auto;
  max-width: none;
  opacity: .045;
  pointer-events: none;
}
.kj-ct-hero__grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.kj-ct-hero__grid > * { min-width: 0; }

/* the "Kontakt" badge (L27) */
.kj-ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-gold-300);
}
.kj-ct-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ct-gold-400);
  box-shadow: 0 0 0 4px rgba(255, 196, 115, .18);
}

/* h1 (L28): the brand gradient clipped to "ndihmojmë?" / "help?" */
.kj-ct-h1 {
  margin: 20px 0 16px;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: #fff;
  text-wrap: balance;
}
.kj-ct-h1__accent {
  background: var(--ct-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.kj-ct-lede {
  margin: 0;
  max-width: 500px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ct-on-navy-muted);
  text-wrap: pretty;
}

/* the three channel cards (L32-74). The entrance sits on the wrapper (.kj-ct-in), the hover transform on the inner card
   (README "Animation wrappers": an animation with fill both would override a hover transform on the same element). */
.kj-ct-chans { display: flex; flex-direction: column; gap: 12px; }
.kj-ct-chan {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s, transform .25s var(--ct-ease);
}
.kj-ct-chan:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-2px);
}
.kj-ct-chan__ico {
  flex: none;
  width: 50px; height: 50px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.kj-ct-chan__ico--accent { background: var(--ct-grad); box-shadow: var(--ct-shadow-accent); }
/* min-width auto, not the design's 0: the no-wrap values keep their width, so a card too narrow for icon + value + pills
   wraps (pills under the text, or the text under the icon) instead of running "info@kosovajob.com" (213.9px) under the
   "Kopjo" pill (sq 525-558 / 1090-1156px wide, en 505-538 / 1050-1116) or past the card (324-357) as the design does:
   the e-mail card is then +54px (+64 at 324-357). A no-op wherever the design fits. */
.kj-ct-chan__text { flex: 1 1 180px; min-width: auto; }
.kj-ct-chan__lbl { font-size: 12.5px; font-weight: 800; color: var(--ct-gold-300); }
.kj-ct-chan__val {
  margin-top: 3px;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.02em;
  color: #fff;
}
.kj-ct-chan__sub { margin-top: 2px; font-size: 13px; color: var(--ct-on-navy-muted); }
.kj-ct-chan__acts { display: flex; gap: 8px; margin-left: auto; }

/* pills: white (Thirr, Shkruaj), WhatsApp, ghost (Kopjo, Harta). a[href] rules weigh (0,3,1) to beat base.css's motion
   layer (0,2,2); no underline on hover (the artifact's DS sheet underlines every link — kept off here, D-3) */
.kj-ct .kj-ct-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
}
.kj-ct a.kj-ct-pill--white[href] {
  background: #fff;
  color: var(--ct-navy);
  transition: transform .15s var(--ct-ease);
}
.kj-ct a.kj-ct-pill--white[href]:hover { transform: translateY(-1px); color: var(--ct-navy); }
.kj-ct a.kj-ct-pill--wa[href] {
  background: #25D366;
  color: #fff;
  transition: transform .15s var(--ct-ease);
}
.kj-ct a.kj-ct-pill--wa[href]:hover { transform: translateY(-1px); color: #fff; }
.kj-ct .kj-ct-pill--ghost {
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background .2s;
}
.kj-ct button.kj-ct-pill--ghost { font-family: inherit; line-height: normal; cursor: pointer; }
.kj-ct a.kj-ct-pill--ghost[href] { transition: background .2s; }
.kj-ct .kj-ct-pill--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.kj-ct-pill svg { flex: none; }
/* "Kopjo" -> "U kopjua" for 1.8 s: the copy glyph swaps for the green tick. The wider copied pill sits 3px tighter a side
   (12 instead of 15): with the address now keeping its full width (.kj-ct-chan__text above), the design's copied pill is
   0.5px too wide at >= 1200px and the pills would jump under the address for 1.8 s on every desktop */
.kj-ct .kj-ct-copy.is-copied { padding: 0 12px; }
.kj-ct-copy__ok { display: none; }
.kj-ct-copy.is-copied .kj-ct-copy__ok { display: block; }
.kj-ct-copy.is-copied .kj-ct-copy__ico { display: none; }

/* ---------- 2. Form + office (L79-164) ---------- */
.kj-ct-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 32px 0;
}
.kj-ct-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: 24px;
  align-items: start;
}
.kj-ct-main__grid > * { min-width: 0; }
.kj-ct-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ct-border);
  border-radius: 28px;
  box-shadow: var(--ct-shadow-md);
}
.kj-cf {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* every element given a display AND toggled with [hidden] needs its own [hidden] rule (the 09-15 -> 10-11 bug) */
.kj-cf[hidden] { display: none; }
.kj-ct-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-coral-600);
}
.kj-cf__h2 {
  margin: 8px 0 0;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ct-strong);
  text-wrap: balance;
}
.kj-cf__q { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ct-strong); }
/* without scripts the form cannot send (kontakt.php's <noscript>, under the h2): the e-mail and the phone instead */
.kj-cf__nojs {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ct-surface-muted);
  color: var(--ct-body);
  font-size: 14px;
  line-height: 1.5;
}

/* the four topic radio cards (L90-96) */
.kj-cf__topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.kj-ct .kj-cf__topic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  line-height: normal;   /* the design's UA default: base.css's button { font: inherit } would pass the page's 1.5 down */
  color: var(--ct-strong);
  border: 1.5px solid var(--ct-border);
  background: #fff;
  box-shadow: none;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ct-ease);
}
.kj-ct .kj-cf__topic:hover { transform: translateY(-2px); }
.kj-ct .kj-cf__topic[aria-checked="true"] {
  border-color: var(--ct-coral-400);
  background: var(--ct-coral-50);
  box-shadow: 0 0 0 4px rgba(254, 97, 108, .12);
}
.kj-cf__topicico {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  background: var(--ct-sunken);
  color: var(--ct-strong);
}
.kj-cf__topic[aria-checked="true"] .kj-cf__topicico { background: var(--ct-grad); color: #fff; }
.kj-cf__topictxt { display: block; min-width: 0; }
.kj-cf__topicname {
  display: block;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--ct-strong);
}
.kj-cf__topicshort {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-muted);
}
.kj-cf__topicshort svg { flex: none; }
.kj-cf__topictick {
  position: absolute;
  top: 10px; right: 10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ct-coral-500);
  color: #fff;
  transition: opacity .2s, transform .3s var(--ct-ease);
  opacity: 0;
  transform: scale(.5);
}
.kj-cf__topic[aria-checked="true"] .kj-cf__topictick { opacity: 1; transform: scale(1); }

/* the routing line (L99-102): the four lines share one grid cell and crossfade */
.kj-cf__routes { display: grid; margin-top: 12px; }
.kj-cf__route {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ct-muted);
  transition: opacity .3s ease, transform .35s var(--ct-ease);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.kj-cf__route.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kj-cf__route svg { flex: none; }
.kj-cf__route strong { color: var(--ct-strong); }

/* fields (L105-115) */
.kj-cf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kj-cf__row[hidden] { display: none; }
.kj-cf__row--employer { animation: kjFadeUp .3s var(--ct-ease) both; }
.kj-cf__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ct-strong);
}
.kj-ct .kj-cf__input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1.5px solid var(--ct-border-2);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  color: var(--ct-strong);
}
.kj-ct .kj-cf__textarea {
  height: auto;
  min-height: 140px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}
/* (0,3,0): over base.css's input:focus 4px .14 ring (0,2,2) */
.kj-ct .kj-cf__input:focus { outline: none; border-color: var(--ct-coral-400); box-shadow: var(--ct-ring); }

/* Google's reCAPTCHA (304 x 78; the design draws none — it stays, the endpoint requires it): the next flex child after
   the message, so it gets the form's 22px gaps. The box keeps the widget's height before Google's script draws it (no
   jump). On phones the card's content box is the viewport - 82 (20 gutter + 1 border + 20 padding a side): the widget is
   scaled from its top left below 386px (.88 -> 267.5 x 68.6) and below 350px (.75 -> 228 x 58.5). */
.kj-cf__captcha { height: 78px; }
@media (max-width: 385px) {
  .kj-cf__captcha { height: 69px; }
  .kj-cf__captcha .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
}
@media (max-width: 349px) {
  .kj-cf__captcha { height: 59px; }
  .kj-cf__captcha .g-recaptcha { transform: scale(.75); }
}

/* the error (L116): after the captcha, right above the foot */
.kj-cf__err {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--ct-danger-bg);
  color: #B4282C;
  font-size: 14px;
  font-weight: 700;
  animation: kjFadeUp .25s var(--ct-ease) both;
}
.kj-cf__err[hidden] { display: none; }
.kj-cf__err svg { flex: none; }

/* foot (L117-120): privacy line + the DS Button (primary, lg, block) */
.kj-cf__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.kj-cf__privacy { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ct-muted); }
.kj-cf__privacy svg { flex: none; }
.kj-cf__sendwrap { flex: none; }
.kj-ct .kj-cf__send {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 56px;
  padding: 0 30px;
  font-family: var(--ct-text);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--ct-grad);
  color: #fff;
  box-shadow: var(--ct-shadow-accent);
  transition: transform 130ms var(--ct-ease), box-shadow 200ms var(--ct-ease), background 200ms var(--ct-ease), opacity 200ms;
  -webkit-tap-highlight-color: transparent;
}
.kj-ct .kj-cf__send:hover { box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55); transform: translateY(-1px); }
/* rendered disabled until new-ui/contact.js can send it (without the script a native POST would lose the message) */
.kj-ct .kj-cf__send:disabled,
.kj-ct .kj-cf__send:disabled:hover { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
/* (0,4,2): the design's press over base.css's scale(.97) (0,3,2) */
body .kj-ct button.kj-cf__send:not(:disabled):active { transform: translateY(0) scale(.98); }

/* ---------- the thank-you panel (L124-138), in the same card ---------- */
.kj-cf-sent {
  padding: 48px 36px 40px;
  text-align: center;
  animation: kjFadeUp .4s var(--ct-ease) both;
}
.kj-cf-sent[hidden] { display: none; }
.kj-cf-sent__disc {
  display: inline-flex;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--ct-success);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 10px var(--ct-success-bg);
  animation: kjScaleIn .45s var(--ct-ease) both;
}
.kj-cf-sent__h {
  margin: 26px 0 8px;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ct-strong);
  overflow-wrap: anywhere;   /* the visitor's own first name */
}
.kj-cf-sent__h:focus { outline: none; }   /* focused by script (tabindex -1) so a keyboard / screen-reader user lands on it */
.kj-cf-sent__p {
  margin: 0 auto 20px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ct-muted);
  text-wrap: pretty;
  overflow-wrap: anywhere;   /* a long e-mail address breaks inside the card (320px phones) */
}
.kj-cf-sent__ticket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ct-surface-muted);
  font-size: 13px;
  color: var(--ct-muted);
}
.kj-cf-sent__ticket[hidden] { display: none; }
.kj-cf-sent__ticket strong { color: var(--ct-strong); font-variant-numeric: tabular-nums; }
.kj-cf-sent__next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
  margin: 28px auto 0;
  text-align: left;
}
.kj-cf-sent__nextlbl {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ct-muted);
}
.kj-cf-sent__steps { display: flex; flex-direction: column; gap: 8px; }
.kj-cf-sent__steps[hidden] { display: none; }
.kj-ct a.kj-cf-sent__step[href] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--ct-border);
  background: #fff;
  color: var(--ct-strong);
  font-weight: 700;
  font-size: 14.5px;
  transition: border-color .2s, background .2s;
}
.kj-ct a.kj-cf-sent__step[href]:hover { border-color: var(--ct-coral-300); background: var(--ct-coral-50); color: var(--ct-strong); }
.kj-cf-sent__step svg { flex: none; }
.kj-ct .kj-cf-sent__again {
  margin-top: 20px;
  padding: 1px 6px;   /* the design's UA default (base.css zeroes button padding): 20px tall, as the design */
  border: 0;
  background: transparent;
  color: var(--ct-coral-600);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  line-height: normal;
  cursor: pointer;
}

/* ---------- the office card + map (L142-152) and "Na ndiqni" (L153-161) ---------- */
.kj-ct-aside { display: flex; flex-direction: column; gap: 16px; }
.kj-ct-office {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ct-border);
  border-radius: 24px;
  box-shadow: var(--ct-shadow-sm);
}
.kj-ct-office__map {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: var(--ct-sunken);
}
.kj-ct-office__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transition: opacity .6s ease;
}
/* the map fades in once the card is >= 35% in view: new-ui/contact.js sets .is-armed when it starts watching, so the frame
   is never held hidden by a script that is not running */
.kj-ct-office.is-armed:not(.is-in) .kj-ct-office__frame { opacity: 0; }
/* no consent yet: the URL waits in data-src (kontakt.php) — no box for an empty frame; at opacity 0 already, so the src
   set later starts from 0 and only the fade after Google's load runs */
.kj-ct-office__frame:not([src]) { visibility: hidden; opacity: 0; }
/* the consent placeholder over the map box: a note + "Shfaq hartën" (contact.js shows the button: it needs the script;
   without it the note and the "Hap në Google Maps" link below remain) */
.kj-ct-office__ph {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px;
  text-align: center;
}
.kj-ct-office__ph[hidden] { display: none; }
.kj-ct-office__phico {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--ct-coral-600);
  box-shadow: var(--ct-shadow-sm);
}
.kj-ct-office__phtext {
  margin: 0;
  max-width: 260px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ct-body);
  text-wrap: pretty;
}
.kj-ct .kj-ct-office__phbtn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ct-border-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ct-strong);
  font-family: inherit;
  font-weight: 800;
  font-size: 13.5px;
  line-height: normal;
  cursor: pointer;
}
.kj-ct .kj-ct-office__phbtn:hover { border-color: var(--ct-coral-300); color: var(--ct-coral-700); }   /* 700: 4.9:1 on white */
.kj-ct .kj-ct-office__phbtn[hidden] { display: none; }
.kj-ct-office__body { padding: 20px 22px 22px; }
.kj-ct-office__title {
  margin: 6px 0 0;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ct-strong);
}
.kj-ct-office__muted { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ct-muted); }
.kj-ct-office__muted > span { display: block; }
.kj-ct a.kj-ct-office__link[href] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ct-coral-600);
  transition: initial;   /* the design's (the browser default, all 0s): the hover colour switches at once, not base.css's .18s */
}
.kj-ct a.kj-ct-office__link[href]:hover { color: var(--ct-coral-700); text-decoration: underline; }
.kj-ct-office__link svg { flex: none; }

.kj-ct-social {
  padding: 20px 22px 22px;
  background: #fff;
  border: 1px solid var(--ct-border);
  border-radius: 24px;
  box-shadow: var(--ct-shadow-sm);
}
.kj-ct-social__title {
  margin: 0;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ct-strong);
}
.kj-ct-social__p {
  margin: 4px 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ct-muted);
  text-wrap: pretty;
}
.kj-ct-social__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kj-ct a.kj-ct-social__pill[href] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ct-border-2);
  background: #fff;
  color: var(--ct-strong);
  font-weight: 700;
  font-size: 13.5px;
  transition: border-color .2s, color .2s;
}
.kj-ct a.kj-ct-social__pill[href]:hover { border-color: var(--ct-coral-300); color: var(--ct-coral-600); }
.kj-ct-social__pill svg { flex: none; }

/* ---------- 3. FAQ (L167-183): grid-rows accordion, one open at a time, the first open on load ---------- */
.kj-ct-faq {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 32px 96px;
}
.kj-ct-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}
.kj-ct-faq__grid > * { min-width: 0; }
.kj-ct-faq__h2 {
  margin: 10px 0 12px;
  font-family: var(--ct-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ct-strong);
  text-wrap: balance;
}
.kj-ct-faq__p { margin: 0; max-width: 400px; font-size: 16px; line-height: 1.6; color: var(--ct-muted); }
.kj-ct-faq__list { border-top: 1px solid var(--ct-border); }
.kj-ct-faq__item { border-bottom: 1px solid var(--ct-border); }
.kj-ct-faq__h { margin: 0; font: inherit; }
.kj-ct .kj-ct-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--ct-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ct-strong);
}
/* a full-width row: no press scale (the design has none; base.css would shrink the whole row by 3%) */
body .kj-ct button.kj-ct-faq__q:not(:disabled):active { transform: none; }
.kj-ct-faq__chev {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s var(--ct-ease), background .2s, color .2s;
  background: var(--ct-sunken);
  color: var(--ct-strong);
  transform: rotate(0);
}
.kj-ct-faq__item.is-open .kj-ct-faq__chev { background: var(--ct-navy); color: #fff; transform: rotate(180deg); }
.kj-ct-faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s var(--ct-ease);
}
.kj-ct-faq__ain { min-height: 0; overflow: hidden; }
/* closed only once new-ui/contact.js has wired the questions (.is-ready on the list): without it every answer stays
   readable. A closed answer is hidden after the .3s fold, so its link leaves the tab order. .is-init = the one frame in
   which the script folds them on load, without the animation. */
.kj-ct-faq__list.is-ready .kj-ct-faq__item:not(.is-open) .kj-ct-faq__a { grid-template-rows: 0fr; }
.kj-ct-faq__list.is-ready .kj-ct-faq__item:not(.is-open) .kj-ct-faq__ain { visibility: hidden; transition: visibility 0s .3s; }
.kj-ct-faq__list.is-init,
.kj-ct-faq__list.is-init * { transition: none !important; }
.kj-ct-faq__ain p {
  margin: 0;
  padding: 0 48px 20px 2px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ct-body);
  text-wrap: pretty;
}
.kj-ct .kj-ct-faq__ain a[href] { color: var(--ct-coral-600); font-weight: 700; text-decoration: underline; }
.kj-ct .kj-ct-faq__ain a[href]:hover { color: var(--ct-coral-700); }

/* ---------- motion: the hero blur-rise on load (L14, L27-61) ---------- */
@keyframes kjCtIn {
  from { opacity: 0; transform: translateY(.4em); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.kj-ct-in { animation: kjCtIn var(--ct-in-dur, .9s) var(--ct-in-ease) var(--ct-in-delay, 0s) both; }
.kj-ct-in--badge { --ct-in-dur: .8s;  --ct-in-delay: 0s; }
.kj-ct-in--h1    { --ct-in-dur: 1s;   --ct-in-delay: .1s; }
.kj-ct-in--lede  { --ct-in-dur: .9s;  --ct-in-delay: .22s; }
.kj-ct-in--c1    { --ct-in-dur: .9s;  --ct-in-delay: .3s; }
.kj-ct-in--c2    { --ct-in-dur: .9s;  --ct-in-delay: .42s; }
.kj-ct-in--c3    { --ct-in-dur: .9s;  --ct-in-delay: .54s; }

/* ---------- tablet (the design's <= 1023) ---------- */
@media (max-width: 1023px) {
  .kj-ct-hero__grid,
  .kj-ct-main__grid,
  .kj-ct-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .kj-cf__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phone (the design's <= 767) ---------- */
@media (max-width: 767px) {
  .kj-ct-hero__grid { padding-left: 20px; padding-right: 20px; }
  .kj-ct-main { padding: 40px 20px 0; }
  .kj-ct-faq { padding: 40px 20px 56px; }
  .kj-ct-h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
  .kj-cf__h2,
  .kj-ct-faq__h2 { font-size: 26px; }
  .kj-cf-sent__h { font-size: 22px; }
  .kj-cf,
  .kj-cf-sent { padding: 20px; }
  .kj-cf__row { grid-template-columns: minmax(0, 1fr); }
  .kj-cf__foot { flex-direction: column; align-items: stretch; }
  .kj-cf__sendwrap { width: 100%; max-width: none; }
}

/* ---------- reduced motion: the final state, no animation ----------
   base.css's switch (.001s durations) keeps every animation-delay, which would hold the hero invisible for up to .54s:
   here nothing animates or transitions at all. */
@media (prefers-reduced-motion: reduce) {
  .kj-ct,
  .kj-ct *,
  .kj-ct *::before,
  .kj-ct *::after { animation: none !important; transition: none !important; }
}

/* print: every answer open, the map box out */
@media print {
  .kj-ct-faq__a { grid-template-rows: 1fr !important; }
  .kj-ct-faq__ain { visibility: visible !important; }
  .kj-ct-office__map, .kj-cf__captcha { display: none; }
}