/* KUK SYSTEMS 4.1 / M12A. Service pages (START, NAPRAWA, SYSTEM), the reception demonstration, Roads offer details, navigation across pages.
   Extends the approved A3/A4 system only: tokens, type, CTA mechanics and motion verbs (Odsłoń clip wipe, Wypełnij fill) come from a3.css/a4.css. No new colours, fonts or verbs. */

/* ---------- Navigation across pages ---------- */
/* Expanded navigation from 1024px: START, NAPRAWA, SYSTEM, Realizacje, Jak pracuję, Kontakt. Below that the accessible menu button (a4.js dialog) takes over. */
/* M12A-R2: one typographic rule for all six links (the route codes keep their capitals, nothing else differs) */
/* M12A-R3: all six labels in capitals (CSS only: the markup keeps natural case for screen readers) */
.desktop-nav a,.desktop-nav .nav-route{font:700 12px/1.2 Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);padding:6px 0}
.desktop-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--blue)}
.desktop-nav a:hover{color:var(--blue)}
@media(min-width:1024px){
  .system-bar{gap:20px;padding:0 28px}
  .desktop-nav{display:flex;align-items:center;gap:clamp(14px,1.5vw,26px);margin-left:auto;white-space:nowrap}
  html.js .menu-toggle{display:none}
  body.kuk-site .system-bar .bar-cta.cta-motion{margin-left:clamp(8px,1vw,16px)}
}
@media(min-width:1280px){.system-bar{gap:30px;padding:0 32px}}
/* M12A-R2: no selection counter in the header. The element stays in the DOM because the approved A3 script (a3.js) writes into it; selections, their styling and the summary are unchanged. */
body.kuk-site .system-bar .needs-meter{display:none!important}
/* below 1024px the brand pushes the remaining controls (CTA, menu button) to the right edge on every page */
@media(max-width:1023px){body.kuk-site .system-bar>.brand{margin-right:auto}}
/* menu (below 1024px): the same six destinations; the current page is underlined */
.menu-nav a[aria-current="page"] .menu-label{box-shadow:inset 0 -2px 0 var(--blue)}
/* M12A-R3: menu labels share one size, weight and tracking, all in capitals */
.menu-nav a{font-size:clamp(22px,6.4vw,30px);letter-spacing:.01em}
.menu-nav .menu-label{text-transform:uppercase}
@media(hover:hover) and (pointer:fine){.menu-nav a:hover .menu-label{color:var(--blue)}}
/* M12A-R3: the summary is a separate contextual action under the six links, not a seventh destination */
.menu-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 20px;background:var(--blue);color:var(--ink);font-size:14px;font-weight:700}
@media(hover:hover) and (pointer:fine){.menu-summary:hover{background:var(--mint)}}

/* ---------- Home: Roads, price and link ---------- */
.path-more{display:grid;gap:10px;align-content:start;padding:20px var(--pp) 24px;border-top:1px solid var(--ink-line)}
@media(min-width:1024px){.path-grid{grid-template-rows:repeat(7,auto)}.path{grid-row:span 7}}
.path-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.path-price b{font-size:clamp(24px,2.2vw,32px);font-weight:700;letter-spacing:-.045em;line-height:1.1}
.path-price .mono{color:var(--muted-on-ink);text-transform:none;letter-spacing:.02em;font-size:12px}
.path-link{justify-self:start}
.path-note{margin:clamp(28px,3vw,44px) 0 0;max-width:60em;color:var(--muted-on-ink);text-transform:none;letter-spacing:.02em;font-size:12px;line-height:1.6}

