/* =========================================================================
   INSPIRUJĄCY PARTNER — Marzena Krzewińska
   Barwy wyjęte pipetą z jej logo, nie dobrane: #024734 (ramka i litera „k"),
   #009639 (napis „Inspirujący Partner"), czerń napisu „Krzewińska".
   Kształt sygnaturowy: kwadrat z JEDNYM zaokrąglonym narożnikiem u góry
   po prawej — dokładnie jak w jej znaku.
   ========================================================================= */

/* --------------------------------------------------------------- KROJE */
/* Wygenerowane przez tools/fonty-lokalne.py. Pliki leżą u nas, nie w Google.
   Rodziny „zapasowy" mają miary policzone z pomiaru w przeglądarce, więc
   podmiana po wczytaniu nie rusza układu. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/archivo-latin-ext.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:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/archivo-latin.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:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-italic-latin-ext.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:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-italic-latin.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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-ext.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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin.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:'Archivo zapasowy';font-weight:1 600;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:100.17%;ascent-override:87.65%;descent-override:20.96%;line-gap-override:0%}
@font-face{font-family:'Archivo zapasowy';font-weight:601 1000;src:local('Arial Bold'),local('Helvetica Bold'),local('Liberation Sans Bold'),local('Arial');size-adjust:103.69%;ascent-override:84.68%;descent-override:20.25%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Sans zapasowy';font-weight:1 1000;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:100.37%;ascent-override:102.13%;descent-override:27.4%;line-gap-override:0%}

/* --------------------------------------------------------------- TOKENY */
:root{
  /* Barwy marki */
  --ip-zielen:#024734;          /* ramka i litera z logo */
  --ip-zielen-jasna:#009639;    /* napis „Inspirujący Partner" — ozdobnie */
  --ip-akcent:#026E2B;          /* ta sama rodzina, 6,43:1 na bieli */
  --ip-akcent-kosc:#025C24;     /* na szalwii 5,26:1, bo #026E2B dawal 4,12 */
  --ip-atrament:#141816;
  --ip-atrament-slaby:#4A544E;
  --ip-szalwia:#C3D3C8;         /* tło sekcji przeplatanych, 1,56:1 do bieli */
  --ip-szalwia-mglista:#E4EBE6; /* tylko wewnątrz kart, nigdy jako tło sekcji */
  --ip-biel:#FFFFFF;
  --ip-obrys:#9FB3A6;          /* tylko linie dekoracyjne */
  --ip-obrys-pole:#7E9687;     /* pola formularza, 3,18:1 na bieli */
  --ip-obrys-slaby:#D7E0D9;
  /* Na ciemnej zieleni */
  --ip-na-ciemnym:#FFFFFF;
  --ip-na-ciemnym-slaby:#B9CEC2;  /* 6,49:1 */
  --ip-na-ciemnym-akcent:#7BD79E; /* 6,17:1 */

  /* Szerokości. Tekst NIGDY nie dostaje własnego max-width. */
  --w-content:clamp(17rem,94vw,81rem);
  --w-wide:clamp(17rem,97vw,92rem);
  --px:clamp(1.15rem,4vw,2.5rem);

  /* Siatka 8 px */
  /* Skala z audytu odstepow: 0 4 8 12 16 24 28 32 40 48 64 72 96 128.
     20 px w niej NIE MA, wiec tokenu na 1.25rem nie trzymamy. */
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;

  --sekcja:clamp(3.5rem,7vw,6rem);
  --sekcja-duza:clamp(4.5rem,9vw,7.5rem);

  /* Skala. Wzorzec arlek.pl: h1 50/28, h2 38/25, kontener 1286.
     Trzymamy się poniżej, bo „za wielkie" to najsilniejszy sygnał AI vibe. */
  --fs-h1:clamp(2rem,1.55rem + 1.9vw,2.75rem);      /* 32 → 44 */
  --fs-h2:clamp(1.5rem,1.2rem + 1.3vw,2.125rem);    /* 24 → 34 */
  --fs-h3:clamp(1.15rem,1.05rem + .35vw,1.3125rem); /* 18,4 → 21 */
  --fs-body:clamp(1.0625rem,1.03rem + .15vw,1.125rem);
  --fs-lead:clamp(1.125rem,1.05rem + .35vw,1.25rem);
  /* Lead idacy przez CALA szerokosc kontenera potrzebuje wiekszego
     kroju, bo wiersz skraca sie krojem albo kolumna, a zwezac kolumny
     tekstu nam nie wolno. Zmierzone: przy 1216 px i 20 px wychodzi
     99 znakow w wierszu przy progu 95; przy 23 px wychodzi 86. */
  --fs-lead-szeroki:clamp(1.25rem,1.14rem + .5vw,1.4375rem);
  --fs-maly:.9375rem;
  --fs-nad:.8125rem;

  /* Trzy interlinie i trzy grubości na całą stronę. */
  --lh-ciasna:1.15;--lh-srednia:1.4;--lh-luzna:1.65;

  --r:14px;                 /* zwykłe zaokrąglenie */
  --r-znak:34px;            /* narożnik z jej znaku */
  /* Promien nalezy do systemu tak samo jak odstep. Wiekszy element,
     wiekszy promien; mniejszy ma mniejszy i to jest wybor, nie brak.
     Nazwy po to, zeby zmiana ksztaltu byla jedna poprawka. */
  --r-pole: 10px;      /* pola formularza, hamburger, ikony w stopce */
  --r-etykieta: 8px;   /* male etykiety i numerki krokow */
  --r-punkt: 3px;      /* znaczniki przy pozycjach list */
  --cien:0 1px 2px rgba(2,71,52,.06),0 8px 24px -12px rgba(2,71,52,.18);
  --cien-mocny:0 2px 4px rgba(2,71,52,.08),0 20px 44px -20px rgba(2,71,52,.28);
  /* Element lezacy NA ZDJECIU potrzebuje czerni, a nie zieleni marki:
     na fotografii zielony cien znika. Stad osobny przypadek. */
  --cien-na-zdjeciu: 0 20px 44px -26px rgba(0,0,0,.68);
  /* Przyklejony naglowek po przewinieciu: najslabszy cien na stronie,
     bo ma tylko odciac pasek od tresci, a nie unosic go. */
  --cien-naglowka: 0 10px 30px -22px rgba(2,71,52,.55);
  --ease:cubic-bezier(.22,.8,.3,1);
  --dur:220ms;
}

/* ----------------------------------------------------------------- BAZA */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ip-biel);
  color:var(--ip-atrament);
  font-family:'IBM Plex Sans','IBM Plex Sans zapasowy',system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-luzna);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.ip-bez-przewijania{overflow:hidden}

h1,h2,h3,h4{
  font-family:'Archivo','Archivo zapasowy',system-ui,sans-serif;
  font-weight:700;
  line-height:var(--lh-ciasna);
  letter-spacing:-.015em;
  margin:0 0 var(--s4);
  text-wrap:balance;
  color:var(--ip-zielen);
}
p{margin:0 0 var(--s4);text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--ip-akcent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ip-zielen)}
:focus-visible{outline:3px solid var(--ip-akcent);outline-offset:3px;border-radius:4px}
.ip-sekcja--ciemna :focus-visible,.ip-stopka :focus-visible,
.ip-przygotowanie :focus-visible,.ip-menu-mobilne :focus-visible,
.ip-pas :focus-visible{outline-color:var(--ip-na-ciemnym-akcent)}

.ip-pomin{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ip-zielen);color:#fff;padding:var(--s3) var(--s6);
  border-radius:0 0 var(--r) 0;text-decoration:none;
}
.ip-pomin:focus{left:0}

.ip-kontener{width:var(--w-content);margin-inline:auto;padding-inline:var(--px)}

.ip-sekcja{padding-block:var(--sekcja)}
.ip-sekcja--kosc{background:var(--ip-szalwia)}
.ip-sekcja--kosc .ip-nadtytul,.ip-sekcja--kosc .ip-formy__tytul,
.ip-sekcja--kosc .ip-obszar__etykieta,.ip-sekcja--kosc .ip-karta__uwaga,
.ip-sekcja--kosc .ip-os__nr,.ip-fakty .ip-nadtytul{color:var(--ip-akcent-kosc)}
/* ⛔ `:not(.ip-btn)` nie jest ozdobnikiem. Selektor opisujacy MIEJSCE
   (0,1,1) bije `.ip-btn{color:#fff}` (0,1,0) i maluje napis przycisku
   barwa tekstu sekcji, mimo ze przycisk ma WLASNE, ciemne tlo.
   Zmierzone na cenniku sesji: 1,31:1. Przycisk zawsze decyduje
   o swoich barwach sam (memory: lekcja-regula-koloru-zaklada-tlo). */
.ip-sekcja--kosc a:not(.ip-btn){color:var(--ip-akcent-kosc)}
.ip-sekcja--ciemna{background:var(--ip-zielen);color:var(--ip-na-ciemnym);position:relative;overflow:hidden}
/* ⛔ Przyciecie znaku wodnego NIE MOZE zalezec od barwy tla sekcji.
   Znak siega poza kontener z zalozenia; dopoki sekcja byla ciemna,
   przycinala go regula wyzej. Po przeniesieniu sekcji cytatow na
   jasne tlo znak zaczal tworzyc POZIOMY PASEK na kazdej szerokosci:
   dokument 1526 px przy oknie 1440. Przycina teraz kazda sekcja,
   ktora znak w ogole niesie. */
.ip-przychodza,.ip-podsumowanie,.ip-akademia,.ip-przygotowanie,.ip-jak
{position:relative;overflow:hidden}
.ip-sekcja--ciemna h1,.ip-sekcja--ciemna h2,.ip-sekcja--ciemna h3{color:var(--ip-na-ciemnym)}
.ip-sekcja--ciemna a:not(.ip-btn){color:var(--ip-na-ciemnym-akcent)}
.ip-sekcja--ciemna a:hover{color:#fff}

.ip-sekcja__glowa{margin-bottom:var(--s12)}
/* Dwukolumnowa glowa TYLKO w dwoch sekcjach, i to niesasiadujacych.
   Cztery sceny z rzedu zaczynajace sie identycznie (kreska, nadtytul
   kapitalikami, dwuwierszowy naglowek, lead po prawej) czytaja sie
   z odleglosci jak jeden powtorzony modul. */
@media (min-width:1000px){
  /* Naglowek dwudzielny: tytul po lewej, zdanie po prawej. Oferta doszla
     21.09, bo jej zdanie o wycenie mialo 107 znakow w wierszu przy progu
     95. Wiersz skraca KOLUMNA, nigdy obramowanie akapitu. */
  .ip-obszary .ip-sekcja__glowa,.ip-kontakt .ip-sekcja__glowa,
  .ip-oferta .ip-sekcja__glowa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s16);align-items:end}
  .ip-obszary .ip-sekcja__lead,.ip-kontakt .ip-sekcja__lead,
  .ip-oferta .ip-sekcja__lead{grid-column:2;grid-row:1 / span 2;align-self:start}
}
.ip-sekcja__naglowek{font-size:var(--fs-h2);margin-bottom:var(--s4)}
.ip-sekcja__lead{font-size:var(--fs-lead);line-height:var(--lh-srednia);color:var(--ip-atrament-slaby)}
.ip-sekcja--ciemna .ip-sekcja__lead{color:var(--ip-na-ciemnym-slaby)}

.ip-nadtytul{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-nad);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ip-akcent);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3);
}
.ip-nadtytul::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.ip-nadtytul--jasny{color:var(--ip-na-ciemnym-akcent)}

.ip-proza p{margin-bottom:var(--s6)}
.ip-proza h2{font-size:var(--fs-h2);margin-top:var(--s10)}
.ip-proza h3{font-size:var(--fs-h3);margin-top:var(--s8)}
.ip-proza ul{list-style:none;padding:0;margin:0 0 var(--s6)}
.ip-proza li{position:relative;padding-left:var(--s6);margin-bottom:var(--s2)}
.ip-proza li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--ip-zielen-jasna);border-radius:0 var(--r-punkt) 0 0}

