/* Pracownia Projektowa Natalia Lichota, wersja 2: od kreski do domu.
   Kroje hostowane lokalnie: Big Shoulders Display (nagłówki), Archivo (treść), JetBrains Mono (opisy rysunku). */

@font-face { font-family: 'Big Shoulders Display'; src: url('fonts/big-shoulders.woff2') format('woff2'); font-weight: 500 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo.woff2') format('woff2'); font-weight: 400 650; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }

:root {
  --papier: #f2efe8;
  --papier-2: #e7e2d6;
  --karta: #faf8f3;
  --grafit: #1a1d1a;
  --grafit-2: #424842;
  --szary: #5b615a;
  --linia: #d2cab9;
  --linia-mocna: #a99f8b;
  --zielen: #5a8f29;
  --zielen-ciemna: #3d6b14;
  --zielen-swiatlo: #a6e36a;
  --noc: #121512;
  --las: #0d2015;
  --blad: #b42318;
  /* nazwy używane przez skrypty formularzy z poprzedniej wersji strony */
  --primary: #3d6b14;
  --text-muted: #5b615a;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --tekst: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --g: clamp(18px, 4vw, 64px);
  --sekcja: clamp(80px, 10vw, 150px);
  --nag: 72px;
}
@media (max-width: 959px) { :root { --nag: 62px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nag) + 8px); }
html:not(.js) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--grafit);
  font-family: var(--tekst); font-size: 17px; line-height: 1.6;
  text-wrap: pretty; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* ziarno papieru nad całością, bez wpływu na kliknięcia */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .stopka { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--zielen-ciemna); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 800; text-wrap: balance; }
figure { margin: 0; }
.nw { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-fokus:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 200; background: var(--grafit); color: #fff; padding: 10px 14px; }
:focus-visible { outline: 2px solid var(--zielen); outline-offset: 3px; }
::selection { background: var(--zielen-swiatlo); color: var(--grafit); }
svg { overflow: visible; }

/* ---------- przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 600 15px/1 var(--tekst); letter-spacing: .01em; white-space: nowrap;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.przycisk > span, .przycisk > svg { position: relative; z-index: 1; }
.przycisk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.przycisk:hover svg { transform: translateX(4px); }
.przycisk-glowny { background: var(--grafit); color: #fff; }
.przycisk-glowny::before { content: ""; position: absolute; inset: 0; background: var(--zielen-ciemna); transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; }
.przycisk-glowny:hover::before { transform: none; }
.przycisk-glowny::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
  transform: translateX(-130%); animation: blask 6.5s var(--ease) 2.4s infinite;
}
@keyframes blask { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.przycisk-obrys { background: transparent; color: var(--grafit); border-color: var(--grafit); }
.przycisk-obrys:hover { background: var(--grafit); color: #fff; }
.przycisk:disabled { opacity: .6; cursor: progress; }
.kolo-przycisk { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .3s, color .3s; flex: none; }
.kolo-przycisk svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kolo-przycisk:hover { background: var(--grafit); color: var(--papier); }
.link-strzalka { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; font-size: 15px; text-decoration: none; color: inherit; position: relative; padding-bottom: 5px; }
.link-strzalka::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease); }
.link-strzalka:hover::after { transform: scaleX(.35); }
.link-strzalka svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.link-strzalka:hover svg { transform: translateX(5px); }

/* ---------- kursor kreślarski i siatka reagująca na kursor ---------- */
.celownik, .siatka-kursor { display: none; }
.kursor .celownik { display: block; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .3s; }
.kursor .celownik.aktywny { opacity: 1; }
.kursor .celownik.ukryty { opacity: 0; }
.celownik-x, .celownik-y, .celownik-kolo, .celownik-wsp { position: absolute; left: 0; top: 0; will-change: transform; }
.celownik-x { width: 100vw; height: 1px; background: rgba(90, 143, 41, .38); }
.celownik-y { width: 1px; height: 100vh; background: rgba(90, 143, 41, .38); }
.celownik-kolo { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid var(--zielen); border-radius: 50%; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s; }
.celownik.nad-linkiem .celownik-kolo { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(90, 143, 41, .12); }
.celownik-wsp { font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--zielen-ciemna); white-space: nowrap; }
.kursor body, .kursor a, .kursor button, .kursor summary { cursor: none; }
.kursor input, .kursor textarea, .kursor .okno, .kursor .okno * { cursor: auto; }
.kursor .okno button, .kursor .okno a { cursor: pointer; }
.kursor .porownanie { cursor: ew-resize; }
.kursor .siatka-kursor {
  display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(90,143,41,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(90,143,41,.5) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 100%);
}

