/* ============================================================================
   Pro Services — "Shërbime Profesionale nga KosovaJob"
   Measured from "Kosova Jobs Platform.pdf" p135 (desktop 1512) and p134
   (mobile 393), rendered at 72dpi so 1px == 1 Figma px.

   Container: cards measured at x 100..739 and 772..1411 on a 1512 frame, so the
   content column is 1312 wide with 100px margins — the same 1312 family the
   job / postad / login / signup / rfq pages already use. Two 640px cards with a
   32px gutter (640 + 32 + 640 = 1312 ✔).

   box-sizing is border-box GLOBALLY in this design system, so a container that
   carries 24px padding needs max-width = measured + 48 to leave 1312 of content.

   Card metrics come from pdftotext -bbox-layout, NOT the raster: a row scan put
   the padding at 53px because it clipped the icon tile's rounded corner, while
   the real title xMin is 148 against a card edge of 100 => 48px. Card 2 confirms
   it (title 820 against edge 772). Trust the bbox.
   ========================================================================== */

.kj-ps {
  max-width: 1264px;          /* bundle: max-width:1200px + padding:0 32px (border-box) */
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================================
   2026-09-12 rewrite: every value below is copied verbatim from the bundle's
   own rendered DOM (KJServices component, extracted via CDP outerHTML — real
   markup/inline-styles, not a screenshot measurement) and its :root computed
   custom properties (--coral-600 etc., resolved via getComputedStyle). The
   PDF-measurement pass this file started from (p134/p135) predates the
   current bundle and is superseded everywhere below.
   ========================================================================== */

/* ---- hero band ---- bundle: <section style="padding:56px 0 64px; background:
   var(--gradient-navy)"> — a 3-stop diagonal gradient, not a flat navy fill. */
.kj-ps__hero-band {
  background: linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%);
  width: 100%;
  padding: 0 32px;
}
.kj-ps__hero-band .kj-ps__hero { max-width: 1200px; margin: 0 auto; }
.kj-ps__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;   /* 2026-10-09 KJServices.html:17 — a 420px stat column (two columns at ≥900, as the design at 1024 / 900; one column below — see the ≤899 rule) */
  gap: 40px;
  align-items: center;
  padding: 56px 0 64px;
  overflow: hidden;
}
.kj-ps__eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFC473;
  animation: kjFadeUp .5s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-ps__h1 {
  margin: 12px 0 16px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
  animation: kjFadeUp .55s .06s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-ps__sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #A9B6CC;
  max-width: 560px;
  animation: kjFadeUp .55s .12s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-ps__hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  animation: kjFadeUp .6s .18s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-ps__cta-primary,
.kj-ps__cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
}
.kj-ps__cta-primary {
  background: linear-gradient(120deg, #FFC473 0%, #FE616C 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(254,97,108,.45);
}
.kj-ps__cta-outline {
  height: 56px;
  padding: 0 26px;
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 16px;
}
.kj-ps__cta-outline:hover { border-color: rgba(255,255,255,.6); }
@media (max-width: 759px) {
  .kj-ps__hero-cta { flex-direction: column; }
  .kj-ps__cta-primary, .kj-ps__cta-outline { width: 100%; }
}
.kj-ps__hero-txt { flex: 1 1 auto; }
/* right-column 2x2 stat grid — data-hide-m in the bundle (mobile drops it) */
.kj-ps__hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  animation: kjFadeUp .6s .2s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
/* 2026-10-09 (KJServices.html:29-31, item new-sections-9): tile padding 16 18, r18,
   rgba(255,255,255,.08) on a .14 rule; value 26px/800 line-height 1; label 12.5px
   / 1.35 at .72 white, 6 under */
.kj-ps__stat {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.kj-ps__stat-n {
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
}
.kj-ps__stat-l { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.72); margin-top: 6px; }
/* item new-sections-10: the tiles are never hidden any more. The design's shell
   (root.x-dc.txt:69-75) stacks the hero ([data-side]) at ≤899 — a tablet band
   where the 2×2 tiles sit UNDER the text block (40px, the grid's gap) and the
   CTAs keep one row — and only at ≤767 collapses the 2×2 grid ([data-cols-2])
   to four full-width tiles and stacks the CTAs ([data-stack]); stage's phone
   breakpoint is 759 (design measured at 390: 4 tiles, 358 wide, 12 apart).
   2026-10-10: the first pass kept two columns down to 760, where the 280.8px
   primary CTA (56px/17px, not an item) overflowed the 236–276px text column. */
@media (max-width: 899px) {
  .kj-ps__hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .kj-ps__hero-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---- service grid ---- bundle: <section style="padding:64px 32px 0"><div
   data-cols-2 style="grid-template-columns:1fr 1fr; gap:18px"> */
.kj-ps__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 64px;
}
/* 2026-10-09 (KJServices.html:42-54, item new-sections-9): card #fff, 1px
   --border-subtle, r22, padding 24, shadow-xs; icon tile 40 r13 coral-50 /
   coral-600 (19px glyph) 14 above the 20px/800 title; body 14.5 / 1.55 muted;
   points 14 / 1.45 with 18px check discs; foot 12.5/700 coral-600 + the
   optional 28px coral-50 / coral-700 pill */
.kj-ps__card {
  display: flex;
  flex-direction: column;
  background: #FFFEFD;
  border: 1px solid #E2E7EF;      /* --border-subtle */
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4,30,66,.06));   /* --shadow-xs */
  animation: kjFadeUp .5s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-ps__ico {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  margin-bottom: 14px;
  background: #FFF1EF;      /* --coral-50 */
  color: #EE4753;           /* --coral-600 — svg uses stroke="currentColor" */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.kj-ps__ico svg { display: block; }
.kj-ps__ct {
  margin: 0 0 8px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #041E42;           /* --text-strong */
}
.kj-ps__cd {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--kj-b3-muted, #6B7890);   /* --text-muted */
}
.kj-ps__ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kj-ps__ul li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: #313C53;           /* --text-body */
}
.kj-ps__check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #FFF1EF;      /* --coral-50 */
  color: #EE4753;           /* --coral-600 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kj-ps__check svg { display: block; }