/* ---------- Reception teaser (home) ---------- */
.reception{background:var(--ink);padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,88px);border-bottom:1px solid var(--ink-line)}
.reception .sec-index,.sp-hero .sec-index,.demo .sec-index,.sp-process .sec-index{color:var(--blue)}
.reception .sec-lead,.demo .sec-lead,.sp-process .sec-lead{color:#b8c1ba}
.rx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:22px;color:var(--muted-on-ink);font-size:13px;line-height:1.5}
.rx-bar p{max-width:56em}
.demo-tag{display:inline-block;flex:none;border:1px solid var(--blue);color:var(--blue);padding:3px 7px;font-size:10px;line-height:1;letter-spacing:.09em}
.rx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px}
.rx-step{position:relative;display:grid;gap:4px;width:100%;min-height:64px;padding:16px 0 12px;border:0;background:none;color:var(--muted-on-ink);text-align:left;cursor:pointer;font:inherit}
.rx-step::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink-line)}
.rx-step::after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease-cta)}
.rx-step.is-done::after,.rx-step[aria-current="step"]::after{transform:scaleX(1)}
.rx-step[aria-current="step"]{color:var(--paper)}
.rx-num{color:var(--blue)}
.rx-tab{font:700 13px/1.25 Montserrat,sans-serif;letter-spacing:-.01em}
@media(hover:hover) and (pointer:fine){.rx-step:hover{color:var(--paper)}}
.rx-step:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
html:not(.js) .rx-steps{display:none}
.rx-panels{margin-top:clamp(24px,3vw,40px)}
.rx-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(32px,5vw,80px);align-items:start}
.rx-panel h3{font-size:clamp(24px,2.4vw,36px);font-weight:700;letter-spacing:-.05em;line-height:1.08}
.rx-kicker{display:block;margin-bottom:10px;color:var(--blue)}
.rx-panel>p{color:var(--soft-on-ink);line-height:1.65;max-width:34em;grid-column:1}
.rx-panel .rx-mini{grid-column:2;grid-row:1 / span 2}
html:not(.js) .rx-panel{padding:28px 0;border-top:1px solid var(--ink-line)}
.rx-panel:not([hidden]){animation:rx-in 380ms var(--ease-cta)}
@keyframes rx-in{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.rx-more{margin-top:clamp(28px,3vw,44px)}
.mini{background:#202322;padding:clamp(18px,2vw,28px);display:grid;gap:12px;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.bubble{margin:0;max-width:30em;padding:12px 16px;font-size:14px;line-height:1.55}
.bubble--visitor{justify-self:end;background:var(--paper);color:var(--ink);font-weight:500}
.bubble--assistant{justify-self:start;background:#2b2f2d;border-left:3px solid var(--blue);color:var(--paper)}
.mini-slots{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.slot{display:grid;place-items:center;min-height:44px;border:1px solid var(--ink-line);font:500 13px 'Roboto Mono',monospace;color:var(--soft-on-ink)}
.slot.is-on{background:var(--blue);border-color:var(--blue);color:var(--ink);font-weight:700}
.mini-note{background:var(--mint);color:var(--ink)}
.mini-note .mono{color:#2b3a32}
.mini-note p+p{font-size:15px;font-weight:500;line-height:1.55}
@media(max-width:900px){
  .rx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rx-panel{grid-template-columns:minmax(0,1fr)}
  .rx-panel .rx-mini{grid-column:1;grid-row:auto}
}

/* ---------- Service pages: hero ---------- */
.sp-hero{position:relative;background:var(--ink);color:var(--paper);padding:calc(64px + clamp(44px,6vw,96px)) 0 clamp(64px,8vw,120px);border-bottom:1px solid var(--ink-line);overflow:hidden}
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px clamp(40px,7vw,120px);align-items:end}
.sp-hero h1{font-size:clamp(36px,5.2vw,82px);font-weight:700;letter-spacing:-.058em;line-height:1.03;text-wrap:balance;max-width:13.5em}
.sp-lead{margin-top:clamp(22px,2.4vw,34px);max-width:35em;color:var(--soft-on-ink);font-size:clamp(16px,1.25vw,19px);line-height:1.65}
.sp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;margin-top:clamp(28px,3vw,44px)}
.sp-price{position:relative;z-index:1;background:#202322;padding:clamp(22px,2.4vw,34px);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.sp-price-label{color:var(--blue)}
.sp-price-num{margin-top:12px;font-size:clamp(38px,4.4vw,64px);font-weight:700;letter-spacing:-.06em;line-height:1}
.sp-price-num--text{font-size:clamp(28px,3vw,42px)}
.sp-price-note{margin-top:10px;color:var(--soft-on-ink);font-size:14px;line-height:1.5}
.sp-chips{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--ink-line);display:flex;flex-wrap:wrap;gap:8px}
.sp-chips li{border:1px solid var(--ink-line);padding:6px 10px;font:500 11px/1.2 'Roboto Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--soft-on-ink)}
.sp-slash{position:absolute;top:96px;bottom:-1px;left:calc(var(--g) + (100% - 2 * var(--g)) * .6);width:1px;background:var(--blue);transform:skewX(-18.43deg);transform-origin:bottom;opacity:.9;pointer-events:none}
@media(max-width:1023px){.sp-hero-grid{grid-template-columns:minmax(0,1fr);align-items:start}.sp-slash{display:none}.sp-hero{padding-top:calc(54px + 40px)}}

/* ---------- Light sections ---------- */
.sp-features,.sp-scope,.sp-modules,.sp-final{background:var(--paper);color:var(--ink)}
.sp-features,.sp-modules{padding:clamp(80px,9vw,128px) 0}
.sp-scope{padding:clamp(72px,8vw,112px) 0}
.sp-features .sec-lead,.sp-modules .sec-lead{color:var(--soft-on-paper)}
.sp-features a:focus-visible,.sp-features button:focus-visible,.sp-scope a:focus-visible,.sp-modules a:focus-visible,.sp-modules button:focus-visible,.sp-modules input:focus-visible+span,.sp-final a:focus-visible,.sp-final button:focus-visible{outline-color:var(--ink)}
.fcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(24px,3vw,48px)}
.fcard{border-top:2px solid var(--ink);padding-top:18px;display:grid;align-content:start;gap:10px}
.fcard-n{color:var(--soft-on-paper)}
.fcard-t{margin:0;font-size:13px;letter-spacing:.07em;color:var(--ink)}
.fcard p:last-child{line-height:1.65;color:var(--soft-on-paper);max-width:28em}
@media(max-width:1023px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.fcards{grid-template-columns:minmax(0,1fr)}}
.sp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(40px,7vw,112px);align-items:start}
.sp-block h2,.sp-final h2,.sp-after h2{font-size:clamp(28px,3.2vw,50px);font-weight:700;letter-spacing:-.055em;line-height:1.06;text-wrap:balance}
.sp-p{margin-top:18px;max-width:34em;color:var(--soft-on-paper);line-height:1.7}
.sp-p--ink{color:var(--soft-on-ink)}
.sp-care{margin-top:24px;padding-top:18px;border-top:1px solid var(--paper-line);color:var(--soft-on-paper);line-height:1.65;font-size:15px}
.sp-care b{display:block;margin-bottom:6px;color:var(--ink)}
@media(max-width:900px){.sp-two{grid-template-columns:minmax(0,1fr)}}
.sp-faq{padding-top:clamp(72px,8vw,112px)}
.sp-final{padding:clamp(72px,8vw,120px) 0;border-top:1px solid var(--paper-line)}
.sp-final-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:center}
.sp-final-actions{display:grid;justify-items:start;gap:6px}
.sp-final .text-link{border-bottom-color:rgba(23,25,24,.5)}
@media(hover:hover) and (pointer:fine){.sp-final .text-link:hover{border-color:var(--blue);color:var(--ink)}}
@media(max-width:900px){.sp-final-grid{grid-template-columns:minmax(0,1fr)}}
.text-inline{border-bottom:1px solid currentColor}

/* ---------- Full reception demo (START) ---------- */
.demo{background:var(--ink);padding:clamp(80px,9vw,128px) 0 clamp(72px,8vw,112px)}
.rx--full .rx-steps{margin-bottom:clamp(22px,2.6vw,36px)}
.rx-stage{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr) minmax(0,9fr);gap:clamp(16px,2vw,28px);align-items:stretch}
.rx-win{display:grid;align-content:start;gap:14px;background:#202322;padding:clamp(18px,2vw,26px);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);transition:opacity 380ms var(--ease-cta)}
.rx.is-live .rx-win:not(.is-active){opacity:.4}
.rx-win-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ink-line)}
.rx-win-head h3{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.rx-win-head h3:focus{outline:0}
.rx-eg{color:var(--muted-on-ink);font-weight:500}
.rx-log{display:grid;gap:10px;align-content:start}
.rx-src{color:var(--muted-on-ink);text-transform:none;letter-spacing:.02em;font-size:11px;line-height:1.5}
.msg.is-typing .bubble::before{content:'';display:block;width:34px;height:8px;background:radial-gradient(circle,var(--soft-on-ink) 3px,transparent 3.5px) 0 0/11px 8px repeat-x;animation:rx-dots 900ms steps(3) infinite}
@keyframes rx-dots{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.rx-asks{display:grid;gap:8px}
.ask{min-height:44px;padding:10px 14px;border:1px solid var(--ink-line);background:transparent;color:var(--paper);font:500 14px/1.4 Montserrat,sans-serif;text-align:left;cursor:pointer}
@media(hover:hover) and (pointer:fine){.ask:not(:disabled):hover{border-color:var(--blue);color:var(--blue)}}
.ask:focus-visible,.rx-go:focus-visible,.slot-opt input:focus-visible+span,.svc-opt input:focus-visible+span{outline:3px solid var(--paper);outline-offset:2px}
html:not(.js) .rx-asks,html:not(.js) .rx-actions,html:not(.js) .chat-form,html:not(.js) .chat-suggest,html:not(.js) .chat-note{display:none}
.rx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.rx-go{min-height:48px;padding:12px 18px;border:0;background:var(--blue);color:var(--ink);font:700 13px/1.3 Montserrat,sans-serif;cursor:pointer;text-align:left}
.rx-go--ghost{background:transparent;border:1px solid var(--ink-line);color:var(--paper)}
.rx-go:disabled{opacity:.45;cursor:default}
@media(hover:hover) and (pointer:fine){.rx-go:not(:disabled):hover{background:var(--mint)}.rx-go--ghost:not(:disabled):hover{background:transparent;border-color:var(--blue);color:var(--blue)}}
.rx-field{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.rx-field legend{padding:0 0 8px;color:var(--muted-on-ink)}
.svc-opt,.slot-opt{position:relative;display:block;cursor:pointer}
.svc-opt input,.slot-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.svc-opt span{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;border:1px solid var(--ink-line);font-size:14px;font-weight:500}
.svc-opt small{color:var(--muted-on-ink);font-size:12px}
.svc-opt input:checked+span{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue);font-weight:700}
.rx-day{display:grid;gap:6px}
.rx-day>.mono{color:var(--muted-on-ink)}
.rx-slots{display:flex;flex-wrap:wrap;gap:8px}
.slot-opt{flex:1 1 76px}
.slot-opt span{display:grid;place-items:center;min-height:44px;border:1px solid var(--ink-line);font:500 13px 'Roboto Mono',monospace}
.slot-opt input:checked+span{background:var(--blue);border-color:var(--blue);color:var(--ink);font-weight:700}
@media(hover:hover) and (pointer:fine){.slot-opt input:not(:checked):not(:disabled):hover+span,.svc-opt input:not(:checked):not(:disabled):hover+span{border-color:var(--blue)}}
.rx-field-note{color:var(--muted-on-ink);font-size:12px;line-height:1.5}
.rx-confirm{background:var(--mint);color:var(--ink);padding:16px 18px}
.rx-confirm-k{color:#2b3a32}
.rx-confirm-v{margin-top:6px;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.rx-notif{border:1px dashed var(--muted-on-ink);padding:14px 16px;font-size:14px;line-height:1.55}
.rx-notif-k{display:block;margin-bottom:6px;color:var(--muted-on-ink)}
.rx-pay,.rx-nothing{color:var(--soft-on-ink);font-size:13px;line-height:1.55}
.rx-nothing{color:var(--paper);font-weight:700}
.rx-disclaimer{margin-top:20px;max-width:56em;color:var(--muted-on-ink);font-size:12.5px;line-height:1.6}
@media(max-width:1023px){
  .rx-stage{grid-template-columns:minmax(0,1fr)}
  .rx.is-live .rx-win:not(.is-active){display:none}
  .rx.is-live .rx-win{opacity:1}
}
html:not(.js) .rx-stage{grid-template-columns:minmax(0,1fr)}

/* ---------- NAPRAWA: module selector ---------- */
.mods{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:20px clamp(32px,5vw,80px);align-items:start}
.mods-intro{grid-column:1 / -1;max-width:44em;color:var(--soft-on-paper);line-height:1.65}
.mods-tabs{grid-column:1;display:flex;flex-wrap:wrap;gap:8px}
html:not(.js) .mods-tabs{display:none}
.mods-tab{position:relative;min-height:48px;padding:10px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:700 13px/1.3 Montserrat,sans-serif;cursor:pointer}
.mods-tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.mods-tab[data-n]:not([data-n=""])::after{content:' · ' attr(data-n);color:currentColor;font-weight:700}
@media(hover:hover) and (pointer:fine){.mods-tab[aria-selected="false"]:hover{background:rgba(23,25,24,.08)}}
.mods-tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mods-panels{grid-column:1}
.mods-panel{display:grid;gap:20px}
.mods-panel:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.mods-panel[hidden]{display:none}
.mods-group{margin:0;font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.05em;line-height:1.1}
.mods.is-live .mods-group{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) .mods-panel{padding:24px 0;border-top:2px solid var(--ink)}
.mods-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px clamp(24px,3vw,40px)}
.mod{border-top:2px solid var(--ink);padding-top:16px;display:grid;align-content:start;gap:12px}
.mod-t{margin:0;font-size:13px;letter-spacing:.07em}
.mod-sig{color:var(--soft-on-paper);font-size:14px;line-height:1.55}
.mod-sig b{display:block;margin-bottom:2px;color:var(--ink)}
.mod-p{font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.35}
.mod-pick{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-weight:500}
.mod-pick input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.mod-box{flex:none;width:24px;height:24px;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center}
.mod-pick input:checked+.mod-box{background:var(--ink)}
.mod-pick input:checked+.mod-box::after{content:'';width:12px;height:12px;background:var(--paper);clip-path:polygon(23.6% 100%,43.4% 100%,76.7% 0,56.9% 0)}
.mod-pick input:focus-visible+.mod-box{outline:3px solid var(--ink);outline-offset:3px}
html:not(.js) .mod-pick{display:none}
.mods-set{grid-column:2;grid-row:2 / span 2;position:sticky;top:96px;border-top:2px solid var(--blue);padding-top:18px;display:grid;gap:12px}
html:not(.js) .mods-set .mods-count,html:not(.js) .mods-set .mods-list{display:none}
.mods-set-k{color:var(--soft-on-paper)}
.mods-count{font-weight:700}
.mods-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mods-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.5}
.mods-list li::before{content:'';position:absolute;left:0;top:.35em;width:9px;height:14px;background:var(--ink);clip-path:polygon(64% 0,100% 0,36% 100%,0 100%)}
.mods-note{color:var(--soft-on-paper);font-size:13px;line-height:1.55}
.mods-set .text-link{border-bottom-color:rgba(23,25,24,.5);justify-self:start}
@media(max-width:1023px){.mods{grid-template-columns:minmax(0,1fr)}.mods-tabs,.mods-panels,.mods-set{grid-column:1}.mods-set{grid-row:auto;position:static}}

/* ---------- Process (NAPRAWA, SYSTEM pricing) ---------- */
.sp-process{background:var(--ink);padding:clamp(80px,9vw,128px) 0}
.proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(24px,3vw,48px)}
.proc-i{border-top:2px solid var(--blue);padding-top:18px;display:grid;gap:10px;align-content:start}
.proc-n{color:var(--blue)}
.proc-i h3{font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.04em}
.proc-i p:last-child{color:var(--soft-on-ink);line-height:1.65}
.sp-after{margin-top:clamp(48px,6vw,88px);padding-top:28px;border-top:1px solid var(--ink-line);max-width:48em}
@media(max-width:900px){.proc{grid-template-columns:minmax(0,1fr)}}
.sp-limit-k{color:var(--blue)}

/* ---------- SYSTEM: layers, workflow, scenarios ---------- */
.layers{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px clamp(32px,5vw,80px);align-items:start}
.layer-k{margin-bottom:16px;color:var(--soft-on-paper)}
.layer--base{border-top:2px solid var(--ink);padding-top:18px}
.layer-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.layer-list li{position:relative;padding-left:22px;line-height:1.5;font-weight:500}
.layer-list li::before{content:'';position:absolute;left:0;top:.35em;width:9px;height:14px;background:var(--ink);clip-path:polygon(64% 0,100% 0,36% 100%,0 100%)}
.layer-note{margin-top:20px;font-size:14px;color:var(--soft-on-paper)}
.layer--add{border-top:2px solid var(--blue);padding-top:18px}
.layer--add .layer-k{color:var(--ink)}
.fcards--sys{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1023px){.layers{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.fcards--sys{grid-template-columns:minmax(0,1fr)}}
.wf-nodes{list-style:none;margin:0 0 clamp(22px,2.6vw,36px);padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px}
.wf-btn{position:relative;display:grid;gap:3px;width:100%;min-height:76px;padding:16px 0 12px;border:0;background:none;color:var(--muted-on-ink);text-align:left;cursor:pointer;font:inherit}
.wf-btn::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink-line)}
.wf-btn::after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease-cta)}
.wf-btn.is-done::after,.wf-btn[aria-current="step"]::after{transform:scaleX(1)}
.wf-btn[aria-current="step"]{color:var(--paper)}
.wf-n{color:var(--blue)}
.wf-t{font:700 14px/1.25 Montserrat,sans-serif;letter-spacing:-.01em}
.wf-tag{font-size:10px;color:var(--muted-on-ink)}
.wf-node--system .wf-tag{color:var(--blue)}
@media(hover:hover) and (pointer:fine){.wf-btn:hover{color:var(--paper)}}
.wf-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
html:not(.js) .wf-nodes,html:not(.js) .wf-nav{display:none}
.wf-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,80px);align-items:start}
.wf-panel h3{font-size:clamp(24px,2.4vw,36px);font-weight:700;letter-spacing:-.05em;line-height:1.08}
.wf-kicker{display:block;margin-bottom:10px;color:var(--blue)}
.wf-panel>p{margin-top:16px;color:var(--soft-on-ink);line-height:1.65;max-width:36em}
.wf-do{padding-top:14px;border-top:1px solid var(--ink-line);font-size:14.5px}
.wf-do b{display:block;margin-bottom:4px;color:var(--blue)}
html:not(.js) .wf-panel{padding:24px 0;border-top:1px solid var(--ink-line)}
.wf-panel:not([hidden]){animation:rx-in 380ms var(--ease-cta)}
.wf-crm{background:#202322;padding:clamp(18px,2vw,26px);display:grid;gap:12px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.wf-crm-k{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--muted-on-ink)}
.wf-who{font-size:18px;font-weight:700;letter-spacing:-.02em}
.wf-status{list-style:none;margin:0;padding:0;display:grid;gap:0}
.wf-st{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--ink-line);color:var(--muted-on-ink);font-size:14px;transition:color 380ms var(--ease-cta)}
.wf-st::before{content:'';position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border:2px solid var(--muted-on-ink);transition:background 380ms var(--ease-cta),border-color 380ms var(--ease-cta)}
.wf-st.is-on{color:var(--paper);font-weight:700}
.wf-st.is-on::before{background:var(--blue);border-color:var(--blue)}
.wf-crm.is-empty .wf-who{color:var(--muted-on-ink)}
.wf-crm-note{color:var(--muted-on-ink);font-size:13px;line-height:1.5}
html:not(.js) .wf-st{color:var(--soft-on-ink)}
.wf-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,32px)}
@media(max-width:1023px){.wf-nodes{grid-template-columns:repeat(3,minmax(0,1fr))}.wf-body{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.wf-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sys-auto{padding:clamp(80px,9vw,128px) 0}
.sys-auto-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.sys-auto-head h2{font-size:clamp(30px,3.6vw,56px);font-weight:700;letter-spacing:-.055em;line-height:1.05;text-wrap:balance}
.sys-auto-head .sp-p{margin-top:0}
.scen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:28px clamp(20px,2.4vw,36px)}
.scen-i{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:8px;align-content:start}
.scen-n{color:var(--soft-on-paper)}
.scen-i p:last-child{line-height:1.6}
.scen-note{margin-top:24px;color:var(--soft-on-paper);text-transform:none;letter-spacing:.02em;font-size:12px;line-height:1.55}
.sys-int{margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--paper-line);max-width:46em}
.sp-h3{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.045em;line-height:1.15}
@media(max-width:900px){.sys-auto-head{grid-template-columns:minmax(0,1fr)}}

