/* Wzorowa Agencja: podstawa (kolejność jak w o57: blok A, style.css, style2.css) */
/* ---- o57 blok style #0 ---- */
@media (min-width:1024px){.pracownia .zl-podloga{display:none !important}.pracownia .hero::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;display:block !important;transform:none !important;pointer-events:none;background:url(../img/tlo3d/tlo8-baza-b.webp) center/cover no-repeat !important}.pracownia .zl-warstwa{display:block !important;position:absolute !important;inset:0 !important;z-index:0 !important;overflow:visible !important;perspective:none !important;pointer-events:none;background:url(../img/tlo3d/tlo6-swiatla.webp) center/cover no-repeat !important;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 36%,#000 50%,rgba(0,0,0,.42) 64%,rgba(0,0,0,.42) 100%);mask-image:linear-gradient(to top,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 36%,#000 50%,rgba(0,0,0,.42) 64%,rgba(0,0,0,.42) 100%);-webkit-mask-size:100% 420%;mask-size:100% 420%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:sw3d 7s ease-in-out infinite alternate,puls3d 3.4s ease-in-out infinite alternate}@keyframes sw3d{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0%;mask-position:0 0%}}@keyframes puls3d{from{opacity:.78}to{opacity:1}}.pracownia .hero::after{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;pointer-events:none;display:block !important;background:url(../img/tlo3d/tlo8-rozmyte.webp) center/cover no-repeat !important;-webkit-mask-image:radial-gradient(ellipse 600px 340px at 430px 260px,#000 46%,rgba(0,0,0,0) 100%),radial-gradient(ellipse 400px 250px at 1120px 215px,#000 46%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 600px 340px at 430px 260px,#000 46%,rgba(0,0,0,0) 100%),radial-gradient(ellipse 400px 250px at 1120px 215px,#000 46%,rgba(0,0,0,0) 100%)}.pracownia .hero .wrap{position:relative;z-index:1}.pracownia .pasek-app{background:linear-gradient(180deg,rgba(26,26,31,.95),rgba(8,8,10,.92)) !important;box-shadow:0 1px 0 rgba(255,255,255,.08),0 12px 26px -14px rgba(0,0,0,.95) !important}.pracownia .pasek-app nav ul{gap:10px !important}.pracownia .pasek-app nav li a,.pracownia .pasek-app nav li .pig-off{position:relative;display:inline-flex !important;align-items:center;height:40px !important;padding:0 18px 0 24px !important;border-radius:9px !important;background:linear-gradient(180deg,#2c2c32,#16161b) !important;border:1px solid rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 8px 16px -8px rgba(0,0,0,.95),0 1px 0 rgba(0,0,0,.7) !important;color:#ece8de !important;font:700 14px/1 var(--f) !important;margin:0 !important}.pracownia .pasek-app nav li a::before,.pracownia .pasek-app nav li .pig-off::before{content:"";position:absolute;left:9px;top:11px;bottom:11px;width:3px;border-radius:2px;background:rgba(255,255,255,.16)}.pracownia .pasek-app nav li:first-child a::before{background:#FFD60A;box-shadow:0 0 9px rgba(255,214,10,.8)}.pracownia .pasek-app nav li a:hover{background:linear-gradient(180deg,#36363d,#1c1c22) !important}.pracownia .pasek-app .kontakt-p{border-color:rgba(255,214,10,.55) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 16px rgba(255,214,10,.16),0 8px 16px -8px rgba(0,0,0,.95) !important}.pracownia .pasek-app .kontakt-p::before{background:#FFD60A !important;box-shadow:0 0 9px rgba(255,214,10,.7)}html.bezruchu .pracownia .zl-warstwa{animation:none !important;-webkit-mask-image:none !important;mask-image:none !important;opacity:1}}@media (prefers-reduced-motion:reduce){.pracownia .zl-warstwa{animation:none !important;-webkit-mask-image:none !important;mask-image:none !important;opacity:1}}
/* ---- o57 style.css ---- */
/* Wzorowa Agencja: studium graficzne sekcji 1–2 (Creative Director, 02.11.2026).
   Układ, siatka, skala pisma i teksty z sekcje-1-2-ruch/ (zatwierdzony układ). Zmieniona warstwa graficzna: papier, grafit, żółć ołówka,
   kreskowanie jak w logo, szkice układu stron zamiast szarych zastępników, linie pomocnicze i węzły jako akcent (nie tapeta).
   Krój: Sofia Sans Extra Condensed 800 (nagłówki, liczby), Sofia Sans 400/700 (tekst), SIL OFL 1.1, lokalnie. Zero zasobów zewnętrznych. */

@font-face{font-family:"Sofia Sans Extra Condensed";font-weight:800;font-display:swap;src:url(../fonts/sofia-sans-extra-condensed-latin-ext-800.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans Extra Condensed";font-weight:800;font-display:swap;src:url(../fonts/sofia-sans-extra-condensed-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans";font-weight:400;font-display:swap;src:url(../fonts/sofia-sans-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans";font-weight:400;font-display:swap;src:url(../fonts/sofia-sans-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans";font-weight:700;font-display:swap;src:url(../fonts/sofia-sans-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans";font-weight:700;font-display:swap;src:url(../fonts/sofia-sans-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokeny: kolor ---------- */
:root{
  --papier:#F6F3EC;   /* tło strony: ciepły papier szkiców, które Łukasz oglądał (tam #F4F2EC) */
  --arkusz:#FFFFFF;   /* arkusze z rysunkami: biały papier na papierze */
  --tusz:#1D1C1A;     /* tekst, reguły, przycisk, fokus */
  --grafit:#3B3A36;   /* obrys rysunków (ołówek z szkiców logo) */
  --olowek:#55524A;   /* tekst drugorzędny (7,04:1 na papierze) */
  --konstr:#8C877B;   /* linie pomocnicze i kreskowanie obrazów (dekoracja; 3,23:1) */
  --jasny:#C9C3B6;    /* druga, jaśniejsza kreska obok obrysu; bardzo jasne kreskowanie */
  --zolc:#F5BC1C;     /* żółć ołówka: znacznik „tu patrz / to możesz sprawdzić”; zawsze z tuszem na wierzchu i drugim nośnikiem znaczenia */
  /* skala odstępów 8 16 24 32 48 64 96 128 (bez zmian) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --m:20px; --gap:12px; --maxw:1296px; --bar:56px;
  --f:"Sofia Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --fc:"Sofia Sans Extra Condensed","Sofia Sans",Impact,"Arial Narrow",sans-serif;
  --t-a:clamp(48px,15vw,120px);
  --t-h2:40px; --t-adres:36px; --t-h3:36px; --t-b:21px; --t-lead:18px; --t-out:18px; --t-txt:16px; --t-lab:12.5px; --t-nav:15px; --t-btn:18px;
  --rowh:44px; --dl:10px; --pen:3.4px;
}
@media (min-width:768px){:root{--m:48px;--gap:16px;--dl:24px}}
@media (min-width:1024px){
  :root{
    --m:72px; --gap:24px; --dl:36px; --rowh:58px;
    --t-a:clamp(96px,min(8.2vw,13vh),170px);
    --t-h2:64px; --t-h3:48px; --t-adres:48px; --t-b:34px; --t-lead:21px; --t-out:18px; --t-txt:17px; --t-lab:13px; --t-nav:17px; --t-btn:20px;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--papier);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tusz);font:400 var(--t-txt)/1.4 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
b{font-weight:700}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--m));margin-inline:auto;padding-inline:var(--m)}
:focus-visible{outline:3px solid var(--tusz);outline-offset:3px}

/* znacznik: żółta plama pod tekstem, z lekko postrzępionymi brzegami (jak zakreślacz). Jedyna rola: „tu patrz”. */
.znacznik{position:relative;isolation:isolate;display:inline}
.znacznik::before{content:"";position:absolute;z-index:-1;left:-8px;right:-8px;top:6%;bottom:2%;background:var(--zolc);
  clip-path:polygon(0 14%,2% 2%,98% 8%,100% 20%,99% 88%,97% 100%,3% 94%,0 82%)}

/* ---------- nagłówek strony ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--papier);border-bottom:1px solid var(--tusz)}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--bar)}
.logo{display:flex;align-items:center;min-height:44px;line-height:0}
.logo svg{height:20px;width:auto}
.bar-r{display:flex;align-items:center;gap:var(--s4)}
nav ul{display:flex;gap:var(--s4)}
nav a{font:700 var(--t-nav)/1 var(--f);color:var(--tusz);text-decoration:none;padding-block:var(--s1)}
.off{font:400 var(--t-nav)/1 var(--f);color:var(--olowek);cursor:default}
.tag{margin-left:var(--s1);font:700 var(--t-lab)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--olowek)}
.menu-btn{font:700 var(--t-nav)/1 var(--f);color:var(--tusz);background:none;border:0;padding:var(--s1);margin:0;min-height:44px;min-width:44px;display:none}
@media (max-width:1023px){
  nav,.kontakt-d{display:none}
  .menu-btn{display:block}
  .logo svg{height:17px}
}
@media (min-width:1024px){.logo svg{height:21px}}

/* ---------- pióro i rysunki ---------- */
.pen{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:var(--tusz);stroke-width:var(--pen);stroke-linecap:round;stroke-linejoin:round}
.arr{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square;stroke-linejoin:miter}

/* ---------- sekcja 1: pierwszy ekran ---------- */
.hero{padding-top:var(--s2);padding-bottom:var(--s2)}
.hero .wrap{position:relative}
.a{font:800 var(--t-a)/.88 var(--fc);letter-spacing:-.012em;color:var(--tusz)}
.a span{display:block}
@media (min-width:1024px){.a span{white-space:nowrap}}
@media (max-width:1023px){.a span{text-wrap:balance}}

/* znak główny (placeholder) z warstwą konstrukcyjną: tylko duży, tylko na szerokim ekranie, obok pierwszych dwóch linii A */
.logo-big{position:absolute;top:var(--s2);right:var(--m);width:min(416px,28.5vw);display:none}
.logo-big svg{width:100%;height:auto}
@media (min-width:1280px){.logo-big{display:block}}

.hero-cols{display:flex;flex-direction:column;margin-top:var(--s2)}
.hero-l,.hero-r{display:contents}
@media (min-width:1024px){
  .hero-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:var(--s3)}
  .hero-l{display:block;grid-column:1/7;position:relative}
  .hero-r{display:block;grid-column:8/13}
}

/* B: trzy wiersze. Węzły 1, 2, 3 połączone przerywaną linią pomocniczą (kolejność). Aktywny wiersz: znacznik żółty + pogrubienie + wypełniony węzeł. */
.b{order:1;position:relative}
.b::before{content:"";position:absolute;left:13.25px;top:calc(var(--rowh) / 2);height:calc(var(--rowh) * 2);border-left:1.5px dashed var(--konstr)}
.b li{position:relative;display:grid;grid-template-columns:28px 1fr;column-gap:var(--s2);align-items:center;height:var(--rowh);font:400 var(--t-b)/1.1 var(--f);color:var(--tusz)}
.b .t{justify-self:start}
.n{position:relative;display:grid;place-items:center;width:28px;height:28px;font:700 15px/1 var(--f)}
.n svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.n i{position:relative;font-style:normal}
.n .ring{fill:var(--papier);stroke:var(--tusz);stroke-width:2.4;stroke-linecap:round}
.is-active .n .ring{fill:var(--tusz)}
.is-active .n{color:var(--papier)}
.is-active .t{position:relative;isolation:isolate}
.is-active .t::before{content:"";position:absolute;z-index:-1;left:-10px;right:-10px;top:4%;bottom:0;background:var(--zolc);
  clip-path:polygon(0 16%,1.2% 2%,98.6% 8%,100% 22%,99.3% 86%,97.4% 100%,1.8% 94%,0 80%)}
@media (max-width:1023px){
  .b li{grid-template-columns:24px 1fr;line-height:1.3;--t-b:21px}
  .n{width:24px;height:24px;font-size:13px}
  .b::before{left:11.25px}
}

/* scena: arkusz z notatką (przykład, nie cytat klienta) */
.scena{order:2;position:relative;background:var(--arkusz);border:1.5px solid var(--grafit);outline:1px solid var(--jasny);outline-offset:3px;padding:var(--s2) var(--s3) var(--s3);margin-top:var(--s1)}
.eti{display:block;margin-bottom:var(--s1);font:700 var(--t-lab)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--olowek)}
.eti-m{display:none}
.out{font:400 var(--t-out)/1.4 var(--f);color:var(--olowek)}
.out s{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--tusz)}
.dec{position:relative;font:700 var(--t-lead)/1.35 var(--f);color:var(--tusz);margin-top:var(--s3);padding-left:56px}
.dn{position:absolute;left:0;top:2px;width:44px;height:36px}
.dn .pen{inset:0;width:100%;height:100%;transform:rotate(180deg)}
.zakres{order:3;display:flex;flex-wrap:wrap;margin-top:var(--s3);font:400 var(--t-txt)/1.4 var(--f)}
.zakres li{white-space:nowrap}
.zakres li:not(:last-child)::after{content:"·";margin-inline:var(--s1);color:var(--olowek)}
@media (max-width:1023px){
  .out,.eti-d,.dn{display:none}
  .scena{margin-top:var(--s1);padding:var(--s1) var(--s2)}
  .eti{display:inline;margin:0 var(--s1) 0 0;font:400 var(--t-txt)/1.4 var(--f);letter-spacing:0;text-transform:none}
  .eti-m{display:inline}
  .dec{display:inline;margin:0;padding:0}
  .zakres{margin-top:var(--s1)}
  .zakres li{white-space:normal}
}
@media (min-width:1024px){.zakres{margin-top:var(--s4)}}

.cta{order:4;position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:56px;padding:0 var(--s4);background:var(--tusz);color:var(--papier);border:2px solid var(--tusz);font:700 var(--t-btn)/1 var(--f);text-decoration:none}
@media (max-width:1023px){.cta{flex-direction:column;align-items:stretch;margin-top:var(--s1)}.hero-cols>*{width:100%}}

/* pióro: od „marketing” do przycisku (tylko komputer) */
.pen-mk{position:absolute;left:0;top:-22px;width:540px;height:22px;display:none}
@media (min-width:1024px){.pen-mk{display:block}}

/* linia decyzji w stanie końcowym: od przycisku w lewy margines, w dół do reguły rejestru; kończy się węzłem (żółty = tu hero przechodzi w dowód) */
.dl-h{position:absolute;left:calc(-1 * var(--dl));top:calc(28px - 1.5px);width:var(--dl);height:3px;background:var(--tusz)}
.dl-v{position:absolute;left:calc(-1 * var(--dl) - 1.5px + 0px);top:calc(28px - 1.5px);width:3px;background:var(--tusz);height:var(--dlh,200px)}
.dl-b{position:absolute;left:calc(-1 * var(--dl));top:calc(28px + var(--dlh,200px) - 3px);width:var(--dl);height:3px;background:var(--tusz)}
.dl-n1{position:absolute;left:calc(-1 * var(--dl) - 5px + 1.5px);top:calc(28px - 5px);width:10px;height:10px;border-radius:50%;background:var(--tusz)}
.dl-n2{position:absolute;left:calc(-1 * var(--dl) - 7px + 1.5px);top:calc(28px + var(--dlh,200px) - 7px - 1.5px);width:14px;height:14px;border-radius:50%;background:var(--zolc);border:2px solid var(--tusz)}
@media (max-width:1023px){.dl-h,.dl-v,.dl-b,.dl-n1,.dl-n2{display:none}}

/* ---------- sekcja 2: realizacje ---------- */
.s2{border-top:3px solid var(--tusz)}
.s2>.wrap{padding-top:var(--s3)}
.h2{font:800 var(--t-h2)/.86 var(--fc);text-wrap:balance}
.s2-head{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s3)}
.licz{order:-1;display:flex;align-items:center;gap:var(--s2)}
.licz-n{flex:none;width:76px;line-height:0}
.licz-n svg{width:100%;height:auto}
.licz-b{display:block;padding-bottom:var(--s1)}
.nw{white-space:nowrap}
.licz-l{display:block;font:700 var(--t-txt)/1.35 var(--f)}
.licz-d{display:block;font:400 var(--t-txt)/1.35 var(--f);color:var(--olowek)}
.podz{display:block;width:200px;margin-top:6px}
.podz svg{width:100%;height:auto}
@media (min-width:1024px){
  .s2-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding-bottom:var(--s3)}
  .s2-head .h2{grid-column:1/8;padding-bottom:6px}
  .licz{order:0;grid-column:8/13;align-items:flex-end}
  .licz-n{width:112px}
}

.reg-head{display:none}
.reg-list{border-top:3px solid var(--tusz)}
.reg-item{position:relative;border-bottom:1px solid var(--tusz)}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
summary{display:grid;grid-template-columns:48px 1fr;column-gap:var(--s2);row-gap:var(--s1);align-items:baseline;padding:var(--s2) 0 var(--s6);min-height:76px}
.no-zap summary{padding-bottom:var(--s2)}
.c-rok{grid-column:1;font:700 var(--t-lab)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;align-self:baseline}
.c-adres{grid-column:2;display:flex;align-items:baseline;gap:var(--s2);font:800 var(--t-adres)/1 var(--fc);overflow-wrap:anywhere}
.c-rodzaj{grid-column:2;font:400 var(--t-txt)/1.4 var(--f)}
.tgl{position:relative;flex:none;width:20px;height:20px;align-self:center}
.tgl::before,.tgl::after{content:"";position:absolute;background:var(--tusz)}
.tgl::before{left:0;right:0;top:9px;height:2px}
.tgl::after{top:0;bottom:0;left:9px;width:2px}
details[open] .tgl::after{transform:scaleY(0)}
.zap{position:absolute;left:calc(48px + var(--s2));bottom:0;display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font:700 var(--t-txt)/1.2 var(--f);color:var(--tusz);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;z-index:1}
.zap .arr{width:16px;height:16px}
.grp-lab{margin-top:var(--s4);padding-bottom:var(--s1);font:700 var(--t-lab)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--olowek)}
.grp-lab+.reg-list{border-top:1px solid var(--tusz)}