.kj-ps__foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;   /* 2026-10-10 (KJServices.html:51): the design's row never wraps — the 12.5/700 tag
                          shrinks and wraps its own text, the 28px pill stays beside it (with `wrap` the
                          pill dropped under the tag at ≤900 and the Employer-Branding card ran ~19px tall) */
  margin-top: auto;
  padding-top: 0;
}
.kj-ps__tag { font-size: 12.5px; font-weight: 700; color: var(--kj-coral-600, #EE4753); }  /* the design's foot line */
/* only the Employer Branding card carries a CTA — bundle: bg var(--accent-soft)
   color var(--accent-active), a soft pill, NOT the gradient hero-button style */
.kj-ps__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #FFF1EF;      /* --coral-50 */
  color: #CE3340;           /* --coral-700 */
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
  text-decoration: none;
}

/* ---- "Të flasim për nevojat e tua" ---- bundle: <section style="padding:64px
   32px 80px"><div style="margin-bottom:22px"><h2 font-size:32px weight:800> */
.kj-ps__talk { margin-top: 64px; padding-bottom: 16px; }
.kj-ps__talk-h {
  margin: 0 0 6px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #041E42;      /* --text-strong */
}
.kj-ps__talk-p {
  margin: 0;
  font-size: 16px;
  color: #6B7890;      /* --text-muted */
}

/* ---- contact block --------------------------------------------------------
   2026-09-12: the bundle's own Services page renders a real inline lead-gen
   form (Kompania / Personi kontaktues / Email / Telefoni + service chips +
   textarea) side by side with the phone/email/ISO cards — a 1.2fr/0.8fr grid,
   captured verbatim from the standalone bundle's live DOM. Previously this
   page only had the three cards with no way to actually submit an inquiry. */
.kj-ps__contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;   /* 2026-10-09 KJServices.html:64 — the aside is 340 wide */
  gap: 18px;
  align-items: start;
  margin: 24px 0 72px;
}
/* 2026-10-09 (KJServices.html:66-81, item new-sections-9): form card r22, padding
   24, shadow-xs; 18px between its blocks (the design's margins); labels 13/700
   body with 6 to the field; inputs h46 / 0 14 / 1.5px --border-default / r13 /
   14.5px 500; chips h34 / 0 14 / 13px 700; submit h46 / 0 26 / 14.5px 800 */