/* ------------------------------------------------------------- PRZYCISKI */
.ip-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s6);
  background:var(--ip-zielen);color:#fff;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-maly);font-weight:700;letter-spacing:.01em;
  border:2px solid var(--ip-zielen);border-radius:0 var(--r) 0 var(--r);
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.ip-btn:hover{background:#013828;border-color:#013828;color:#fff;transform:translateY(-2px)}
.ip-btn:active{transform:translateY(0)}
.ip-btn--duzy{min-height:56px;padding:var(--s4) var(--s8);font-size:1rem}
.ip-btn--maly{min-height:44px;padding:var(--s2) var(--s6)}
.ip-btn--obrys{background:transparent;color:var(--ip-zielen);border-color:var(--ip-zielen)}
.ip-btn--obrys:hover{background:var(--ip-zielen);border-color:var(--ip-zielen);color:#fff}
.ip-btn--jasny{background:#fff;color:var(--ip-zielen);border-color:#fff}
.ip-btn--jasny:hover{background:var(--ip-na-ciemnym-akcent);border-color:var(--ip-na-ciemnym-akcent);color:#04301f}
/* W ciemnej sekcji regula `.ip-sekcja--ciemna a` (0,1,1) bije
   `.ip-btn--jasny` (0,1,0) i przemalowuje SAM NAPIS na mietowy,
   zostawiajac biale tlo: zmierzone rgb(123,215,158) na bieli.
   Kaskada rozstrzyga kazda wlasciwosc osobno. */
.ip-sekcja--ciemna .ip-btn--jasny{color:var(--ip-zielen)}
.ip-sekcja--ciemna .ip-btn--jasny:hover,
.ip-sekcja--ciemna .ip-btn--jasny:focus-visible{color:#04301f}
.ip-btn--obrys-jasny{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.ip-btn--obrys-jasny:hover{background:#fff;border-color:#fff;color:var(--ip-zielen)}
.ip-btn svg{flex:none}

.ip-etykieta{
  display:inline-block;padding:.28em .7em;
  background:var(--ip-szalwia);color:var(--ip-zielen);
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:0 var(--r-etykieta) 0 var(--r-etykieta);
}

/* --------------------------------------------------- RAMKA Z JEJ ZNAKU */
/* Kwadrat z jednym zaokrąglonym narożnikiem u góry po prawej. */
.ip-ramka{
  position:relative;overflow:hidden;
  border-radius:0 var(--r-znak) 0 0;
  background:var(--ip-szalwia-mglista);
}
.ip-ramka>img{width:100%;height:100%;object-fit:cover;display:block}
.ip-ramka--film{aspect-ratio:16/9}
/* Od 21.09.2026 stoi tu zdjecie z sesji, a nie wycinanka z przezroczystym
   tlem, wiec ramka bierze narozny promien marki jak kazde inne zdjecie.
   `aspect-ratio:auto` i `contain` zostaja: plik pokazuje sie w calosci,
   bez docinania (kadry.py liczy strate kadru). */
.ip-ramka--portret{aspect-ratio:auto;background:transparent}
.ip-ramka--portret>img{height:auto;object-fit:contain}

/* ----------------------------- IKONY OBSZARÓW (materiał klientki) ----- */
/* Maska, nie obrazek: dziedziczy barwę i działa tak samo na bieli,
   szałwii i ciemnej zieleni. */
.ip-znak{
  display:block;width:var(--bok,56px);height:var(--bok,56px);flex:none;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.ip-znak--przywodztwo{-webkit-mask-image:url(../ikony/przywodztwo.webp);mask-image:url(../ikony/przywodztwo.webp)}
.ip-znak--zmiana{-webkit-mask-image:url(../ikony/zmiana.webp);mask-image:url(../ikony/zmiana.webp)}
.ip-znak--komunikacja{-webkit-mask-image:url(../ikony/komunikacja.webp);mask-image:url(../ikony/komunikacja.webp)}
.ip-znak--kultura{-webkit-mask-image:url(../ikony/kultura.webp);mask-image:url(../ikony/kultura.webp)}

.ip-znak-wodny{
  position:absolute;pointer-events:none;
  width:min(30vw,340px);aspect-ratio:1;
  /* Przezroczystosc siedzi w BARWIE, nie w `opacity`. Element o kryciu
     ponizej 0,05 bramka ruchu czyta jako tresc, ktora czeka na wejscie
     i nigdy nie weszla (memory: lekcja-animacja-wejscia-chowa-tresc). */
  background:rgba(255,255,255,.035);opacity:1;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  right:-6%;bottom:-12%;
}
.ip-znak-wodny--komunikacja{-webkit-mask-image:url(../ikony/komunikacja.webp);mask-image:url(../ikony/komunikacja.webp)}
.ip-znak-wodny--kultura{-webkit-mask-image:url(../ikony/kultura.webp);mask-image:url(../ikony/kultura.webp)}

/* ------------------------------------------------------------- NAGŁÓWEK */
.ip-naglowek{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--ip-obrys-slaby);
  transition:box-shadow var(--dur) var(--ease);
}
/* Po przewinieciu pasek dostaje PELNA biel. Przy 94% krycia tresc ciemnej
   sekcji przebijala przez niego: nad logo widac bylo ucieta polowe naglowka
   „Z czym przychodzi klient". Rozmycie tla tego nie zakrywa. */
.ip-naglowek--przewiniety{
  background:#fff;
  box-shadow:var(--cien-naglowka)
}
.ip-naglowek--przewiniety .ip-naglowek__srodek{min-height:72px;padding-block:var(--s3)}
.ip-naglowek--przewiniety .ip-naglowek__logo img{width:clamp(158px,13vw,190px)}
.ip-naglowek__srodek,.ip-naglowek__logo img{transition:min-height var(--dur) var(--ease),width var(--dur) var(--ease),padding var(--dur) var(--ease)}
.ip-naglowek__srodek{
  width:var(--w-content);max-width:100%;margin-inline:auto;
  padding:var(--s4) var(--px);
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
  min-height:88px;
}
.ip-naglowek__logo{flex:none;display:block;line-height:0}
.ip-naglowek__logo img{width:clamp(168px,15vw,220px);height:auto}

/* Menu to SAME NAPISY: bez tła, bez obwódki, bez podkreślenia.
   Po najechaniu zmienia się wyłącznie barwa napisu. */
.ip-menu{margin-left:auto;min-width:0}
.ip-menu__lista{flex-wrap:nowrap}
.ip-menu__lista{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2rem)}
.ip-menu__lista a{
  position:relative;display:inline-block;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:.9375rem;font-weight:600;color:var(--ip-atrament);
  /* 11px, a nie token: ta wartosc dobija pole dotyku do 44 px razem
     z interlinia i JEDNOCZESNIE trzyma wysokosc przyklejonego naglowka.
     Zmiana na 12 px rozjechalaby jedno albo drugie. */
  text-decoration:none;white-space:nowrap;padding-block:11px;
  transition:color var(--dur) var(--ease);
}
.ip-menu__lista a:hover{color:var(--ip-akcent)}
/* Pozycja biezaca: sam napis w barwie marki. Zadnego tla, obwodki ani
   podkreslenia szerszego niz napis (Pawel, 17.08.2026: menu to napisy,
   nie kafelki). */
.ip-menu__lista .current-menu-item>a{color:var(--ip-zielen)}
.ip-menu__lista .current-menu-item>a::after{
  content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;
  background:var(--ip-zielen-jasna)
}

.ip-naglowek__akcje{display:flex;align-items:center;gap:clamp(.75rem,1.4vw,1.5rem);flex:none;margin-left:clamp(1rem,2vw,2rem)}
.ip-naglowek__tel{
  display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  color:var(--ip-zielen);text-decoration:none;white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.ip-naglowek__tel svg{color:inherit;opacity:.75}
.ip-naglowek__tel:hover{color:var(--ip-akcent)}
.ip-naglowek__tel:hover svg{opacity:1}

.ip-hamburger{
  display:none;width:48px;height:48px;padding:var(--s3);
  background:transparent;border:1px solid #7E9687;
  border-radius:0 var(--r-pole) 0 var(--r-pole);cursor:pointer;
}
.ip-hamburger span{display:block;height:2px;background:var(--ip-zielen);border-radius:2px;margin:var(--s1) 0;transition:background var(--dur) var(--ease)}
.ip-hamburger:hover span{background:var(--ip-akcent)}

/* Telefon znika pierwszy: powtarza akcje, ktora niesie przycisk. */
@media (max-width:1399px){
  .ip-naglowek__tel{display:none}
}
/* Ponizej 1240 px menu ma ciasniejsze odstepy, zanim w ogole zniknie. */
@media (max-width:1239px){
  .ip-menu__lista{gap:clamp(.75rem,1.7vw,1.25rem)}
}
@media (max-width:1099px){
  .ip-menu{display:none}
  .ip-hamburger{display:block}
  .ip-naglowek__akcje{margin-left:auto}
  .ip-naglowek__srodek{min-height:76px}
}
@media (max-width:559px){
  .ip-naglowek__akcje .ip-btn--maly{display:none}
  .ip-naglowek__srodek{min-height:68px}
}

/* ---------------------------------------------------------- MENU MOBILNE */
.ip-menu-mobilne{
  position:fixed;inset:0;z-index:120;
  background:var(--ip-zielen);color:#fff;
  padding:var(--s6) var(--px) var(--s8);
  display:flex;flex-direction:column;gap:var(--s8);
  translate:100% 0;transition:translate 260ms var(--ease);
  overflow-y:auto;
}
.ip-menu-mobilne[hidden]{display:none}
.ip-menu-mobilne--otwarte{translate:0 0}
.ip-menu-mobilne__gora{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.ip-menu-mobilne__logo{width:170px;height:auto}
.ip-menu-mobilne__zamknij{
  width:48px;height:48px;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(255,255,255,.4);
  border-radius:0 var(--r-pole) 0 var(--r-pole);color:#fff;cursor:pointer;
  transition:background var(--dur) var(--ease)
}
.ip-menu-mobilne__zamknij:hover{background:rgba(255,255,255,.14)}
.ip-menu-mobilne__lista{display:flex;flex-direction:column;gap:var(--s2)}
.ip-menu-mobilne__lista a{
  display:block;padding:var(--s3) 0;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:clamp(1.35rem,6vw,1.75rem);font-weight:700;
  color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:color var(--dur) var(--ease)
}
.ip-menu-mobilne__lista a:hover{color:var(--ip-na-ciemnym-akcent)}
.ip-menu-mobilne__dol{margin-top:auto;display:flex;flex-direction:column;gap:var(--s3)}

/* ------------------------------------------------------------------ HERO */
/* Bez `100vh`: na laptopie 15 cali zepchnęłoby przycisk pod krawędź okna. */
.ip-hero{padding-block:clamp(2rem,3.5vw,3rem) clamp(3rem,5vw,4rem)}
.ip-hero__siatka{
  display:grid;gap:var(--s8) clamp(2rem,4vw,3.5rem);
  grid-template-areas:"naglowki" "film" "dol";
}
.ip-hero__naglowki{grid-area:naglowki}
.ip-hero__film{grid-area:film}
.ip-hero__dol{grid-area:dol}
.ip-hero__naglowek{font-size:var(--fs-h1);margin-bottom:0;max-width:none}
.ip-hero__lead{font-size:var(--fs-lead);line-height:var(--lh-srednia);color:var(--ip-atrament-slaby);margin-bottom:var(--s8)}
.ip-hero__akcje{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:0}
/* Na telefonie oba przyciski biora szerokosc wlasnej tresci, wiec stoja
   jeden pod drugim w dwoch roznych szerokosciach. Jedna szerokosc czyta
   sie jako decyzja, a przy okazji powieksza pole dotyku. */
@media (max-width:599px){
  .ip-hero__akcje>.ip-btn{flex:1 1 100%;justify-content:center}
}

.ip-hero__film{display:flex;flex-direction:column;gap:var(--s8)}

/* Na telefonie przycisk „Umów rozmowę" stał 1800 px od góry strony, bo między
   filmem a nim leżały cztery fakty. Klientka napisała wprost, że film
   i umówienie rozmowy to JEST jej lejek i ma być „na samej górze"
   (mail z 10.09.2026). `display:contents` rozpuszcza pojemnik filmu, więc
   ramka i fakty stają się osobnymi polami siatki i można je przestawić
   BEZ dublowania kodu i bez ruszania układu desktopowego. */
@media (max-width:999px){
  .ip-hero__siatka{grid-template-areas:"naglowki" "film" "dol" "fakty"}
  .ip-hero__film{display:contents}
  .ip-hero__film>.ip-ramka--film{grid-area:film}
  .ip-hero__film>.ip-fakty__lista{grid-area:fakty}
}

.ip-film{position:relative;width:100%;height:100%}
.ip-film img,.ip-film iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.ip-film__start{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  background:linear-gradient(180deg,rgba(2,71,52,.15),rgba(2,71,52,.55));
  color:#fff;border:0;cursor:pointer;
  font-family:'Archivo','Archivo zapasowy',sans-serif;font-weight:700;font-size:1rem;
  transition:background var(--dur) var(--ease)
}
.ip-film__start:hover{background:linear-gradient(180deg,rgba(2,71,52,.3),rgba(2,71,52,.7))}
.ip-film__krazek{
  width:72px;height:72px;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ip-zielen);border-radius:50%;
  transition:scale var(--dur) var(--ease),background var(--dur) var(--ease)
}
.ip-film__start:hover .ip-film__krazek{scale:1.08;background:#fff}
.ip-film__brak{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  color:var(--ip-atrament-slaby);background:var(--ip-szalwia-mglista)
}

@media (min-width:1000px){
  /* Na desktopie film stoi z prawej i zajmuje CALA wysokosc kolumny tekstu,
     inaczej pod nim zostaje pusty pas na pol ekranu. */
  .ip-hero__siatka{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    grid-template-areas:"naglowki film" "dol film";
    align-content:start;
  }
  /* Kolumna z filmem zaczyna sie u GORY, razem z nadtytulem, i konczy
     mniej wiecej tam, gdzie przyciski: pod filmem stoja fakty. Wczesniej
     film byl wysrodkowany i pod nim wisialo 90 px pustki. */
  /* `space-between` rozdzielalo nadwyzke wysokosci MIEDZY ramke a fakty,
     wiec szpara zalezala od tego, na ile wierszy zlamal sie lead w lewej
     kolumnie: przy 1440 px wychodzilo 56,5 px, czyli wartosc spoza skali
     odstepow (bramka odstepy.py). Teraz szpara jest stala i rowna --s8,
     a nadwyzka zostaje pod faktami, gdzie niczego nie rozsuwa. */
  .ip-hero__film{align-self:stretch;display:flex;flex-direction:column;gap:var(--s8);justify-content:flex-start}
  .ip-hero__film .ip-ramka--film{width:100%;aspect-ratio:16/9}
}

/* Od 1000 do 1239 px lewa kolumna (naglowek, wizytowka, lead, przyciski)
   jest wyrazniie wyzsza od prawej i pod faktami zostawala pustka: 287 px
   przy 1000 i 169 px przy 1120. Fakty ida wtedy w jednej kolumnie, wiec
   wypelniaja te wysokosc trescia zamiast powietrzem. Powyzej 1240 px
   roznica schodzi do 39 px i dwie kolumny czytaja sie lepiej. */
@media (min-width:1000px) and (max-width:1239px){
  .ip-hero__film .ip-fakty__lista{grid-template-columns:minmax(0,1fr)}
}

/* ----------------------------------------------------------------- FAKTY */
.ip-fakty__lista{display:grid;gap:var(--s6) var(--s8);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.ip-fakty__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ip-fakty__pozycja{display:flex;flex-direction:column;gap:var(--s1);padding-left:var(--s4);border-left:2px solid var(--ip-zielen-jasna)}
.ip-fakty__liczba{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:clamp(1.375rem,1.15rem + .85vw,1.75rem);font-weight:800;
  color:var(--ip-zielen);line-height:1.1;letter-spacing:-.02em
}
.ip-fakty__opis{font-size:.875rem;line-height:var(--lh-srednia);color:var(--ip-atrament-slaby)}

/* ---------------------------------------------------------- Z CZYM DO MNIE */
.ip-przychodza .ip-sekcja__glowa{margin-bottom:var(--s10)}
.ip-cytaty{
  display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
}
.ip-cytat{
  position:relative;
  padding:calc(var(--s6) + 26px) var(--s6) var(--s6) var(--s6);
  background:rgba(255,255,255,.06);
  border-left:3px solid var(--ip-na-ciemnym-akcent);
  border-radius:0 var(--r) 0 0;
}
.ip-cytat p{
  font-style:italic;font-size:1.0625rem;line-height:var(--lh-srednia);
  color:var(--ip-na-ciemnym);margin:0
}
/* Znak cytatu stoi POZA przepływem: jako rodzeństwo akapitu tworzył szparę
   20,7 px, której nie ma w skali odstępów (0 4 8 12 16 24 28 32 40 48 64 72). */
.ip-cytat__znak{position:absolute;top:var(--s6);left:var(--s6);color:var(--ip-na-ciemnym-akcent);opacity:.85}
/* Zdanie domykajace stalo samo w wierszu szerokim na 1296 px, wiec obok
   niego bylo okolo 700 px pustki. Jej wlasny rysunek trzech kol zebatych
   ilustruje to zdanie doslownie, wiec wchodzi wlasnie tam. */
.ip-przychodza__stopka{
  margin-top:var(--s10);display:grid;gap:var(--s8);align-items:center;
  grid-template-columns:minmax(0,1fr)
}
/* ⛔ Barwe wyznacza KLASA SEKCJI, nie zalozenie o tle. Wczesniej stalo
   tu na sztywno `--ip-na-ciemnym-akcent`, czyli barwa dla ciemnego tla,
   i po przeniesieniu sekcji na jasne dawalo 1,12:1
   (memory: lekcja-regula-koloru-zaklada-tlo-ktorego-nie-ustawia). */
.ip-przychodza__domkniecie{
  margin:0;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);font-weight:700;
  letter-spacing:-.01em;color:var(--ip-zielen);
}
.ip-sekcja--ciemna .ip-przychodza__domkniecie{color:var(--ip-na-ciemnym-akcent)}
/* Rysunek ma wlasna proporcje 1,09 i nie jest kadrowany: max-width na
   RAMCE obrazu, nigdy na tekscie. */
.ip-przychodza__rysunek{margin:0;max-width:340px;justify-self:start}
.ip-przychodza__rysunek img{display:block;width:100%;height:auto}
@media (min-width:860px){
  .ip-przychodza__stopka{grid-template-columns:minmax(0,1fr) auto;gap:var(--s12)}
  .ip-przychodza__rysunek{justify-self:end;max-width:360px}
}

/* --------------------------------------------------------------- OBSZARY */
.ip-obszar--pas{
  display:grid;gap:clamp(1.75rem,3vw,3rem);align-items:center;
  padding:clamp(1.25rem,2.2vw,2rem);
  background:var(--ip-szalwia-mglista);
  border-radius:0 var(--r-znak) 0 0;
  margin-bottom:var(--s10);
}
.ip-obszar__glowa{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s6)}
.ip-obszar__glowa .ip-znak{color:var(--ip-zielen)}
.ip-obszar__nazwa{font-size:var(--fs-h3);margin:0;text-transform:uppercase;letter-spacing:.02em}
.ip-obszar__wstep{font-size:1.0625rem;line-height:var(--lh-srednia);color:var(--ip-atrament-slaby);margin-bottom:var(--s6)}
.ip-obszar__etykieta{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-nad);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ip-akcent);margin-bottom:var(--s3)
}
.ip-obszar__punkty{display:grid;gap:var(--s2)}
.ip-obszar__punkty li{position:relative;padding-left:var(--s6);font-size:var(--fs-maly);line-height:var(--lh-srednia)}
.ip-obszar__punkty li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--ip-zielen-jasna);border-radius:0 var(--r-punkt) 0 0}
/* Rozwijane domknięcie długiej listy. `details` działa bez skryptu, więc
   pozostałe punkty klientki otworzy także ktoś z wyłączonym JavaScriptem.
   Marker rysujemy sami, bo domyślny trójkąt przeglądarki nie ma nic
   wspólnego z resztą strony. */
.ip-obszar__wiecej{margin-top:var(--s4)}
.ip-obszar__wiecej>summary{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-nad);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ip-akcent);cursor:pointer;list-style:none;
  padding:var(--s2) 0;min-height:44px;
  transition:color var(--dur) var(--ease)
}
.ip-obszar__wiecej>summary::-webkit-details-marker{display:none}
.ip-obszar__wiecej>summary::before{
  content:"";width:10px;height:10px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur) var(--ease)
}
.ip-obszar__wiecej[open]>summary::before{transform:rotate(-135deg) translate(-3px,-3px)}
.ip-obszar__wiecej>summary:hover{color:var(--ip-zielen)}
.ip-obszar__wiecej>summary:focus-visible{outline:2px solid var(--ip-akcent);outline-offset:3px}
.ip-obszar__wiecej .ip-obszar__punkty{margin-top:var(--s2)}

