:root{
    --kj-graphite:#22252B; --kj-graphite-light:#2B2E34; --kj-copper:#B87357; --kj-copper-hover:#A2604A;
    --kj-stone:#F2EFEA; --kj-ivory:#FAF7F1; --kj-gray:#6B6F76; --kj-text:#22252B; --kj-muted:#5A5F66;
    --kj-line:rgba(34,37,43,.12); --kj-line-dark:rgba(250,247,241,.14); --kj-green:#1F3D34;
    --kj-serif:'Cormorant Garamond','Times New Roman',serif; --kj-sans:'Inter',system-ui,sans-serif; --kj-mono:'JetBrains Mono',monospace;
    --kj-container:1240px; --kj-gutter:clamp(20px,4vw,40px);
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--kj-ivory);color:var(--kj-text);font-family:var(--kj-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:var(--kj-copper);text-decoration:none;transition:color .25s;}
  a:hover{color:var(--kj-copper-hover);}
  .kj-wrap{width:100%;max-width:var(--kj-container);margin:0 auto;padding:0 var(--kj-gutter);}

  /* HERO */
  .kj-hero{background:linear-gradient(163deg,#272A31 0%,#22252B 46%,#1E2126 100%);color:var(--kj-ivory);}
  .kj-hero .kj-wrap{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(48px,6vw,80px);}
  .kj-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:22px;font-family:var(--kj-sans);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--kj-copper);}
  .kj-eyebrow.on-dark{color:rgba(250,247,241,.66);}
  .kj-eyebrow .rule{width:40px;height:1px;background:var(--kj-copper);flex:none;}
  .kj-h1{font-family:var(--kj-serif);font-weight:300;font-size:clamp(30px,4.55vw,64px);line-height:1.1;letter-spacing:-.005em;margin:0;text-wrap:pretty;}
  .kj-hero-lead{font-size:17px;line-height:1.78;color:rgba(250,247,241,.78);margin:clamp(22px,3vw,34px) 0 0;max-width:60ch;text-wrap:pretty;}
  .kj-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px;}
  .kj-btn{background:var(--kj-copper);color:var(--kj-ivory)!important;padding:17px 30px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:background .25s;}
  .kj-btn:hover{background:var(--kj-copper-hover);}
  .kj-btn-ghost{border:1px solid rgba(250,247,241,.26);color:var(--kj-ivory)!important;padding:17px 30px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:border-color .25s;}
  .kj-btn-ghost:hover{border-color:var(--kj-copper);}
  .kj-btn-dark{border:1px solid var(--kj-graphite);color:var(--kj-graphite)!important;padding:16px 28px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s;}
  .kj-btn-dark:hover{background:var(--kj-graphite);color:var(--kj-ivory)!important;}
  .kj-hero-note{font-size:13px;line-height:1.7;color:rgba(250,247,241,.46);margin:32px 0 0;max-width:64ch;border-top:1px solid rgba(250,247,241,.12);padding-top:18px;}

  /* SECTIONS */
  .kj-section{padding:clamp(64px,8vw,120px) 0;background:var(--kj-ivory);}
  .kj-section.stone{background:var(--kj-stone);}
  .kj-section.graphite{background:var(--kj-graphite);color:var(--kj-ivory);}
  .kj-eyebrow.light{color:var(--kj-copper);}
  .kj-eyebrow .rule.short{width:28px;}
  .kj-h2{font-family:var(--kj-serif);font-weight:400;font-size:clamp(27px,3.4vw,44px);line-height:1.16;margin:0;color:inherit;text-wrap:pretty;}
  .kj-h2.on-dark{color:var(--kj-ivory);}
  .kj-p{font-size:16px;line-height:1.8;color:var(--kj-muted);max-width:68ch;text-wrap:pretty;}
  .kj-p.lead{font-size:17.5px;color:var(--kj-text);}
  .kj-p.on-dark{color:rgba(250,247,241,.76);}
  .kj-sec-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:clamp(40px,5vw,64px);}

  /* SERVICE GRID */
  .kj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--kj-line);border-left:1px solid var(--kj-line);}
  .kj-card{padding:32px 30px;border-right:1px solid var(--kj-line);border-bottom:1px solid var(--kj-line);display:flex;flex-direction:column;gap:12px;min-height:180px;}
  .kj-card .num{font-family:var(--kj-mono);font-size:11px;color:var(--kj-copper);letter-spacing:.06em;}
  .kj-card h3{font-family:var(--kj-serif);font-weight:500;font-size:22px;line-height:1.28;margin:0;color:var(--kj-text);}
  .kj-card p{font-size:14.5px;line-height:1.72;color:var(--kj-muted);margin:0;}
  .kj-grid.on-dark{border-color:var(--kj-line-dark);}
  .kj-grid.on-dark .kj-card{border-color:var(--kj-line-dark);}
  .kj-grid.on-dark h3{color:var(--kj-ivory);}
  .kj-grid.on-dark p{color:rgba(250,247,241,.7);}

  /* FAQ */
  .kj-faq{border-top:1px solid var(--kj-line);}
  .kj-faq details{border-bottom:1px solid var(--kj-line);padding:6px 0;}
  .kj-faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-family:var(--kj-serif);font-size:22px;font-weight:500;color:var(--kj-text);line-height:1.3;}
  .kj-faq summary::-webkit-details-marker{display:none;}
  .kj-faq summary::after{content:'+';position:absolute;right:6px;top:20px;font-family:var(--kj-mono);font-size:20px;color:var(--kj-copper);transition:transform .25s;}
  .kj-faq details[open] summary::after{content:'–';}
  .kj-faq .ans{font-size:15.5px;line-height:1.8;color:var(--kj-muted);padding:0 0 24px;max-width:80ch;text-wrap:pretty;}

  /* PROCESS */
  .kj-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-top:1px solid var(--kj-line);}
  .kj-step{padding:28px 26px 28px 0;border-right:1px solid var(--kj-line);position:relative;}
  .kj-step:last-child{border-right:none;}
  .kj-step .dot{position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--kj-copper);border-radius:50%;}
  .kj-step .k{font-family:var(--kj-mono);font-size:11px;color:var(--kj-copper);}
  .kj-step h4{font-family:var(--kj-serif);font-weight:500;font-size:21px;margin:12px 0 8px;color:var(--kj-text);}
  .kj-step p{font-size:14px;line-height:1.7;color:var(--kj-muted);margin:0;}

  /* CTA BAND */
  .kj-cta-band{background:var(--kj-graphite);color:var(--kj-ivory);}
  .kj-cta-band .kj-wrap{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);}
  .kj-cta-band h2{font-family:var(--kj-serif);font-weight:300;font-size:clamp(26px,3.4vw,44px);line-height:1.16;margin:0 0 18px;color:var(--kj-ivory);max-width:22ch;}

  /* RELATED */
  .kj-related{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;}
  .kj-related a{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--kj-copper);}
  .kj-disclaimer{font-size:12.5px;line-height:1.7;color:var(--kj-gray);font-style:italic;margin-top:28px;max-width:80ch;}

  