.kj-ps__form {
  background: #FFFEFD;
  border: 1px solid #ECECF2;
  border-radius: 22px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kj-ps__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kj-ps__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1E1E1E;
}
.kj-ps__input {
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid #E2E2EA;
  border-radius: 13px;
  font-size: 14.5px;
  font-weight: 500;
  font-family: inherit;
  color: #1E1E1E;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.kj-ps__input:focus { outline: none; border-color: #FF5168; }
.kj-ps__input.errInput { border-color: #E5484D; }
.kj-ps__textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
  font-weight: 400;
}
.kj-ps__chips-lbl { display: block; font-size: 13px; font-weight: 700; color: #1E1E1E; margin-bottom: 8px; }
.kj-ps__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.kj-ps__chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid #E2E2EA;
  background: #fff;
  color: #383838;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: .2s;
}
.kj-ps__chip.is-on {
  border-color: transparent;
  background: linear-gradient(90deg, #FFC163 0%, #FF5168 100%);
  color: #fff;
}
.kj-ps__form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;   /* 2026-10-10 (verifier W1): wrap dropped the submit under the note between 900 and 907px; the ≤767 column rule below keeps phones stacked */
}
.kj-ps__form-note { font-size: 12.5px; color: #919191; min-width: 0; }
.kj-ps__submit {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  font-weight: 800;
  font-size: 14.5px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));   /* --gradient-brand */
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(254,97,108,.45);
  font-family: var(--kj-font);
}
.kj-ps__submit:disabled { opacity: .6; cursor: default; }

/* ---- side stack: phone / email / ISO cards -------------------------------- */
.kj-ps__side { display: flex; flex-direction: column; gap: 14px; }   /* 2026-10-09 KJServices.html:84 */
.kj-ps__cc--link { text-decoration: none; transition: .25s; }
.kj-ps__cc--link:hover { box-shadow: 0 8px 20px -10px rgba(30,30,30,.18); }
/* ISO badge card — matches the bundle's own contact-section footer note
   (missing here entirely before). */