/* panel wiersza: dwa arkusze (zapis w archiwum / dziś), szkice układu stron zamiast szarych zastępników */
.panel{padding:var(--s2) 0 var(--s5)}
.sheets{display:grid;gap:var(--s4);grid-template-columns:1fr}
.sheet{position:relative;background:var(--arkusz);border:1.5px solid var(--grafit);outline:1px solid var(--jasny);outline-offset:3px;display:flex;flex-direction:column}
.sheet-cap{font:700 var(--t-lab)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:var(--s1) var(--s2);border-bottom:1.5px solid var(--grafit)}
.sheet-img{display:block;padding:var(--s2) var(--s2) var(--s1)}
.sheet-img svg{width:100%;height:auto}
.sheet-img.wyc{padding:var(--s3) var(--s2) var(--s2)}
.sheet-foot{padding:var(--s1) var(--s2) var(--s2);display:grid;gap:4px;margin-top:auto}
.sheet-foot .e{font:700 var(--t-lab)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--olowek)}
.sheet-foot .q{font:700 20px/1.35 var(--f);justify-self:start}
.sheet-foot .q span{position:relative;isolation:isolate}
.legenda{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);font:400 var(--t-txt)/1.4 var(--f);max-width:62ch}
.legenda i{flex:none;width:28px;height:18px;background:var(--zolc);clip-path:polygon(0 14%,3% 2%,97% 8%,100% 20%,99% 88%,96% 100%,3% 94%,0 82%)}
.facts{display:grid;gap:var(--s3);margin-top:var(--s5)}
.h3{font:800 var(--t-h3)/1 var(--fc)}
.zd{font:400 var(--t-lead)/1.45 var(--f);max-width:44ch}
dl{margin-top:var(--s3);border-top:1px solid var(--tusz)}
dl>div{display:grid;grid-template-columns:minmax(0,10.5em) 1fr;gap:var(--s2);padding:var(--s1) 0;border-bottom:1px solid var(--tusz);font:400 var(--t-txt)/1.4 var(--f)}
dt{font-weight:700}
.links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s3)}
.ext{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font:700 var(--t-txt)/1.2 var(--f);color:var(--tusz);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.ext .arr{width:16px;height:16px}
.s2-foot{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s5);padding-bottom:var(--s6)}
.honest{font:700 var(--t-lead)/1.45 var(--f);max-width:40ch}
.s2-note{display:flex;flex-direction:column;gap:var(--s1);max-width:56ch}
.s2-note p{font:400 var(--t-txt)/1.45 var(--f)}
.s2-note .more{color:var(--olowek)}

