:root {
  --kie-ink: #101b31;
  --kie-text: #46556d;
  --kie-muted: #708096;
  --kie-red: #dd3548;
  --kie-red-bright: #ff4654;
  --kie-blue: #245796;
  --kie-steel: #92a2b5;
  --kie-line: #d7e0ea;
  --kie-paper: #fffefa;
  --kie-mist: #f4f7fa;
  --kie-warm: #f2e5d2;
}

body[data-city-pilot="kielce-trade-followup-v1"] {
  color: var(--kie-ink);
  background: #fff;
}

body[data-city-pilot="kielce-trade-followup-v1"] :is(#follow-up, #kalkulator, #odbior, #faq, #contact) {
  scroll-margin-top: 5.75rem;
}

body[data-city-pilot="kielce-trade-followup-v1"] main { overflow: clip; }

body[data-city-pilot="kielce-trade-followup-v1"] > footer,
body[data-city-pilot="kielce-trade-followup-v1"] > #cities-seo-grid {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: none !important;
}

.kie-shell,
.kie-editorial {
  width: min(calc(100% - 48px), 1168px);
  margin-inline: auto;
}

.kie-kicker {
  margin: 0 0 0.72rem;
  color: var(--kie-red);
  text-transform: uppercase;
}

.kie-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  padding: 0.74rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 0.68rem;
  text-decoration: none;
}

.kie-button--primary { color: #fff; background: var(--kie-ink); }
.kie-button--primary:hover { background: var(--kie-red); }
.kie-button--quiet { color: var(--kie-ink); border-color: var(--kie-line); background: #fff; }
.kie-button--quiet:hover { color: var(--kie-red); border-color: var(--kie-red); }

.kie-hero {
  padding: 6.25rem 1rem 1.15rem;
  background:
    linear-gradient(rgba(46, 73, 108, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 73, 108, 0.065) 1px, transparent 1px),
    #f7f9fb;
  background-size: 28px 28px;
  border-bottom: 1px solid var(--kie-line);
}

.kie-hero__grid {
  display: grid;
  min-height: 35rem;
  grid-template-columns: minmax(20rem, 0.84fr) minmax(0, 1.16fr);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--kie-line);
  border-radius: 1.15rem;
  box-shadow: 0 26px 70px rgba(16, 27, 49, 0.08);
}

.kie-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.kie-hero h1 { max-width: 16ch; margin: 0; color: var(--kie-ink); }
.kie-hero h1 em { display: block; color: var(--kie-red); font-style: normal; }
.kie-hero__lead { max-width: 42rem; margin: 1.25rem 0 0; color: var(--kie-text); }

.kie-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.45rem;
}

.kie-hero__signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: auto 0 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid var(--kie-line);
}

.kie-hero__signals div { min-width: 0; padding-right: 0.55rem; }
.kie-hero__signals div + div { padding-left: 0.55rem; border-left: 1px solid var(--kie-line); }
.kie-hero__signals dt { color: var(--kie-red); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.kie-hero__signals dd { margin: 0.22rem 0 0; color: var(--kie-text); font-size: 0.74rem; font-weight: 700; line-height: 1.38; }

.kie-hero__visual {
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  background: var(--kie-paper);
  border-left: 1px solid var(--kie-line);
}

.kie-hero__visual picture {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
}

.kie-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 29.75rem;
  object-fit: contain;
}

.kie-hero__visual figcaption {
  display: flex;
  min-height: 3.3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  color: var(--kie-muted);
  background: #fff;
  border-top: 1px solid var(--kie-line);
}

.kie-hero__visual figcaption strong { color: var(--kie-ink); }

.kie-contract,
.kie-evidence,
.kie-delivery,
.kie-stack,
.kie-faq {
  padding: 3rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--kie-line);
}

.kie-contract__grid {
  display: grid;
  grid-template-columns: minmax(17rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.kie-contract__intro h2,
.kie-evidence h2,
.kie-delivery h2,
.kie-stack h2,
.kie-faq h2 { margin: 0; color: var(--kie-ink); }

.kie-contract__intro > p:last-child,
.kie-delivery header > p:last-child,
.kie-faq header > p:last-of-type { margin: 1rem 0 0; color: var(--kie-text); }

.kie-contract__rail,
.kie-delivery ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--kie-line);
}

.kie-contract__rail { position: relative; }

.kie-contract__rail::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 4.9rem;
  width: 2px;
  content: "";
  background: var(--kie-line);
}