/* Jej odpowiedz na pytanie o efekt, siedem punktow ze starej witryny.
   Dwie kolumny, bo wiersz skraca KOLUMNA: w jednej kolumnie kontenera
   1296 px wychodzilo okolo 140 znakow przy limicie 95. */
.ip-jak__efekty{margin-top:var(--s10);padding-top:var(--s8);border-top:1px solid var(--ip-obrys)}
/* `--ip-akcent` jest dobrany pod BIEL kart obszarow; ta sama klasa na tle
   koscianym daje 4,12:1 przy progu 4,50. Szoste wystapienie lekcji
   o regule, ktora zaklada tlo, wiec wyjatek stoi przy NOWYM uzyciu,
   a regula globalna zostaje nietknieta. */
.ip-jak__efekty>summary{font-size:var(--fs-maly);letter-spacing:.06em;color:var(--ip-zielen)}
.ip-jak__efekty>summary:hover{color:var(--ip-atrament)}
/* Kolumny tekstowe, nie siatka: siatka wyrownuje WIERSZE, wiec krotki
   punkt obok bardzo dlugiego zostawia pod soba pustke. Pomiar prostokatow
   tego NIE POKAZUJE, bo pozycja jest rozciagnieta do wysokosci wiersza
   i odstep wychodzi rowne 16 px przy widocznej dziurze. */
.ip-jak__efekty-lista{margin-top:var(--s4)}
.ip-jak__efekty-lista li{color:var(--ip-atrament-slaby);break-inside:avoid;margin-bottom:var(--s4)}
.ip-jak__efekty-lista li:last-child{margin-bottom:0}
.ip-jak__efekty-lista strong{color:var(--ip-zielen);font-weight:700}
/* `display:block` MUSI tu byc: lista niesie takze `.ip-obszar__punkty`
   z `display:grid`, a `columns` na kontenerze siatki nie robi nic. */
@media (min-width:860px){
  .ip-jak__efekty-lista{display:block;columns:2;column-gap:var(--s10)}
}

.ip-obszar__uwaga{
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--ip-obrys-slaby);
  font-size:var(--fs-maly);font-style:italic;color:var(--ip-atrament-slaby)
}
.ip-obszar__foto{display:flex;align-items:center}
.ip-obszar__foto .ip-ramka{aspect-ratio:880/620;width:100%}