@media (min-width:1024px){
  .reg-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-block:var(--s1);height:36px;align-items:end;font:700 var(--t-lab)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase}
  .reg-head .c{display:block;align-self:end;font:700 var(--t-lab)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase}
  .reg-head .c-rok{grid-column:1/3}.reg-head .c-adres{grid-column:3/8}.reg-head .c-rodzaj{grid-column:8/11}.reg-head .c-zapis{grid-column:11/13}
  .reg-list{border-top:1px solid var(--tusz)}
  summary{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;padding:var(--s2) 0 var(--s1);min-height:72px}
  .no-zap summary{padding-bottom:var(--s1)}
  .c-rok{grid-column:1/3;font:400 var(--t-txt)/1.4 var(--f);letter-spacing:0;text-transform:none}
  .c-adres{grid-column:3/8}.c-rodzaj{grid-column:8/11}
  .zap{left:auto;bottom:auto;top:calc(var(--s2) + 8px);right:0;width:calc((100% - 11 * var(--gap)) / 12 * 2 + var(--gap))}
  .panel{padding:var(--s2) 0 var(--s6)}
  .sheets{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .sheet:nth-child(1){grid-column:3/8}.sheet:nth-child(2){grid-column:8/13}
  .legenda{margin-left:calc((100% - 11 * var(--gap)) / 12 * 2 + 2 * var(--gap))}
  .facts{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .facts .h3{grid-column:3/8}.facts-r{grid-column:8/13}
  .s2-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s3);padding-top:var(--s6);padding-bottom:var(--s7)}
  .honest,.s2-note{grid-column:3/10}
}
@media (max-width:1023px){.panel{padding-top:var(--s1)}.s2>.wrap{padding-top:var(--s1)}.s2-head{gap:var(--s1);padding-bottom:var(--s2)}.hero{padding-bottom:var(--s1)}.licz-n{width:64px}}