.kj-site-head{position:sticky;top:0;z-index:60;background:rgba(250,247,241,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--kj-line);}
.kj-site-head .kj-wrap{min-height:80px;display:flex;align-items:center;gap:clamp(16px,3vw,40px);}
.kj-logo{display:flex;align-items:center;gap:14px;flex:none;}
.kj-mark{position:relative;width:44px;height:44px;display:grid;place-items:center;border:1.4px solid var(--kj-graphite);font-family:var(--kj-serif);font-weight:500;font-size:21px;letter-spacing:.06em;color:var(--kj-graphite);}
.kj-mark .d{position:absolute;top:7px;right:10px;width:3px;height:3px;background:var(--kj-copper);border-radius:50%;}
.kj-mark .c{position:absolute;width:10px;height:10px;}
.kj-mark .c.tl{top:-1.4px;left:-1.4px;border-top:1.6px solid var(--kj-copper);border-left:1.6px solid var(--kj-copper);}
.kj-mark .c.br{bottom:-1.4px;right:-1.4px;border-bottom:1.6px solid var(--kj-copper);border-right:1.6px solid var(--kj-copper);}
.kj-word{display:flex;flex-direction:column;gap:3px;}
.kj-word b{font-family:var(--kj-serif);font-size:20px;font-weight:500;letter-spacing:.11em;line-height:1;color:var(--kj-graphite);white-space:nowrap;}
.kj-word em{font-style:normal;font-size:8.5px;font-weight:500;letter-spacing:.3em;color:var(--kj-copper);line-height:1;white-space:nowrap;}
.kj-site-nav{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto;}
.kj-site-nav a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--kj-muted);}
.kj-site-nav a:hover{color:var(--kj-graphite);}
.kj-head-cta{background:var(--kj-copper);color:var(--kj-ivory);padding:13px 22px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;flex:none;}
.kj-head-cta:hover{background:var(--kj-copper-hover);color:var(--kj-ivory);}
.kj-site-foot{background:#1E2126;color:rgba(250,247,241,.5);padding:28px 0;font-size:12.5px;}
.kj-site-foot .kj-wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;}
.kj-site-foot a{color:rgba(250,247,241,.72);}
.kj-site-foot .kj-soc{display:inline-flex;align-items:center;gap:10px;}
.kj-site-foot .kj-soc a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgba(250,247,241,.2);color:rgba(250,247,241,.72);transition:border-color .25s ease,color .25s ease;}
.kj-site-foot .kj-soc a:hover{border-color:#B87357;color:#DDA285;}
.kj-site-foot .kj-soc svg{width:15px;height:15px;display:block;}
/* NAGŁÓWEK NA WĄSKICH EKRANACH
   Wcześniej poniżej 820 px nawigacja znikała bez zamiennika, a CTA — bez
   `margin-left:auto` i z `white-space:nowrap` — wychodziło poza ekran
   (przy 390 px pasek potrzebował ok. 533 px). `overflow-x:hidden` na body
   ucinało je po cichu. Teraz pasek łamie się na dwa rzędy: logo + CTA,
   pod spodem nawigacja oddzielona włoskową linią. */
@media(max-width:820px){
  .kj-site-head .kj-wrap{flex-wrap:wrap;min-height:0;padding-top:12px;padding-bottom:0;row-gap:0;}
  .kj-head-cta{margin-left:auto;}
  .kj-site-nav{order:3;flex-basis:100%;margin-left:0;margin-top:12px;gap:20px;
    border-top:1px solid var(--kj-line);padding:11px 0;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .kj-site-nav::-webkit-scrollbar{display:none;}
  .kj-site-nav a{white-space:nowrap;padding:2px 0;}
}
@media(max-width:560px){
  .kj-word{display:none;}
  .kj-mark{width:40px;height:40px;font-size:19px;}
  .kj-head-cta{padding:12px 16px;font-size:11px;letter-spacing:.1em;}
  .kj-site-nav{gap:16px;}
  .kj-site-nav a{font-size:11.5px;letter-spacing:.1em;}
}

/* ==========================================================================
   RUCH — przejścia między podstronami, pasek postępu, mikroreakcje
   Dodane 4 IX 2026. Wszystko jest progresywnym wzmocnieniem: przeglądarka
   bez wsparcia dostaje dokładnie tę samą stronę, tylko bez animacji.
   ========================================================================== */
:root{
  --kj-ease:cubic-bezier(.22,.61,.36,1);
  --kj-ease-out:cubic-bezier(.23,1,.32,1);
}

/* --- przejście między dokumentami ---
   Musi być zadeklarowane po obu stronach nawigacji: tu i w index.html. --- */
@view-transition{navigation:auto}
@keyframes kjVtFade{from{opacity:0}to{opacity:1}}
::view-transition-old(root){animation:kjVtFade .18s var(--kj-ease-out) reverse both;}
::view-transition-new(root){animation:kjVtFade .3s var(--kj-ease-out) .04s both;}
.kj-site-head{view-transition-name:kj-topbar;}
::view-transition-group(kj-topbar){animation-duration:.28s;}

/* --- pasek postępu czytania pod nagłówkiem --- */
@keyframes kjProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .kj-site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
      background:var(--kj-copper);transform:scaleX(0);transform-origin:left center;
      animation:kjProgress linear both;animation-timeline:scroll(root block);}
  }
}