/* ---------- Motion off ---------- */
@media(prefers-reduced-motion:reduce){.rx-panel:not([hidden]),.wf-panel:not([hidden]){animation:none}.rx-step::after,.wf-btn::after,.rx-win,.wf-st,.wf-st::before{transition:none}.msg.is-typing .bubble::before{animation:none}}
html.reduced .rx-panel:not([hidden]),html.reduced .wf-panel:not([hidden]){animation:none}
html.reduced .rx-step::after,html.reduced .wf-btn::after,html.reduced .rx-win,html.reduced .wf-st,html.reduced .wf-st::before{transition:none}
html.reduced .msg.is-typing .bubble::before{animation:none}


/* ---------- Chat demonstration (M12A-R1): typed questions, fixed organisational answers, fictional practice ---------- */
.chat{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.chat-demo{display:block;color:var(--muted-on-ink);font-size:12.5px;line-height:1.7}
.chat-demo>*{display:inline}
.chat-demo .demo-tag{display:inline-block}
.chat-log{min-height:150px;max-height:clamp(240px,34vh,360px);overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 2px 0;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#4a4f4c transparent}
.chat-log:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.chat--compact .chat-log{max-height:clamp(220px,32vh,300px)}
.msg{display:grid;gap:6px;min-width:0}
.msg--visitor{justify-items:end}
.msg--assistant{justify-items:start}
.bubble{overflow-wrap:anywhere;word-break:break-word}
.chat-action{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--blue);background:transparent;color:var(--blue);font:700 13px/1.3 Montserrat,sans-serif;cursor:pointer;text-align:left}
@media(hover:hover) and (pointer:fine){.chat-action:hover{background:var(--blue);color:var(--ink)}}
.chat-action:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.chat-suggest{display:grid;gap:8px}
.chat-hint{color:var(--soft-on-ink);font-size:13.5px;line-height:1.5}
.chat .rx-asks{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.chat--full .rx-asks{grid-template-columns:minmax(0,1fr)}
.chat-form{display:flex;gap:8px;align-items:stretch;min-width:0}
.chat-input{flex:1 1 auto;min-width:0;min-height:48px;padding:10px 14px;border:1px solid #ffffff55;border-radius:0;background:#171918;color:var(--paper);font:500 16px/1.4 Montserrat,sans-serif}
.chat-input::placeholder{color:var(--muted-on-ink);opacity:1}
.chat-input:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.chat-input:disabled{opacity:.55}
.chat-send{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:0;background:var(--blue);color:var(--ink);font:700 13px/1 Montserrat,sans-serif;cursor:pointer}
.chat-send:disabled{opacity:.45;cursor:default}
.chat-send[aria-disabled="true"]{opacity:.55;cursor:progress}
@media(hover:hover) and (pointer:fine){.chat-send:not(:disabled):not([aria-disabled="true"]):hover{background:var(--mint)}}
.chat-send:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.chat-err{color:var(--paper);font-weight:700;font-size:13.5px;padding-left:20px;position:relative}
.chat-err::before{content:'';position:absolute;left:0;top:.25em;width:9px;height:14px;background:var(--blue);clip-path:polygon(64% 0,100% 0,36% 100%,0 100%)}
.chat-note{color:var(--muted-on-ink);font-size:12px;line-height:1.55}
.msg.is-typing .bubble{min-height:42px}
.rx-livechat{grid-column:2;grid-row:1 / span 3;min-width:0;background:#202322;padding:clamp(16px,1.8vw,24px);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.rx-try{margin-top:6px}
.rx-try-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border:1px solid var(--blue);background:transparent;color:var(--blue);font:700 13px/1.3 Montserrat,sans-serif;cursor:pointer;text-align:left}
@media(hover:hover) and (pointer:fine){.rx-try-btn:hover{background:var(--blue);color:var(--ink)}}
.rx-try-btn:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
@media(max-width:900px){.rx-livechat{grid-column:1;grid-row:auto}}

/* ---------- NONESSE: one module under the image: four numbered questions + the active description (M12A-R1) ---------- */
.exhibit{gap:clamp(28px,3.4vw,48px)}
.reader{display:grid;gap:14px;min-width:0}
.reader-k{color:var(--soft-on-paper)}
.reader-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html:not(.js) .reader-tabs{display:none}
.reader-tab{position:relative;display:grid;align-content:start;gap:6px;min-height:76px;padding:14px 14px 12px;border:1px solid var(--ink);border-top-width:3px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.rt-n{color:var(--soft-on-paper)}
.rt-q{font:700 14px/1.3 Montserrat,sans-serif;letter-spacing:-.015em}
.reader-tab[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);border-top-color:var(--blue)}
.reader-tab[aria-selected="true"] .rt-n{color:var(--blue)}
@media(hover:hover) and (pointer:fine){.reader-tab[aria-selected="false"]:hover{background:rgba(23,25,24,.08)}}
.reader-tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.reader-panel{padding:18px 20px 20px;border:1px solid var(--ink);border-left-width:6px;border-left-color:var(--blue);background:rgba(23,25,24,.045);display:grid;gap:8px;max-width:none}
.reader-panel:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.reader-q{font-size:clamp(18px,1.6vw,24px);font-weight:700;letter-spacing:-.035em;line-height:1.2}
.reader.is-live .reader-q{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.reader-a{font-size:clamp(16px,1.2vw,18px);line-height:1.65;max-width:42em}
html:not(.js) .reader-panels{display:grid;gap:14px}
.reader .note-label{color:var(--soft-on-paper)}
.case-rail{display:contents}
@media(min-width:1280px){
  /* M12A-R3: the image column is exactly as wide as the (viewport-height-sized) image, the case card takes the rest (≥ 460px, comfortable line length), so no dead gap between them */
  .exhibit{--plate-col:min(calc(100% - 460px - clamp(40px,4vw,72px)),calc(max(440px,100vh - 372px) * 1.3333 + 40px));grid-template-columns:var(--plate-col) minmax(0,1fr);column-gap:clamp(40px,4vw,72px);grid-template-areas:"plate case" "reader case" "scope scope" "actions actions";align-items:start}
  .exhibit>.plate{grid-area:plate}
  .exhibit>.reader{grid-area:reader}
  /* M12A-R3: the card moves with the reader again, but only inside its rail. The rail stretches over the image + questions rows only;
     a sticky element cannot leave its containing block, so it stops at the end of the questions and never reaches scope or actions (the R1 overlap came from the card using the whole exhibit as its range). */
  .exhibit>.case-rail{grid-area:case;display:block;align-self:stretch;min-width:0}
  .case-rail>.case-id{grid-template-columns:minmax(0,1fr);position:sticky;top:96px}
  .exhibit>.scope{grid-area:scope}
  .exhibit>.proof-actions{grid-area:actions}
}
/* fallback: no sticky when the card would not fit in the window (short windows, high zoom, long texts: set by a4.js) or when motion is reduced */
@media(min-width:1280px) and (prefers-reduced-motion:reduce){.case-rail>.case-id{position:static}}
html.reduced .case-rail>.case-id,.case-rail.is-tall>.case-id{position:static}
@media(max-width:1023px){.reader-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.rt-q{font-size:13.5px}}
@media(max-width:380px){.reader-tab{padding:12px 10px 10px}}

/* NONESSE module height: the image is sized so that, on a normal desktop window, the four questions and the active description sit within the first screenful under the image (R1) */
@media(min-width:1024px){
  .exhibit{--mod-w:min(100%,calc(max(440px,100vh - 372px) * 1.3333 + 40px));row-gap:20px}
  .exhibit>.scope{margin-top:clamp(20px,2.6vw,40px)}
  .exhibit>.proof-actions{margin-top:clamp(0px,1vw,16px)}
  .plate figcaption{padding-top:8px;line-height:1.4}
  .plate-open{min-height:44px}
}

/* 1024–1279px: one column, image and questions sized to the window height (from 1280px the grid column does this, see above) */
@media(min-width:1024px) and (max-width:1279px){.exhibit>.plate,.exhibit>.reader{width:var(--mod-w)}}

/* compact reader on desktop: no kicker, one-row tabs, one-line caption */
@media(min-width:1024px){
  .exhibit{row-gap:14px}
  .reader{gap:10px}
  .reader-k{display:none}
  .reader-tab{min-height:56px;padding:10px 12px 8px;gap:2px}
  .reader-panel{padding:14px 18px 16px;gap:6px}
  .plate figcaption{flex-wrap:nowrap;align-items:center;font-size:11px;padding-top:6px}
  .plate-open{white-space:nowrap}
}

/* ---------- M12B: dedicated Realizacje, Jak pracuję and Kontakt pages (existing tokens, type and components only; no new motion) ---------- */
/* NONESSE: the internal asset caption is gone everywhere; on tablet/desktop only "Pełny obraz" remains, aligned right */
.plate figcaption{justify-content:flex-end}
.proof-actions .proof-more{align-self:center}
.how-more{margin-top:clamp(32px,4vw,48px)}
/* Realizacje: project facts in the hero aside */
.facts{margin:16px 0 0;display:grid;gap:0}
.facts div{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--ink-line)}
.facts div:first-child{border-top:0;padding-top:4px}
.facts dt{color:var(--muted-on-ink)}
.facts dd{margin:0;color:var(--paper);line-height:1.5;font-size:15px}
/* Jak pracuję: approved portrait in the hero, seven stages as a ruled sequence */
.sp-portrait{margin:0;position:relative;z-index:1}
.sp-portrait img{display:block;width:100%;height:auto;aspect-ratio:1263/1245;object-fit:cover;border:1px solid var(--ink-line)}
.sp-portrait figcaption{margin-top:10px;color:var(--muted-on-ink);font-size:11px;line-height:1.5;text-transform:none;letter-spacing:.02em}
.flow{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.flow-i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:12px clamp(24px,4vw,64px);padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--paper-line)}
.flow-n{color:var(--blue)}
.flow-t{grid-column:1;margin-top:-4px;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.flow-n{grid-column:1}
.flow-dl{grid-column:2;grid-row:1 / span 2;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px clamp(20px,2.4vw,40px)}
.flow-dl dt{color:var(--soft-on-paper);margin-bottom:4px}
.flow-dl dd{margin:0;font-size:15px;line-height:1.6}
@media(max-width:1023px){.flow-i{grid-template-columns:minmax(0,1fr)}.flow-dl{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr)}}
.route-rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.route-rows li{border-bottom:1px solid var(--paper-line)}
.route-row{display:grid;grid-template-columns:150px minmax(0,1fr) 200px 24px;text-align:left;justify-items:start;gap:8px 24px;align-items:baseline;min-height:64px;padding:18px 0;color:var(--ink)}
.route-row-code{font-size:13px;letter-spacing:.07em;font-weight:700}
.route-row-name{font-size:clamp(17px,1.4vw,21px);font-weight:700;letter-spacing:-.025em}
.route-row-price{color:var(--soft-on-paper);justify-self:end}
.route-row-arrow{color:var(--blue)}
@media(hover:hover) and (pointer:fine){.route-row:hover .route-row-name{color:var(--blue)}}
.route-row:focus-visible{outline-color:var(--ink)}
@media(max-width:700px){.route-row{grid-template-columns:minmax(0,1fr) 24px}.route-row-code,.route-row-name,.route-row-price{grid-column:1;justify-self:start}.route-row-arrow{grid-column:2;grid-row:1}}
/* Kontakt: lead under the heading, privacy link at consent, follow-up links; on phones the form comes right after the heading */
.contact-lead{margin-top:18px;max-width:30em;color:var(--soft-on-paper);font-size:clamp(16px,1.2vw,18px);line-height:1.65}
.consent-more{margin:4px 0 0 38px;color:var(--soft-on-paper);font-size:14px;line-height:1.55}
.consent-more a{border-bottom:1px solid currentColor}
.contact-more{border-top:1px solid var(--paper-line)}
.contact-more-links{display:grid;justify-items:start;gap:4px}
.contact-more a:focus-visible,.contact a:focus-visible{outline-color:var(--ink)}
@media(max-width:1023px){
  .kontakt-page .contact-layout{display:flex;flex-direction:column;align-items:stretch}
  .kontakt-page .contact-side{display:contents}
  .kontakt-page .contact-side>*{order:3}
  .kontakt-page .contact-side>.sec-index,.kontakt-page .contact-side>h1,.kontakt-page .contact-side>.contact-lead{order:1}
  .kontakt-page .contact-form{order:2;margin:28px 0 8px}
}
/* the A3 text-link arrow is blue; on the light home sections it would fall below 4.5:1, so there it takes the ink colour */
.proof .proof-more span[aria-hidden],.how-more .text-link span[aria-hidden]{color:var(--ink)}

/* ---------- M12C: KUK SYSTEMS Care (page, home teaser, link in step 07); existing tokens and components only ---------- */
.care-teaser{background:var(--paper);color:var(--ink);padding:clamp(72px,8vw,112px) 0;border-top:1px solid var(--paper-line)}
.care-teaser-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,6vw,96px);align-items:end}
.care-teaser h2{font-size:clamp(30px,3.6vw,56px);font-weight:700;letter-spacing:-.055em;line-height:1.05;text-wrap:balance;max-width:14em}
.care-teaser .sec-lead{color:var(--soft-on-paper);margin-top:18px}
.care-teaser-side{border-top:2px solid var(--ink);padding-top:18px;display:grid;justify-items:start;gap:14px}
.care-teaser-k{color:var(--soft-on-paper)}
.care-teaser-price{font-size:clamp(34px,3.6vw,54px);font-weight:700;letter-spacing:-.06em;line-height:1}
.care-teaser-price span{font-size:16px;font-weight:500;letter-spacing:0;color:var(--soft-on-paper)}
.care-chips{margin:0;padding:0;border-top:0}
.care-chips li{border-color:var(--paper-line);color:var(--soft-on-paper)}
.care-teaser a:focus-visible{outline-color:var(--ink)}
@media(max-width:900px){.care-teaser-grid{grid-template-columns:minmax(0,1fr);align-items:start}}
.local{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(24px,3vw,48px)}
.local-i{border-top:2px solid var(--blue);padding-top:18px;display:grid;gap:10px;align-content:start}
.local-i h3{font-size:clamp(19px,1.6vw,23px);font-weight:700;letter-spacing:-.035em;line-height:1.2}
.local-i p{color:var(--soft-on-ink);line-height:1.65}
.local-work{margin-top:clamp(44px,5vw,72px);padding-top:28px;border-top:1px solid var(--ink-line);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:start}
.local-k{color:var(--blue);margin-bottom:14px}
.local-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.local-list li{position:relative;padding-left:26px;color:var(--paper);line-height:1.55}
.local-list li::before{content:'';position:absolute;left:0;top:.45em;width:9px;height:14px;background:var(--blue);clip-path:polygon(64% 0,100% 0,36% 100%,0 100%)}
.local-work .sp-p{margin-top:0}
@media(max-width:1023px){.local{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.local,.local-work{grid-template-columns:minmax(0,1fr)}}
.care-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(24px,3vw,48px)}
.care-steps li{border-top:2px solid var(--ink);padding-top:18px;display:grid;gap:10px;align-content:start}
.care-n{color:var(--soft-on-paper)}
.care-steps h3{font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.04em}
.care-steps p:last-child{color:var(--soft-on-paper);line-height:1.65}
.care-terms{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--paper-line);max-width:52em}
.care-terms .sp-p{max-width:none}
@media(max-width:900px){.care-steps{grid-template-columns:minmax(0,1fr)}}
.flow-care{margin-top:6px}
.flow-care span[aria-hidden]{color:var(--ink)}
.flow-care:focus-visible{outline-color:var(--ink)}

