/* ===== TOKENY (wszystkie wartości z korpus/clearpath-spec.md v0.2) ===== */
:root{
  --bg:#FFFFFF; --bg-2:#FAFAFA; --ink:#2E3231; --ink-2:#535956;
  --akcent:#7FA69B; --akcent-20:rgba(127,166,155,.2); --podklad-foto:#000000;
  --bialy:#FFFFFF; --bialy-65:rgba(255,255,255,.65);
  --f-serif:"Crimson Text",Georgia,serif; --f-sans:"Inter",system-ui,sans-serif;
  --h1:136px; --h1-lh:.84; --h1-ls:-.04em;
  --h2s:72px; --h2s-ls:-.03em;
  --h3:36px; --h3-ls:-.03em;
  --h2i:44px; --h2i-lh:1.2; --h2i-ls:-.04em;
  --body:16px; --body-lh:1.7; --small:14px; --small-lh:1.8;
  --btn:12px; --btn-lh:1.4; --btn-ls:.11em;
  --margines:64px; --tresc:1312px; --gap-karty:16px; --pigulka:999px;
  --ease:cubic-bezier(.44,0,.56,1); --t:.3s;
  --nav-h:79px; --blur-h:220px;
  --karta-w:316px; --karta-h:560px; --karta-h-min:440px; --karta-foto-zapas:200px;
  --licznik-font:428px; --licznik-slot:calc(var(--licznik-font) * 1.2); --krok-offset:280px; /* miejsce nad 1. krokiem zajmuje cyfra (311 px kapitalików kończy się na linii nagłówka) */ /* slot = 1 wiersz przy interlinii 1,2 → 513 px */
  /* 11–12. tor kart z flipem (Huts, korpus/huts-spec.md, pomiar 1440×900) */
  --obrys:rgba(46,50,49,.25);                 /* WYPROWADZANE: tekst @ 25 % */
  --tor-gap:24px; --tor-pad-gora:84px; --tor-pad-dol:52px; --tor-naglowek-gap:48px;
  --karta-r:24px; --karta-pad:48px; --karta-gap-przod:48px; --karta-gap-tyl:32px; --karta-gap-tekst:16px;
  --karta-kolumny:4;                          /* 4 z 12 kolumn = równo 3 karty w treści @1440 */
  --flip-t:.8s; --flip-ease:cubic-bezier(.175,.885,.32,1.125);   /* 93° po 100 ms, 180° po 400, przestrzał +5,5° */
  --poslizg-t:.45s; --poslizg-ease:cubic-bezier(.2,.6,.2,1);       /* ⚠ PROPOZYCJA: zamiennik Lenisa */
  --perspektywa:1000px;
  /* 13. strzałka-dzielnik (Huts §8): pudełko 256, kreska 3, linia 0,8 s + grot 0,3 s po wejściu na 89 % vh */
  --strzalka-h:256px; --strzalka-t:.8s; --strzalka-grot-t:.3s; --strzalka-prog:.89;
  /* 14. zespół (Hayflick, korpus/hayflick-spec.md): siatka 4 × 4:5, plakietki, zoom 1,05 */
  --zespol-gap:20px; --zespol-wiersz:40px; --zespol-etykieta-gap:8px; --plakietka-wciecie:16px; --plakietka-gap:4px;
  --r-maly:8px; --r-zespol:var(--r-maly);      /* ⚠ nowa wartość A6 (ClearPath: 999/16/4, Huts: 24) — zespół i aktualności */
  /* 15. aktualności (Hayflick §7): rzędy z liniami, zdjęcie 66,7 % → 100 % kolumny po najechaniu na rząd */
  --linia:rgba(46,50,49,.2);                   /* WYPROWADZANE: tekst @ 20 % */
  --wpis-h:250px; --wpis-pad:16px; --wpis-gap:8px; --wpis-foto-spoczynek:66.667%;
  --wpis-t:.9s; --wpis-ease:cubic-bezier(0,0,.2,1);   /* zmierzone: 388→582 px: 402 @14 ms · 539 @370 · 577 @701 · 582 @884 */
  /* 16. etapy (MaestroClass, korpus/maestroclass-spec.md): zdjęcie obraca się do ±4°, linia zalewa się ciemnym w oknie „góra etapu: pół ekranu → góra" */
  --etap-w:1000px; --etap-h:412px; --etap-odstep:48px; --etap-znaczek:45px; --etap-foto-w:475px; --etap-foto-h:319px; --etap-foto-top:93px; --etap-tekst-w:427px; --etap-tekst-top:172px;
  --etap-kat:4deg;                              /* obrót końcowy (liniowo w oknie) */
  --etap-start:.5; --etap-koniec:.05;           /* okno: góra etapu od 0,5·vh do 0,05·vh (≈ 400 px @900) */
  --etap-linia-tempo:1.41;                      /* wypełnienie linii pełne przy 71 % okna (u nich skala 1→7 wokół środka nad torem) */
  --etap-poslizg:.12s;                          /* ⚠ PROPOZYCJA: krótkie liniowe przejście zamiast Lenisa */
  /* 17. stopka (Serenya, korpus/serenya-spec.md): dwa bloki na krawędziach, 3 kolumny list, linia, podpisy */
  --stopka-tlo:var(--ink); --stopka-tekst:var(--bg-2); --stopka-tekst-2:var(--bialy-65); --linia-na-ciemnym:rgba(255,255,255,.2);
  --stopka-pad-gora:50px; --stopka-pad-dol:100px;   /* u nich 30 + 70 */
  --stopka-blok-lewy:320px; --stopka-kolumny-gap:70px; --stopka-link-gap:10px; --stopka-tytul:20px;
  --stopka-linia-odstep:120px; --stopka-podpisy-odstep:40px; --stopka-social:24px; --stopka-social-gap:30px;
  /* 18. realizacje nachodzące (Huts §9): projekt 100 vh clip, treść sticky, paralaksa 0,25 */
  --real-paralaksa:.25; --real-tytul-x:128px; --real-tytul-w:533px; --real-karta-w:533px; --real-karta-h:300px; --real-karta-x:779px; --real-karta-r:16px;
  --plakietka-szklo-tlo:rgba(255,255,255,.12); --plakietka-szklo-obrys:rgba(255,255,255,.25); --plakietka-szklo-blur:8px;   /* ⚠ wariant B-plakietki na zdjęciu (u nich ciemna @30 % + blur 8 + obrys) */
  /* 19. opinie (Serenya): karta 370 × min 459, pad 35, promień 12 (⚠ A6), obrys @14 % → nasza --linia; krok = karta + 30; 1,25 s expo; bez zdjęć (Google → inicjał 65) */
  --opinia-w:370px; --opinia-h:459px; --opinia-pad:35px; --opinia-gap:30px; --opinia-r:12px; --opinia-t:1.25s; --opinia-ease:cubic-bezier(.19,1,.22,1);
  --opinia-cudzyslow:110px; --opinia-cudzyslow-kolor:rgba(127,166,155,.35); --opinia-avatar:65px; --opinia-nazwa:18px; --opinia-meta:14px; --opinie-pod-w:408px; --opinie-strzalka:42px 33px;
  /* 20. nawigacja mobilna (Huts §10): pasek 96, kółko 56 z dwiema kreskami 22 × 1,5 (odstęp 8), panel = pasek rośnie (bez animacji wysokości), tło 0,2 s, dolne rogi 16 w 0,4 s, wiersze 69 z linią, CTA 64 niżej; chowanie paska 0,6 s po 300 px w dół */
  /* 21. stopka wariant 2 (Off+Brand): hasło 96/1 (u nich grotesk 103 uppercase) + 3 kolumny linków z torem 1 px; strzałka wyjeżdża 16 px / 1,2 s; tor wypełnia się 0,6 s; znak 70 */
  --st2-pad:76px; --st2-gap:19px; --st2-haslo:96px; --st2-etykieta-odstep:32px; --st2-link:14px; --st2-link-gap:15px; --st2-tor-odstep:4px; --st2-grupa-odstep:61px; --st2-znak:70px; --st2-strzalka-t:1.2s; --st2-strzalka-ease:cubic-bezier(.165,.84,.44,1); --st2-strzalka-przesuw:16px; --st2-tor-t:.6s;
  /* 22. kontakt + formularz (lecznica, nasza strona): pas ciemny, nagłówek centrowany, siatka 2 kol. gap 22; karty danych szkło biel @86 % promień 16 pad 16/18 ikona 24; formularz szkło pad 27 (promień 18 → 16 ⚠ A6), pola 45 promień 11 (⚠ A6); mapa dopiero po zgodzie 302 */
  --kontakt-pad:88px; --kontakt-gap:22px; --kontakt-dana-gap:14px; --kontakt-dana-pad:16px 18px; --kontakt-dana-r:16px; --kontakt-ikona:24px; --form-pad:27px; --form-r:16px; --pole-h:45px; --pole-r:11px; --pole-pad:12px 16px; --mapa-h:302px;
  --szklo:rgba(255,255,255,.86); --szklo-obrys:rgba(255,255,255,.7); --szklo-cien:0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
  --nav-m-h:96px; --nav-m-btn:56px; --nav-m-kreska:22px; --nav-m-kreska-gr:1.5px; --nav-m-kreska-gap:8px; --nav-m-r:16px; --nav-m-cta-odstep:64px; --nav-m-prog:300; --nav-m-chowanie:.6s; --nav-m-ease:cubic-bezier(.33,1,.68,1);
  --zespol-tlo-a:var(--akcent); --zespol-tlo-b:var(--ink-2);   /* ⚠ WYPROWADZANE: u nich jasny/ciemny brąz naprzemiennie */
  --zoom:1.05; --zoom-t:.9s; --zoom-ease:cubic-bezier(0,0,.2,1);  /* zmierzone: 1,022 @196 ms · 1,045 @566 · 1,05 @950 */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:var(--body);line-height:var(--body-lh);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--tresc),calc(100% - 2*var(--margines)));margin:0 auto}