/* ---------- nagłówek ---------- */
.naglowek {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--nag);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--g);
  background: rgba(242, 239, 232, .84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(26, 29, 26, .1); transition: background-color .4s, color .4s, border-color .4s;
}
.logo img { height: 38px; width: auto; transition: filter .4s; }
.nawigacja { display: flex; gap: clamp(14px, 2vw, 30px); }
.nawigacja a { font: 600 13px/1 var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: inherit; text-decoration: none; position: relative; padding: 8px 0; }
.nawigacja a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--zielen); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nawigacja a:hover::after { transform: scaleX(1); }
.naglowek-akcje { display: flex; align-items: center; gap: 16px; }
.tel-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.tel-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--zielen-ciemna); }
.naglowek .przycisk { min-height: 42px; padding: 0 18px; font-size: 14px; }
.menu-przycisk { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; align-items: center; justify-content: center; }
.menu-kreski { position: relative; width: 18px; height: 10px; }
.menu-kreski i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.menu-kreski i:first-child { top: 0; } .menu-kreski i:last-child { top: 8.5px; }
.menu-otwarte .menu-kreski i:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-otwarte .menu-kreski i:last-child { top: 4.25px; transform: rotate(-45deg); }
.naglowek.ciemny { background: rgba(18, 21, 18, .78); color: #f2efe8; border-bottom-color: rgba(242, 239, 232, .12); }
.naglowek.ciemny .logo img { filter: brightness(0) invert(1); }
.naglowek.ciemny .tel-link svg { color: var(--zielen-swiatlo); }
.naglowek.ciemny .przycisk-glowny { background: var(--papier); color: var(--grafit); }
.naglowek.ciemny .przycisk-glowny:hover { color: #fff; }
@media (max-width: 1199px) { .tel-pelny { display: none; } }
@media (max-width: 959px) {
  .nawigacja, .naglowek-cta { display: none; }
  .menu-przycisk { display: inline-flex; }
  .tel-link { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; justify-content: center; }
  .naglowek-akcje { gap: 10px; }
  .logo img { height: 32px; }
}
.menu-mobilne {
  position: fixed; inset: 0; z-index: 75; background: var(--las); color: #f2efe8;
  padding: calc(var(--nag) + 24px) var(--g) 32px; display: flex; flex-direction: column; justify-content: space-between;
  visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease), visibility 0s .7s;
}
.menu-otwarte .menu-mobilne { visibility: visible; clip-path: inset(0); transition: clip-path .7s var(--ease); }
.menu-otwarte .naglowek { background: transparent; color: #f2efe8; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-otwarte .naglowek .logo img { filter: brightness(0) invert(1); }
.menu-mobilne nav { display: flex; flex-direction: column; }
.menu-mobilne nav a { display: flex; align-items: baseline; gap: 14px; font: 800 clamp(44px, 13vw, 92px)/1 var(--display); text-transform: uppercase; color: inherit; text-decoration: none; padding: 6px 0; transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.menu-mobilne nav a small { font: 400 12px/1 var(--mono); color: var(--zielen-swiatlo); }
.menu-otwarte .menu-mobilne nav a { transform: none; opacity: 1; }
.menu-otwarte .menu-mobilne nav a:nth-child(2) { transition-delay: .05s; } .menu-otwarte .menu-mobilne nav a:nth-child(3) { transition-delay: .1s; }
.menu-otwarte .menu-mobilne nav a:nth-child(4) { transition-delay: .15s; } .menu-otwarte .menu-mobilne nav a:nth-child(5) { transition-delay: .2s; }
.menu-otwarte .menu-mobilne nav a:nth-child(6) { transition-delay: .25s; }
.menu-dol { display: grid; gap: 10px; }
.menu-dol a { color: #f2efe8; font-size: 18px; font-weight: 600; text-decoration: none; }
.menu-dol .przycisk { margin-top: 12px; background: var(--papier); color: var(--grafit); }

/* ---------- 1. bohater: od kreski do domu ---------- */
.bohater { position: relative; height: 100svh; min-height: 560px; }
.scena { position: relative; height: 100%; overflow: hidden; background: var(--papier); }
.scena-siatka {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(169,159,139,.38) 1px, transparent 1px), linear-gradient(90deg, rgba(169,159,139,.38) 1px, transparent 1px),
    linear-gradient(rgba(169,159,139,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(169,159,139,.16) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: -1px -1px;
}
.swiat { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--pas, 200px) - 40px); overflow: hidden; }
.swiat-szkic, .swiat-wiz, .swiat-wiz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 44%; }
.swiat-szkic, .swiat-kreska, .ciecie, .ramka-rys { display: none; }
.tabelka {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--papier);
  border-top: 2px solid var(--grafit); display: grid;
  grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, .75fr);
}
.swiat-klip { position: absolute; inset: 0; }
.tab-pole { padding: 16px 22px 20px; border-left: 1px solid var(--linia-mocna); min-width: 0; }
.tab-pole:first-child { border-left: 0; padding-left: var(--g); padding-right: 32px; }
.tab-pole:last-child { padding-right: var(--g); }
.pole { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--szary); margin-bottom: 12px; }
.h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 3.9vw, 62px); line-height: .86; letter-spacing: .004em; white-space: nowrap; transform-origin: 0 0; }
.h1-b { color: var(--zielen-ciemna); }
.tab-imie { font-weight: 650; font-size: 16px; margin: 0 0 6px; }
.tab-lead { font-size: 14.5px; line-height: 1.5; color: var(--grafit-2); margin: 0; }
.tab-haslo-m { display: none; }
.tab-haslo { font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1.05; text-transform: uppercase; margin: 0 0 12px; }
.tab-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.tab-cta .przycisk { min-height: 44px; padding: 0 18px; font-size: 14px; }
.tab-pracownia p { font-size: 14.5px; margin: 0 0 6px; color: var(--grafit-2); }
.tab-pracownia a { color: inherit; font-weight: 600; text-decoration: none; }
@media (max-width: 1199px) { .tabelka { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.1fr); } .tab-pracownia { display: none; } .tab-spotkanie { padding-right: var(--g); } }
@media (max-width: 959px) {
  .tabelka { grid-template-columns: auto minmax(0, 1fr); }
  .tab-pole { padding: 12px 16px 14px; }
  .tab-tytul { padding-left: var(--g); }
  .tab-autor { padding-right: var(--g); }
  .tab-spotkanie { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linia-mocna); padding: 12px var(--g) 14px; display: flex; flex-direction: column; }
  .h1 { font-size: clamp(34px, 9.5vw, 56px); }
  .h1-a, .h1-b { display: block; }
  .tab-lead { display: none; }
  .tab-imie { font-size: 15px; }
  .tab-haslo { font-size: 20px; margin-bottom: 0; }
  .tab-spotkanie .tab-haslo { display: none; }
  .tab-autor .tab-haslo-m { display: block; }
  .tab-cta { display: grid; grid-template-columns: 1fr 1fr; }
  .tab-cta .przycisk { padding: 0 12px; }
  .pole { margin-bottom: 8px; }
}

/* tryb sekwencji: klasę sekw i stan początkowy ustawia skrypt w HTML zaraz za sekcją, jeszcze przed pierwszym malowaniem,
   więc scena (z tytułem, elementem LCP) jest widoczna od razu, a GSAP przejmuje ją bez skoku */