.kie-contract__rail li {
  position: relative;
  display: grid;
  min-height: 4.75rem;
  grid-template-columns: 3.8rem minmax(0, 1fr) minmax(7rem, 0.55fr);
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
}

.kie-contract__rail li::before {
  position: absolute;
  left: 4.53rem;
  width: 0.8rem;
  height: 0.8rem;
  content: "";
  background: #fff;
  border: 2px solid var(--kie-blue);
  border-radius: 50%;
}

.kie-contract__rail li + li { border-top: 1px solid var(--kie-line); }
.kie-contract__rail > li > span { color: var(--kie-red); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.kie-contract__rail strong { color: var(--kie-ink); font-size: 0.88rem; }
.kie-contract__rail p { margin: 0.2rem 0 0; color: var(--kie-text); font-size: 0.72rem; line-height: 1.45; }
.kie-contract__rail b { color: var(--kie-muted); font-size: 0.64rem; font-weight: 800; line-height: 1.35; text-align: right; text-transform: uppercase; }

.kie-contract__rail .kie-contract__result {
  background: #fff0f2;
  border-top: 2px solid var(--kie-red);
}

.kie-contract__rail .kie-contract__result::before {
  background: var(--kie-red);
  border-color: var(--kie-red);
  box-shadow: 0 0 0 4px #fff;
}

.kie-contract__rail .kie-contract__result b { color: var(--kie-red); }

.kie-evidence { background: #f7f9fb; }

.kie-evidence__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.kie-evidence__body > p { margin: 0; color: var(--kie-text); }

.kie-evidence__body aside {
  display: grid;
  grid-template-columns: 8.2rem minmax(0, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  color: var(--kie-text);
  background: #fff;
  border: 1px solid var(--kie-line);
  border-left: 3px solid var(--kie-red);
}

.kie-evidence__body aside strong { color: var(--kie-red); font-size: 0.72rem; text-transform: uppercase; }
.kie-evidence__body aside span { font-size: 0.78rem; line-height: 1.55; }
.kie-evidence__body > a { display: inline-flex; min-height: 44px; align-items: center; color: var(--kie-ink); font-size: 0.76rem; font-weight: 800; text-decoration: underline; text-underline-offset: 0.25rem; }

.kie-delivery__grid {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.kie-delivery ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kie-delivery li {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 1.05rem;
}

.kie-delivery li:nth-child(even) { border-left: 1px solid var(--kie-line); }
.kie-delivery li:nth-child(n + 3) { border-top: 1px solid var(--kie-line); }
.kie-delivery li > span { color: var(--kie-red); font-size: 0.65rem; font-weight: 800; }
.kie-delivery li strong { color: var(--kie-ink); font-size: 0.84rem; }
.kie-delivery li p { margin: 0.3rem 0 0; color: var(--kie-text); font-size: 0.72rem; line-height: 1.5; }
.kie-delivery li b { display: block; grid-column: 2; margin-top: 0.6rem; color: var(--kie-blue); font-size: 0.63rem; text-transform: uppercase; }

.kie-stack { background: #f7f9fb; }

.kie-stack__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.kie-stack ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--kie-line);
}

.kie-stack li {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 0.3rem;
  padding: 1.1rem 0.9rem;
}

.kie-stack li + li { border-left: 1px solid var(--kie-line); }
.kie-stack .iconify { width: 1.55rem; height: 1.55rem; margin-bottom: 0.3rem; }
.kie-stack strong { color: var(--kie-ink); font-size: 0.76rem; }
.kie-stack small { color: var(--kie-muted); font-size: 0.64rem; }

.kie-faq__grid {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.kie-faq header .kie-button { margin-top: 1.35rem; }
.kie-faq__list { border-block: 1px solid var(--kie-line); }
.kie-faq details + details { border-top: 1px solid var(--kie-line); }

.kie-faq summary {
  display: grid;
  min-height: 4.75rem;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0;
  cursor: pointer;
  list-style: none;
}

.kie-faq summary::-webkit-details-marker { display: none; }
.kie-faq summary span { color: var(--kie-red); font-size: 0.65rem; font-weight: 800; }
.kie-faq summary strong { color: var(--kie-ink); font-size: 0.84rem; }
.kie-faq summary i { position: relative; width: 1.25rem; height: 1.25rem; border: 1px solid var(--kie-line); border-radius: 50%; }
.kie-faq summary i::before,
.kie-faq summary i::after { position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 1px; content: ""; background: var(--kie-red); transform: translate(-50%, -50%); }
.kie-faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.kie-faq details[open] summary i::after { display: none; }
.kie-faq details > div { padding: 0 2.6rem 1rem 3.3rem; color: var(--kie-text); font-size: 0.76rem; line-height: 1.6; }
.kie-faq summary:focus-visible { outline: 3px solid rgba(221, 53, 72, 0.28); outline-offset: 4px; }

.kie-editorial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.35rem;
}

.kie-editorial > div { display: grid; gap: 0.25rem; }
.kie-editorial strong { color: var(--kie-ink); font-size: 0.74rem; }
.kie-editorial span { color: var(--kie-muted); }
.kie-editorial nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.85rem 1.1rem; }
.kie-editorial a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; color: var(--kie-text); font-size: 0.7rem; font-weight: 800; }
.kie-editorial a:hover { color: var(--kie-red); }
.kie-nowrap { white-space: nowrap; }

@media (max-width: 1040px) {
  .kie-hero__grid { grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr); }
  .kie-hero__copy { padding: 2rem; }
  .kie-hero__signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0; }
  .kie-hero__signals div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kie-stack ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kie-stack li:nth-child(3) { border-left: 0; border-top: 1px solid var(--kie-line); }
  .kie-stack li:nth-child(4) { border-top: 1px solid var(--kie-line); }
}