/* ============ TABLICA STYLU (index.html) ============ */
.tab{max-width:1296px;margin:0 auto;padding:0 var(--m)}
.tab-h{padding:var(--s5) 0 var(--s3)}
.tab-h h1{font:800 clamp(48px,7vw,88px)/.88 var(--fc);letter-spacing:-.01em}
.tab-h p{max-width:70ch;margin-top:var(--s2);font:400 var(--t-lead)/1.45 var(--f)}
.tab-note{font:400 var(--t-txt)/1.45 var(--f);color:var(--olowek);max-width:78ch;margin-top:var(--s1)}
.blok{border-top:3px solid var(--tusz);padding:var(--s3) 0 var(--s6)}
.blok>h2{font:800 clamp(36px,4.4vw,56px)/.9 var(--fc);margin-bottom:var(--s2)}
.blok>p{max-width:74ch;font:400 var(--t-txt)/1.5 var(--f);margin-bottom:var(--s2)}
.blok h3{font:800 28px/1 var(--fc);margin:var(--s3) 0 var(--s1)}
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s2)}
.sw{border:1.5px solid var(--grafit);background:var(--arkusz)}
.sw .k{height:96px;border-bottom:1.5px solid var(--grafit)}
.sw .i{padding:var(--s1) var(--s2) var(--s2);font:400 15px/1.4 var(--f)}
.sw .i b{display:block;font:800 26px/1 var(--fc);margin-bottom:4px}
.sw .i code{font:700 14px/1 var(--f);letter-spacing:.02em}
.tbl{width:100%;border-collapse:collapse;font:400 15px/1.4 var(--f);background:var(--arkusz)}
.tbl th,.tbl td{border:1px solid var(--grafit);padding:8px 12px;text-align:left;vertical-align:top}
.tbl th{font:700 13px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;background:var(--papier)}
.par{display:inline-block;padding:4px 10px;font:700 15px/1.2 var(--f);margin-right:6px}
.skala{background:var(--arkusz);border:1.5px solid var(--grafit)}
.skala .w{display:grid;grid-template-columns:150px 1fr;gap:var(--s2);align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--jasny)}
.skala .w:last-child{border-bottom:0}
.skala .r{font:700 13px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--olowek)}
.el-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}
.el{background:var(--arkusz);border:1.5px solid var(--grafit);outline:1px solid var(--jasny);outline-offset:3px;display:flex;flex-direction:column}
.el .pic{padding:var(--s2)}
.el .pic svg{width:100%;height:auto;border:1px solid var(--jasny)}
.el .tx{padding:0 var(--s2) var(--s2);font:400 15px/1.45 var(--f)}
.el .tx h4{font:800 24px/1 var(--fc);margin:0 0 6px}
.el .tx p+p{margin-top:6px}
.el .tx .rola{font-weight:700}
.dwa{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:900px){.dwa{grid-template-columns:1fr}}
.makieta-bar{background:var(--papier);border:1.5px solid var(--grafit);padding:0 var(--s3);display:flex;justify-content:space-between;align-items:center;height:56px;border-bottom:1px solid var(--tusz)}
.rama{border:1.5px solid var(--grafit);outline:1px solid var(--jasny);outline-offset:3px;background:var(--papier)}
.rama-ifr{width:100%;border:0;display:block;background:var(--papier)}
.pokaz{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-start}
.pokaz .tel{flex:none;width:390px;max-width:100%}
.pokaz .kom{flex:1 1 560px;min-width:0}
.pokaz .cap{font:700 13px/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--olowek);margin-bottom:var(--s1)}
.szkice-sieć{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s2)}
.szkice-sieć figure{background:var(--arkusz);border:1.5px solid var(--grafit);padding:8px 8px 6px}
.szkice-sieć figcaption{font:700 12.5px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;padding:6px 4px 0}
.slop td:first-child{white-space:nowrap;font-weight:700}
.ink-on{color:var(--tusz)}