/* ---------- M14-R1 (owner production review) ---------- */
/* Inne realizacje: two owned projects with the owner's preview graphics (1920×1320, ratio kept), same frame and spacing */
.own{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(28px,3vw,48px);border-top:1px solid var(--ink-line);padding-top:clamp(32px,3.6vw,48px)}
.own-i{display:grid;align-content:start;gap:22px;min-width:0}
.own-shot{margin:0;display:grid;gap:8px}
.own-shot img{display:block;width:100%;height:auto;aspect-ratio:1920/1320;border:1px solid var(--ink-line);background:#0f1110}
.own-note{color:var(--muted-on-ink);font-size:11px;letter-spacing:.04em}
.own-body{display:grid;gap:10px;justify-items:start}
.own-body h3{font-size:clamp(26px,2.4vw,38px);font-weight:700;letter-spacing:-.05em;line-height:1.08}
.own-body .row-text{max-width:34em}
.own-body .row-link{justify-self:start;margin-top:4px}
@media(max-width:900px){.own{grid-template-columns:minmax(0,1fr)}}
/* Realizacje and Jak pracuję: hero content starts at the top of the hero instead of sinking to the bottom of a tall aside/photo */
@media(min-width:1024px){.subpage--realizacje .sp-hero-grid,.subpage--jak-pracuje .sp-hero-grid{align-items:start}}
@media(min-width:1024px){.subpage--jak-pracuje .sp-portrait{margin-top:8px}}
/* Jak pracuję on phones/tablets: eyebrow → H1 → photograph → paragraph → link */
@media(max-width:1023px){
  .subpage--jak-pracuje .sp-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .subpage--jak-pracuje .sp-hero-copy{display:contents}
  .subpage--jak-pracuje .sp-hero-copy>.sec-index{order:1}
  .subpage--jak-pracuje .sp-hero-copy>h1{order:2}
  .subpage--jak-pracuje .sp-portrait{order:3;margin-top:clamp(24px,5vw,36px)}
  .subpage--jak-pracuje .sp-hero-copy>.sp-lead{order:4}
  .subpage--jak-pracuje .sp-hero-copy>.sp-cta{order:5}
}

/* ---------- 4.1.3 navigation: USŁUGI groups NAPRAWA, SYSTEM, CARE; Wiedza and Audyt 60 sekund are direct links; Kontakt stays last ---------- */
.desktop-nav .nav-group{position:relative;display:flex;align-items:center}
.desktop-nav .nav-drop{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer}
.nav-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.nav-group.is-open .nav-caret{transform:translateY(1px) rotate(-135deg)}
.nav-group.is-current .nav-drop{box-shadow:inset 0 -2px 0 var(--blue)}
.desktop-nav .nav-drop:hover,.nav-group.is-open .nav-drop{color:var(--blue)}
/* the panel hangs from the 64px bar (no taller header); a transparent bridge keeps hover alive between the label and the panel */
.nav-sub{position:absolute;top:100%;left:-20px;min-width:184px;padding:8px 0;margin-top:20px;background:var(--ink);border:1px solid var(--ink-line);border-top:2px solid var(--blue);display:none;flex-direction:column;z-index:30}
.nav-sub::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:22px}
.nav-group.is-open .nav-sub{display:flex}
@media(hover:hover) and (pointer:fine){.nav-group:hover .nav-sub{display:flex}.nav-group:hover .nav-caret{transform:translateY(1px) rotate(-135deg)}}
.desktop-nav .nav-sub a{display:flex;align-items:center;min-height:42px;padding:0 20px}
.desktop-nav .nav-sub a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--blue)}
/* seven entries fit next to the brand and the summary button from 1024px: slightly tighter tracking and gaps on small laptops */
@media(min-width:1024px) and (max-width:1199px){.system-bar{gap:14px}.desktop-nav{gap:12px}.desktop-nav a,.desktop-nav .nav-route{letter-spacing:.03em;font-size:11px}.desktop-nav .nav-drop{gap:5px}body.kuk-site .system-bar .bar-cta.cta-motion{margin-left:4px}}
/* Escape closes the panel even while the pointer still rests on USŁUGI (hover re-opens after the pointer leaves) */
.nav-group.is-dismissed .nav-sub{display:none!important}