@media (min-width:860px){
  /* Fotografia miala 462 px w panelu 1216 px, czyli niecale 30 procent
     pliku 1539x1008. Kolumna zdjecia rosnie do rownej. Proporcja pliku
     zostaje nietknieta: ramka nie ma `aspect-ratio`, wiec nic sie nie docina. */
  .ip-obszar--pas{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .ip-obszar__punkty--dwie{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}
}

.ip-obszary__siatka{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ip-obszar--karta{
  display:flex;flex-direction:column;
  background:var(--ip-biel);
  /* 2,22:1 na bieli. `--ip-obrys-slaby` dawal 1,22:1, czyli biala karta
     na bialej sekcji nie miala widocznego konca (prog 2:1). */
  border:1px solid var(--ip-obrys);
  border-radius:0 var(--r-znak) 0 0;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.ip-obszar--karta:hover{border-color:var(--ip-zielen);box-shadow:var(--cien-mocny);transform:translateY(-3px)}
.ip-obszar__kadr{aspect-ratio:880/620;border-radius:0}
.ip-obszar__kadr::after{
  content:"";position:absolute;inset:auto 0 0 0;height:44%;
  background:linear-gradient(180deg,rgba(1,40,28,0),rgba(1,40,28,.72));
  pointer-events:none
}
/* ---- BARWY CZTERECH OBSZAROW, z jej ulotki (21.09.2026) ----
   Barwa jest jej, kolor znaku nasz: u niej znak jest zawsze bialy,
   a bialy na zoltym ma 1,49:1. Zmierzone pary ponizej daja 9,67 / 5,55 /
   4,41 / 6,73:1 przy progu 3:1 dla znaku graficznego. */
.ip-obszar--przywodztwo{--obszar-barwa:#F4C70A;--obszar-znak:var(--ip-atrament)}
/* Biel na zieleniach: prosba klientki z 21.09. Zmierzone kontrasty
   znaku do kafla: zmiana 2,81:1, komunikacja 3,54:1. Znak jest
   `aria-hidden` i stoi obok nazwy obszaru pisanej tekstem, wiec jest
   ozdoba, a nie jedynym nosnikiem tresci.
   ⚠️ Zolte Przywodztwo zostaje CIEMNE: biel ma tam 1,61:1 i klientka
   o nie nie prosila. */
.ip-obszar--zmiana{--obszar-barwa:#35AF66;--obszar-znak:#fff}
.ip-obszar--komunikacja{--obszar-barwa:#0B9D48;--obszar-znak:#fff}
.ip-obszar--kultura{--obszar-barwa:#17693B;--obszar-znak:#fff}

/* Kafel pod znakiem, dokladnie jak na jej ulotce.
   ⚠️ Tlo MUSI siedziec na opakowaniu: `.ip-znak` to maska CSS, wiec tlo
   ustawione na nim samym tez zostaje zamaskowane i zamiast ciemnego znaku
   na zoltym kaflu wychodzi zolty znak bez kafla (1,48:1 na szalwii).
   Znak bierze barwe z opakowania przez `currentColor`. */
.ip-obszar__kafel{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--s3);
  background:var(--obszar-barwa,var(--ip-zielen));
  color:var(--obszar-znak,#fff);
  border-radius:0 var(--r-znak) 0 0
}
.ip-obszar__kadr .ip-obszar__kafel{position:absolute;left:var(--s6);bottom:var(--s6);z-index:1}
/* `flex:1` jest tu warunkiem dzialania `margin-top:auto` nizej. Bez tego
   pole tresci nie rosnie do wysokosci kafla, wolne miejsce zostaje POD
   nim i domkniecie dwoch kafli konczylo sie w roznych miejscach:
   109 px i 25 px od dolu (memory: lekcja-kaskada-zmierz-ktora-regula-wygrywa). */
.ip-obszar--karta .ip-obszar__tresc{padding:var(--s6);display:flex;flex-direction:column;gap:0;flex:1}
.ip-obszar--karta .ip-obszar__nazwa{margin-bottom:var(--s4)}
/* Kafle w wierszu maja rowna wysokosc, wiec krotsza lista zostawiala pustke
   pod soba, a domkniecia konczyly sie w trzech roznych miejscach.
   Wolne miejsce pochlania LISTA (`margin-bottom:auto`), nie element pod nia:
   dzieki temu uwaga zachowuje swoj odstep nad kreska, ktory `margin-top:auto`
   zwinalby do zera. Liczy sie tylko lista bedaca bezposrednim dzieckiem,
   bo druga siedzi w srodku rozwijanego domkniecia. */
.ip-obszar--karta .ip-obszar__tresc > .ip-obszar__punkty{margin-bottom:auto}
/* ...ale gdy pod lista stoi rozwijacz, to ON nalezy do listy i ma byc tuz
   pod nia. Inaczej w karcie „Komunikacja" zialo miedzy nimi 270 px.
   Wolne miejsce przechodzi wtedy PO rozwijaczu, nad domknieciem. */
.ip-obszar--karta .ip-obszar__tresc > .ip-obszar__punkty:has(+ .ip-obszar__wiecej){
  margin-bottom:var(--s4)
}
.ip-obszar--karta .ip-obszar__tresc > .ip-obszar__wiecej{margin-bottom:auto}

/* ------------------------------------------------------------------- PAS */
/* Zdjęcie wychodzi poza kontener, do krawędzi okna. Materiał 2604 px
   pokazany w polu 400 px to materiał zmarnowany. */
.ip-pas{position:relative;isolation:isolate;background:var(--ip-zielen)}
.ip-pas__foto{width:100%;aspect-ratio:1600/655;max-height:520px;min-height:300px;object-fit:cover;display:block}

/* ------------------------------------------- ZDJECIA Z WARSZTATOW
   Mozaika, nie siatka rownych kwadratow: pierwsze zdjecie bierze dwie
   kolumny i dwa rzedy, pozostale staja w trzeciej.

   ⚠️ Proporcje policzone PRZED wdrozeniem, zeby nie docinac cudzych
   zdjec. Przy kontenerze 1408 px i odstepie 16 px:
     male pole  458,7 x 305,8 = 1,500  (pliki 1,498 i 1,433)
     duze pole  933,3 x 627,6 = 1,487  (plik 1,498, roznica 0,7%)
   Sprawdzane po wdrozeniu przez `kadry.py`. */
.ip-galeria{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s4);margin:var(--s8) 0 0;padding:0;list-style:none
}
/* Tlo kafla jest CIEMNE, bo bialy podpis zaklada ciemne zdjecie pod soba.
   Zdjecia laduja sie leniwie, a do tego czasu podpis stal na szalwii sekcji:
   1,56:1 (bramka `stany.py`, 23.09). Po wczytaniu zdjecie kryje kafel caly. */
.ip-galeria li{margin:0;aspect-ratio:3/2;overflow:hidden;
  border-radius:0 var(--r-znak) 0 0;background:var(--ip-zielen)}
/* Pierwsze zdjecie: dwie kolumny i dwa rzedy. `aspect-ratio:auto`,
   bo ksztalt wynika wtedy z siatki, a nie z wlasnej proporcji. */
.ip-galeria li:first-child{grid-column:span 2;grid-row:span 2;
  aspect-ratio:auto}
/* `figure` wypelnia kafel, zeby zdjecie zachowalo wyliczona proporcje,
   a podpis lezal NA nim, nie pod spodem: gdyby doszedl pod zdjecie,
   rzad przestalby sie domykac i kolumny rozjechalyby sie o wysokosc
   podpisu. */
.ip-galeria figure{position:relative;margin:0;width:100%;height:100%}
.ip-galeria img{width:100%;height:100%;object-fit:cover;display:block}
/* Podpis na przyciemnieniu od dolu. Biel na tym gradiencie ma 8,1:1
   w najjasniejszym miejscu, wiec z zapasem ponad prog 4,5:1. */
.ip-galeria__podpis{
  position:absolute;inset:auto 0 0 0;
  padding:var(--s8) var(--s4) var(--s3);
  background:linear-gradient(180deg,rgba(1,40,28,0),rgba(1,40,28,.82));
  color:var(--ip-na-ciemnym);font-size:var(--fs-maly);line-height:1.35
}
@media (max-width:899px){
  .ip-galeria__podpis{font-size:.875rem;padding:var(--s8) var(--s4) var(--s3)}
}
/* Zmierzone: przy 700 px male kadry mialy 190x127 px, czyli nic nie
   bylo na nich widac. Ponizej 900 px idzie wiec jedna kolumna, a kazde
   zdjecie dostaje pelna szerokosc w swojej proporcji. */
@media (max-width:899px){
  .ip-galeria{grid-template-columns:1fr}
  .ip-galeria li:first-child{grid-column:auto;grid-row:auto;
    aspect-ratio:3/2}
}
.ip-pas__tresc{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  /* Plytka ma obejmowac tekst, a nie cala szerokosc kolumny, zeby zdjecie
     zostalo widoczne. */
  justify-content:flex-start;
  padding-block:clamp(1.5rem,4vw,3rem);
  background:linear-gradient(180deg,rgba(1,40,28,0) 30%,rgba(1,40,28,.82) 100%);
}
/* Napis lezy na zdjeciu, wiec jego kontrast zalezy od tego, co akurat jest
   pod litera. Zmierzone z pikseli: mediana tla dawala 11,17:1, ale
   najjasniejsze 5 procent tylko 2,17:1 przy progu 4,50. Gradient tego nie
   ratuje, bo zywoplot w sloncu jest za jasny. Zdanie dostaje wiec wlasna
   plytke: 10,4:1 niezaleznie od zdjecia pod spodem. */
.ip-pas__zdanie{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:clamp(1.1rem,.85rem + 1.15vw,1.75rem);font-weight:700;
  line-height:var(--lh-ciasna);letter-spacing:-.01em;color:#fff;margin:0;
  background:rgba(2,71,52,.94);
  padding:var(--s4) var(--s6);
  border-left:3px solid var(--ip-na-ciemnym-akcent);
  border-radius:0 var(--r) 0 0;
  box-shadow:var(--cien-na-zdjeciu)
}

/* ----------------------------------------------------------- JAK PRACUJĘ */
.ip-jak__glowa{display:grid;gap:var(--s6);align-items:center;margin-bottom:var(--s12)}
.ip-jak__dlon{width:clamp(120px,16vw,200px);height:auto;justify-self:start;opacity:.95}
@media (min-width:860px){
  .ip-jak__glowa{grid-template-columns:minmax(0,1fr) auto}
  .ip-jak__dlon{justify-self:end}
}

.ip-os{display:grid;gap:var(--s6);counter-reset:krok}
.ip-os__krok{position:relative;padding-top:var(--s6);border-top:2px solid var(--ip-zielen)}
.ip-os__nr{
  display:block;margin-bottom:var(--s3);
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:.8125rem;font-weight:800;letter-spacing:.14em;color:var(--ip-akcent)
}
.ip-os__tytul{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.ip-os__opis{font-size:var(--fs-maly);line-height:var(--lh-srednia);color:var(--ip-atrament-slaby);margin:0}
@media (min-width:760px){.ip-os{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s8)}}

.ip-formy{margin-top:var(--s12);padding-top:var(--s8);border-top:1px solid var(--ip-obrys)}
.ip-formy__tytul{font-size:var(--fs-nad);text-transform:uppercase;letter-spacing:.16em;color:var(--ip-akcent);margin-bottom:var(--s6)}
/* Prog 220 px, nie 240: lista ma 1216 px, a piec pozycji przy progu 240
   potrzebuje 1264 px, wiec „Kursy online" spadaly do drugiego wiersza. */
.ip-formy__lista{display:grid;gap:var(--s6) var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ip-formy__lista li{display:flex;flex-direction:column;gap:2px}
.ip-formy__lista strong{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:1rem;color:var(--ip-zielen);letter-spacing:-.01em
}
.ip-formy__lista span{font-size:var(--fs-maly);color:var(--ip-atrament-slaby);line-height:var(--lh-srednia)}

/* ---------------------------------------------------------------- OFERTA */
.ip-oferta__siatka{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.ip-karta{
  display:flex;flex-direction:column;height:100%;
  background:var(--ip-biel);
  border:1px solid var(--ip-obrys);
  border-radius:0 var(--r-znak) 0 0;overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.ip-karta:hover{border-color:var(--ip-zielen);box-shadow:var(--cien-mocny);transform:translateY(-3px)}
.ip-karta--wyrozniona{border-color:var(--ip-zielen);border-width:2px;box-shadow:var(--cien)}
.ip-karta--wkrotce{background:var(--ip-szalwia-mglista)}
.ip-karta__kadr{aspect-ratio:760/520;border-radius:0}
.ip-karta__tresc{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);flex:1}
.ip-karta__glowa{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.ip-karta__nazwa{font-size:var(--fs-h3);margin:0}
.ip-karta__opis{font-size:var(--fs-maly);line-height:var(--lh-srednia);color:var(--ip-atrament-slaby);margin:0}
.ip-karta__uwaga{font-size:.875rem;color:var(--ip-akcent);font-weight:600;margin:0}
.ip-karta .ip-btn{margin-top:auto;align-self:flex-start}

.ip-cennik{display:grid;gap:var(--s2);margin:0}
.ip-cennik__wiersz{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s2);border-bottom:1px dashed var(--ip-obrys-slaby)
}
.ip-cennik__wiersz:last-child{border-bottom:0}
.ip-cennik__pozycja{flex:1 1 auto;min-width:0;padding-right:var(--s3);font-size:var(--fs-maly);line-height:var(--lh-srednia)}
.ip-cennik__cena{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}
.ip-cennik__cena strong{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:1.0625rem;font-weight:800;color:var(--ip-zielen);white-space:nowrap
}
.ip-cennik__cena small{font-size:.75rem;color:var(--ip-atrament-slaby);white-space:nowrap}

/* ---------------------------------------------------------------- O MNIE */
/* Drugie zdjecie z sesji stoi pod portretem i domyka wysokosc kolumny:
   bez niego pod portretem zostawalo 481 px pustki przy 1440 i 522 przy 1280. */
.ip-omnie__foto2{aspect-ratio:1/1;margin-top:var(--s6)}
.ip-omnie__foto2 img{width:100%;height:100%;object-fit:cover;display:block}
.ip-omnie__siatka{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ip-omnie__podpis{
  margin-top:var(--s4);font-size:var(--fs-maly);color:var(--ip-atrament-slaby);
  font-style:italic
}
.ip-kwalifikacje{display:grid;gap:var(--s4);margin:var(--s8) 0}
.ip-kwalifikacje li{padding-left:var(--s6);border-left:2px solid var(--ip-zielen-jasna);display:flex;flex-direction:column;gap:2px}
.ip-kwalifikacje strong{font-family:'Archivo','Archivo zapasowy',sans-serif;font-size:1rem;color:var(--ip-zielen)}
.ip-kwalifikacje span{font-size:var(--fs-maly);color:var(--ip-atrament-slaby);line-height:var(--lh-srednia)}
@media (min-width:860px){
  .ip-omnie__siatka{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
  .ip-kwalifikacje{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s8)}
}

/* ------------------------------------------------------------ REFERENCJE */
/* Siedem listow w siatce po cztery zostawialo w ostatnim wierszu pustke
   szerokosci calego kafla. Siatka nie umie domknac niepelnego wiersza,
   flex z wysrodkowaniem umie: pelne wiersze wygladaja identycznie jak
   w siatce, a trzy ostatnie skany staja na srodku. */
/* `flex-start`, nie `center`: przy siedmiu listach w czterech kolumnach
   drugi wiersz (trzy listy) byl wysrodkowany i nie trzymal sie osi
   pierwszego. Nasza lista kontrolna: nic nie jest wycentrowane przypadkowo. */
.ip-referencje__lista{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--s6)}
.ip-referencje__pozycja{flex:0 1 calc((100% - var(--s6)) / 2)}
/* Siedem skanow: przy piatce w wierszu zostawala dziura na dwa pola.
   Cztery kolumny daja 4+3 i kazdy skan jest o polowe wiekszy. */
@media (min-width:760px){.ip-referencje__pozycja{flex:0 1 calc((100% - 3 * var(--s6)) / 4)}}
.ip-referencje__pozycja .ip-ramka{
  /* Kafel referencji jest ODNOSNIKIEM, wiec prog wynosi 3:1.
     `--ip-obrys-slaby` #D7E0D9 dawal na sekcji kosciowej 1,15:1;
     zielen marki daje 6,90:1 na kosci i 10,75:1 na bieli. */
  display:block;aspect-ratio:700/963;background:#fff;
  border:1px solid var(--ip-zielen);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)
}
.ip-referencje__pozycja .ip-ramka:hover{border-color:var(--ip-zielen-jasna);box-shadow:var(--cien-mocny);transform:translateY(-3px)}
/* Dokumentu sie nie kadruje. `cover` ucinal podpis polecajacego
   na skanie o innej proporcji (1323x1920 zamiast 1396x1920). */
.ip-referencje__pozycja .ip-ramka>img{object-fit:contain;object-position:center}

/* ---------------------------------------------------------- CENNIK SESJI */
/* Cztery ceny jako kafle, nie jako lista wierszy. Kupujacy widzi
   cztery mozliwosci naraz. Wspolna karta zostawiala tu okolo 430 px
   pustki, bo byla projektowana do stania w trojce. */
.ip-cennik-sesji__siatka{
  display:grid;gap:var(--s4);margin:var(--s10) 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))
}
/* Kafel na KOSCI, bez obramowania. Bialy kafel na bialej sekcji
   musialby odcinac sie obramowaniem, a to dawalo 1,42:1 przy progu
   2:1 dla elementow informacyjnych (`niewidoczne.py`). Kosc odcina
   sie od bieli sama: 1,56:1. */
.ip-cennik-sesji__kafel{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s6);background:var(--ip-szalwia);
  border-radius:0 var(--r-znak) 0 0
}
.ip-cennik-sesji__pozycja{
  margin:0;font-size:var(--fs-maly);line-height:var(--lh-srednia);
  color:var(--ip-atrament-slaby)
}
.ip-cennik-sesji__cena{
  margin:auto 0 0;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);font-weight:800;
  line-height:1.05;letter-spacing:-.02em;color:var(--ip-zielen);
  font-variant-numeric:tabular-nums
}
.ip-cennik-sesji__brutto{
  margin:0;font-size:.8125rem;line-height:var(--lh-srednia);
  color:var(--ip-atrament-slaby)
}
.ip-cennik-sesji__stopka{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s8);
  margin-top:var(--s8)
}
.ip-cennik-sesji__uwaga{
  margin:0;flex:1 1 18rem;padding-left:var(--s4);
  border-left:3px solid var(--ip-zielen);
  font-weight:600;color:var(--ip-zielen)
}

/* --------------------------------------------------------------- KONTAKT */
/* Jej zdanie z usunietego pasa z mrowkami. Pas mial 520 px na pieciu
   stronach; cytat ma okolo 80 px i niesie te sama tresc. */
/* Przez OBIE kolumny naglowka. W lewej (672 px) lamal sie na dwie
   linie, majac 544 px pustki obok, a `czytelnosc.py` mowi wprost:
   postaw cos obok albo daj pelna szerokosc, nie zwezaj kolumny. */
.ip-kontakt__zdanie{
  grid-column:1 / -1;
  margin:var(--s6) 0 0;padding-left:var(--s4);
  border-left:3px solid var(--ip-zielen);
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-ciasna);
  color:var(--ip-zielen)
}
.ip-kontakt__zdanie + .ip-sekcja__lead{margin-top:var(--s4)}
.ip-kontakt__siatka{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ip-kontakt__tytul{font-size:var(--fs-h3);margin-bottom:var(--s6)}
.ip-kontakt__info{font-size:var(--fs-maly);color:var(--ip-atrament-slaby);margin-bottom:var(--s6)}
/* ⚠️ `height`, nie `min-height`. Widżet Calendly wstawia ramkę z `height:100%`,
   a procent nie ma się do czego odnieść, gdy pojemnik ma tylko dolną granicę:
   ramka schodziła wtedy do swojej wartości domyślnej i miała **150 px
   w polu wysokim na 620**, czyli 470 px bieli pod spodem. Na zrzucie wyglądało
   to jak „kalendarz się nie wczytał", a wczytał się cały.
   Telefon dostaje więcej, bo Calendly układa tam opis i kalendarz jeden pod drugim. */
/* Obramowanie tym samym tokenem co pola formularza obok (3,18:1 na bieli).
   `--ip-obrys-slaby` dawal 1,35:1, czyli kreske, ktorej nie widac, a pole
   kalendarza jest biale na bialej sekcji i bez krawedzi rozplywa sie. */
/* Ramka ma na desktopie polowe kolumny, czyli okolo 580 px, wiec Calendly
   rysuje uklad WASKI: opis NAD kalendarzem, ten sam co na telefonie.
   Przy 760 px siatka dni byla ucieta przy dolnej krawedzi. */
/* `position:relative`, bo zaslonka lezy NA kontenerze do czasu, az
   ramka Calendly sie wczyta. */
/* Pelna wysokosc OD RAZU, bo kalendarz wczytuje sie SAM (decyzja Pawla
   z 22.09.2026). Przy wczytywaniu po kliknieciu pole roslo z 420 na
   1080 px i byl to ruch WYWOLANY przez goscia, wiec CLS go nie liczyl.
   Teraz ten sam skok bylby przesunieciem ukladu, ktore CLS liczy. */
.ip-calendly{position:relative;height:1080px;border:1px solid var(--ip-obrys-pole);border-radius:0 var(--r-znak) 0 0;overflow:hidden}
/* ⛔ Spinner Calendly, czyli trzy skaczace kropki, chowamy: mamy wlasny
   komunikat z ikona. Pawel widzial te kropki na zrzucie i nie wiedzial,
   skad sie biora. */
.ip-calendly .calendly-spinner{display:none}
/* Wyjscie zapasowe pod komunikatem: gdy kalendarz sie nie wczyta,
   zostaje odnosnik do niego u nich. */
.ip-kontakt__zapasowy{
  font-size:var(--fs-maly);color:var(--ip-akcent);
  display:inline-block;min-height:44px;padding-block:.62em
}
@media (max-width:859px){.ip-calendly{height:1020px}}
.ip-calendly__zastepnik{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);
  color:var(--ip-atrament-slaby);background:var(--ip-szalwia-mglista);padding:var(--s6);text-align:center
}
/* Dane kontaktowe wyszly spod kalendarza i stoja paskiem pod OBIEMA kolumnami.
   Po osadzeniu kalendarza kolumna lewa miala 1110 px, a formularz 633, wiec
   po prawej zostawalo 477 px pustki na kazdej szerokosci desktopu. */
.ip-kontakt__pasek{margin-top:var(--s12);padding-top:var(--s8);border-top:1px solid var(--ip-obrys)}
.ip-kontakt__pasek .ip-kontakt__dane{margin-top:0}
@media (min-width:760px){
  .ip-kontakt__pasek .ip-kontakt__dane{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s8)}
}
.ip-kontakt__dane{display:grid;gap:var(--s3);margin-top:var(--s6)}
.ip-kontakt__dane li{display:flex;gap:var(--s3);align-items:center;min-height:44px;min-width:0;font-size:var(--fs-maly);line-height:var(--lh-srednia)}
.ip-kontakt__dane svg{color:var(--ip-akcent);flex:none;margin-top:.2em}
.ip-kontakt__dane a{display:inline-block;min-height:44px;padding-block:.62em;overflow-wrap:anywhere;min-width:0;color:var(--ip-atrament);text-decoration:none;font-weight:600}
.ip-kontakt__dane a:hover{color:var(--ip-akcent);text-decoration:underline}
@media (min-width:960px){.ip-kontakt__siatka{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ------------------------------------------------------------- FORMULARZ */
.ip-form__pola{display:grid;gap:var(--s4);margin-bottom:var(--s4)}
@media (min-width:560px){.ip-form__pola{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ip-form__pole{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s4)}
.ip-form__pole label{font-size:.875rem;font-weight:600;color:var(--ip-zielen)}
.ip-form input[type=text],.ip-form input[type=email],.ip-form input[type=tel],.ip-form textarea{
  width:100%;min-height:48px;padding:var(--s3) var(--s4);
  font-family:inherit;font-size:1rem;color:var(--ip-atrament);
  background:var(--ip-biel);
  border:1px solid var(--ip-obrys-pole);border-radius:0 var(--r-pole) 0 var(--r-pole);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.ip-form textarea{min-height:130px;resize:vertical;line-height:var(--lh-srednia)}
.ip-form input:hover,.ip-form textarea:hover{border-color:var(--ip-zielen)}
.ip-form input:focus,.ip-form textarea:focus{
  outline:0;border-color:var(--ip-zielen);
  box-shadow:0 0 0 3px rgba(2,71,52,.16)
}
.ip-form__zgoda{margin-bottom:var(--s6)}
.ip-form__zgoda label{display:flex;gap:var(--s3);align-items:flex-start;font-size:.875rem;line-height:var(--lh-srednia);color:var(--ip-atrament-slaby);font-weight:400}
.ip-form__zgoda a,.ip-cookies__tekst a{display:inline-block;padding-block:.95em;overflow-wrap:anywhere}
.ip-form__zgoda input{width:26px;height:26px;flex:none;margin-top:1px;accent-color:var(--ip-zielen);cursor:pointer}
.ip-form__zgoda label{cursor:pointer;padding-block:var(--s2)}
.ip-form__pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ip-form__odpowiedz{display:block;margin-top:var(--s4);font-size:var(--fs-maly);font-weight:600}
.ip-form__odpowiedz--ok{color:var(--ip-akcent)}
.ip-form__odpowiedz--blad{color:#9A2418}

/* ------------------------------------------------- NAGŁÓWEK PODSTRONY */
/* Pod pasem tytulowym moze stac sekcja ciemna, ktora ma TEN SAM zielony,
   wiec granicy po prostu nie ma (zmierzone 1,00:1 na podstronie sesji).
   Kreska w zieleni akcentu ma 6,17:1 wobec obu stron, czyli jest widoczna
   z kazdej strony niezaleznie od tego, co pod nia postawimy. */
.ip-naglowek-strony{
  background:var(--ip-zielen);color:#fff;padding-block:clamp(2.5rem,5vw,4rem);
  border-bottom:3px solid var(--ip-na-ciemnym-akcent)
}
.ip-naglowek-strony__tytul{color:#fff;font-size:var(--fs-h1);margin:0}

/* ------------------------------------------------------ W PRZYGOTOWANIU */
.ip-przygotowanie{
  background:var(--ip-zielen);color:#fff;
  min-height:78vh;display:flex;align-items:center;position:relative;overflow:hidden
}
.ip-przygotowanie::after{
  content:"";position:absolute;right:-8%;bottom:-14%;
  width:min(52vw,560px);aspect-ratio:472/530;
  background:url(../img/znak-k.webp) center/contain no-repeat;
  opacity:.16;pointer-events:none
}
.ip-przygotowanie__srodek{position:relative;z-index:1;padding-block:var(--sekcja-duza)}
.ip-przygotowanie__naglowek{color:#fff;font-size:var(--fs-h1);margin-bottom:var(--s6)}
.ip-przygotowanie__lead{font-size:var(--fs-lead);line-height:var(--lh-srednia);color:var(--ip-na-ciemnym-slaby);margin-bottom:var(--s8)}
.ip-przygotowanie__punkty{display:grid;gap:var(--s3);margin-bottom:var(--s10)}
.ip-przygotowanie__punkty li{position:relative;padding-left:var(--s6);color:var(--ip-na-ciemnym)}
.ip-przygotowanie__punkty li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--ip-na-ciemnym-akcent);border-radius:0 var(--r-punkt) 0 0}
.ip-przygotowanie__akcje{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s6)}
.ip-przygotowanie__tel{font-size:var(--fs-maly);color:var(--ip-na-ciemnym-slaby)}
.ip-przygotowanie__tel a{font-weight:600}

/* ---------------------------------------------------------------- STOPKA */
.ip-stopka{background:var(--ip-zielen);color:var(--ip-na-ciemnym);padding-block:var(--sekcja) var(--s8)}
.ip-stopka__siatka{display:grid;gap:var(--s10);margin-bottom:var(--s10)}
.ip-stopka__logo{width:200px;height:auto;margin-bottom:var(--s6)}
.ip-stopka__zdanie{font-size:var(--fs-maly);line-height:var(--lh-srednia);color:var(--ip-na-ciemnym-slaby);margin-bottom:var(--s6)}
.ip-stopka__tytul{
  font-size:var(--fs-nad);text-transform:uppercase;letter-spacing:.16em;
  color:var(--ip-na-ciemnym-akcent);margin-bottom:var(--s4)
}
.ip-stopka__lista{display:grid;gap:var(--s2)}
.ip-stopka__lista li{display:flex;align-items:center}
.ip-stopka__lista li:has(a){min-height:44px}
.ip-stopka__lista li,.ip-stopka__lista a{font-size:var(--fs-maly);line-height:var(--lh-srednia);color:var(--ip-na-ciemnym-slaby)}
.ip-stopka__lista a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color var(--dur) var(--ease)}
.ip-stopka__lista a:hover{color:#fff;text-decoration:underline}
.ip-stopka__sieci{display:flex;gap:var(--s3)}
.ip-stopka__sieci a{
  width:44px;height:44px;display:grid;place-items:center;
  color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:0 var(--r-pole) 0 var(--r-pole);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)
}
.ip-stopka__sieci a:hover{background:#fff;border-color:#fff;color:var(--ip-zielen)}
.ip-stopka__dol{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;
  padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.2)
}
.ip-stopka__dol p{margin:0;font-size:.875rem;color:var(--ip-na-ciemnym-slaby)}
.ip-stopka__dol a{color:var(--ip-na-ciemnym-akcent);text-decoration:none}
.ip-stopka__dol a:hover{color:#fff;text-decoration:underline}
@media (min-width:620px){.ip-stopka__siatka{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.ip-stopka__siatka{grid-template-columns:1.35fr 1fr 1fr 1.1fr}}

/* --------------------------------------------------------------- COOKIES */
/* Element projektu, nie doklejka. Na telefonie zostawia miejsce po prawej
   na słuchawkę, inaczej słuchawka byłaby niedostępna. */
.ip-cookies{
  position:fixed;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:110;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);
  padding:var(--s4) var(--s6);
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border:1px solid var(--ip-obrys-pole);border-radius:0 var(--r) 0 var(--r);
  box-shadow:var(--cien-mocny);
  translate:0 140%;transition:translate 280ms var(--ease);
  max-width:min(980px,calc(100% - 2*var(--s3)));margin-inline:auto
}
.ip-cookies--widoczny{translate:0 0}
.ip-cookies__tekst{margin:0;font-size:.875rem;line-height:var(--lh-srednia);flex:1 1 260px;color:var(--ip-atrament-slaby)}
.ip-cookies__akcje{display:flex;gap:var(--s3);flex-wrap:wrap}
@media (max-width:719px){
  /* Bez rezerwy na sluchawke: dopoki pasek stoi, sluchawki nie ma
     (`body.ip-zgoda-widoczna`). Rezerwa zwezala tekst do 260 px i robila
     z dwoch wierszy piec, a pasek zajmowal wtedy 32 procent okna. */
  .ip-cookies{padding:var(--s4);gap:var(--s3)}
  .ip-cookies__tekst{flex:1 1 100%}
  .ip-cookies__akcje{width:100%}
  .ip-cookies__akcje .ip-btn{flex:1}
}
body.ip-zgoda-widoczna .ip-tel-mobile{opacity:0;translate:0 12px;pointer-events:none}

/* ----------------------------------------------- TELEFON NA TELEFONIE */
.ip-tel-mobile{
  position:fixed;right:var(--s4);bottom:var(--s4);z-index:95;
  width:56px;height:56px;display:none;place-items:center;
  background:var(--ip-zielen);color:#fff;
  border-radius:0 var(--r) 0 var(--r);
  box-shadow:var(--cien-mocny);
  opacity:0;translate:0 12px;
  transition:opacity var(--dur) var(--ease),translate var(--dur) var(--ease),background var(--dur) var(--ease)
}
.ip-tel-mobile:hover{background:#013828;color:#fff}
.ip-tel-mobile--widoczny{opacity:1;translate:0 0}
@media (max-width:1023px){.ip-tel-mobile{display:grid}}

/* ---------------------------------------------------- WEJŚCIA SEKCJI */
/* Animacja jedzie po `translate`, NIGDY po `transform`: `fill-mode: both`
   przypina animowaną właściwość na zawsze i bije regułę `:hover`.
   `translate` i `transform` to osobne właściwości, więc najechanie działa. */
.ip-wejscie{opacity:0;translate:0 14px}
.ip-wejscie.ip-widoczne{animation:ip-wejscie 460ms var(--ease) both}
@keyframes ip-wejscie{
  from{opacity:0;translate:0 14px}
  to{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){
  .ip-wejscie{opacity:1;translate:0 0;animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Grafika drzewa obok nagłówka ciemnej sekcji. Ma własne ciemnozielone tło
   i własną proporcję 1134×1137, więc stoi w swojej proporcji, a nie jest
   ściskana pod kafel. */
.ip-przychodza__glowa{display:grid;gap:var(--s8);align-items:center;margin-bottom:var(--s10)}
.ip-przychodza__glowa .ip-sekcja__glowa{margin-bottom:0}
/* Praca ma wlasny bialy karton i wlasna zielen, ktora nie jest nasza.
   Zamiast udawac, ze go nie ma, dajemy jej OPRAWE: biala passe-partout
   plus cien. Wtedy prostokat jest decyzja, a nie wklejka. */
.ip-przychodza__grafika{
  border-radius:0 var(--r-znak) 0 0;overflow:hidden;justify-self:center;
  width:min(100%,340px);background:#fff;padding:var(--s3);
  box-shadow:var(--cien-na-zdjeciu)
}
.ip-przychodza__grafika img{width:100%;height:auto;aspect-ratio:1134/1137;object-fit:cover;display:block}
@media (min-width:860px){
  .ip-przychodza__glowa{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
  .ip-przychodza__grafika{justify-self:end;width:min(100%,340px)}
}

/* Kwalifikacje pod obiema kolumnami, nie pod samym tekstem. Wcześniej
   lewa kolumna kończyła się na portrecie i pod nim zostawał pusty pas. */
/* W siatce margines DODAJE sie do przerwy miedzy kolumnami: 32 px gap
   plus 48 px marginesu dawalo 80 px, czyli wartosc spoza skali. */
.ip-omnie__kwalifikacje{margin-top:0;padding-top:var(--s10);border-top:1px solid var(--ip-obrys)}
/* Wyroznienia z jej bio, pod kwalifikacjami, bez nowej sekcji.
   Trzy kolumny, bo wiersz skraca KOLUMNA: jednym akapitem wychodzilo
   143 znaki w wierszu przy limicie 95 (`czytelnosc.py`).
   Barwa etykiety `--ip-zielen`, nie `--ip-akcent`: na szalwii akcent ma
   4,12:1 przy progu 4,50, a zielen 6,90:1 (`niewidoczne.py`). */
.ip-omnie__wyroznienia{margin-top:var(--s8)}
.ip-omnie__wyroznienia-tytul{
  margin:0 0 var(--s4);
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-nad);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ip-zielen)
}
.ip-wyroznienia{display:grid;gap:var(--s4) var(--s8);grid-template-columns:minmax(0,1fr)}
.ip-wyroznienia li{
  position:relative;padding-left:var(--s6);
  font-size:var(--fs-maly);line-height:var(--lh-srednia);color:var(--ip-atrament-slaby)
}
.ip-wyroznienia li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;
  background:var(--ip-zielen-jasna);border-radius:0 var(--r-punkt) 0 0
}
@media (min-width:760px){
  .ip-wyroznienia{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Publikacja to jedno dlugie zdanie, a nie trzy krotkie etykiety:
     w jednej trzeciej kolumny lamalo by sie na piec wierszy. */
  .ip-wyroznienia--szeroka{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:860px){.ip-omnie__kwalifikacje{grid-column:1 / -1}}
@media (min-width:860px){.ip-kwalifikacje{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ip-kwalifikacje{margin:0}

/* Co się dzieje po zgłoszeniu. Do czasu podpięcia kalendarza ta kolumna
   byłaby pusta. */
.ip-kontakt__zanim{padding:var(--s6);background:var(--ip-szalwia-mglista);border-radius:0 var(--r-znak) 0 0;margin-bottom:var(--s8)}
.ip-kontakt__zanim .ip-kontakt__info{margin-bottom:var(--s6)}
/* Kroki stoja teraz POD formularzem, wiec odstep idzie nad nie, nie pod nie. */
.ip-kroki-kontakt{display:grid;gap:var(--s4);margin-top:var(--s8);margin-bottom:0}
.ip-kroki-kontakt li{display:flex;gap:var(--s4);align-items:flex-start;font-size:var(--fs-maly);line-height:var(--lh-srednia)}
.ip-kroki-kontakt span{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  background:var(--ip-zielen);color:#fff;border-radius:0 var(--r-etykieta) 0 var(--r-etykieta);
  font-family:'Archivo','Archivo zapasowy',sans-serif;font-size:.875rem;font-weight:800
}

/* Gdy w oknie stoi PRAWDZIWY film, ramka wraca do 16:9 — inaczej odtwarzacz
   dostałby pole o innej proporcji i sam dorobiłby czarne pasy. Plakat może
   wypełnić kolumnę, film nie. */
@media (min-width:1000px){
  .ip-hero__film .ip-ramka--wideo{aspect-ratio:16/9;min-height:0}
}


/* Na zakładkach w przygotowaniu ciemna sekcja styka się z ciemną stopką
   i granicy nie widać wcale. Jasna kreska jest tu jedynym rozwiązaniem:
   dwa ciemne tła nie rozejdą się bez zejścia w czerń. */
body.ip-prezentacja .ip-stopka{border-top:3px solid var(--ip-na-ciemnym-akcent)}

/* Dokument (polityka prywatności): tekst w KOLUMNIE, nie w obramowaniu.
   Szerokość kontenera zostaje ta sama co na całej stronie, a wiersz skraca
   sąsiadująca kolumna z danymi kontaktowymi. */
.ip-dokument{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s12)}
.ip-dokument__bok{
  padding:var(--s6);background:var(--ip-szalwia-mglista);
  border-radius:0 var(--r-znak) 0 0;align-self:start
}
.ip-dokument__bok .ip-formy__tytul{color:var(--ip-akcent)}
@media (min-width:1000px){
  .ip-dokument{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--s16)}
  .ip-dokument__bok{position:sticky;top:120px}
}

/* Odnośniki na ciemnym pełnym ekranie. Dziedziczyły barwę akcentu z bieli
   (1,67:1), a po najechaniu robiły się ciemnozielone na ciemnozielonym,
   czyli 1,00:1 — znikały (memory: lekcja-stan-hover-nikt-nie-mierzyl). */
.ip-przygotowanie a:not(.ip-btn){color:var(--ip-na-ciemnym-akcent)}
.ip-przygotowanie a:not(.ip-btn):hover{color:#fff}

/* Pola dotyku poniżej 44 px. Mierzone na telefonie, nie oszacowane. */
.ip-naglowek__logo{display:flex;align-items:center;min-height:48px;transition:opacity var(--dur) var(--ease)}
.ip-naglowek__logo:hover{opacity:.78}
.ip-stopka__dol a{display:inline-flex;align-items:center;min-height:44px}
.ip-przygotowanie__tel a{display:inline-flex;align-items:center;min-height:44px}
/* W prozie odnośnik siedzi w środku zdania, więc nie robimy z niego bloku.
   Dopełnienie pionowe powiększa obszar trafienia, a nie rusza łamania. */
.ip-proza a{padding-block:.72em}
.ip-proza,.ip-proza li,.ip-proza a{overflow-wrap:anywhere;min-width:0}

/* ----------------------------------------------- JUSTOWANIE TEKSTU
   Klientka, 21.09: „Mam prosbe o wyjustowanie tekstu w kazdej sekcji,
   wielu moich klientow, to osoby precyzyjne”.

   ⛔ Justujemy TYLKO kolumny szerokie. Powod jest zmierzony, nie
   estetyczny: `hyphens:auto` w Chrome na Windows NIE DZIELI wyrazow
   (Chrome bierze slowniki z systemu, a tam ich nie ma), wiec w waskiej
   kolumnie justowanie rozpycha spacje. W kaflu obszarow wychodzilo
   2,8 slowa w wierszu i odstep 90 px, czyli 20 razy wiecej niz spacja.

   Prog 550 px wziety z OGLEDZIN, nie z samej liczby: przy 584 px
   (sekcja Akademii) justowanie czyta sie dobrze, przy 480 px (lead
   w kolumnie) juz widac dziury, a przy 339 px (wstep w kaflu obszaru)
   wiersz ma 2,8 slowa i odstep 90 px.

   Wykluczone zostaja wiec: lead sekcji (480 px), wstep i uwaga
   w kaflu obszaru (339 px), opis osi (280 px), zdanie w stopce
   (271 px), obietnica (363 px), tresc projektu (251 px) i pasek
   ciasteczek, ktory proza nie jest.

   `hyphens:auto` zostaje, bo w przegladarkach ze slownikami
   (Firefox, Safari) dziala i tam wiersz jest jeszcze rowniejszy.
   W Chrome na Windows nie dziala wcale, co zmierzylem. */
.ip-proza p,
.ip-kontakt__zdanie,
.ip-przygotowanie__lead,
.ip-akademia__akapit,
.ip-zakonczenie__akapit,
.ip-pas__tresc,
.ip-pas__zdanie{
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto;
  /* Nie zostawiaj na koncu wiersza mniej niz trzy litery ani nie przenos
     mniej niz cztery. */
  -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:7 3 4;
}
/* Ponizej 900 px te kolumny schodza do 660 px i nizej, a tam wiersz ma
   juz tylko 8-9 slow i odstep robi sie 5,8 raza wiekszy od spacji.
   Zmierzone, nie oszacowane: prog 760 px zostawial 15 takich pol. */
@media (max-width:899px){
  .ip-proza p,.ip-kontakt__zdanie,
  .ip-przygotowanie__lead,
  .ip-akademia__akapit,.ip-zakonczenie__akapit,
  .ip-pas__tresc,.ip-pas__zdanie{text-align:left}
}

/* WIZYTÓWKA na pierwszym ekranie: zdjęcie, nazwisko, rola, miasto.
   Bez tego strona osoby nie mówi, kto to jest. */
.ip-wizytowka{
  display:flex;align-items:flex-start;gap:var(--s4);
  margin-top:var(--s8);padding-left:var(--s6);
  border-left:3px solid var(--ip-zielen-jasna);
}
@media (min-width:560px){
  .ip-wizytowka{align-items:center;gap:var(--s6)}
}
/* Klientka, 21.09: „1/4 zdjecia nad glowa to tlo (...) jakbym wygladala
   przez plot”. Zmierzone w pliku, ktory tam stal: 23,2% wysokosci nad
   glowa, czyli dokladnie jej cwiartka. Nowy kadr ma 11,5%, a kolo
   rosnie z 84 na 108 px, bo prosila tez o „odrobine wieksze”. */
.ip-wizytowka__foto{
  flex:none;width:clamp(84px,7vw,108px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  background:var(--ip-szalwia);display:block
}
/* Plik jest juz kwadratowym kadrem popiersia, wiec `object-position`
   nie ma czego poprawiac. Zostaje srodek. */
.ip-wizytowka__foto img,.ip-wizytowka__img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ip-wizytowka__opis{display:flex;flex-direction:column;gap:2px}
.ip-wizytowka__opis strong{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:1.125rem;color:var(--ip-zielen);letter-spacing:-.01em;line-height:1.3
}
.ip-wizytowka__opis span{font-size:.9375rem;line-height:var(--lh-srednia);color:var(--ip-atrament-slaby)}
@media (min-width:560px){.ip-wizytowka__opis span{font-size:1rem}}

/* Etykieta na plakacie: okno ma się czytać jako miejsce na film,
   a nie jako ozdobne zdjęcie. */
.ip-film__etykieta{
  position:absolute;inset:auto 0 0 0;
  padding:var(--s8) var(--s6) var(--s4);
  background:linear-gradient(180deg,rgba(1,40,28,0),rgba(1,40,28,.78));
  color:#fff;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase
}

/* Karty oferty nie rozciągają się na równą wysokość: „Kursy online” mają
   trzy linijki i pod nimi zostawało 380 px pustego pola. */
.ip-oferta__siatka{align-items:start}
/* ...ale wyrównanie do góry zostawiało 300 px pustki POD dwiema krótkimi
   kartami, bo karta z cennikiem ma 560 px, a pozostałe po 250. Przyczyna
   nie leży w wyrównaniu, tylko w trzech równych kolumnach dla trzech
   bardzo różnych rzeczy. Wyróżniona bierze całą lewą kolumnę, dwie
   pozostałe stoją słupkiem obok: 560 wobec 260 + 24 + 215. */
@media (min-width:1000px){
  .ip-oferta__siatka:not(.ip-oferta__siatka--solo):has(.ip-karta--wyrozniona){
    grid-template-columns:1.15fr 1fr
  }
  .ip-oferta__siatka:not(.ip-oferta__siatka--solo)>.ip-karta--wyrozniona{
    grid-row:span 2
  }
}
.ip-karta{height:auto}
@media (min-width:1000px){
  .ip-oferta__siatka:not(.ip-oferta__siatka--solo):not(:has(.ip-karta--wyrozniona)){grid-template-columns:1.22fr 1fr 1fr}
}

/* Glowa sekcji oferty: bez nadtytulu, naglowek wiekszy, lead wprost pod nim.
   Inny ksztalt niz w sekcji obszarow, zeby sceny nie powtarzaly sie rytmem. */
.ip-oferta .ip-sekcja__naglowek{font-size:clamp(1.75rem,1.35rem + 1.6vw,2.5rem)}
.ip-oferta .ip-sekcja__glowa{margin-bottom:var(--s10)}

/* Glowa referencji: naglowek i podpis w jednym wierszu. */
@media (min-width:760px){
  .ip-referencje .ip-sekcja__glowa{display:flex;align-items:baseline;gap:var(--s6);flex-wrap:wrap}
  .ip-referencje .ip-sekcja__glowa .ip-nadtytul{margin:0;order:2}
  .ip-referencje .ip-sekcja__naglowek{margin:0;order:1}
}

/* Pierwszy cytat klientki jest najmocniejszym zdaniem na stronie. Osiem
   jednakowych kafelkow zamienialo go w jeden z osmiu. Dostaje wiecej
   miejsca i wiekszy stopien pisma. */
@media (min-width:860px){
  .ip-cytaty:not(.ip-cytaty--gesta)>.ip-cytat:first-child{grid-column:span 2}
  /* Pierwszy kafel zajmuje dwie kolumny, wiec n zdan zajmuje n+1 komorek.
     Gdy (n+1) dzieli sie przez 3 z reszta 2, ostatni rzad zostaje z pusta
     komorka: przy siedmiu zdaniach na zakladce sesji bylo to 390 px pustki,
     przy czterech na glownej tyle samo. Warunek n = 3k+1 opisuje dokladnie
     te przypadki, wiec ostatni kafel domyka rzad. */
  .ip-cytaty:not(.ip-cytaty--gesta)>.ip-cytat:last-child:nth-child(3n+1){grid-column:span 2}
  .ip-cytaty:not(.ip-cytaty--gesta)>.ip-cytat:first-child p{font-size:1.3125rem;line-height:1.45}
}

/* ------------------------------------------------------------- CO ROBIĘ */
/* Trzynaście krótkich zdań w pierwszej osobie. Siatka, nie jedna długa
   kolumna: przy jednej kolumnie wiersz miałby ponad 100 znaków. */
.ip-co-robie__glowa{margin-bottom:var(--s10)}
/* Kolumny tekstowe, nie siatka. Siatka wyrownuje wiersze, wiec pozycja
   dwuwierszowa w jednej kolumnie robila dziure w pozostalych, a ostatni
   wiersz zostawal z jednym elementem i pustka obok. */
.ip-lista-obietnic{columns:1;column-gap:var(--s16)}
.ip-obietnica{
  position:relative;padding-left:var(--s8);margin-bottom:var(--s6);
  font-size:1.0625rem;line-height:var(--lh-srednia);
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.ip-obietnica:last-child{margin-bottom:0}
.ip-obietnica::before{
  content:"";position:absolute;left:0;top:.55em;
  width:14px;height:2px;background:var(--ip-zielen-jasna)
}
@media (min-width:700px){.ip-lista-obietnic{columns:2}}
@media (min-width:1100px){.ip-lista-obietnic{columns:3}}

/* --------------------------------------------------------- PODSUMOWANIE */
.ip-podsumowanie__siatka{display:grid;gap:var(--s12)}
/* Przez OBIE kolumny: proza po lewej i lista po prawej maja ruszac
   z tej samej linii (Pawel, 22.09). */
.ip-podsumowanie__naglowek{
  grid-column:1 / -1;
  color:#fff;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.125rem);margin:0
}
.ip-jak__efekty{display:grid;gap:var(--s6);counter-reset:efekt}
.ip-efekt{
  position:relative;padding-left:var(--s12);counter-increment:efekt;
  font-size:1.0625rem;line-height:var(--lh-srednia);color:var(--ip-na-ciemnym)
}
.ip-efekt::before{
  content:counter(efekt,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:.8125rem;font-weight:800;letter-spacing:.12em;
  color:var(--ip-na-ciemnym-akcent)
}
.ip-znak-wodny--lewo{right:auto;left:-6%;bottom:-14%}
@media (min-width:900px){
  .ip-podsumowanie__siatka{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}


/* ------------------------------------------------------------- SMACZKI */

/* Zaznaczenie tekstu w barwach marki, nie w systemowym blekicie. */
::selection{background:var(--ip-zielen);color:#fff}

/* Kotwica wskazana z innej strony (na przyklad /#kontakt) laduje pod
   przyklejonym naglowkiem. `scroll-margin-top` odsuwa cel o jego wysokosc.
   Skrypt robi to samo przy klikniecu w obrebie strony, ale wejscie
   z zewnatrz skryptu nie dotyka. */
[id]{scroll-margin-top:104px}
@media (max-width:1023px){[id]{scroll-margin-top:88px}}

/* Sluchawka na telefonie chowa sie, gdy widac sekcje kontaktu albo stopke:
   tam telefon i tak stoi w tresci, a przycisk zaslanial konce zdan. */
.ip-tel-mobile--schowany{opacity:0;translate:0 12px;pointer-events:none}

/* Obrazy pojawiaja sie lagodnie, gdy juz sie wczytaja. Bez tego kafel
   migal bielą w chwili podmiany.

   ⚠️ NIE dotyczy portretu. To wycinanka z przezroczystym tlem, a ta reguła
   malowała pod nią bladą płachtę 360x511 px o kontrascie 1,2:1 wobec
   szałwii sekcji, czyli dokładnie „szare tło bez sensu"
   (memory: lekcja-poprawka-bramki-psuje-obok). Zaslonka ma sens tam, gdzie
   obraz i tak zakryje całe pole.

   ⚠️ NIE dotyczy tez skanu dokumentu. Odkad list polecający nie jest
   kadrowany (`contain`), obraz NIE zakrywa całego pola i zasłonka
   wychodziła bonem w pasach 27 px u góry i u dołu. Zmierzone:
   `getComputedStyle(img).backgroundColor` = rgb(228,235,230) przy
   ramce o wyliczonej bieli. */
.ip-ramka:not(.ip-ramka--portret):not(.ip-ramka--dokument)>img{background:var(--ip-szalwia-mglista)}

/* Podkreslenie odnosnikow w prozie rysowane pod linia pisma, nie przez
   ogonki polskich liter. */
.ip-proza a,.ip-stopka__lista a:hover,.ip-kontakt__dane a:hover{
  text-decoration-skip-ink:auto;text-underline-offset:.2em
}

/* Na ekranach o duzej gestosci pikseli cienka kreska nadtytulu potrafi
   zniknac przy skalowaniu. Polowa piksela logicznego to u nich pelny. */
@media (min-resolution:2dppx){
  .ip-nadtytul::before{height:1.5px}
}

/* Znak „k" z liści, z pszczołą i motylem. To jej własna grafika, trzymana
   na stronie od lat, a nie ikona z zestawu. Domyka stronę w ciemnej sekcji. */
.ip-znak-lisc{
  position:absolute;right:-4%;bottom:-18%;
  width:min(34vw,420px);aspect-ratio:472/530;
  background:url(../img/znak-k.webp) center/contain no-repeat;
  opacity:.14;pointer-events:none
}
@media (max-width:899px){
  .ip-znak-lisc{right:-12%;bottom:-10%;width:min(52vw,300px);opacity:.1}
}

/* Zdanie o płatności pod kartami oferty. */
.ip-oferta__platnosci{
  display:flex;align-items:center;gap:var(--s3);
  margin-top:var(--s8);padding-top:var(--s6);
  border-top:1px solid var(--ip-obrys-slaby);
  font-size:var(--fs-maly);color:var(--ip-atrament-slaby)
}
.ip-oferta__platnosci svg{color:var(--ip-akcent);flex:none}

/* ══════════════════════════════════════════ PODSTRONA „O MNIE" ══════════ */

/* Naglowek strony ma tlo `--ip-zielen`, wiec lead MUSI brac barwe dla
   ciemnego tla. Z `--ip-atrament-slaby` wychodzilo 1,37:1. */
.ip-naglowek-strony__lead{
  margin:var(--s4) 0 0;
  font-size:var(--fs-lead);line-height:var(--lh-srednia);color:var(--ip-na-ciemnym-slaby)
}
/* Zdanie pod tytulem mialo 107 znakow w wierszu przy 1440 px (prog 95).
   Wiersz skraca KOLUMNA, nie obramowanie akapitu: tytul z lewej,
   zdanie z prawej, obie polowy tej samej szerokosci. */
@media (min-width:900px){
  .ip-naglowek-strony--dwie .ip-kontener{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    /* Do GORY, nie do dolu: przy piecioliniowym zdaniu tytul spadal na dol
       kolumny i trzy zakladki mialy tytul na trzech roznych wysokosciach. */
    gap:var(--s4) var(--s12);align-items:start
  }
  .ip-naglowek-strony__lead{margin-top:0}
}

.ip-kompetencje{display:grid;gap:var(--s4);margin-top:var(--s6)}
.ip-kompetencje li{
  position:relative;padding-left:var(--s8);
  font-size:var(--fs-body);line-height:var(--lh-srednia);color:var(--ip-atrament-slaby)
}
.ip-kompetencje li::before{
  content:"";position:absolute;left:0;top:.62em;width:var(--s4);height:2px;
  background:var(--ip-zielen-jasna)
}

/* Godziny: nazwa i liczba to dwie rozne rzeczy, wiec stoja w dwoch kolumnach
   rozdzielonych kreska, a nie w jednym zdaniu. */
.ip-godziny{display:grid;gap:0;margin-top:var(--s8);border-top:1px solid var(--ip-obrys)}
.ip-godziny li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s6);
  padding:var(--s4) 0;border-bottom:1px solid var(--ip-obrys)
}
.ip-godziny__nazwa{font-size:var(--fs-maly);line-height:var(--lh-srednia)}
.ip-godziny__ile{
  flex:none;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-h3);font-weight:700;color:var(--ip-zielen);
  font-variant-numeric:tabular-nums
}
/* Wiersz bez podanej liczby godzin: jej material tez jej nie ma, wiec
   zostaje, ale przestaje celowac w pusta krawedz po prawej. */
.ip-godziny__li--bez{justify-content:flex-start}
.ip-godziny__li--bez .ip-godziny__nazwa{color:var(--ip-atrament-slaby)}
@media (min-width:960px){
  .ip-godziny{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s12)}
}

/* Stopka sekcji Akademii: jej rola w projekcie plus wyjscie do formularza.
   Bez tego byla to jedyna sekcja na stronie bez zadnego dzialania. */
.ip-akademia__stopka{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s8);
  margin-top:var(--s10);padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.22)
}
.ip-akademia__rola{
  margin:0;flex:1 1 20rem;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-ciasna);
  color:var(--ip-na-ciemnym)
}

.ip-projekty{display:grid;gap:var(--s4);margin-top:var(--s8);counter-reset:none}
.ip-projekty li{display:flex;gap:var(--s4);align-items:baseline}
.ip-projekty__nr{
  flex:none;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  /* `--ip-zielen-jasna` na bieli to 3,87:1, a numer jest tekstem. */
  font-size:var(--fs-nad);font-weight:700;letter-spacing:.08em;color:var(--ip-zielen)
}
.ip-projekty__tresc{font-size:var(--fs-maly);line-height:var(--lh-srednia)}

/* -------------------------------- CO MNIE WYROZNIA (lista od klientki)
   Na tej podstronie stoja juz cztery listy w ukladzie „punkt i zdanie".
   Ta jest kartami, zeby nie byla piata taka sama: cyfra NAD zdaniem,
   duza i przygaszona, karty po dwie w rzedzie. */
.ip-wyroznia{
  display:grid;gap:var(--s4);margin:var(--s8) 0 0;padding:0;list-style:none
}
/* ⛔ Karta NIE MA tla. Tlo tej sekcji wynika z KOLEJNOSCI blokow, wiec
   biala karta trafilaby raz na kosc (1,56:1), a raz na biel (1,00:1),
   czyli znikalaby bez sladu. Rozdziela sama kreska u gory, ktora dziala
   na obu (memory: lekcja-regula-koloru-zaklada-tlo-ktorego-nie-ustawia). */
.ip-wyroznia li{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s6) 0 0;
  border-top:3px solid var(--ip-zielen-jasna)
}
.ip-wyroznia__nr{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:1.5rem;font-weight:700;line-height:1;
  /* 24 px pogrubione to duzy tekst wg WCAG, wiec prog wynosi 3:1.
     `--ip-zielen-jasna` na bieli daje 3,87:1. */
  color:var(--ip-zielen-jasna)
}
.ip-wyroznia__tresc{
  font-size:var(--fs-body);line-height:var(--lh-srednia);
  color:var(--ip-atrament)
}
@media (min-width:860px){
  .ip-wyroznia{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8)}
}
@media (min-width:960px){
  .ip-projekty{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s12)}
}

/* Opisy kwalifikacji maja do 439 znakow, wiec dwie kolumny sa tu warunkiem
   czytelnosci, a nie ozdoba. */
.ip-merytoryka{display:grid;gap:var(--s8);margin-top:var(--s8)}
.ip-merytoryka li{
  padding-left:var(--s6);border-left:2px solid var(--ip-zielen-jasna)
}
.ip-merytoryka__nazwa{
  margin:0;font-size:var(--fs-h3);line-height:var(--lh-ciasna);color:var(--ip-zielen)
}
.ip-merytoryka__instytucja{
  margin:var(--s1) 0 0;font-size:var(--fs-nad);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ip-atrament-slaby);
  font-family:'Archivo','Archivo zapasowy',sans-serif;font-weight:700
}
.ip-merytoryka__opis{
  margin:var(--s3) 0 0;font-size:var(--fs-maly);line-height:var(--lh-srednia);
  color:var(--ip-atrament-slaby)
}
@media (min-width:860px){
  .ip-merytoryka{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s12)}
}

.ip-omnie-pod__dodatki{
  display:grid;gap:var(--s10);margin-top:var(--s12);
  padding-top:var(--s8);border-top:1px solid var(--ip-obrys)
}
@media (min-width:860px){
  .ip-omnie-pod__dodatki{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Domkniecie podstrony „O mnie": jej zaproszenie i podziekowanie.
   Ciemne tlo, bo nad nim stoi kosc, a pod nim biel sekcji kontaktu:
   granica widoczna z obu stron bez dokladania kreski. */
.ip-zakonczenie__srodek{display:grid;gap:var(--s6)}
.ip-zakonczenie__akapit{
  margin:0;font-size:var(--fs-body);line-height:var(--lh-luzna);
  color:var(--ip-na-ciemnym-slaby)
}
.ip-zakonczenie__akapit--pierwszy{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);font-weight:700;
  letter-spacing:-.01em;line-height:var(--lh-srednia);color:var(--ip-na-ciemnym)
}
.ip-zakonczenie__podpis{
  margin:var(--s4) 0 0;
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:var(--fs-nad);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ip-na-ciemnym-akcent)
}
@media (min-width:960px){
  .ip-zakonczenie__srodek{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s12)}
  .ip-zakonczenie__akapit--pierwszy{grid-column:1 / -1}
  .ip-zakonczenie__podpis{grid-column:1 / -1}
}

/* ------------------------------------------- PODSTRONA „SESJE COACHINGOWE"
   Strona glowna niesie SIEDEM zdan jej klientow, ta podstrona DWADZIESCIA
   SZESC. W skali kafla z tlem i ikona cytatu to sciana, ktorej nikt nie
   przeczyta. Tutaj ma sie czytac jak lista, po ktorej ktos wodzi wzrokiem
   w poszukiwaniu SWOJEJ sytuacji: schodzi chrom, zostaje kreska i jej slowa. */
.ip-cytaty--gesta{
  margin-top:var(--s8);gap:var(--s4) var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))
}
.ip-cytaty--gesta>.ip-cytat{
  padding:var(--s2) 0 var(--s2) var(--s4);
  background:none;border-radius:0;
  border-left:2px solid var(--ip-na-ciemnym-slaby)
}
.ip-cytaty--gesta>.ip-cytat p{font-size:.9375rem;line-height:1.55}