@media (max-width: 800px) {
  .kie-shell,
  .kie-editorial { width: min(calc(100% - 32px), 1168px); }

  .kie-hero { padding: 5.45rem 0.8rem 0.8rem; }
  .kie-hero__grid { min-height: 0; grid-template-columns: 1fr; }
  .kie-hero__copy { padding: 2rem 1.45rem 1.45rem; }
  .kie-hero__visual { min-height: 25rem; border-top: 1px solid var(--kie-line); border-left: 0; }
  .kie-hero__visual img { max-height: 25rem; }

  .kie-contract__grid,
  .kie-evidence__grid,
  .kie-delivery__grid,
  .kie-stack__grid,
  .kie-faq__grid { grid-template-columns: 1fr; gap: 1.75rem; }

  .kie-contract,
  .kie-evidence,
  .kie-delivery,
  .kie-stack,
  .kie-faq { padding: 2.45rem 1rem; }

  .kie-editorial { align-items: flex-start; flex-direction: column; }
  .kie-editorial nav { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .kie-shell,
  .kie-editorial { width: calc(100% - 24px); }

  .kie-hero { padding-inline: 0.4rem; }
  .kie-hero__grid { border-radius: 0.95rem; }
  .kie-hero__copy { padding: 1.7rem 1rem 1.2rem; }
  .kie-hero h1 { max-width: 10.5ch; }
  .kie-hero__actions { display: grid; grid-template-columns: 1fr; }
  .kie-button { width: 100%; }
  .kie-hero__signals { margin-top: 1.4rem; }
  .kie-hero__visual { min-height: 28rem; }
  .kie-hero__visual picture { padding: 0.4rem; }
  .kie-hero__visual img { max-height: 27rem; }
  .kie-hero__visual figcaption { align-items: flex-start; flex-direction: column; gap: 0.15rem; }

  .kie-contract,
  .kie-evidence,
  .kie-delivery,
  .kie-stack,
  .kie-faq { padding-inline: 0.75rem; }

  .kie-contract__rail::before { left: 2.2rem; }
  .kie-contract__rail li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.7rem; padding-inline: 0.35rem; }
  .kie-contract__rail li::before { left: 1.82rem; }
  .kie-contract__rail li > b { grid-column: 2; text-align: left; }

  .kie-evidence__body aside { grid-template-columns: 1fr; gap: 0.4rem; }
  .kie-delivery ol { grid-template-columns: 1fr; }
  .kie-delivery li:nth-child(even) { border-left: 0; }
  .kie-delivery li + li { border-top: 1px solid var(--kie-line); }
  .kie-stack ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kie-faq summary { grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; }
  .kie-faq details > div { padding-left: 2.8rem; padding-right: 0; }
  .kie-editorial { padding-inline: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-city-pilot="kielce-trade-followup-v1"] *,
  body[data-city-pilot="kielce-trade-followup-v1"] *::before,
  body[data-city-pilot="kielce-trade-followup-v1"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Keep the canonical fixed header opaque while local editorial content scrolls beneath it. */
#navbar.glass-nav { background: rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