.el .pic img,.szkice-sieć img{width:100%;height:auto}
/* ---- o57 style2.css ---- */
/* WERSJA 2 (02.11.2026): tło z FOTOGRAFII faktur CC0 (tla/), nierówny brzeg kartki clip-path, rekwizyty v3, ribbon z obrysem. Poprzednia: style2-v1-filtry.css.
   Rewizja po inspiracjach Łukasza (CD, 02.11.2026): „pracownia” (kartka, drewno, rekwizyty z inspiracji nr 2) + akcenty i pasek ładowania (nr 1)
   + czysty interfejs jak w dobrej aplikacji. Ładowany PO style.css (układ, siatka, skala pisma, teksty bez zmian); wszystko pod klasą .pracownia.
   ZASADA GRANICY: kartka, drewno, rekwizyty, rysunki = płótno (analogowe, chropawe, nieklikalne). Interfejs = NAD płótnem: czysty, płaski, zaokrąglony,
   jedna miękka linia cienia, tekst zawsze tuszem bez filtrów. Okrągłe i gładkie = cyfrowe; chropawe = analogowe. */

.pracownia{
  --kartka:#F3E6CA; --kartka-jasna:#F6EBD2; --kalka:#FBF7EA; --ui:#FFFDF7;
  --papier:#F3E6CA; --arkusz:#FBF7EA; --jasny:#CDBB94;
  --tusz:#1D1C1A; --grafit:#3B3A36; --olowek:#4A4436; --konstr:#8A8A85;
  --zolc:#FFD60A; --drewno:#2B1B11; --krem:#F3EAD3;
  --rim:max(32px,calc((100vw - 1440px) / 2 + 32px)); --r:14px; --cien:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 28px rgba(60,35,10,.22), 0 1px 3px rgba(60,35,10,.25);
  /* powierzchnia: chłodna jasna szarość z miękkimi ukośnymi pasami i znacznikami siatki rysunkowej (inspiracja nr 1); papier z nr 2 leży na niej */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144'%3E%3Cpath d='M72 66v12M66 72h12' stroke='%23B9BCC3' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 0 0/144px 144px,
    linear-gradient(118deg,#E9EAEC 0,#DDDFE2 14%,#EEEFF1 30%,#E0E2E5 46%,#ECEDEF 62%,#DADCE0 80%,#E8E9EB 100%) 0 0/1800px 1800px,
    #E4E5E8;
  color:var(--tusz); position:relative; overflow-x:clip;
}
.pracownia body,.pracownia{margin:0}
@media (max-width:1023px){.pracownia{--rim:6px;--r:12px}}
html:has(.pracownia){background:#E4E5E8}
/* nagłówek A nie rośnie powyżej wartości z okna 1440 (układ zatwierdzony na 1440; kartka i treść mają stałą szerokość, więc większy nagłówek wchodziłby na znak) */
@media (min-width:1024px){.pracownia{--t-a:clamp(96px,min(8.2vw,13vh,118px),118px)}}

/* ---------- kartka: fotografia faktury papieru (tla/papier-1.jpg = Paper001 + Paper003 + Paper006 z ambientCG, CC0) ----------
   Rama (.kartka-ramka) niesie cień (drop-shadow idzie PO clip-path dziecka, więc cień podąża za nierównym brzegiem);
   dziecko (.kartka-tlo) ma brzeg wycięty clip-path (--krawedz z buduj2.py), fakturę, światło z lewej góry, plamy, dwa zagięcia i postarzone brzegi. */
.kartka-wrap{position:relative;padding-bottom:40px;overflow-x:clip}
.kartka-ramka{position:absolute;z-index:0;top:0;bottom:24px;left:var(--rim);right:var(--rim);pointer-events:none;
  filter:drop-shadow(1.5px 2.5px 1.5px rgba(28,34,46,.55)) drop-shadow(9px 16px 14px rgba(28,34,46,.34))}
.kartka-tlo{position:absolute;inset:0;clip-path:var(--krawedz);
  background:
    linear-gradient(135deg,rgba(255,249,232,.30) 0,rgba(255,249,232,0) 30%,rgba(255,249,232,0) 64%,rgba(95,55,15,.15) 100%),
    linear-gradient(90deg,transparent calc(33.3% - 3px),rgba(90,60,25,.10) 33.3%,rgba(255,255,255,.30) calc(33.3% + 2px),transparent calc(33.3% + 8px)),
    linear-gradient(180deg,transparent 790px,rgba(90,60,25,.08) 791px,rgba(255,255,255,.26) 793px,transparent 799px),
    url(../img/tla/papier-1.jpg) 0 0/1024px 1024px, var(--kartka);
  box-shadow:inset 0 0 46px rgba(135,95,40,.20),inset 0 0 8px rgba(110,70,25,.22)}
@media (max-width:1023px){
  .kartka-ramka{filter:drop-shadow(2px 4px 4px rgba(28,34,46,.5))}
  .kartka-tlo{background:
    linear-gradient(135deg,rgba(255,249,232,.26) 0,rgba(255,249,232,0) 30%,rgba(255,249,232,0) 66%,rgba(95,55,15,.12) 100%),
    url(../img/tla/papier-1-m.jpg) 0 0/512px 512px, var(--kartka);box-shadow:inset 0 0 36px rgba(135,95,40,.30)}
}
.kartka{position:relative;z-index:1}
.kartka .wrap{position:relative}
.rekw{position:absolute;z-index:1;pointer-events:none}
.rekw-box{display:none}
.rekw img{display:block;width:100%;height:auto}
@media (min-width:1400px){.rekw-box{display:block;position:absolute;z-index:1;left:50%;top:0;width:1440px;margin-left:-720px;height:0;pointer-events:none}}
/* warstwa kompetencji (komp.py): ołówkowe karteczki, taśmy, szkice; nieklikalne; żółty zakreślacz (.mk) włącza się przy kroku 3 (klasa krok-3 na body) */
.komp{position:absolute;display:block;pointer-events:none;overflow:visible}
.komp .mk{fill:transparent;transition:fill 280ms linear,opacity 280ms linear}
.krok-3 .komp .mk{fill:#FFD60A;opacity:.6}
.komp-box,.komp-cert{display:none}
.komp-m{display:none}
@media (min-width:1400px){
  .komp-box{display:block;position:absolute;left:480px;top:8px;width:300px;height:130px}
  .komp-cert{display:block;position:absolute;right:-8px;top:var(--s6);width:620px;height:200px;transform:scale(.86);transform-origin:100% 0}
  .s2-head{position:relative}.s2-foot{position:relative}
}
@media (max-width:1399px){
  .komp-m{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;padding:14px 12px 6px;position:relative;z-index:1}
  .komp-m .komp{position:relative;height:auto}
  .komp-m .komp.k-seo{width:76px}.komp-m .komp.k-ai{width:62px}.komp-m .komp.k-ads{width:96px}.komp-m .komp.k-maps{width:76px}
}

/* ---------- pasek aplikacji (interfejs nad kartką) ---------- */
.pasek-app{position:sticky;top:0;z-index:30;height:56px;background:rgba(27,26,24,.92);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.10);color:var(--krem);box-shadow:0 6px 18px rgba(28,34,46,.22)}
.pasek-app .bar2{display:flex;align-items:center;justify-content:space-between;height:56px}
.pasek-app .logo2{display:flex;align-items:center;min-height:44px}
.pasek-app .logo2 img{height:26px;width:auto}
.pasek-app .mono{display:block}
.pasek-app .logo2 img.poz{display:none}
@media (min-width:1280px){.pasek-app .logo2 img.poz{display:block}.pasek-app .mono{display:none}}
.pasek-app nav ul{display:flex;gap:6px;align-items:center}
.pasek-app nav a,.pasek-app .pig-off{font:700 15px/1 var(--f);color:var(--krem);text-decoration:none;padding:10px 14px;border-radius:999px;transition:background-color 140ms linear}
.pasek-app nav a:hover{background:rgba(255,255,255,.12)}
.pasek-app .pig-off{font-weight:400;color:rgba(243,234,211,.72);cursor:default}
.pasek-app .pig-off small{margin-left:8px;padding:3px 8px;border-radius:999px;background:rgba(255,214,10,.16);color:#FFE681;font:700 11px/1 var(--f);letter-spacing:.08em;text-transform:uppercase}
.pasek-app .kontakt-p{border:1.5px solid rgba(243,234,211,.5);margin-left:8px}
.pasek-mini{position:absolute;left:0;bottom:-1px;height:3px;width:var(--p,100%);background:var(--zolc);display:none}
@media (max-width:1023px){
  .pasek-app nav{display:none}
  .pasek-app .logo2 img.mono{height:30px}
  .pasek-mini{display:block}
}
.pracownia :focus-visible{outline:3px solid var(--tusz);outline-offset:3px}
.pasek-app :focus-visible{outline-color:var(--krem)}

/* ---------- hero: ten sam układ, nowa warstwa ---------- */
.pracownia .hero{padding-top:16px}
.pracownia .logo-big{top:8px;right:auto;left:auto;display:none!important;mix-blend-mode:multiply}
.pracownia .logo-big img{display:block;width:100%;height:auto}
@media (min-width:1400px){.pracownia .logo-big{display:block!important;right:40px;width:min(450px,31vw)}}
.pracownia .b::before{left:13px;width:2px;border:0;background:var(--tusz);top:calc(var(--rowh) / 2);height:calc(var(--rowh) * 2)}
.pracownia .n{background:var(--ui);border:2px solid var(--tusz);border-radius:50%;box-shadow:0 2px 6px rgba(60,35,10,.22)}
.pracownia .n svg{display:none}
.pracownia .is-active .n{background:var(--tusz)}
.pracownia .b li.is-done .n{background:var(--tusz);color:var(--krem)}
@media (max-width:1023px){.pracownia .b::before{left:11px}}
.pracownia .scena{background:var(--ui);border:1px solid rgba(59,58,54,.35);outline:0;border-radius:var(--r);box-shadow:var(--cien)}
.pracownia .scena .out,.pracownia .eti{color:var(--olowek)}
.pracownia .btn{border-radius:var(--r);box-shadow:0 8px 18px rgba(30,20,10,.30);transition:transform 140ms cubic-bezier(.2,.7,.2,1),box-shadow 140ms linear,background-color 140ms linear,color 140ms linear}
@media (hover:hover){.pracownia a.btn:hover{background:var(--ui);color:var(--tusz);transform:translateY(-2px);box-shadow:0 12px 22px rgba(30,20,10,.34)}}
.pracownia a.btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(30,20,10,.3)}
.pracownia .btn{background:var(--tusz);color:var(--krem);border-color:var(--tusz)}

/* ---------- pasek ładowania: postęp mechanizmu Ciebie → Twój biznes → Marketing ---------- */
.postep{display:none;position:absolute;z-index:3;top:244px;width:calc(min(450px,31vw) * .78);right:calc(40px + min(450px,31vw) * .11)}
@media (min-width:1400px){.postep{display:block}}
.postep-wstega{position:relative;display:flex;align-items:center;justify-content:center;height:34px;margin-bottom:12px;
  filter:drop-shadow(1.3px 0 0 #1D1C1A) drop-shadow(-1.3px 0 0 #1D1C1A) drop-shadow(0 1.3px 0 #1D1C1A) drop-shadow(0 -1.3px 0 #1D1C1A) drop-shadow(3px 6px 4px rgba(24,10,2,.40))}
.postep-wstega .et{position:relative;z-index:1;display:block;width:100%;text-align:center;padding:0 22px;height:34px;line-height:34px;background:var(--zolc);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  font:700 14px/34px var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--tusz);white-space:nowrap}
.postep-wstega .uk{position:absolute;top:2px;height:30px;width:42px;background:repeating-linear-gradient(115deg,var(--zolc) 0 7px,transparent 7px 15px)}
.postep-wstega .uk.l{left:-52px}.postep-wstega .uk.p{right:-52px}
.postep-tor{position:relative;height:22px;border:2px solid var(--grafit);border-radius:999px;background:var(--ui);overflow:hidden;box-shadow:0 2px 6px rgba(60,35,10,.2) inset;filter:drop-shadow(2px 4px 3px rgba(24,10,2,.35))}
.postep-wyp{position:absolute;left:0;top:0;bottom:0;width:var(--p,100%);background:
  repeating-linear-gradient(135deg,rgba(29,28,26,.16) 0 6px,transparent 6px 12px),var(--zolc);border-radius:999px;transition:width 280ms cubic-bezier(.2,.7,.2,1)}
.postep-tor .ti{position:absolute;top:0;bottom:0;width:2px;background:var(--grafit);opacity:.55}
.postep-tor .t1{left:33.3%}.postep-tor .t2{left:66.6%}
.postep-kroki{display:flex;justify-content:space-between;margin-top:6px;font:700 12.5px/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--olowek)}
.postep-kroki span.on{color:var(--tusz)}
.postep-kroki span{flex:1;text-align:center}
.postep-kroki span:first-child{text-align:left}.postep-kroki span:last-child{text-align:right}
@media (prefers-reduced-motion:no-preference){.postep.rusz .postep-wyp{background-position:0 0;animation:pasy 1.2s linear infinite}@keyframes pasy{to{background-position:17px 0}}}

/* ---------- pigułki statusu ---------- */
.pracownia .pig{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--ui);border:1px solid rgba(59,58,54,.4);font:700 13px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--tusz);box-shadow:0 1px 3px rgba(60,35,10,.18)}
.pracownia .pig.zolta{background:var(--zolc);border-color:var(--tusz)}
.pracownia .c-rok{align-self:center}