/* Karta sesji stoi tu sama, wiec nie udaje jednej z trzech: zdjecie obok
   cennika, cennik na pelnej szerokosci kolumny. */
.ip-oferta__siatka--solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
  .ip-oferta__siatka--solo .ip-karta{flex-direction:row}
  .ip-oferta__siatka--solo .ip-karta__kadr{flex:0 0 38%;aspect-ratio:auto}
  .ip-oferta__siatka--solo .ip-karta__kadr img{height:100%;object-fit:cover}
  .ip-oferta__siatka--solo .ip-karta__tresc{padding:var(--s8)}
  .ip-oferta__siatka--solo .ip-cennik{gap:var(--s3)}
  /* Karta bez zdjecia: opis z lewej, warunki i przycisk z prawej.
     Zmierzone 135 znakow w wierszu, bo fotografia nie skracala kolumny. */
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-karta__tresc{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
    gap:var(--s4) var(--s12);align-items:center
  }
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-karta__glowa,
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-karta__opis{grid-column:1}
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-cennik,
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-karta__uwaga,
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-karta__tresc>.ip-btn{grid-column:2}
  /* Zdanie o wycenie bylo gola linijka 23 px obok dwuwierszowego akapitu,
     wiec prawa polowa karty czytala sie jako pustka. Panel: 6,90:1. */
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-karta__uwaga{
    margin:0;padding:var(--s4);background:var(--ip-szalwia);
    border-left:3px solid var(--ip-zielen);border-radius:0 var(--r) 0 0;
    color:var(--ip-zielen);font-weight:600
  }
  .ip-oferta__siatka--solo .ip-karta--bez-zdjecia .ip-karta__tresc>.ip-btn{
    margin-top:0;align-self:start
  }
}