.js.sekw .swiat-wiz { clip-path: inset(0 100% 0 0); }
.js .rog, .js .rys-et, .js .tab-pole:not(.tab-tytul) { opacity: 0; }
/* wejście tytułu: rusza z pierwszym malowaniem (CSS, nie GSAP), tytuł widać od początku i wyostrza się */
@keyframes h1Wejscie { from { opacity: .3; transform: translateY(35%); filter: blur(12px); } }
.js .h1 > span { animation: h1Wejscie 1.2s cubic-bezier(.215, .61, .355, 1) backwards; }
.js .h1 > .h1-b { animation-delay: .14s; }
.sekw .bohater { height: 330vh; }
.sekw .scena { position: sticky; top: 0; height: 100svh; min-height: 0; }
.sekw .swiat { right: auto; bottom: auto; overflow: visible; transform-origin: 0 0; will-change: transform; }
.sekw .swiat-klip { will-change: clip-path; }
.sekw .swiat-szkic { display: block; opacity: 0; }
.sekw .swiat-wiz { will-change: clip-path; }
.sekw .swiat-kreska { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.sekw .ciecie { display: block; position: absolute; top: -3%; bottom: -3%; left: 0; width: 2px; margin-left: -1px; background: var(--zielen-swiatlo); box-shadow: 0 0 18px 2px rgba(166, 227, 106, .7); opacity: 0; will-change: transform; }
.ciecie b { position: absolute; top: 4%; left: 12px; padding: 8px 12px; background: var(--grafit); font: 500 22px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zielen-swiatlo); white-space: nowrap; }
.sekw .ramka-rys { display: block; position: absolute; left: 0; top: 0; pointer-events: none; }
.sekw .h1 { will-change: transform; }
@media (max-width: 959px) { .sekw .bohater { height: 240vh; } }
.swiat-kreska { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kreska-dom path { stroke: var(--grafit); stroke-width: 3.4; }
.kreska-dom .k-okno { stroke-width: 2.6; }
.kreska-dom .k-teren { stroke-width: 2.4; stroke: var(--grafit-2); }
.kreska-opis { stroke: var(--zielen); stroke-width: 2.2; }
.kreska-opis .k-os { stroke-dasharray: 24 10 4 10; stroke-width: 1.8; }
.kreska-opis circle { fill: var(--papier); }
.kreska-opis text { fill: var(--zielen-ciemna); stroke: none; font: 500 26px var(--mono); text-anchor: middle; }
.js .swiat-kreska path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .kreska-opis .k-os { stroke-dasharray: 1; }
.js .kreska-opis circle, .js .kreska-opis text { opacity: 0; }
.rog { position: absolute; width: 22px; height: 22px; border-color: var(--grafit); border-style: solid; border-width: 0; }
.rog-1 { left: -12px; top: -12px; border-left-width: 1.5px; border-top-width: 1.5px; }
.rog-2 { right: -12px; top: -12px; border-right-width: 1.5px; border-top-width: 1.5px; }
.rog-3 { left: -12px; bottom: -12px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.rog-4 { right: -12px; bottom: -12px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.rys-et { position: absolute; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit-2); white-space: nowrap; }
.rys-et-1 { left: -12px; top: -30px; }
.rys-et-2 { right: -12px; top: -30px; }
.rys-et-3 { left: -12px; bottom: -32px; display: flex; align-items: center; gap: 10px; color: var(--zielen-ciemna); }
.przewin-kreska { display: inline-block; width: 36px; height: 1.5px; background: currentColor; transform-origin: left; animation: przewin 2.4s var(--ease) infinite; }
@keyframes przewin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@media (max-width: 1199px) { .rys-et-2 { display: none; } }

/* ---------- 2. taśma miejscowości ---------- */
.tasma { padding: clamp(40px, 6vw, 80px) 0; border-bottom: 1px solid var(--linia); overflow: hidden; }
.tasma-opis { display: flex; justify-content: space-between; gap: 16px; padding: 0 var(--g); margin-bottom: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--szary); }
.tasma-tor { overflow: hidden; }
.tasma-rzad { display: flex; width: max-content; will-change: transform; }
.tasma-zestaw { display: flex; align-items: center; }
.tasma b {
  font: 800 clamp(64px, 12vw, 200px)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 1.5px var(--grafit); padding: 0 .12em; transition: color .4s, -webkit-text-stroke-color .4s;
}
.tasma b:hover { color: var(--zielen); -webkit-text-stroke-color: var(--zielen); }
.tasma i { flex: none; width: clamp(28px, 3.4vw, 56px); height: clamp(28px, 3.4vw, 56px); margin: 0 clamp(10px, 2vw, 32px); border: 1.5px solid var(--zielen); border-radius: 50%; position: relative; }
.tasma i::before, .tasma i::after { content: ""; position: absolute; background: var(--zielen); }
.tasma i::before { left: 50%; top: -30%; bottom: -30%; width: 1.5px; margin-left: -.75px; }
.tasma i::after { top: 50%; left: -30%; right: -30%; height: 1.5px; margin-top: -.75px; }
.bez-ruchu .tasma-rzad { width: auto; flex-wrap: wrap; padding: 0 var(--g); }
.bez-ruchu .tasma-zestaw + .tasma-zestaw { display: none; }
.bez-ruchu .tasma-zestaw { flex-wrap: wrap; }

/* ---------- 3. usługi ---------- */
.uslugi { padding: var(--sekcja) var(--g); position: relative; }
.uslugi-wstep { font-size: clamp(19px, 1.2vw + 12px, 26px); line-height: 1.4; max-width: 34em; margin: 0 0 clamp(48px, 7vw, 110px) auto; color: var(--grafit); }
.droga { border-top: 2px solid var(--grafit); padding-top: 18px; }
.droga-tytul { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(54px, 9.6vw, 176px); line-height: .84; letter-spacing: -.005em; display: block; }
.droga-nr { display: inline-block; vertical-align: top; font: 500 clamp(12px, 1vw, 15px)/1 var(--mono); letter-spacing: .1em; color: var(--zielen-ciemna); margin: .4em .8em 0 0; }
.droga-cialo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 96px); align-items: end; margin-top: clamp(28px, 4vw, 56px); }
.droga-2 .droga-cialo { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.droga-tekst p { font-size: clamp(17px, .5vw + 14px, 20px); color: var(--grafit-2); max-width: 34em; }
.droga-dopisek { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 1.6vw + 12px, 34px) !important; line-height: 1.05; text-transform: uppercase; color: var(--zielen-ciemna) !important; margin: 0; }
.droga-okno { position: relative; overflow: hidden; background: var(--papier-2); }
.droga-okno img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.droga-okno:hover img { transform: scale(1.04); }
.droga-okno figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 10px; background: var(--papier); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grafit-2); }
.r-32 { aspect-ratio: 3 / 2; } .r-45 { aspect-ratio: 4 / 5; }
.droga-2 .droga-okno { max-width: 520px; }
.lub { display: flex; align-items: center; gap: 18px; margin: clamp(56px, 8vw, 120px) 0; font: 500 13px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--szary); }
.lub::before, .lub::after { content: ""; flex: 1; height: 1px; background: var(--linia-mocna); }
.etapy-uslug { margin-top: clamp(80px, 11vw, 170px); }
.etapy-uslug-tytul { font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--szary); margin-bottom: 18px; }
.wiersze { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grafit); }
.wiersz { position: relative; display: grid; grid-template-columns: 3.2em minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 28px; align-items: center; padding: clamp(14px, 1.6vw, 24px) 0; border-bottom: 1px solid var(--grafit); overflow: hidden; }
.wiersz::before { content: ""; position: absolute; inset: 0; background: var(--zielen); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); z-index: -1; }
.wiersz-nr { font: 500 13px/1 var(--mono); color: var(--zielen-ciemna); }
.wiersz-nazwa { font: 800 clamp(34px, 5.2vw, 92px)/.9 var(--display); text-transform: uppercase; transition: transform .55s var(--ease); }
.wiersz-opis { font-size: 16px; color: var(--grafit-2); max-width: 30em; }
@media (hover: hover) and (pointer: fine) {
  .wiersz:hover::before { transform: scaleY(1); }
  .wiersz:hover .wiersz-nazwa { transform: translateX(16px); }
  .wiersz:hover .wiersz-opis, .wiersz:hover .wiersz-nr { color: #fff; }
  .wiersz:hover .wiersz-nazwa { color: #fff; }
}
@media (max-width: 959px) {
  .droga-cialo, .droga-2 .droga-cialo { grid-template-columns: minmax(0, 1fr); }
  .droga-2 .droga-okno { order: 2; max-width: none; }
  .wiersz { grid-template-columns: 2em minmax(0, 1fr); }
  .wiersz-opis { grid-column: 2; }
}

/* ---------- 4. realizacje: galeria pozioma ---------- */
.realizacje { background: var(--noc); color: #eeeae1; position: relative; }
.galeria { position: relative; padding: var(--sekcja) 0; }
.tor { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 110px); padding: 0 var(--g); }
.panel { position: relative; }
.projekt { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) { html:not(.poziomo) .projekt { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: center; } }
.poziomo .projekt { display: contents; }
.panel .mono { color: #b7b1a4; }
.panel .akcent { color: var(--zielen-swiatlo); }
.gal-h2 { font: 800 clamp(64px, 9vw, 168px)/.84 var(--display); text-transform: uppercase; margin: 18px 0 26px; }
.gal-wskazowka { display: flex; align-items: center; gap: 12px; }
.gal-wskazowka-kreska { display: inline-block; width: 46px; height: 1.5px; background: var(--zielen-swiatlo); animation: przewin 2.4s var(--ease) infinite; transform-origin: left; }
.gal-h3 { font: 800 clamp(44px, 4.8vw, 84px)/.88 var(--display); text-transform: uppercase; margin: 12px 0 20px; }
.panel-tekst { color: #d4cfc4; font-size: 16.5px; max-width: 34em; }
.panel-podpis { margin-top: 14px; }
.liczby { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); border-top: 1px solid rgba(238,234,225,.25); margin: 24px 0 20px; }
.liczby-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.liczba { padding: 14px 12px 14px 0; border-bottom: 1px solid rgba(238,234,225,.25); }
.liczba-w { display: flex; align-items: baseline; gap: 6px; font: 800 clamp(48px, 4.6vw, 86px)/.9 var(--display); color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.liczba-w small { font: 500 13px/1 var(--mono); color: var(--zielen-swiatlo); letter-spacing: .06em; }
.liczba-o { display: block; font: 500 11px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #b7b1a4; margin-top: 8px; }
.karta-dane { list-style: none; padding: 0; margin: 0 0 26px; }
.karta-dane li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(238,234,225,.14); font-size: 15px; color: #e6e1d6; }
.karta-dane li > span:first-child { font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b7b1a4; }
.realizacje .link-strzalka { color: #fff; }
.porownanie { position: relative; aspect-ratio: 3 / 2; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; background: #222; --p: 50%; }
.porownanie .warstwa { position: absolute; inset: 0; }
.porownanie .warstwa img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.porownanie .szkic { clip-path: inset(0 calc(100% - var(--p)) 0 0); background: #fff; }
.por-et { position: absolute; top: 14px; padding: 6px 9px; background: rgba(18,21,18,.72); color: #fff !important; font-size: 11px; pointer-events: none; }
.por-et-l { left: 14px; } .por-et-p { right: 14px; }
.porownanie-uchwyt { position: absolute; top: 0; bottom: 0; left: var(--p); width: 48px; margin-left: -24px; display: flex; align-items: center; justify-content: center; outline: none; }
.porownanie-uchwyt::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--zielen-swiatlo); box-shadow: 0 0 16px rgba(166,227,106,.8); }
.galka { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--zielen-swiatlo); color: var(--grafit); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.galka svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.porownanie-uchwyt:focus-visible .galka { outline: 2px solid #fff; outline-offset: 3px; }
.porownanie.ciagniety .galka { transform: scale(1.1); }
.tanowo-kadr { position: relative; overflow: hidden; aspect-ratio: 800 / 533; background: #222; }
.tanowo-kadr img { width: 100%; height: 100%; object-fit: cover; }
.gal-koniec { font: 800 clamp(56px, 7vw, 130px)/.86 var(--display); text-transform: uppercase; margin: 0 0 22px; }
.gal-pasek, .gal-strzalki { display: none; }
.realizacje .przycisk-glowny { background: var(--papier); color: var(--grafit); }
.realizacje .przycisk-glowny:hover { color: #fff; }
.realizacje .kolo-przycisk { color: #eeeae1; }
.realizacje .kolo-przycisk:hover { background: #eeeae1; color: var(--grafit); }

/* galeria pozioma na komputerze (włącza ją skrypt) */
.poziomo .galeria { padding: 0; }
.poziomo .gal-lepka { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.poziomo .tor { flex-direction: row; align-items: center; gap: clamp(48px, 6vw, 110px); padding: 0 var(--g); width: max-content; will-change: transform; }
.poziomo .panel { flex: none; }
.poziomo .panel-wstep { width: min(44vw, 640px); }
.poziomo .panel-mierzyn { width: min(64vw, calc((100svh - 230px) * 1.5)); }
.poziomo .panel-dane { width: clamp(380px, 36vw, 560px); }
.poziomo .panel-tanowo { width: min(46vw, calc((100svh - 260px) * 1.5)); }
.poziomo .panel-koniec { width: min(44vw, 620px); padding-right: var(--g); }
.poziomo .gal-pasek { display: block; position: absolute; left: var(--g); right: var(--g); bottom: 32px; height: 2px; background: rgba(238,234,225,.15); }
.poziomo .gal-pasek i { position: absolute; inset: 0; background: var(--zielen-swiatlo); transform-origin: left; transform: scaleX(0); }
.poziomo .gal-wskazowka { margin-top: 10px; }

/* galeria pozioma na telefonie: przewijanie palcem ze snapem */
@media (max-width: 959px) {
  .js .realizacje .tor { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 0 var(--g) 6px; scrollbar-width: none; overscroll-behavior-x: contain; align-items: flex-start; }
  .js .realizacje .tor::-webkit-scrollbar { display: none; }
  .js .realizacje .projekt { flex: none; width: 86vw; scroll-snap-align: start; scroll-margin-left: var(--g); gap: 22px; }
  .js .realizacje .panel-wstep { padding: 0 var(--g); margin-bottom: 36px; }
  .js .realizacje .panel-koniec { padding: 40px var(--g) 0; }
  .js .realizacje .gal-strzalki { display: flex; gap: 10px; padding: 22px var(--g) 0; }
  .js .realizacje .gal-wskazowka { display: none; }
  .gal-h2 { font-size: clamp(56px, 15vw, 96px); }
  .liczby-3 .liczba-w { font-size: 40px; }
}

/* ---------- 5. o mnie: pływająca scena ---------- */
.omnie { padding: var(--sekcja) var(--g); overflow: hidden; position: relative; }
.plywajaca { position: relative; height: clamp(300px, 44vw, 720px); max-width: 1500px; margin: 0 auto; perspective: 1800px; }
.plywajaca-wnetrze { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease); }
.plywajaca.sledzi .plywajaca-wnetrze { transition: transform .15s linear; }
.kadr { position: absolute; overflow: hidden; background: var(--papier-2); box-shadow: 0 40px 80px -40px rgba(26,29,26,.55); }
.kadr img { width: 100%; height: 100%; object-fit: cover; }
.kadr-s { width: 52%; aspect-ratio: 3 / 2; left: 24%; top: 4%; z-index: 3; animation: unos 7s ease-in-out infinite alternate; }
.kadr-l { width: 23%; aspect-ratio: 4 / 5; left: 5%; top: 16%; z-index: 2; --obrot: -6deg; animation: unos-obr 8s ease-in-out infinite alternate; animation-delay: -3s; }
.kadr-p { width: 23%; aspect-ratio: 4 / 5; right: 5%; top: 10%; z-index: 2; --obrot: 6deg; animation: unos-obr 9s ease-in-out infinite alternate; animation-delay: -6s; }
@keyframes unos { from { transform: translate3d(0, -8px, 0); } to { transform: translate3d(0, 10px, 0); } }
@keyframes unos-obr { from { transform: translate3d(0, 10px, 0) rotate(var(--obrot)); } to { transform: translate3d(0, -12px, 0) rotate(calc(var(--obrot) * 1.25)); } }
.plywajaca-podpis { text-align: center; color: var(--szary); margin: clamp(18px, 2vw, 30px) 0 0; }
.omnie-h2 { font: 800 clamp(58px, 11vw, 200px)/.84 var(--display); text-transform: uppercase; text-align: center; margin: clamp(48px, 7vw, 110px) 0 clamp(32px, 4vw, 60px); }
.omnie-tyt { display: block; font: 500 clamp(13px, 1.1vw, 16px)/1 var(--mono); letter-spacing: .14em; color: var(--zielen-ciemna); margin-bottom: clamp(18px, 2.8vw, 48px); position: relative; z-index: 1; }
.czytaj { font: 600 clamp(26px, 2.9vw, 50px)/1.18 var(--display); text-transform: none; max-width: 24em; margin: 0 auto; text-align: center; color: var(--grafit); letter-spacing: .005em; }
.czytaj .cw { opacity: 1; }
.omnie-dol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 110px); margin-top: clamp(56px, 8vw, 120px); align-items: start; border-top: 1px solid var(--grafit); padding-top: 26px; }
.omnie-tekst { font-size: 17.5px; color: var(--grafit-2); margin: 0; max-width: 32em; }
.fakty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.fakty li { font-size: 15px; color: var(--grafit-2); }
.fakty .mono { display: block; color: var(--szary); margin-bottom: 10px; }
.fakty b { display: block; font: 800 clamp(36px, 3.4vw, 60px)/.9 var(--display); text-transform: uppercase; color: var(--grafit); margin-bottom: 8px; }
@media (max-width: 959px) {
  .plywajaca { height: 74vw; }
  .kadr-s { width: 72%; left: 14%; top: 10%; }
  .kadr-l { width: 32%; left: 0; top: 2%; }
  .kadr-p { width: 32%; right: 0; top: 30%; }
  .omnie-dol { grid-template-columns: minmax(0, 1fr); }
  .fakty { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .czytaj { text-align: left; }
  .omnie-h2 { text-align: left; }
}

/* ---------- 6. proces: plan na ciemnym tle ---------- */
.proces {
  background-color: var(--las); color: #eef3ea; padding: var(--sekcja) var(--g); position: relative; overflow: hidden;
  background-image:
    linear-gradient(rgba(166,227,106,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(166,227,106,.10) 1px, transparent 1px),
    linear-gradient(rgba(166,227,106,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(166,227,106,.045) 1px, transparent 1px);
  background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
}
.proces-gora { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: clamp(64px, 9vw, 140px); }
.proces-h2 { font: 800 clamp(56px, 8vw, 150px)/.84 var(--display); text-transform: uppercase; }
.proces-wstep { font-size: clamp(18px, .6vw + 14px, 22px); color: #cfdac9; margin: 0; max-width: 24em; }
.plan { position: relative; max-width: 1300px; margin: 0 auto; }
.plan-sciezka { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.sciezka-tlo { fill: none; stroke: rgba(166,227,106,.18); stroke-width: 1.5; stroke-dasharray: 6 8; }
.sciezka-linia { fill: none; stroke: var(--zielen-swiatlo); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(166,227,106,.8)); }
.sciezka-glowa { fill: var(--zielen-swiatlo); filter: drop-shadow(0 0 10px rgba(166,227,106,1)); }
.stacje { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(80px, 12vw, 220px); row-gap: clamp(40px, 5vw, 80px); }
.stacja { position: relative; max-width: 30em; }
.stacja.s1, .stacja.s3 { grid-column: 1; justify-self: end; text-align: right; padding-right: 48px; }
.stacja.s2, .stacja.s4 { grid-column: 2; padding-left: 48px; }
.stacja.s1 { grid-row: 1; } .stacja.s2 { grid-row: 2; } .stacja.s3 { grid-row: 3; } .stacja.s4 { grid-row: 4; }
.stacja-punkt { position: absolute; top: 34px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(166,227,106,.45); background: var(--las); transition: background-color .5s, border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.stacja.s1 .stacja-punkt, .stacja.s3 .stacja-punkt { right: -10px; }
.stacja.s2 .stacja-punkt, .stacja.s4 .stacja-punkt { left: -10px; }
.stacja.zapalona .stacja-punkt { background: var(--zielen-swiatlo); border-color: var(--zielen-swiatlo); box-shadow: 0 0 0 8px rgba(166,227,106,.14), 0 0 30px 6px rgba(166,227,106,.55); transform: scale(1.1); }
.stacja .mono { color: var(--zielen-swiatlo); }
.stacja h3 { font: 800 clamp(44px, 5vw, 92px)/.88 var(--display); text-transform: uppercase; margin: 10px 0 14px; color: #fff; transition: color .5s; }
.stacja p { color: #cfdac9; font-size: 16.5px; margin: 0; }
.js .stacja:not(.zapalona) h3 { color: rgba(255,255,255,.62); }
@media (max-width: 959px) {
  .proces-gora { grid-template-columns: minmax(0, 1fr); }
  .stacje { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .stacja.s1, .stacja.s2, .stacja.s3, .stacja.s4 { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; padding: 0 0 0 42px; }
  .stacja.s1 .stacja-punkt, .stacja.s2 .stacja-punkt, .stacja.s3 .stacja-punkt, .stacja.s4 .stacja-punkt { left: 2px; right: auto; top: 30px; }
}

/* ---------- 7. opinie ---------- */
.opinie { padding: var(--sekcja) var(--g); position: relative; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); column-gap: clamp(20px, 3vw, 56px); }
.opinie-h2 { grid-row: 1 / span 3; writing-mode: vertical-rl; transform: rotate(180deg); font: 500 13px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--szary); justify-self: center; align-self: start; padding-top: 6px; border-right: 1px solid var(--linia-mocna); padding-right: 12px; }
.opinie-scena { display: grid; min-height: 3em; }
.opinia { grid-area: 1 / 1; visibility: hidden; }
.opinia.aktywna { visibility: visible; }
.opinia blockquote { margin: 0; font: 700 clamp(38px, 5.2vw, 98px)/.98 var(--display); letter-spacing: .002em; color: var(--grafit); }
.opinia blockquote .ow { display: inline-block; }
.opinia-autor { margin-top: clamp(22px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 16px; color: var(--grafit-2); }
.opinia-autor strong { color: var(--grafit); font-weight: 650; }
.gwiazdki { display: inline-flex; gap: 3px; color: var(--zielen); }
.gwiazdki svg { width: 15px; height: 15px; fill: currentColor; }
.gwiazdki .pusta { fill: none; stroke: currentColor; stroke-width: 1.4; }
.opinie-sterowanie { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--grafit); }
.opinie-paski { display: flex; gap: 6px; flex: 1 1 140px; max-width: 320px; }
.opinie-paski span { flex: 1; height: 3px; background: var(--linia); position: relative; overflow: hidden; }
.opinie-paski span i { position: absolute; inset: 0; background: var(--zielen-ciemna); transform: scaleX(0); transform-origin: left; }
.opinie-paski span.za i { transform: scaleX(1); }
.opinie-paski span.teraz i { animation: pasek var(--czas, 9s) linear forwards; }
.opinie.pauza .opinie-paski span.teraz i, .opinie.poza .opinie-paski span.teraz i { animation-play-state: paused; }
.bez-ruchu .opinie-paski span.teraz i { animation: none; transform: scaleX(1); }
@keyframes pasek { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.opinie-licznik { color: var(--grafit-2); min-width: 4.5em; }
.opinie-sterowanie .przycisk { margin-left: auto; }
.opinie-dopisek { grid-column: 2; margin: 14px 0 0; font-size: 14.5px; color: var(--szary); }
.opinie-info { color: var(--szary); }
@media (max-width: 959px) {
  .opinie { grid-template-columns: minmax(0, 1fr); }
  .opinie-h2 { writing-mode: horizontal-tb; transform: none; grid-row: auto; justify-self: start; border-right: 0; padding: 0 0 12px; margin-bottom: 22px; border-bottom: 1px solid var(--linia-mocna); }
  .opinie-sterowanie, .opinie-dopisek { grid-column: 1; }
  .opinie-sterowanie .przycisk { margin-left: 0; }
}

/* ---------- 8. blog ---------- */
.blog { padding: var(--sekcja) var(--g); background: var(--papier-2); }
.blog-gora { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.blog-h2 { font: 800 clamp(56px, 8.4vw, 156px)/.84 var(--display); text-transform: uppercase; }
.blog-wstep { margin: 0; color: var(--grafit-2); font-size: 18px; }
.wpisy { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--grafit); }
.wpis a { position: relative; display: grid; grid-template-columns: 11em minmax(0, 1fr) 64px; gap: 10px 32px; align-items: center; padding: clamp(20px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--grafit); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; }
.wpis a::before { content: ""; position: absolute; inset: 0; background: var(--grafit); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: -1; }
.wpis-meta { font: 500 11.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--szary); transition: color .4s; }
.wpis-meta .kat { display: block; color: var(--zielen-ciemna); transition: color .4s; }
.wpis-tytul { display: block; font: 800 clamp(28px, 2.9vw, 52px)/.95 var(--display); text-transform: uppercase; transition: color .4s, transform .6s var(--ease); }
.wpis-zajawka { display: block; margin-top: 10px; font-size: 15.5px; color: var(--grafit-2); max-width: 46em; transition: color .4s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wpis-strzalka { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; transition: transform .6s var(--ease), color .4s; }
.wpis-strzalka svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .wpis a:hover::before { transform: scaleX(1); }
  .wpis a:hover { color: #fff; }
  .wpis a:hover .wpis-meta, .wpis a:hover .wpis-zajawka { color: #d8d3c8; }
  .wpis a:hover .kat { color: var(--zielen-swiatlo); }
  .wpis a:hover .wpis-tytul { transform: translateX(14px); }
  .wpis a:hover .wpis-strzalka svg { transform: rotate(0); }
}
.blog-info { padding: 26px 0; color: var(--szary); border-bottom: 1px solid var(--grafit); }
@media (max-width: 959px) {
  .blog-gora { grid-template-columns: minmax(0, 1fr); }
  .wpis a { grid-template-columns: minmax(0, 1fr); }
  .wpis-strzalka { display: none; }
}

/* ---------- 9. pytania ---------- */
.pytania { padding: var(--sekcja) var(--g); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.pytania-bok { position: sticky; top: calc(var(--nag) + 32px); }
.pytania-h2 { font: 800 clamp(52px, 6.6vw, 124px)/.84 var(--display); text-transform: uppercase; }
.faq details { border-top: 1px solid var(--grafit); }
.faq details:last-child { border-bottom: 1px solid var(--grafit); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 40px; gap: 18px; align-items: center; padding: 24px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq-nr { font: 800 40px/1 var(--display); color: transparent; -webkit-text-stroke: 1.2px var(--grafit); transition: color .4s; }
.faq details[open] .faq-nr, .faq summary:hover .faq-nr { color: var(--zielen); -webkit-text-stroke-color: var(--zielen); }
.faq-p { font-size: clamp(18px, .5vw + 15px, 22px); font-weight: 600; line-height: 1.3; }
.faq .plus { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--grafit); transition: background-color .4s, transform .5s var(--ease); }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; transition: transform .5s var(--ease); }
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus { background: var(--grafit); color: var(--papier); transform: rotate(180deg); }
.faq details[open] .plus::after { transform: rotate(0); }
.faq .odp { padding: 0 58px 26px calc(3.4em + 18px); color: var(--grafit-2); font-size: 16.5px; }
.faq .odp p { margin: 0; }
@media (max-width: 959px) {
  .pytania { grid-template-columns: minmax(0, 1fr); }
  .pytania-bok { position: static; }
  .faq summary { grid-template-columns: 2.4em minmax(0, 1fr) 40px; gap: 12px; }
  .faq-nr { font-size: 30px; }
  .faq .odp { padding: 0 0 22px calc(2.4em + 12px); }
}

/* ---------- 10. kontakt ---------- */
.kontakt { background: var(--noc); color: #eeeae1; padding: var(--sekcja) var(--g); position: relative; overflow: hidden; }
.kontakt::before { content: ""; position: absolute; left: -10%; right: -10%; top: -40%; height: 80%; background: radial-gradient(closest-side, rgba(90,143,41,.28), transparent); pointer-events: none; }
.kontakt-h2 { position: relative; font: 800 clamp(46px, 10.4vw, 196px)/.84 var(--display); text-transform: uppercase; margin-bottom: clamp(48px, 6vw, 96px); max-width: 11em; }
.kontakt-siatka { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.kontakt-kanaly { display: grid; gap: 0; border-top: 1px solid rgba(238,234,225,.25); }
.kontakt-kanaly > * { padding: 18px 0; border-bottom: 1px solid rgba(238,234,225,.25); margin: 0; }
.kontakt-kanaly .mono { display: block; color: var(--zielen-swiatlo); margin-bottom: 8px; }
.kontakt-tel { display: block; color: #fff; text-decoration: none; font: 800 clamp(44px, 5.4vw, 104px)/.9 var(--display); }
.kontakt-tel:hover { color: var(--zielen-swiatlo); }
.kontakt-mail { display: block; color: #fff; text-decoration: none; font: 700 clamp(28px, 2.8vw, 52px)/1 var(--display); }
.kontakt-mail:hover { color: var(--zielen-swiatlo); }
.kontakt-wiersz { font-size: 17px; color: #e6e1d6; }
.kontakt-odp { color: #cfc9bd; font-size: 15.5px; }
.formularz-oprawa { position: relative; }
.formularz-obrys { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); pointer-events: none; }
.formularz-obrys rect { fill: none; stroke: var(--zielen-swiatlo); stroke-width: 1.5; width: calc(100% - 2px); height: calc(100% - 2px); filter: drop-shadow(0 0 8px rgba(166,227,106,.6)); }
.js .formularz-obrys rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
.js .formularz-oprawa.widac .formularz-obrys rect { stroke-dashoffset: 0; }
.formularz { position: relative; background: var(--karta); color: var(--grafit); padding: clamp(24px, 3.4vw, 46px); }
.formularz h3 { font: 800 clamp(34px, 3vw, 52px)/.9 var(--display); text-transform: uppercase; margin-bottom: 10px; }
.pod-tytulem { color: var(--szary); font-size: 15.5px; margin-bottom: 22px; }
.pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pole-pelne { grid-column: 1 / -1; }
.formularz .pole, .okno .pole { display: flex; flex-direction: column; gap: 6px; margin: 0; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.pole label, .pole-et { font-size: 14px; font-weight: 600; color: var(--grafit-2); }
.pole label .opc { font-weight: 400; color: var(--szary); }
.pole input, .pole textarea { width: 100%; font: 400 16px/1.5 var(--tekst); color: var(--grafit); background: transparent; border: 0; border-bottom: 1.5px solid var(--linia-mocna); border-radius: 0; padding: 10px 2px; transition: border-color .3s, background-color .3s; }
.pole textarea { resize: vertical; min-height: 110px; border: 1.5px solid var(--linia-mocna); padding: 10px 12px; }
.pole input:focus, .pole textarea:focus { outline: none; border-color: var(--zielen-ciemna); background: rgba(90,143,41,.06); }
.pulapka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.formularz .przycisk, .okno form .przycisk { margin-top: 22px; width: 100%; min-height: 54px; }
.status { display: none; margin-top: 14px; font-size: 15px; text-align: center; }
.rodo { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--szary); }
@media (max-width: 959px) { .kontakt-siatka { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .pola { grid-template-columns: minmax(0, 1fr); } }

/* ---------- stopka ---------- */
.stopka { padding: clamp(64px, 8vw, 120px) var(--g) 32px; background: var(--papier); }
.stopka-haslo { font: 800 clamp(48px, 8.6vw, 168px)/.84 var(--display); text-transform: uppercase; margin: 0 0 clamp(48px, 6vw, 90px); }
.stopka-siatka { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; border-top: 2px solid var(--grafit); padding-top: 28px; font-size: 15px; color: var(--grafit-2); }
.stopka img { height: 40px; width: auto; margin-bottom: 16px; }
.stopka .mono { color: var(--szary); margin-bottom: 12px; }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stopka a { color: var(--grafit-2); text-decoration: none; }
.stopka a:hover { color: var(--zielen-ciemna); text-decoration: underline; }
.stopka-dol { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--linia-mocna); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 14px; color: var(--szary); }
.stopka-dol p { margin: 0; }
.stopka-dol a { color: var(--zielen-ciemna); }
@media (max-width: 799px) { .stopka-siatka { grid-template-columns: minmax(0, 1fr); gap: 28px; } .stopka-nawigacja ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }

/* ---------- okna dialogowe ---------- */
.okno { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; }
.okno.otwarte { display: flex; }
.okno-tlo { position: absolute; inset: 0; background: rgba(13, 32, 21, .62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.okno-tresc { position: relative; width: 100%; max-width: 580px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--karta); padding: clamp(24px, 4vw, 42px); box-shadow: 0 40px 100px rgba(0,0,0,.3); animation: oknoWejscie .55s var(--ease); }
@keyframes oknoWejscie { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.okno-zamknij { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--grafit); background: transparent; cursor: pointer; color: var(--grafit); display: flex; align-items: center; justify-content: center; }
.okno-zamknij svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.okno h3 { font: 800 clamp(38px, 4vw, 56px)/.9 var(--display); text-transform: uppercase; margin: 0 56px 10px 0; }
.okno-kanaly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.okno-kanaly a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1.5px solid var(--grafit); text-decoration: none; color: var(--grafit); transition: background-color .3s, color .3s; }
.okno-kanaly a .mono { color: var(--szary); font-size: 11px; }
.okno-kanaly strong { font-size: 16px; white-space: nowrap; }
.okno-kanaly a:hover { background: var(--grafit); color: #fff; }
.okno-kanaly a:hover .mono { color: #cfc9bd; }
.okno-lub { display: flex; align-items: center; gap: 14px; color: var(--szary); margin-bottom: 14px; }
.okno-lub::before, .okno-lub::after { content: ""; flex: 1; height: 1px; background: var(--linia-mocna); }
.okno-uwaga { margin: 12px 0 0; font-size: 14px; color: var(--szary); }
.wybor-gwiazdek { display: flex; gap: 4px; }
.wybor-gwiazdek button { width: 42px; height: 42px; border: 0; background: transparent; padding: 6px; cursor: pointer; color: var(--linia-mocna); }
.wybor-gwiazdek button.pelna { color: var(--zielen); }
.wybor-gwiazdek svg { width: 100%; height: 100%; fill: currentColor; }
@media (max-width: 479px) { .okno-kanaly { grid-template-columns: minmax(0, 1fr); } }

/* ---------- wejścia i odsłanianie (tylko z działającym skryptem i bez ograniczonego ruchu) ---------- */
.js .wejdz { opacity: 0; transform: translateY(26px); filter: blur(10px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
.js .wejdz.widac { opacity: 1; transform: none; filter: none; }
.sl { display: inline-block; overflow: hidden; vertical-align: top; padding: .2em .03em .06em; margin: -.2em -.03em -.06em; }
.sl-w { display: inline-block; }
.js [data-slowa] .sl-w { transform: translateY(112%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * .07s + var(--d, 0s)); }
.js [data-slowa].widac .sl-w { transform: none; }
.js .odslon-maska { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js .odslon-maska img { transform: scale(1.2); transition: transform 1.6s var(--ease); }
.js .odslon-maska.widac { clip-path: inset(0 0 0 0); }
.js .odslon-maska.widac img { transform: none; }
.js .droga-okno.widac:hover img { transform: scale(1.04); }