/* ---------- sekcja 2 ---------- */
.pracownia .s2{border-top:0;position:relative}
.pracownia .s2::before{content:"";position:absolute;left:var(--rim);right:var(--rim);top:0;height:3px;background:var(--tusz)}
.pracownia .licz-n{line-height:0}
.pracownia .insp{position:relative;display:inline-block;border-radius:4px;outline:0}
.pracownia .insp-ram{position:absolute;inset:-6px;border:1.5px dashed var(--tusz);border-radius:4px;opacity:0;transition:opacity 140ms linear;pointer-events:none}
.pracownia .insp-ram::before,.pracownia .insp-ram::after{content:"";position:absolute;width:8px;height:8px;background:var(--ui);border:1.5px solid var(--tusz);border-radius:2px}
.pracownia .insp-ram::before{left:-5px;top:-5px}.pracownia .insp-ram::after{right:-5px;bottom:-5px}
.pracownia .insp-chip{position:absolute;left:-6px;top:calc(100% + 10px);z-index:5;white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--tusz);color:var(--krem);font:700 13px/1.2 var(--f);opacity:0;transform:translateY(-4px);transition:opacity 140ms linear,transform 140ms cubic-bezier(.2,.7,.2,1);pointer-events:none;box-shadow:0 6px 16px rgba(30,20,10,.35)}
@media (hover:hover){.pracownia .insp:hover .insp-ram,.pracownia .insp:hover .insp-chip{opacity:1;transform:none}}
.pracownia .insp:focus-visible .insp-ram,.pracownia .insp:focus-visible .insp-chip,.pracownia .insp.is-on .insp-ram,.pracownia .insp.is-on .insp-chip{opacity:1;transform:none}
.pracownia .licz-b{position:relative}
.pracownia .linijka{position:absolute;left:0;top:calc(100% + 2px);width:330px;z-index:2;display:none;transform:rotate(-1.2deg)}
@media (min-width:1400px){.pracownia .linijka{display:block}}
.pracownia .podz{display:none}
@media (max-width:1399px){.pracownia .podz{display:block}}