/* menu (below 1024px): USŁUGI expands in place (native details), sub-entries align with the labels */
.menu-group summary{display:flex;align-items:baseline;gap:16px;min-height:60px;padding:14px 0;font-size:clamp(22px,6.4vw,30px);font-weight:700;letter-spacing:.01em;line-height:1.1;cursor:pointer;list-style:none}
.menu-group summary::-webkit-details-marker{display:none}
.menu-group summary .mono{min-width:26px;color:var(--muted-on-ink);font-size:11px;letter-spacing:.055em}
.menu-group summary .menu-label{text-transform:uppercase}
.menu-caret{align-self:center;width:9px;height:9px;margin-left:auto;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .18s ease}
.menu-group details[open] .menu-caret{transform:translateY(2px) rotate(-135deg)}
@media(hover:hover) and (pointer:fine){.menu-group summary:hover .menu-label{color:var(--blue)}}
.menu-group summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.menu-sub{list-style:none;margin:0 0 12px;padding:0 0 0 42px}
.menu-nav .menu-sub a{min-height:46px;padding:8px 0;font-size:clamp(17px,4.8vw,21px);letter-spacing:.02em}
.menu-nav .menu-sub li{border:0}
/* 4.1.3: home-page anchors (Twoja sytuacja, Drogi współpracy) as a quiet third row, apart from pages and legal documents */
.foot-nav.foot-home{grid-column:1 / 3;grid-row:3;justify-self:start;margin-top:-12px}
.foot-home a{color:var(--muted-on-ink);font-size:13px}
.foot-nav:not(.foot-sections):not(.foot-home){grid-column:3;grid-row:2;justify-self:end}
@media(max-width:1023px){.foot-nav.foot-home{grid-column:1;grid-row:auto;margin-top:0}.foot-nav:not(.foot-sections):not(.foot-home){grid-column:1;grid-row:auto;justify-self:start}}