/* ------------------------------------------ AKADEMIA TWORCZEGO LIDERA
   Dwie kolumny, zeby wiersz nie przekroczyl 95 znakow bez zwezania
   akapitu: szerokosc daje KOLUMNA, nie `max-width` na tekscie. */
.ip-akademia__tresc{display:grid;gap:var(--s6)}
@media (min-width:860px){
  .ip-akademia__tresc{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s12)}
  .ip-akademia__akapit:first-child{grid-column:1 / -1;font-size:var(--fs-lead-szeroki)}
  /* Pierwszy akapit zajmuje obie kolumny, wiec pozostale ida parami.
     Przy NIEPARZYSTEJ ich liczbie ostatni zostawal sam i pod nim stala
     pustka: po dopisaniu zdania o projekcie pilotazowym akapitow zrobilo
     sie cztery i bramka lamania zmierzyla 632 px pustego pola przy
     kolumnie 584 px. Uklad ma zniesc kazda liczbe akapitow, wiec to CSS
     sie dostosowuje, a nie tresc klientki. */
  .ip-akademia__akapit:last-child:nth-child(even){grid-column:1 / -1}
}
.ip-akademia__akapit{margin:0;line-height:var(--lh-srednia);color:var(--ip-na-ciemnym-slaby)}
.ip-akademia__akapit:first-child{color:var(--ip-na-ciemnym)}