.pracownia .reg-list{border-top-color:var(--tusz)}
.pracownia .reg-item{border-bottom-color:rgba(29,28,26,.55)}
.pracownia .reg-head{color:var(--olowek)}
.pracownia .zap{border-radius:6px}

/* arkusze z rysunkami: kalka przypięta do kartki (analogowa: lekko krzywa, miękki cień kontaktowy, bez zaokrągleń) */
.pracownia .sheet{background:var(--kalka);border:0;outline:0;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 26px rgba(70,40,10,.30),0 2px 4px rgba(70,40,10,.28);transform:rotate(-.5deg);position:relative}
.pracownia .sheet:nth-child(2){transform:rotate(.45deg)}
.pracownia .sheet::before{content:"";position:absolute;inset:0;background:url(../img/svg/papier-faktura.svg);opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.pracownia .sheet-cap{border-bottom:0;padding:10px 14px 0}
.pracownia .sheet-img{position:relative;padding:8px 14px 4px}
.pracownia .sheet-img svg{mix-blend-mode:multiply}
.pracownia .sheet-foot .q span.znacznik{color:var(--tusz)}
.pracownia .znacznik::before{background:var(--zolc)}
.pracownia .sheet.rysuj .rys{stroke-dasharray:1;stroke-dashoffset:1;animation:rysuj 1.3s cubic-bezier(.3,.6,.2,1) .2s forwards}
.pracownia .sheet.rysuj .hat{opacity:0;animation:wejdz .5s ease 1.1s forwards}
.pracownia .sheet.rysuj .txt{opacity:0;animation:wejdz .5s ease .9s forwards}
@keyframes rysuj{to{stroke-dashoffset:0}}
@keyframes wejdz{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pracownia .sheet.rysuj .rys{animation:none;stroke-dasharray:none;stroke-dashoffset:0}.pracownia .sheet.rysuj .hat,.pracownia .sheet.rysuj .txt{animation:none;opacity:1}}

/* pinezka komentarza (jak w narzędziach projektowych): wskazuje stopkę z podpisem; zastępuje legendę */
.pin{position:absolute;z-index:4}
.pin-k{display:grid;place-items:center;width:26px;height:26px;border-radius:50% 50% 50% 4px;background:var(--zolc);border:2px solid var(--tusz);font:700 13px/1 var(--f);color:var(--tusz);box-shadow:0 4px 10px rgba(30,20,10,.35)}
.pin-b{position:absolute;right:-4px;bottom:calc(100% + 10px);width:max-content;max-width:230px;padding:8px 12px;border-radius:var(--r);background:var(--ui);border:1px solid rgba(59,58,54,.4);box-shadow:var(--cien);font:700 14px/1.3 var(--f);color:var(--tusz)}
.pin-b::after{content:"";position:absolute;right:14px;top:100%;border:7px solid transparent;border-top-color:var(--ui)}
.pracownia .legenda{display:none}

.pracownia .facts .h3,.pracownia .zd{color:var(--tusz)}
.pracownia dl,.pracownia dl>div{border-color:rgba(29,28,26,.6)}
.pracownia .s2-foot .honest{color:var(--tusz)}
.pracownia .s2-note .more{color:var(--olowek)}

/* linia decyzji i węzeł: żółć z inspiracji */
.pracownia .dl-n2{background:var(--zolc)}
.pracownia .pen-mk path{stroke:#1D1C1A}
.pracownia .znacznik::before,.pracownia .is-active .t::before{background:var(--zolc)}

/* ---------- telefon: lżej ---------- */
@media (max-width:1023px){
  .pracownia .sheet,.pracownia .sheet:nth-child(2){transform:none}
}

/* ---------- tablica (galeria elementów rewizji) ---------- */
.gal{background:none!important;overflow:visible}
.gal-bar{display:grid;gap:22px;max-width:520px}
.gal-bar .row{background:var(--kartka);padding:18px 22px 14px;border-radius:2px;box-shadow:inset 0 0 40px rgba(135,95,40,.3),0 8px 18px rgba(0,0,0,.25);position:relative}
.gal-bar .postep{position:static;display:block;width:100%}

@media (min-width:1400px){.pracownia .s2-head{padding-bottom:48px}}


/* „Na tym pracujemy”: blade ślady tuszu z nazwami technologii (bez logotypów firm; wyjątek: oficjalny znak W WordPressa jako obraz). Tło słabsze niż nagłówek A, logo i szkice;
   rozrzucone, nie pasek; nieklikalne. */
.komp.tech{opacity:.22;mix-blend-mode:multiply}
.komp.tech-et{opacity:.42;mix-blend-mode:multiply}
.tech-m,.tech-k4{display:none}
@media (min-width:1400px){.tech-k4{display:block;position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none}}
@media (max-width:1023px){
  .tech-m{display:block;position:absolute;z-index:0;left:228px;top:210px;width:150px;height:90px;pointer-events:none}
  .tech-m .komp{transform-origin:0 50%}
}