.etykieta{position:absolute;left:var(--margines);top:24px;font:600 var(--btn)/var(--btn-lh) var(--f-sans);letter-spacing:var(--btn-ls);text-transform:uppercase;color:var(--akcent);z-index:3;pointer-events:none}
.etykieta.na-ciemnym{color:var(--bialy-65)}

/* presety typograficzne */
.t-h1{font:400 var(--h1)/var(--h1-lh) var(--f-serif);letter-spacing:var(--h1-ls)}
.t-h2s{font:400 var(--h2s)/1 var(--f-serif);letter-spacing:var(--h2s-ls)}
.t-h3{font:400 var(--h3)/1 var(--f-serif);letter-spacing:var(--h3-ls)}
.t-h2i{font:500 var(--h2i)/var(--h2i-lh) var(--f-sans);letter-spacing:var(--h2i-ls)}
.t-body{font:400 var(--body)/var(--body-lh) var(--f-sans)}
.t-small{font:400 var(--small)/var(--small-lh) var(--f-sans)}
.t-btn{font:600 var(--btn)/var(--btn-lh) var(--f-sans);letter-spacing:var(--btn-ls);text-transform:uppercase}
.dwuton em{font-style:normal;color:var(--akcent)}

/* pigułka */
.pigulka{display:inline-flex;align-items:center;gap:14px;height:39px;padding:0 20px;border-radius:var(--pigulka);background:var(--akcent);color:var(--bialy);font:600 var(--btn)/var(--btn-lh) var(--f-sans);letter-spacing:var(--btn-ls);text-transform:uppercase;white-space:nowrap}
.pigulka::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.pigulka.odwrocona{background:var(--bialy);color:var(--ink)}