/* ------------------------------------------------- PROGRAMY AUTORSKIE
   Siedem nazw, ktore ona wymyslila. Zaden konkurent ich nie ma, wiec
   maja byc widoczne jako NAZWY, a nie jako punkty listy. */
.ip-programy{
  display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s8) 0 0;padding:0;
  list-style:none
}
.ip-programy>li{
  padding:var(--s3) var(--s6);
  /* Pelna zielen marki, a nie odcien tla sekcji: tlo tej sekcji wynika
     z licznika, wiec moze byc biel albo szalwia. Napis na kaflu 10,75:1,
     kafel wobec szalwii 6,90:1, wobec bieli 10,75:1. */
  background:var(--ip-zielen);
  border-radius:0 var(--r) 0 0;
  font-size:1.0625rem;font-weight:500;color:var(--ip-na-ciemnym)
}
/* Bez stanu najechania: to sa `li`, nie odnosniki, wiec reakcja mowilaby
   „kliknij mnie" tam, gdzie kliknac sie nie da. Przy okazji bialy napis
   na jasnej zieleni ma 3,87:1 przy progu 4,50. */

/* --------------------------------- LICZBY W PASIE TYTULOWYM PODSTRONY
   Zeby kazda zakladka otwierala sie INNA informacja, a nie tym samym
   zielonym paskiem z samym tytulem. Bialy napis na zieleni marki: 10,75:1,
   opis w barwie slabszej: 6,49:1. */