/* ---------- 4.1.7: OPINIE KLIENTÓW (trust strip after the hero) ----------
   Three paper cards on the ink band, stacked like a deck: each card is position:sticky under the header with a small step,
   so the next card slides over the previous one while the page scrolls normally (no scroll handlers, no JS at all).
   The previous card's top edge (stars) stays visible; the last card releases into 02 Twoja sytuacja. Desktop: sticky intro left, deck right.
   Reduced motion: a plain static list. */
.reviews{--rv-top:calc(64px + 20px);--rv-step:14px;background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,104px) 0 clamp(56px,7vw,96px)}
.reviews-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head stack" "head more";column-gap:clamp(40px,6vw,112px);align-items:start}
.reviews-head{grid-area:head;position:sticky;top:var(--rv-top)}
.reviews .sec-index{margin:0 0 20px;color:var(--blue)}
.reviews h2{margin:0;max-width:16ch;font-size:clamp(30px,3.4vw,50px);line-height:1.07;letter-spacing:-.045em;font-weight:700}
.reviews-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:26px 0 0}
.reviews-stars{color:var(--blue);letter-spacing:.18em;font-size:14px}
.reviews-meta .mono{color:var(--soft-on-ink);text-transform:none;letter-spacing:.04em;font-size:12px}
.reviews-meta b{color:var(--paper);font-weight:700}
.reviews-stack{grid-area:stack;list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,1fr) auto;gap:clamp(28px,4vw,48px)}
/* equal card heights (three 1fr rows = the longest review); the empty fourth row is a short run-out inside the sticky container,
   so the whole deck rests together for a moment before it scrolls on (padding would not extend the sticky range) */