.kj-ps__cc--iso {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--kj-b3-navy, #041E42);
  border-color: transparent;
}
.kj-ps__cc--iso img { height: 44px; width: auto; flex: 0 0 auto; }
.kj-ps__cc--iso .kj-ps__cc-p { margin: 0; color: var(--kj-b3-on-navy-muted, #A9B6CC); }
.kj-ps__cc--iso .kj-ps__cc-p strong { display: block; font-size: 15px; color: #fff; margin-bottom: 2px; }
.kj-ps__cc {
  background: #FFFEFD;
  border: 1px solid #ECECF2;
  border-radius: 12px;
  padding: 26px 28px;
  color: inherit;
}
.kj-ps__cc-top { display: flex; align-items: center; gap: 12px; }
.kj-ps__cc-l { font-size: 15px; font-weight: 600; color: #FF5067; }
.kj-ps__wa {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #FFF7F7;
  color: #FF5067;
  font-size: 12px;
}
.kj-ps__cc-v {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--kj-font);
  font-size: 24px;
  font-weight: 700;
  color: #1E1E1E;
}
.kj-ps__copy {
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}
.kj-ps__copy svg { width: 20px; height: 20px; display: block; }
.kj-ps__copied {
  position: absolute;
  left: 100%;
  margin-left: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #079455;
}
.kj-ps__cc-p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #919191;
}

/* ---- mobile: p134 (393 wide) --------------------------------------------
   Single column throughout; the canonical breakpoint pair used by every other
   redesigned page in this system. */
@media (max-width: 759px) {
  .kj-ps { padding: 0 20px; }
  .kj-ps__hero-band { padding: 0 20px; }
  .kj-ps__hero { padding: 24px 0 40px; }
  .kj-ps__h1 { font-size: 32px; }
  .kj-ps__sub { font-size: 16px; }

  .kj-ps__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  /* 2026-10-09: the card keeps its 24px padding and the 20px title on phones (design at 390) */

  .kj-ps__talk { margin-top: 40px; }
  .kj-ps__talk-h { font-size: 26px; }
  .kj-ps__contact { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .kj-ps__form-grid { grid-template-columns: 1fr; }
}


/* ============================================================================
   2026-09-15 — KJServices parity pass (bundle KJServices.dc.html inline
   styles): hero glows, #fff cards, contact grid 22px under its heading, form
   fields on the b3 tokens (1.5px #CBD3E0, r10/r12, coral ring), chips in the
   coral-50 "on" state, DS Button lg submit, side cards r20 / 24px with the
   13/800 coral key line and 24/22px display values, navy ISO card with the
   watermark badge. Overrides the older PDF-measured rules above.
   ============================================================================ */
.kj-ps__hero-band { position: relative; overflow: hidden; }
.kj-ps__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.kj-ps__glow--a { top: -200px; right: -140px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(254, 97, 108, .3), transparent 66%); filter: blur(10px); }
.kj-ps__glow--b { bottom: -240px; left: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255, 196, 115, .22), transparent 66%); }
.kj-ps__hero { overflow: visible; position: relative; z-index: 1; }
.kj-ps__cta-primary, .kj-ps__cta-outline, .kj-ps__submit { font-family: var(--kj-font-mulish, inherit); line-height: 1; letter-spacing: .01em; }
.kj-ps__cta-primary { border: 1px solid transparent; transition: transform .15s var(--kj-ease-out), box-shadow .2s; }
.kj-ps__cta-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55); }
.kj-ps__cta-outline:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); }
.kj-ps__card { background: #fff; transition: transform .25s var(--kj-ease-out), box-shadow .25s var(--kj-ease-out); }
.kj-ps__card:hover { transform: translateY(-3px); box-shadow: var(--kj-shadow-lg); }
.kj-ps__cta { font-family: var(--kj-font-mulish, inherit); letter-spacing: normal; transition: background .2s; }   /* 2026-10-10 (KJServices.html:53): no tracking on the pill — .01em made it 161 wide against the design's 158.4 */
.kj-ps__cta:hover { background: var(--kj-coral-100, #FFDDD9); }
.kj-ps__talk { margin-top: 64px; padding-bottom: 0; }
.kj-ps__contact { margin: 22px 0 80px; }
.kj-ps__form { background: #fff; border: 1px solid var(--kj-b3-stroke, #E2E7EF); box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4, 30, 66, .06)); }   /* 2026-10-09: shadow-xs like the cards */
.kj-ps__field, .kj-ps__chips-lbl { color: var(--kj-b3-body, #313C53); }   /* 2026-10-09: the design's --text-body labels */
.kj-ps__input { border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); color: var(--kj-b3-title, #041E42); transition: border-color .2s, box-shadow .2s; }
.kj-ps__input::placeholder { color: var(--kj-b3-faint, #9BA7BC); }
.kj-ps__input:focus { border-color: var(--kj-coral-400, #FE8079); box-shadow: var(--kj-ring); }
.kj-ps__input.errInput { border-color: var(--kj-b3-danger, #E5484D); box-shadow: none; }
.kj-ps__textarea { border-radius: 13px; }
/* 2026-10-09 (KJServices.html:192): chip off = 1.5px --border-subtle on #fff, on = coral-400 / coral-50 / coral-700 */
.kj-ps__chip { border: 1.5px solid var(--kj-b3-stroke, #E2E7EF); color: var(--kj-b3-body, #313C53); }
.kj-ps__chip.is-on { border-color: var(--kj-coral-400, #FE8079); background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-700, #CE3340); }
.kj-ps__err { font-size: 14px; color: #B4282C; font-weight: 600; }
.kj-ps__ok { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--kj-b3-success-bg, #E7F6EF); color: #0F7A50; font-size: 14px; font-weight: 600; animation: kjFadeUp .25s both; }
.kj-ps__err[hidden], .kj-ps__ok[hidden] { display: none; }
.kj-ps__form-note { color: var(--kj-b3-faint, #9BA7BC); }
/* 2026-10-10 (KJServices.html:80): the design's submit has border 0 and no tracking — the Sept
   pass's 1px transparent border + .01em (shared with the hero CTAs above) made it 4px wider */
.kj-ps__submit { font-weight: 800; border: 0; letter-spacing: normal; transition: transform .15s var(--kj-ease-out), box-shadow .2s; }
.kj-ps__submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55); }
/* 2026-10-09 (KJServices.html:84-99, item new-sections-9): aside cards r22, padding
   20, shadow-xs; the kicker 12px/800 .06em uppercase coral-600 with the head 8
   under; the WhatsApp pill h20 / 0 8 / success-bg / #0F7A50 / 11px 800; phone
   21px/800, hours 12.5 muted 4 under; e-mail 19px/800 (overflow-wrap anywhere);
   the ISO card a navy gradient, r22, padding 20, 17px/800 + 13px / 1.5 at .76 */
.kj-ps__cc { background: #fff; border: 1px solid var(--kj-b3-stroke, #E2E7EF); border-radius: 22px; padding: 20px; box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4, 30, 66, .06)); }
.kj-ps__cc--link:hover { border-color: var(--kj-coral-200, #FFC2BC); box-shadow: var(--kj-shadow-md); }
.kj-ps__cc-top { gap: 8px; margin-bottom: 8px; }
.kj-ps__cc-l { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kj-coral-600, #EE4753); }
.kj-ps__wa { height: 20px; padding: 0 8px; background: var(--kj-b3-success-bg, #E7F6EF); color: #0F7A50; font-size: 11px; font-weight: 800; }
.kj-ps__cc-v { display: block; margin: 0; font-family: var(--kj-font); font-weight: 800; font-size: 21px; letter-spacing: 0; color: var(--kj-b3-title, #041E42); }
.kj-ps__cc-v--mail { font-size: 19px; word-break: normal; overflow-wrap: anywhere; }
.kj-ps__cc-p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--kj-b3-muted, #6B7890); }
.kj-ps__cc--iso { position: relative; overflow: hidden; display: block; padding: 20px; border-radius: 22px; background: linear-gradient(135deg, #041E42 0%, #0B2D5C 100%); color: #fff; border: 0; box-shadow: none; }   /* 2026-10-10: no border at all (the design's section has none) — 110.5 tall like the design, not 112.5 */
.kj-ps__cc--iso img { position: absolute; right: -30px; bottom: -40px; width: 140px; height: auto; opacity: .12; }
.kj-ps__iso-t { position: relative; margin-bottom: 6px; font-family: var(--kj-font); font-weight: 800; font-size: 17px; color: #fff; }
.kj-ps__cc--iso .kj-ps__cc-p { position: relative; margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .76); }
/* the contact grid keeps form + 340 aside down to the phone breakpoint (the design at 900: 478 + 340) */
/* 2026-10-10 (orchestrator-applied from the verifier's new-sections-9 warn): the design's shell stacks [data-side-r] at <=899
   (root.x-dc.txt:75) — between 760 and 899 a 378-428px form beside the 340 aside was
   cramped. The form + aside pair therefore stacks from the design's own 899 down (900
   keeps the two columns, as measured on the design and pinned by the test). */
@media (max-width: 899px) {
  .kj-ps__contact { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 759px) {
  .kj-ps__contact { grid-template-columns: minmax(0, 1fr); gap: 18px; }   /* 2026-10-10: the design's gap is 18 at every width (the Sept phone rule above said 20) */
}
@media (max-width: 767px) {
  .kj-ps__form-foot { flex-direction: column; align-items: stretch; }
  .kj-ps__submit { width: 100%; }
  .kj-ps__talk-h { font-size: 26px; }
}

/* ============================================================================
   2026-10-11 — /publiko renders this page, and the operator named it the design
   ("/publiko — this has been changed in the design I submitted"). The values the
   10-10 passes kept (the hero band: not items 9 / 10) and the small deviations the
   publiko verifiers measured, from KJServices.html / root.x-dc.txt. Checked on the
   live page with this block injected client-side, against the bundle's render at
   1440 / 900 / 390 (publiko package, fix pass — docs/pages/pro-services.md).
   ============================================================================ */
/* hero band — KJServices.html:15-24 */
.kj-ps__hero-band { background: linear-gradient(135deg, #041E42 0%, #0B2D5C 55%, #14407A 100%); }
.kj-ps__glow--a { top: -80px; right: -120px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(254, 97, 108, .35), transparent 68%); filter: none; }
.kj-ps__glow--b { display: none; }
.kj-ps__hero-band .kj-ps__hero { max-width: 1136px; padding-bottom: 60px; }
.kj-ps { max-width: 1200px; }   /* content 1136, as the design's max-width 1200 + 32px padding */
.kj-ps__eyebrow { letter-spacing: .12em; }
.kj-ps__h1 { margin-top: 14px; }
.kj-ps__h1-em { color: var(--kj-coral-400, #FE8079); }   /* then pro-services.php's inline style can go */
.kj-ps__sub { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.kj-ps__hero-cta { gap: 10px; margin-top: 24px; }
.kj-ps__cta-primary, .kj-ps__cta-outline { height: 48px; padding: 0 24px; font-size: 15px; font-weight: 800; letter-spacing: normal; }
.kj-ps__cta-primary { border: 0; }
.kj-ps__cta-outline { padding: 0 22px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .07); }
/* the sections — KJServices.html:39 / :61-63 */
.kj-ps__grid { margin-top: 56px; }
.kj-ps__talk { margin-top: 56px; scroll-margin-top: 146px; }   /* then pro-services.php's inline style can go */
.kj-ps__talk-h { line-height: 1.08; letter-spacing: -.025em; }
.kj-ps__talk-p { font-size: 15px; line-height: 1.5; }
.kj-ps__textarea { font-weight: 500; }
@media (max-width: 767px) {
  .kj-ps__talk-h { font-size: 28px; }   /* [data-h1] at <=767 (root.x-dc.txt:169); overrides the 26px rules above */
}
@media (max-width: 759px) {
  .kj-ps, .kj-ps__hero-band { padding: 0 16px; }   /* [data-wrap] at <=767 */
  .kj-ps__hero-band .kj-ps__hero { padding: 56px 0 60px; }
  .kj-ps__h1 { font-size: 28px; }
  .kj-ps__grid, .kj-ps__talk { margin-top: 40px; }   /* [data-sec] at <=767 */
  .kj-ps__talk { scroll-margin-top: 130px; }
}
/* the privacy note = KJServices' lock glyph (13 px, fill currentColor) + the text, gap 7 (2026-10-11) */
.kj-ps__form-note { display: inline-flex; align-items: center; gap: 7px; }
.kj-ps__form-note svg { flex: none; }
/* the page ground = the 2026-10-09 shell's html, body --bg-subtle #F6F8FB (measured on #/publiko), not base.css's Batch 1-2
   --kj-surface-2 #F4F6F9 — as /kontakt (contact.css) and /blog (blogs.css) paint it (2026-10-11) */
body.kj-ps-page { background: var(--kj-b3-page, #F6F8FB); }