.ip-naglowek-strony__fakty{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s10);
  margin:var(--s6) 0 0;padding:var(--s6) 0 0;list-style:none;
  border-top:1px solid rgba(255,255,255,.22)
}
.ip-naglowek-strony__fakty>li{display:flex;flex-direction:column;gap:2px}
.ip-naglowek-strony__liczba{
  font-family:'Archivo','Archivo zapasowy',sans-serif;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);font-weight:800;
  color:var(--ip-na-ciemnym);line-height:1.1;letter-spacing:-.02em
}
.ip-naglowek-strony__opis{
  font-size:.875rem;line-height:var(--lh-srednia);color:var(--ip-na-ciemnym-slaby)
}

/* ⛔ `align-items:start` ZDJETE 22.09 na prosbe Pawla: kafle maja byc
   rowne. Krotszy kafel ma przez to puste dno i to jest swiadomy wybor:
   rowny dol kafli wazy wiecej niz brak pustki w jednym z nich. */

/* Wyjscie z zapowiedzi obszarow na zakladke z pelnymi listami. */
.ip-obszary__dalej{margin:var(--s12) 0 0;display:flex;justify-content:center}

/* Przycisk prowadzacy z zapowiedzi na zakladke z pelna trescia. */
.ip-przychodza__wiecej{margin:var(--s10) 0 0;display:flex;justify-content:center}

/* Odnosnik po komplet listow, gdy sekcja pokazuje tylko czesc. */
.ip-referencje__wiecej{margin:var(--s8) 0 0;display:flex;justify-content:center}

/* --------------------------- POZOSTALE ZDANIA KLIENTOW NA JASNYM TLE
   Ta sama gesta lista co w ciemnej sekcji, ale barwy odwrocone: napis
   10,75:1 na bieli, kreska w zieleni marki. Bez tego trzydziesci dwa
   zdania stalyby w jednej ciemnej sekcji i dawaly 3036 px zieleni. */
/* Kafel na jasnym tle potrzebuje WLASNEGO tla: `rgba(255,255,255,.06)`
   na bieli daje 1,00:1, czyli kafla po prostu nie widac. Kosc na bieli
   daje 1,56:1, dokladnie jak kafle cen. */
.ip-cytaty--jasna>.ip-cytat{
  background:var(--ip-szalwia);
  border-left-color:var(--ip-zielen)
}
.ip-cytaty--jasna>.ip-cytat .ip-cytat__znak{color:var(--ip-zielen);opacity:.5}
.ip-cytaty--jasna>.ip-cytat p{color:var(--ip-atrament)}
.ip-przychodza-wiecej .ip-sekcja__glowa{margin-bottom:var(--s8)}

/* Efekty jako jedyna tresc sekcji: bez ramki rozwijacza, bo nie ma czego
   rozwijac, i bez gornego odstepu, bo naglowek stoi tuz nad nimi. */
.ip-jak__efekty--same{margin-top:var(--s6);padding-top:0;border-top:0}