.reviews-stack::after{content:"";height:clamp(8px,1.6vw,24px)}
.review-card{position:sticky;top:var(--rv-top);background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:22px;padding:clamp(24px,2.6vw,40px);display:flex;box-shadow:0 -1px 0 rgba(23,25,24,.9)}
.review-card:nth-child(2){top:calc(var(--rv-top) + var(--rv-step))}
.review-card:nth-child(3){top:calc(var(--rv-top) + var(--rv-step) * 2)}
.review{margin:0;display:flex;flex-direction:column;width:100%}
.review-stars{margin:0;color:var(--blue);font-size:15px;letter-spacing:.22em;line-height:1}
.review-lead{margin:18px 0 0;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.035em;font-weight:700;max-width:24ch}
.review blockquote{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--paper-line)}
.review blockquote p{margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--soft-on-paper)}
.review blockquote p+p{margin-top:10px}
.review-gap{color:var(--ink);font-weight:600;text-decoration:none}
.review figcaption{margin-top:auto;padding-top:20px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.review cite{font-style:normal;font-weight:700;font-size:15px}
.review cite::before{content:'— ';color:var(--blue)}
.review-source{color:#5d635f;text-transform:none;letter-spacing:.06em;font-size:11px}
.reviews-more{grid-area:more;margin:22px 0 0}
.reviews-more .text-link{color:var(--paper);border-color:#ffffff70;font-size:13px}
.reviews-more .text-link:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(max-width:1023px){
  .reviews-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stack" "more"}
  .reviews-head{position:static;margin-bottom:32px}
  .reviews h2{max-width:20ch}
  .reviews-meta{margin-top:18px}
}
@media(max-width:760px){
  .reviews{--rv-top:calc(54px + 14px);--rv-step:12px}
  .reviews-stack{gap:22px}
  .reviews-stack::after{height:8px}
  .review-card{border-radius:18px;padding:22px 20px 20px}
  .review-lead{font-size:21px;margin-top:14px}
  .review blockquote{margin-top:14px;padding-top:12px}
  .review blockquote p{font-size:15px;line-height:1.55}
  .review figcaption{padding-top:16px}
}
@media(prefers-reduced-motion:reduce){.reviews-head,.review-card,.review-card:nth-child(2),.review-card:nth-child(3){position:static}.reviews-stack::after{display:none}}
html.reduced .reviews-head,html.reduced .review-card{position:static!important}