/* ===== nawigacja ===== */
.nav{position:fixed;left:0;top:0;width:100%;height:var(--nav-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--margines);pointer-events:none}
.nav>*{pointer-events:auto}
.logo{font:400 26px/1 var(--f-serif);letter-spacing:.06em;color:var(--ink);display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(20px)}
.logo::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.nav.na-foto .logo{color:var(--bialy)}
.nav-prawa{display:flex;align-items:center;gap:26px;opacity:0;white-space:nowrap} /* 26 zamiast 58 z pomiaru: po dołożeniu sekcji 11–17 jedenaście pozycji nie mieści się przy 58 (nachodziły na logo) — to pasek WARSZTATU, nie kitu */
.logo{white-space:nowrap}
.nav-prawa a.t-btn{color:var(--ink)}
.nav.na-foto .nav-prawa a.t-btn{color:var(--bialy)}
.nav .pigulka.odwrocona{margin-left:0}
.nav-burger,.nav-panel{display:none} /* 20. nawigacja mobilna (Huts) — widoczna tylko ≤ 768, reguły w bloku MOBILE */


/* ===== 3. HERO ===== */
.hero-owijka{position:relative;height:200vh;margin-bottom:-100vh;background:var(--podklad-foto)} /* drugie 100 vh = następna sekcja wjeżdża na przypięte zdjęcie */
.hero-foto{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--podklad-foto)}
.hero-foto .foto{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
/* wejście hero jako animacje CSS z opóźnieniami z pomiaru (t0 = 0,4 s po skrypcie) */
@keyframes fadeIn{to{opacity:1}} @keyframes wjazdGora{to{opacity:1;transform:translateY(0)}} @keyframes wjazdDol{to{opacity:1;transform:translateY(0)}} @keyframes blurIn{to{opacity:1;filter:blur(0)}}
.start .hero-foto .foto{animation:fadeIn 1.6s cubic-bezier(.2,.6,.3,1) .4s forwards}
.start .logo{animation:wjazdGora 1.6s cubic-bezier(.2,.6,.3,1) .4s forwards}
.start .hero-kolumna p{animation:wjazdDol 1s cubic-bezier(.2,.6,.3,1) .55s forwards}
.start .hero-kolumna .pigulka{animation:wjazdGora 1s cubic-bezier(.2,.6,.3,1) .55s forwards}
.start .hero-h1 span{animation:blurIn 1.1s cubic-bezier(.2,.6,.3,1) forwards}
.start .hero-h1 span:nth-child(1){animation-delay:1.2s}.start .hero-h1 span:nth-child(2){animation-delay:1.29s}.start .hero-h1 span:nth-child(3){animation-delay:1.38s}
.start .nav-prawa,.start .nav-burger{animation:fadeIn 1s ease-out 2.4s forwards}
.hero-tresc{position:absolute;left:0;top:0;width:100%;height:100vh;pointer-events:none} /* wewnątrz sticky: tekst stoi razem ze zdjęciem, ruszają się tylko kreski (decyzja dyrektora) */
.hero-tresc>*{pointer-events:auto}
.hero-h1{position:absolute;left:var(--margines);bottom:var(--margines);width:759px;color:var(--bialy)}
.hero-h1 span{display:block;opacity:0;filter:blur(14px)}
.hero-kolumna{position:absolute;left:66%;bottom:var(--margines);width:427px;color:var(--bialy);display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.hero-kolumna p{opacity:0;transform:translateY(-20px)}
.hero-kolumna .pigulka{opacity:0;transform:translateY(20px)}
.hero-linia{position:absolute;left:23%;top:0;width:780px;height:1140px;pointer-events:none;overflow:visible}
.hero-linia path{fill:none;stroke:var(--bialy);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.2,.6,.3,1)} /* sprężyna ~0,5 s z pomiaru */
.hero-linia path.duch{opacity:.5}


/* ===== 11–12. TOR KART PRZYPIĘTY + FLIP (Huts, korpus/huts-spec.md) ===== */
.tor-sekcja{position:relative;container-type:inline-size;background:var(--bg);height:calc(var(--tor-pad-gora) + 100vh + var(--nadmiar,0px));padding-top:var(--tor-pad-gora)}
.tor-sekcja.bez-pinu{height:auto}
.przypiety{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);row-gap:var(--tor-naglowek-gap);padding:var(--blur-h) 0 var(--tor-pad-dol)} /* góra = pasmo rozmycia (220), nie 84 jak u Huts — inaczej przypięty nagłówek stałby w rozmyciu (⚠ konflikt dwóch chwytów) */
.bez-pinu .przypiety{position:static;height:auto}
.tor-naglowek{width:min(var(--tresc),calc(100% - 2*var(--margines)));margin:0 auto;text-align:center}
.tor-naglowek h2{max-width:867px;margin:0 auto;text-wrap:balance}
.tor-okno{width:100%;overflow-x:clip;min-height:0;min-width:0} /* min-width:0 — overflow:clip nie zeruje min-width:auto, tor rozpychałby kolumnę */
.tor{display:flex;gap:var(--tor-gap);padding:0 var(--margines);width:max-content;height:100%;will-change:transform;transition:transform var(--poslizg-t) var(--poslizg-ease)}
.bez-pinu .tor{width:auto;transform:none!important}
.bez-pinu .karta-owijka{height:auto}
.bez-pinu .karta-h{aspect-ratio:421/573;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.tor{transition:none}}
.karta-owijka{--kol:calc((100cqw - 2*var(--margines) - 11*var(--tor-gap)) / 12);width:calc(var(--karta-kolumny)*var(--kol) + (var(--karta-kolumny) - 1)*var(--tor-gap));flex:0 0 auto;height:100%;display:flex;flex-direction:column}
@media (max-width:1439px){.karta-owijka{--karta-kolumny:5}} @media (max-width:1099px){.karta-owijka{--karta-kolumny:6}} /* drabina kolumn Huts: 4 → 5 → 6 → pełna */
.karta-h{flex:1 1 0;min-height:0;perspective:var(--perspektywa);border-radius:var(--karta-r)}
.karta-wnetrze{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--flip-t) var(--flip-ease);border-radius:inherit}
.przod,.tyl{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bg);border:1px solid var(--obrys);border-radius:inherit;overflow:clip;text-align:center;padding:var(--karta-pad)}
.tyl{transform:rotateY(180deg);border-color:var(--akcent)}
html:not(.scrolling) .karta-h:hover .karta-wnetrze{transform:rotateY(180deg)} /* flip zablokowany, dopóki strona się przewija (jak u Huts). BEZ @media (hover:hover) — patrz uwaga przy zoomie zespołu */
.przod{display:grid;grid-template-rows:1fr auto;row-gap:var(--karta-gap-przod)}
.ilu{display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.ilu img{width:100%;height:100%;object-fit:contain}
.tyl{display:flex;flex-direction:column;align-items:center;row-gap:var(--karta-gap-tyl)}
.tyl .ilu{width:100%;height:40%;flex:0 0 40%}
.tyl-tekst{display:flex;flex-direction:column;row-gap:var(--karta-gap-tekst);text-wrap:balance}
.tyl-tekst p{color:var(--ink-2);font-size:var(--body);line-height:1.5}
.tyl .link{margin-top:auto;min-height:24px;display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.tyl .link svg{width:12px;height:12px}
.karta-h.zdjecie{overflow:hidden;background:var(--bg-2);border:1px solid var(--obrys)}
.karta-h.zdjecie img{width:100%;height:100%;object-fit:cover}


/* ===== 5. TEKST ===== */
.tekst{position:relative;background:var(--bg);padding:220px 0}
.tekst .ikona{display:block;width:44px;height:64px;margin:0 auto 40px;color:var(--akcent)}
.tekst .eyebrow{text-align:center;color:var(--akcent);margin-bottom:88px}
.tekst .blok{max-width:1312px;margin:0 auto;text-align:center;font:500 var(--h2i)/var(--h2i-lh) var(--f-sans);letter-spacing:-.03em;color:var(--ink)}
.tekst .blok span{opacity:.2;transition:opacity .35s cubic-bezier(.2,.6,.3,1)}
.tekst .pigulka{display:inline-flex;margin-top:96px}
.tekst .srodek{text-align:center}


/* ===== 15. AKTUALNOŚCI (Hayflick §7): lista rzędów, cały rząd = link i strefa hover, kadr zdjęcia rośnie 66,7 % → 100 % ===== */
.aktualnosci{position:relative;background:var(--bg);padding:160px 0 120px}
.aktualnosci .eyebrow{text-align:center;color:var(--ink-2);margin-bottom:24px}
.aktualnosci .naglowek{text-align:center;max-width:721px;margin:0 auto 96px;text-wrap:balance}
.wpisy{list-style:none;border-bottom:1px solid var(--linia)}
.wpis-rzad{position:relative;border-top:1px solid var(--linia);padding:var(--wpis-pad) 0}
.wpis-uklad{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--wpis-h);column-gap:var(--wpis-gap)} /* jawny wiersz 250 — bez niego zdjęcie rozpycha rząd do swojej wysokości */
.wpis-foto,.wpis-tresc,.wpis-meta{min-height:0;height:100%}
.wpis-foto{grid-column:span 5;min-width:0}
.wpis-kadr{width:var(--wpis-foto-spoczynek);height:100%;overflow:hidden;border-radius:var(--r-maly);transition:width var(--wpis-t) var(--wpis-ease);background:var(--bg-2)}
.wpis-rzad:hover .wpis-kadr{width:100%} /* hover na CAŁYM rzędzie (tekst też), jak u Hayflick; bez @media (hover:hover) */
.wpis-kadr img{width:100%;height:100%;object-fit:cover;display:block} /* cover: przy poszerzaniu boksu zdjęcie rośnie i odsłania kadr */
.wpis-tresc{grid-column:7/span 4;display:flex;flex-direction:column;min-width:0}
.wpis-tresc p{margin-top:auto;color:var(--ink-2)}
.wpis-meta{grid-column:11/span 2;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.wpis-meta time{color:var(--ink-2)}
.wpis-meta .pigulka{margin-top:auto;position:relative;z-index:2}
.wpis-nakladka{position:absolute;inset:0;z-index:1} /* cały rząd klikalny; CTA nad nakładką */
@media (prefers-reduced-motion:reduce){.wpis-kadr{transition:none}}


/* ===== 22. KONTAKT + FORMULARZ (lecznica.prezentacjastrony.pl): pas ciemny, nagłówek centrowany z „brwią", karty danych | szklany formularz, mapa za zgodą ===== */
.kontakt{position:relative;background:var(--ink);color:var(--bg-2);padding:var(--kontakt-pad) 0}
.kontakt .etykieta{position:static;display:block;margin:0 auto 32px;width:min(var(--tresc),calc(100% - 2*var(--margines)));color:var(--akcent)}
.kontakt-glowa{text-align:center;margin-bottom:38px}
.kontakt-brew{display:inline-flex;align-items:center;gap:8px;font:600 var(--btn)/var(--btn-lh) var(--f-sans);letter-spacing:var(--btn-ls);text-transform:uppercase;color:var(--akcent);margin-bottom:16px}
.kontakt-brew::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}
.kontakt-glowa h2{color:var(--bialy)}
.kontakt-siatka{display:grid;grid-template-columns:1fr 1fr;gap:var(--kontakt-gap);align-items:start}
.kontakt-dane{display:grid;gap:var(--kontakt-dana-gap)}
.dana{display:flex;gap:14px;padding:var(--kontakt-dana-pad);background:var(--szklo);border:1px solid var(--szklo-obrys);border-radius:var(--kontakt-dana-r);color:var(--ink);transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
a.dana:hover{background:var(--bialy);transform:translateY(-1px)} /* ⚠ hover kart nie mierzony (u nich tylko przycisk ma −1 px) */
.dana svg{width:var(--kontakt-ikona);height:var(--kontakt-ikona);flex:none;margin-top:2px;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dana strong{display:block;font:600 var(--body)/1.6 var(--f-sans);color:var(--ink)}
.dana small{display:block;margin-top:2px;font:400 var(--small)/1.6 var(--f-sans);color:var(--ink-2)}
.kontakt-mapa-link{text-align:center;margin-top:5px}
.formularz{display:grid;gap:16px;padding:var(--form-pad);background:var(--szklo);border:1px solid var(--szklo-obrys);border-radius:var(--form-r);box-shadow:var(--szklo-cien);color:var(--ink);position:relative}
.formularz h3{font:400 var(--stopka-tytul)/1.2 var(--f-serif);color:var(--ink);margin-bottom:8px}
.pole{display:block}
.pole span{display:block;margin-bottom:6px;font:600 var(--small)/1.6 var(--f-sans);color:var(--ink)}
.pole input,.pole textarea{display:block;width:100%;height:var(--pole-h);padding:var(--pole-pad);border:1px solid var(--linia);border-radius:var(--pole-r);background:var(--bialy);font:400 var(--body)/1.4 var(--f-sans);color:var(--ink);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pole textarea{height:auto;min-height:121px;resize:vertical}
.pole input:focus,.pole textarea:focus{outline:none;border-color:var(--akcent);box-shadow:0 0 0 3px var(--akcent-20)} /* u nich: obrys → zieleń, bez pierścienia; pierścień 3 px @20 % dodany dla widoczności fokusu (A11) ⚠ */
.pole-www{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* pułapka na boty (jak u nich: pole „Strona www" poza ekranem) */
.formularz .pigulka{width:100%;justify-content:center;height:42px;border:0;cursor:pointer;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.formularz .pigulka:hover{background:color-mix(in srgb,var(--akcent) 86%,var(--ink));transform:translateY(-1px)} /* pomiar: ciemniejsze tło + −1 px, 0,2 s */
.formularz .pigulka:disabled{opacity:.6;cursor:default;transform:none}
.formularz .uwaga{font:400 var(--small)/1.65 var(--f-sans);color:var(--ink-2)}
.formularz .uwaga a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.formularz .podziekowanie,.formularz .blad-wysylki{display:none;padding:14px 16px;border-radius:var(--pole-r);background:var(--akcent-20);font:400 var(--body)/1.6 var(--f-sans);color:var(--ink)}
.formularz.wyslany .podziekowanie{display:block}.formularz.blad .blad-wysylki{display:block;background:rgba(46,50,49,.08)}
.kontakt-mapa{margin-top:var(--kontakt-gap);border-radius:var(--form-r);overflow:hidden;border:1px solid rgba(255,255,255,.55);background:var(--szklo);color:var(--ink);min-height:var(--mapa-h)}
.mapa-zgoda{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 22px;min-height:var(--mapa-h);text-align:center}
.mapa-zgoda svg{width:40px;height:40px;fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mapa-zgoda b{font:600 var(--body)/1.6 var(--f-sans);color:var(--ink)}
.mapa-zgoda p{max-width:544px;font:400 var(--small)/1.65 var(--f-sans);color:var(--ink-2)}
.mapa-zgoda .akcje{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.mapa-zgoda .pigulka{border:0;cursor:pointer}.mapa-zgoda .pigulka.odwrocona{border:1px solid var(--linia)}
.kontakt-mapa iframe{display:block;width:100%;height:var(--mapa-h);border:0}


/* ===== 21. STOPKA WARIANT 2 (Off+Brand): hasło lewo (7/12) + 3 kolumny (5/12), linki uppercase z torem 1 px, rząd dolny = podpis + znak ===== */
.stopka2{position:relative;background:var(--stopka-tlo);color:var(--stopka-tekst);padding:var(--st2-pad) 0 24px}
.stopka2 .etykieta{position:static;display:block;margin:0 auto 32px;width:min(var(--tresc),calc(100% - 2*var(--margines)));color:var(--akcent)}
.st2-gora,.st2-dol{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--st2-gap)} /* siatka 12 kolumn: hasło 1–7, kolumny 8–12 (pomiar 810 / 573 z 1402) */
.st2-haslo{font:400 var(--st2-haslo)/1 var(--f-serif);letter-spacing:var(--h1-ls);color:var(--stopka-tekst);text-wrap:balance;max-width:12ch}
.st2-kolumny{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--st2-gap)}
.st2-kolumna{display:flex;flex-direction:column;align-items:flex-start}
.st2-kolumna .st2-grupa+.st2-grupa{margin-top:var(--st2-grupa-odstep)}
.st2-etykieta{font:400 var(--small)/1.5 var(--f-sans);letter-spacing:.02em;text-transform:uppercase;color:var(--stopka-tekst-2);margin-bottom:var(--st2-etykieta-odstep)}
.st2-lista{display:flex;flex-direction:column;align-items:flex-start;gap:var(--st2-link-gap)}
.st2-link,.st2-tekst{font:600 var(--st2-link)/1 var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--stopka-tekst)}
.st2-link{display:inline-flex;flex-direction:column}
.st2-link.maly{font-size:var(--btn)} /* dokumenty: mniejsze (pomiar: wiersz 16 zamiast 20) */
.st2-link .st2-w{display:flex;align-items:center;gap:8px;white-space:nowrap} /* etykiety krótkie jak u nich (PRIVACY, CAREERS): kolumna ma 167 px */
.st2-link .st2-ikona{width:10px;height:10px;overflow:hidden;flex:none} /* okienko 10,67 × 15: strzałka wyjeżdża w prawo i znika (pomiar: jedna strzałka, +16 px, 1,2 s) */
.st2-link .st2-ikona svg{display:block;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--st2-strzalka-t) var(--st2-strzalka-ease)}
.st2-link.zewn .st2-ikona svg{transform:rotate(-45deg)} /* ↗ dla linków na zewnątrz (u nich osobny glif) */
.st2-link:hover .st2-ikona svg{transform:translateX(var(--st2-strzalka-przesuw))}
.st2-link.zewn:hover .st2-ikona svg{transform:translateX(var(--st2-strzalka-przesuw)) rotate(-45deg)}
.st2-link .st2-tor{display:block;height:1px;width:100%;margin-top:var(--st2-tor-odstep);background:var(--linia-na-ciemnym)}
.st2-link .st2-tor i{display:block;height:100%;background:var(--stopka-tekst);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--st2-tor-t)} /* wypełnienie od lewej, 0,6 s ease; cofa się też do lewej */
.st2-link:hover .st2-tor i{transform:scaleX(1)}
.st2-dol{align-items:end;margin-top:var(--st2-pad)}
.st2-podpis{font:400 var(--small)/1.5 var(--f-sans);letter-spacing:.02em;text-transform:uppercase;color:var(--stopka-tekst-2)} /* ⚠ u nich tu blok „zapytaj AI" — u nas podpis © (reguła pustki) */
.st2-znak{font:400 var(--st2-znak)/.8 var(--f-serif);letter-spacing:.02em;color:var(--stopka-tekst);white-space:nowrap} /* znak w kolumnie prawej, wyrównany z kolumnami linków (pomiar x 891 ≈ 894) */
@media (prefers-reduced-motion:reduce){.st2-link .st2-ikona svg,.st2-link .st2-tor i{transition:none}}


/* ===== MOBILE (pomiar 390×844: zostaje pin hero i wypełnianie tekstu) ===== */
@media (max-width:768px){
  :root{--margines:16px;--h1:64px;--h2s:48px;--h3:32px;--h2i:34px}
  .etykieta{top:84px}
  .rozmycie{display:none}
  /* 20. nawigacja mobilna (Huts §10): pasek = siatka (logo | kółko) + panel na całą szerokość; otwarcie NIE animuje wysokości (pomiar: 96 → 557 w < 50 ms), animuje tło 0,2 s i dolne rogi 0,4 s */
  .nav{height:auto;display:grid;grid-template-columns:1fr auto;grid-template-rows:var(--nav-m-h);align-items:center;overflow:hidden;pointer-events:auto;border-radius:0;transition:transform var(--nav-m-chowanie) var(--nav-m-ease),background-color .2s var(--nav-m-ease),border-radius .4s var(--nav-m-ease)}
  .nav:not(.na-foto){background:var(--bg)} /* po zjechaniu ze zdjęcia pasek dostaje tło (Huts: krem po hero) */
  .nav.schowana{transform:translateY(-100%)} /* w dół za próg → chowa się; w górę → wraca (pomiar Huts 0,6 s) */
  .nav.otwarta{grid-template-rows:var(--nav-m-h) auto;background:var(--bg);border-radius:0 0 var(--nav-m-r) var(--nav-m-r)}
  .nav.otwarta .logo{color:var(--ink)} /* logo ciemnieje razem z tłem (Huts: fill logo w transition) */
  .nav-prawa{display:none!important}
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--nav-m-kreska-gap);width:var(--nav-m-btn);height:var(--nav-m-btn);border-radius:50%;background:var(--akcent);border:0;padding:0;cursor:pointer;opacity:0}
  .nav-burger i{display:block;width:var(--nav-m-kreska);height:var(--nav-m-kreska-gr);border-radius:16px;background:var(--ink);transition:rotate .2s var(--nav-m-ease),translate .2s var(--nav-m-ease) .2s} /* zamykanie: najpierw obrót, potem rozjazd */
  .nav.otwarta .nav-burger i{transition:translate .2s var(--nav-m-ease),rotate .2s var(--nav-m-ease) .2s} /* otwieranie: najpierw zjazd do środka, potem obrót (pomiar: margin 0,2 s → transform 0,2 s z opóźnieniem 0,2 s) */
  .nav.otwarta .nav-burger i:first-child{translate:0 calc((var(--nav-m-kreska-gap) + var(--nav-m-kreska-gr))/2);rotate:45deg}
  .nav.otwarta .nav-burger i:last-child{translate:0 calc((var(--nav-m-kreska-gap) + var(--nav-m-kreska-gr))/-2);rotate:-45deg}
  .nav-panel{display:none;grid-column:1/-1;max-height:calc(100dvh - var(--nav-m-h));overflow-y:auto}
  .nav.otwarta .nav-panel{display:block}
  .nav-panel ul{list-style:none;margin:0;padding:0}
  .nav-panel li{border-bottom:1px solid var(--linia)}
  .nav-panel li a{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font:400 var(--small)/1.4 var(--f-sans);color:var(--ink)} /* wiersz 24 + 19,6 + 24 + 1 = 69 (pomiar 68,66) */
  .nav-panel .nav-cta{padding:var(--nav-m-cta-odstep) 0 16px}
  html.menu-otwarte{overflow:hidden} /* blokada scrolla pod panelem (Huts: lenis-stopped) */
  @media (prefers-reduced-motion:reduce){.nav,.nav-burger i{transition:none}}
  .hero-owijka{height:150vh;margin-bottom:-50vh}
  .hero-h1{width:calc(100% - 32px);bottom:auto;top:160px}
  .hero-kolumna{left:16px;width:calc(100% - 32px);top:calc(160px + 200px);bottom:auto}
  .hero-linia{display:none}
  .karty{padding:120px 0}
  .karty-siatka{flex-direction:column;height:auto;align-items:stretch}
  .karta{width:100%;height:400px;transition:none}
  .karta .foto-owijka{width:100%;height:400px;top:0;transform:none!important}
  .karta h3{width:calc(100% - 48px)}.karta p{width:calc(100% - 48px);bottom:64px}
  .tekst .blok{font-size:30px;line-height:1.4}
  .dwa-sekcja{height:auto;padding-top:440px}
  .dwa-tekst{position:relative;width:100%}
  .okno-a{left:0;top:0;width:100%;height:400px;transform:none!important}
  .okno-a .foto{height:400px;transform:none!important}
  .okno-b{display:none}
  .how .intro{margin-left:0;font-size:22px;width:100%;text-indent:0}
  .how-uklad{grid-template-columns:1fr}
  .kroki{padding-top:0;padding-bottom:0}
  .krok{min-height:0;padding-bottom:96px}.krok h2,.krok p{width:100%}
  .licznik-kolumna{display:none}
  .luk{height:100vh}.luk .foto{height:100%;transform:none!important}.czapka{display:none}
  .blog-siatka{grid-template-columns:1fr;gap:64px}.wpis:nth-child(2){margin-top:0}.wpis{height:551px}.wpis .kadr{width:100%}
  /* 11–12. tor kart: pin zostaje, flip znika — tył JEST kartą (pomiar Huts 390) */
  :root{--tor-gap:16px;--tor-pad-gora:49px;--tor-pad-dol:32px;--tor-naglowek-gap:32px;--karta-pad:32px;--karta-r:16px}
  .przypiety{padding-top:var(--tor-pad-gora)}
  .karta-owijka{width:calc(100cqw - 2*var(--margines))}
  .karta-h{max-height:65vh}
  .karta-wnetrze{transform:none!important;transition:none}
  .przod{display:none}
  .tyl{position:relative;transform:none;display:flex}
  .tyl-tekst p{font-size:var(--small)}
  .tor-sekcja.galeria .karta-h{max-height:none}
  .tor-sekcja.galeria .karta-h.zdjecie{aspect-ratio:3/4;flex:0 0 auto}
  :root{--strzalka-h:128px}
  .zespol{padding:96px 0 64px}.zespol-siatka{grid-template-columns:1fr;margin-top:56px}.karta-z{aspect-ratio:1} /* Hayflick 390: 1 kolumna, kwadrat */
  /* 15. aktualności (Hayflick 390): kolumna, gap 16, zdjęcie 16:9 bez hovera */
  .aktualnosci{padding:96px 0 64px}.aktualnosci .naglowek{margin-bottom:56px}
  .wpis-uklad{display:flex;flex-direction:column;gap:16px;height:auto}
  .wpis-kadr{width:100%!important;height:auto;aspect-ratio:16/9;transition:none}
  .wpis-tresc p{margin-top:16px}
  .wpis-meta{align-items:flex-start;text-align:left}.wpis-meta .pigulka{margin-top:12px}
  /* 16. etapy: jedna kolumna, bez obrotu i bez linii (K3) */
  .etapy{padding:96px 0 64px}.etapy .naglowek{margin-bottom:64px}
  .etapy-lista{gap:56px}.etap{height:auto;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  .etap .znaczek,.etap .etap-foto,.etap .etap-tekst{position:static;translate:none;rotate:none!important;transition:none}
  .etap .etap-foto{width:100%;height:auto;aspect-ratio:350/315}.etap .etap-tekst{width:100%}
  .etap .etap-linia{position:relative;left:auto;top:auto;translate:none;height:169px;align-self:center} /* MaestroClass 390: linia zostaje, krótsza (169), pod zdjęciem; zalanie działa, obrotu nie ma. relative, nie static — inaczej wypełnienie (inset:0) rozlewa się na cały etap */
  /* 18. realizacje (390): ten sam mechanizm; tytuł nad kartą, karta na całą szerokość */
  .realizacje{padding-top:96px}.realizacje .naglowek{margin-bottom:40px}
  .real .real-sticky{flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;padding:0 16px}
  .real .real-info{width:100%;margin-left:0}.real .real-info h2{font-size:44px}
  .real .real-karta{width:100%;height:auto;aspect-ratio:533/300;margin-right:0}
  /* 19. opinie (Serenya 390): karta = szerokość okna − 28, wysokość z treści, strzałki pod spodem, link do Google pod nimi */
  .opinie{padding:56px 0 80px}.opinie .etykieta{position:static;display:block;margin:0 auto 24px;width:calc(100% - 2*var(--margines))}.opinia{flex-basis:min(var(--opinia-w),calc(100vw - 28px));min-height:0}.opinie .opinie-okno{margin-top:36px}
  .opinie .opinie-dol{flex-direction:column;align-items:flex-start;gap:20px}
  /* 22. kontakt (lecznica 390): padding 51, jedna kolumna, ten sam formularz (pad 27) */
  .kontakt{padding:51px 0}.kontakt-glowa{margin-bottom:38px}.kontakt-siatka{grid-template-columns:1fr}
  /* 17. stopka (Serenya 390): wszystko w kolumnę */
  :root{--stopka-pad-gora:30px;--stopka-pad-dol:70px;--stopka-linia-odstep:64px;--stopka-podpisy-odstep:24px}
  .stopka-gora{flex-direction:column;gap:40px}.stopka-lewy{width:100%}
  .stopka-kolumny{grid-auto-flow:row;grid-template-columns:1fr 1fr;column-gap:24px}.stopka-kolumna:nth-child(3){grid-column:1/-1}
  .stopka-dol{flex-direction:column;align-items:flex-start;gap:12px}
  /* 21. stopka 2 (Off+Brand 390): odstęp 21, hasło 41 → 40, kolumny 2 × 2 (gap 32 / 20), znak ukryty (u nich op-0-m), podpis zostaje */
  .stopka2{padding:21px 0 24px}.st2-gora{grid-template-columns:1fr;gap:48px}.st2-haslo{font-size:40px;max-width:none}
  .st2-kolumny{grid-template-columns:1fr 1fr;gap:32px 20px}.st2-kolumna .st2-grupa+.st2-grupa{margin-top:32px}
  .st2-dol{grid-template-columns:1fr;margin-top:48px}.st2-znak{display:none}
  .preset{grid-template-columns:1fr}
  .paleta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kroki{padding-top:0}
}