/* --- mikroreakcje: uniesienie tylko dla myszy, wciśnięcie dla wszystkich --- */
.kj-btn,.kj-btn-ghost,.kj-btn-dark,.kj-head-cta{
  transition:background .2s var(--kj-ease),color .2s var(--kj-ease),
             border-color .2s var(--kj-ease),transform .2s var(--kj-ease-out);
}
@media (hover:hover) and (pointer:fine){
  .kj-btn:hover,.kj-btn-ghost:hover,.kj-btn-dark:hover,.kj-head-cta:hover{transform:translateY(-1px);}
}
.kj-btn:active,.kj-btn-ghost:active,.kj-btn-dark:active,.kj-head-cta:active{
  transform:translateY(0) scale(.985);transition-duration:.1s;
}
/* linki „powiązane" i nawigacja — podkreślenie rysowane od lewej */
.kj-related a,.kj-site-nav a{position:relative;}
.kj-related a::after,.kj-site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--kj-ease-out);}
@media (hover:hover) and (pointer:fine){
  .kj-related a:hover::after,.kj-site-nav a:hover::after{transform:scaleX(1);}
}

/* --- FAQ: rozwijanie odpowiedzi zamiast skoku --- */
.kj-faq summary::after{transition:transform .25s var(--kj-ease-out),color .2s var(--kj-ease);}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords;}
  @media (prefers-reduced-motion:no-preference){
    .kj-faq details::details-content{block-size:0;overflow:hidden;
      transition:block-size .3s var(--kj-ease-out),content-visibility .3s allow-discrete;}
    .kj-faq details[open]::details-content{block-size:auto;}
  }
}

  /* --- Zdjęcia sekcyjne na podstronach (4 IX 2026) --- */
  /* Kadr: width:100% + height:auto = zero przycięcia, całe zdjęcie zawsze widoczne.
     Atrybuty width/height na <img> trzymają miejsce, więc nie ma skoku layoutu. */
  .kj-media{margin:clamp(30px,4.5vw,58px) auto 0;padding:0 var(--kj-gutter);max-width:var(--kj-container);}
  .kj-media__inner{margin:0 auto;}
  .kj-media--land .kj-media__inner{max-width:1000px;}
  .kj-media--sq   .kj-media__inner{max-width:640px;}
  .kj-media--port .kj-media__inner{max-width:470px;}
  .kj-media--wide{max-width:none;padding:0;}
  .kj-figure{position:relative;overflow:hidden;background:var(--kj-stone);}
  .kj-figure picture{display:block;}
  .kj-figure img{display:block;width:100%;height:auto;filter:grayscale(.2) contrast(1.02);}
  .kj-media__cap{margin:14px 0 0;font-family:var(--kj-mono);font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--kj-gray);display:flex;align-items:center;gap:12px;}
  .kj-media__cap::before{content:"";width:26px;height:1px;background:var(--kj-copper);flex:none;}

  /* Odsłonięcie przy wejściu w kadr — oddalenie z 1.06 do 1.
     Ten sam mechanizm co na stronie głównej: .js-anim + .is-in z IntersectionObserver. */
  /* Zdjęcie wjeżdża z dołu w kadr. Start jest powiększony o 8%, bo inaczej
     przesunięcie w górę odsłoniłoby pustą lukę u dołu ramki. 8% powiększenia
     daje 4% zapasu z każdej strony, przy przesunięciu o 3% luka się nie pojawia. */
  @keyframes kjImgIn{
    from{opacity:0;transform:translateY(3%) scale(1.08)}
    to  {opacity:1;transform:translateY(0)   scale(1)}
  }
  @keyframes kjCapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .js-anim .kj-figure[data-img]:not(.is-in) picture{opacity:0;}
  .js-anim .kj-figure[data-img].is-in picture{animation:kjImgIn .95s var(--kj-ease-out) both;}
  /* podpis wchodzi chwilę po zdjęciu, nie razem z nim */
  .js-anim .kj-media__cap{opacity:0;}
  .js-anim .kj-figure[data-img].is-in ~ .kj-media__cap{animation:kjCapIn .5s var(--kj-ease-out) .22s both;}

  /* --- Telefon --- */
  /* Zdjęcie na całą szerokość ekranu: na 375 px marginesy zjadały 40 px kadru,
     a to jest główny nośnik treści na mobile. Podpis zostaje w siatce tekstu. */
  @media (max-width:759px){
    .kj-media{padding:0;max-width:none;}
    .kj-media--land .kj-media__inner,
    .kj-media--sq   .kj-media__inner,
    .kj-media--port .kj-media__inner{max-width:none;}
    .kj-media__cap{padding:0 var(--kj-gutter);}
    /* Ruch mocniejszy, bo na małym kadrze 3% to ok. 7 px — niewidoczne.
       Powiększenie rośnie razem z przesunięciem (6% zapasu > 5% ruchu), więc luka nadal się nie pojawia. */
    .js-anim .kj-figure[data-img].is-in picture{animation-name:kjImgInMobile;animation-duration:.8s;}
  }
  @keyframes kjImgInMobile{
    from{opacity:0;transform:translateY(5%) scale(1.12)}
    to  {opacity:1;transform:translateY(0)   scale(1)}
  }

  /* Przybliżenie przy najechaniu — tylko na urządzeniach z prawdziwym kursorem */
  @media (hover:hover) and (pointer:fine){
    .kj-figure img{transition:transform .7s var(--kj-ease-out),filter .7s var(--kj-ease-out);}
    .kj-figure:hover img{transform:scale(1.035);filter:grayscale(.06) contrast(1.03);}
  }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.12s!important;}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .kj-figure[data-img]:not(.is-in) picture,
  .js-anim .kj-figure[data-img].is-in picture,
  .js-anim .kj-media__cap{opacity:1!important;transform:none!important;}
  .kj-figure:hover img{transform:none!important;}
}