/* ================= KRÓJ PISMA =================

   Open Sans, wgrany razem z wtyczką — nie pobierany z serwerów Google.

   Powód rzeczowy: krój systemowy na Windowsie to „Segoe UI", czyli dokładnie ten,
   który klient nazwał za wąskim. Dopóki opieraliśmy się na kroju systemowym, prośba
   „coś pełniejszego" była niewykonalna: każdy komputer pokazywał co innego.

   Powód drugi: pliki leżą na serwerze BACh, więc otwarcie strony nie wysyła adresu IP
   odwiedzającego do Google. Przy organizacji, która zbiera darowizny, to nie drobiazg.

   Dwa zakresy znaków na wagę: „latin" i „latin-ext". Polskie ogonki siedzą w tym drugim,
   więc bez niego ą, ę i ł podstawiałyby się z innego kroju i tekst falowałby w połowie
   zdania.

   `font-display: swap` — tekst jest widoczny od pierwszej chwili krojem systemowym
   i podmienia się, gdy plik dojedzie. Bez tego strona zaczyna od pustych miejsc.       */

@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('kroje/open-sans-400-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:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('kroje/open-sans-400-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:'Open Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('kroje/open-sans-600-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:'Open Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('kroje/open-sans-600-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:'Open Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('kroje/open-sans-700-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:'Open Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('kroje/open-sans-700-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;
}


/* ================= SYSTEM WIZUALNY BACh =================

   Kierunek ustalony z klientem 11.08.2026: jasno, lekko, czytelnie. Bez dużych
   powierzchni w ciemnym granacie.

   MOTYW PRZEWODNI — jasny niebieski gradient po przekątnej, od lewego górnego rogu
   do prawego dolnego. Wraca w kilku miejscach strony i spina ją w całość.

   KOLORY WYRÓŻNIAJĄCE mają przypisane znaczenia i nie mieszają się:
     niebieski #1D67CD  — nagłówki i odnośniki
     turkus    #3FB1B5  — dodatek, plakietki, ikony
     czerwień  #D81E5B  — WYŁĄCZNIE działania użytkownika: wpłata, zapis na biuletyn,
                          przyciski wzywające do działania. Nic poza tym.

   Zieleni nie ma nigdzie — nie należy do palety marki.                              */

#bach-page{
  /* ---------- Kolory ---------- */
  /* Górny koniec ciemniejszy niż reszta: to tło logotypu i menu, więc musi je unieść.
     #3081D8 leży dokładnie pomiędzy niebieskim marki (#1D67CD) a jasnym #449CE3. */
  --bach-gradient:linear-gradient(135deg,#3081D8 0%,#7FC7ED 58%,#B8EFF4 100%);
  --bach-pasek:#2A79D3;
  --bach-gradient-lekki:linear-gradient(135deg,rgba(68,156,227,.14) 0%,rgba(127,199,237,.14) 55%,rgba(184,239,244,.22) 100%);

  --bach-niebieski:#1D67CD;
  --bach-niebieski-ciemny:#14488F;
  --bach-turkus:#3FB1B5;
  --bach-turkus-jasny:#8FD9DB;
  --bach-akcent:#D81E5B;
  --bach-akcent-ciemny:#B4174B;

  --bach-ink:#132433;
  --bach-body:#3E4C5A;
  --bach-line:#DCE7F2;
  --bach-bg:#FFFFFF;

  /* Tło paska z menu i stopki. Ten sam odcień, od którego zaczyna się motyw strony,
     więc pasek zlewa się z sekcją pod nim zamiast odcinać się od niej krawędzią. */
  --bach-pasek-tlo:#3081D8;
  --bach-bg-soft:#F2F8FD;

  /* ---------- Typografia ----------

     Sześć rozmiarów i ani jednego więcej. Wcześniej każda sekcja miała własny,
     przez co strona wyglądała na złożoną z kawałków.

     Krój: pełniejszy niż domyślny systemowy. „Segoe UI" na Windowsie i „Helvetica
     Neue" na Macu są wąskie w dłuższych akapitach, więc pierwszeństwo dostają kroje
     o szerszym oczku. Grubość treści podniesiona do 420 — tam, gdzie krój ma zmienną
     grubość, daje to wyraźnie pełniejszy tekst bez wrażenia pogrubienia.             */
  --tekst-h1:clamp(30px,3.6vw,44px);
  --tekst-h2:clamp(23px,2.4vw,30px);
  --tekst-h3:19px;
  --tekst-tresc:17.5px;
  --tekst-przycisk:16px;
  --tekst-podpis:14.5px;

  /* ---------- Odstępy ----------

     Skala zamiast wartości wpisywanych z ręki przy każdej sekcji. Odstęp między
     sekcjami zszedł z 88 px na 52 px, wewnętrzne mniej więcej o połowę.              */
  --odstep-sekcja:44px;
  --odstep-duzy:22px;
  --odstep-sredni:14px;
  --odstep-maly:8px;

  --bach-radius:14px;
  --bach-shadow:0 2px 14px rgba(29,103,205,.08);
  --bach-shadow-lg:0 10px 32px rgba(29,103,205,.13);
  --bach-max:1120px;

  /* Open Sans wgrany razem z wtyczką. Poprzednio stał tu krój systemowy, czyli na
     Windowsie „Segoe UI" — dokładnie ten, który klient nazwał za wąskim. Zapis
     „font-weight:420" nic nie dawał: działa tylko przy krojach o zmiennej grubości,
     a na większości komputerów zaokrąglał się do zwykłych 400.

     Open Sans ma szersze oczko i wyraźnie pełniejszy rysunek liter niż Segoe UI,
     przy tym samym stopniu pisma. Litery z ogonkami są w nim czytelne, co przy
     polszczyźnie nie jest oczywiste.                                                 */
  font-family:'Open Sans',"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--bach-body);
  line-height:1.62;
  font-size:var(--tekst-tresc);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* Motyw WordPressa ogranicza treść do wąskiej kolumny, przez co blok pomyślany
   na pełną szerokość składa się do słupka. Te cztery linie wyrywają go z tego. */
#bach-page{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
}

/* Zamalowanie odstępu, który motyw zostawia NAD treścią strony.

   Ten odstęp jest poza blokiem — należy do części strony, których wtyczka nie tworzy
   i nie zna ich wysokości. Przy białej treści nikt go nie widzi, ale nasz blok zaczyna
   się kolorem, więc odcinał się jako biała belka nad niebieskim.

   Nagłówek próbuje ten odstęp zmierzyć i podciągnąć blok. Gdy mu się to uda, poniższy
   prostokąt trafia ponad początek strony i nigdy się nie pokazuje. Gdy skrypt nie
   wystartuje — bo motyw albo wtyczka przyspieszająca odłoży go na później — zostaje
   zamalowany kolor zamiast bieli. Dwa niezależne zabezpieczenia, bo pierwsze zawiodło
   na żywej stronie.

   Kolor to górny koniec motywu, ten sam, na którym stoi logo.                        */
#bach-page::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  width:100%;
  height:300px;
  background:#3081D8;
  pointer-events:none;
}

/* ---------- UKRYCIE NAGŁÓWKA I STOPKI MOTYWU ----------
   Reguły działają WYŁĄCZNIE na podstronach z tym blokiem, więc reszta serwisu
   zostaje nietknięta. Bez tego zawężenia zniknąłby nagłówek na całej witrynie. */
body:has(#bach-page) .wp-block-post-title,
body:has(#bach-page) .entry-title,
body:has(#bach-page) .page-title,
body:has(#bach-page) header.entry-header,
body:has(#bach-page) .wp-block-post-title a{display:none !important;}

body:has(#bach-page) header.wp-block-template-part,
body:has(#bach-page) > header,
body:has(#bach-page) .site-header,
body:has(#bach-page) footer.wp-block-template-part,
body:has(#bach-page) > footer,
body:has(#bach-page) .site-footer{display:none !important;}

body:has(#bach-page) .wp-site-blocks,
body:has(#bach-page) .entry-content,
body:has(#bach-page) .site-content,
body:has(#bach-page) main{
  padding-left:0 !important;padding-right:0 !important;
  margin-left:0 !important;margin-right:0 !important;
  max-width:100% !important;
}

body:has(#bach-page) .wp-site-blocks,
body:has(#bach-page) .entry-content,
body:has(#bach-page) .site-content,
body:has(#bach-page) main,
body:has(#bach-page) .wp-block-post-content{padding-top:0 !important;margin-top:0 !important;}

/* Blok jest szeroki na całe okno, więc bez tej zasłony u dołu strony pojawiałby się
   poziomy pasek przewijania.

   Ale „hidden" ma skutek uboczny, który nas kosztował przyklejony pasek z menu:
   przeglądarka robi z takiego elementu własny obszar przewijania, a wtedy wszystko,
   co jest w środku przyklejone, trzyma się JEGO, a nie okna — czyli odjeżdża razem
   z treścią.

   „clip" obcina tak samo, ale własnego obszaru przewijania nie tworzy, więc pasek
   zostaje przyklejony do okna. Starsze przeglądarki, które tego nie znają, dostają
   „hidden" — tam menu odjedzie, ale strona nie rozjedzie się w bok. Z dwóch wad
   ta jest mniejsza.                                                                  */
body:has(#bach-page){overflow-x:hidden;}
@supports (overflow-x:clip){
  body:has(#bach-page){overflow-x:clip;}
}

#bach-page *,#bach-page *::before,#bach-page *::after{box-sizing:border-box;}
#bach-page img{max-width:100%;height:auto;display:block;}

/* Nagłówki: bez wersalików i bez kursywy. Wielkie litery czyta się wolniej,
   a w dłuższym nagłówku po prostu krzyczą.                                     */
#bach-page h1,#bach-page h2,#bach-page h3,#bach-page h4{
  color:var(--bach-ink);margin:0 0 .45em;line-height:1.18;
  font-weight:700;letter-spacing:-.015em;text-transform:none;font-style:normal;
}
#bach-page h1{font-size:var(--tekst-h1);}
#bach-page h2{font-size:var(--tekst-h2);}
#bach-page h3{font-size:var(--tekst-h3);}
#bach-page p{margin:0 0 .85em;}
#bach-page ul{margin:0;padding:0;list-style:none;}
#bach-page a{color:var(--bach-niebieski);}
#bach-page button{font-family:inherit;}

.bach-wrap{max-width:var(--bach-max);margin:0 auto;padding:0 22px;}
/* Klient nie chce nigdzie czystej bieli jako tła sekcji. Sekcje idą na przemian
   dwoma jasnymi odcieniami: tym z „Wpłać online" i tym, który do tej pory miała
   stopka. Kafelki i okienka w środku zostają białe — na tych tłach odcinają się
   wyraźniej niż na bieli.

   Naprzemienność wychodzi sama: strony układają sekcje raz bez klasy, raz z klasą
   „--soft", więc wystarczyło podmienić oba tła.                                    */
.bach-section{padding:var(--odstep-sekcja) 0;background:var(--bach-gradient-lekki);}

/* Naprzemienne tła sekcji.
   Klasy rozdaje skrypt, licząc sekcje po kolei od góry strony. Sama reguła CSS tu nie
   wystarcza: część sekcji siedzi w pojemnikach (kotwice na „Poznaj nas"), a licznik
   :nth-of-type startuje od nowa w każdym pojemniku — wtedy dwie sąsiednie sekcje
   dostawały ten sam kolor i zlewały się w jedną, co widać było na „Naszej wizji"
   i „Naszych wartościach". */
#bach-page .bach-section.is-tlo-a{background:var(--bach-gradient-lekki);}
#bach-page .bach-section.is-tlo-b{background:var(--bach-bg-soft);}
.bach-section--soft{background:var(--bach-bg-soft);}
#bach-page{background:var(--bach-bg-soft);}

/* Sekcja w motywie przewodnim — używana zamiast dawnych ciemnych pasów. */
.bach-section--motyw{background:var(--bach-gradient);}
.bach-section--motyw-lekki{background:var(--bach-gradient-lekki);}

.bach-center{text-align:center;}

/* Odstęp pod nagłówkiem sekcji. Jedna klasa zamiast wartości wpisywanej w każdym
   miejscu z osobna — inaczej każda sekcja ma własny i strona się rozjeżdża. */
.bach-naglowek-sekcji{margin-bottom:var(--odstep-duzy);}

/* Nadtytuł. Bez wersalików — wyróżnia go kolor i grubość, nie krzyk. */
.bach-eyebrow{
  display:inline-block;font-size:var(--tekst-podpis);font-weight:700;letter-spacing:.01em;
  color:var(--bach-niebieski);margin-bottom:var(--odstep-maly);text-transform:none;
}
.bach-h2{font-size:var(--tekst-h2);}
.bach-lead{font-size:calc(var(--tekst-tresc) + 1px);max-width:720px;}
#bach-page .bach-center .bach-lead{margin-left:auto;margin-right:auto;}

/* ---------- PRZYCISKI ---------- */
.bach-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:999px;font-weight:700;font-size:var(--tekst-przycisk);
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.bach-btn:hover{transform:translateY(-1px);text-decoration:none;}

/* Czerwień marki wyłącznie tutaj: to przycisk, którym użytkownik coś robi. */
.bach-btn--primary{background:var(--bach-akcent)!important;color:#fff!important;box-shadow:0 6px 18px rgba(216,30,91,.28);}
.bach-btn--primary:hover{background:var(--bach-akcent-ciemny)!important;color:#fff!important;}
.bach-btn--navy{background:var(--bach-niebieski)!important;color:#fff!important;}
.bach-btn--navy:hover{background:var(--bach-niebieski-ciemny)!important;color:#fff!important;}
.bach-btn--ghost{background:rgba(255,255,255,.75);color:var(--bach-niebieski)!important;border-color:rgba(29,103,205,.35);}
.bach-btn--ghost:hover{background:#fff;color:var(--bach-niebieski-ciemny)!important;}
.bach-btn--outline{background:#fff;color:var(--bach-niebieski)!important;border-color:var(--bach-line);}
.bach-btn--outline:hover{border-color:var(--bach-niebieski);color:var(--bach-niebieski-ciemny)!important;}

/* ============ MENU ============

   Pasek nie ma własnego tła u góry strony — pokazuje motyw, który leży pod nim. Biała
   belka nad niebieskim czytała się jak dwa oddzielne elementy, a logotyp wyglądał, jakby
   był doklejony nad stroną zamiast siedzieć na jej tle.

   Pasek stoi we własnym wierszu, na jednolitym niebieskim, i nie nachodzi na zdjęcie
   w nagłówku. Kolor ten sam, od którego zaczyna się motyw strony, więc granica między
   paskiem a sekcją pod nim jest niewidoczna.

   Pasek NIE jest przyklejony: zostaje na górze strony i odjeżdża razem z treścią.    */
#bach-page .bach-nav{
  position:relative;z-index:9990;
  background:var(--bach-pasek-tlo);border-bottom:0;
}

/* Klasa z poprzedniego układu. Bez własnych reguł — pasek wygląda tak samo wszędzie. */
.bach-nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:88px;
  max-width:none;margin:0;padding:0 clamp(16px, 3vw, 44px);
}
.bach-nav__logo{display:flex;flex-direction:column;text-decoration:none;line-height:1.05;flex:0 0 auto;}

/* Napis zapasowy, gdy logo nie jest jeszcze wybrane w kokpicie. Pasek bez niczego
   w lewym rogu wygląda na zepsuty, a nazwa organizacji jest zawsze prawdziwa. */
.bach-nav__mark{font-size:28px;font-weight:700;color:#fff;letter-spacing:-.02em;}
.bach-nav__markSub{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);margin-top:3px;}
#bach-page .bach-nav__logo img{height:64px;width:auto;display:block;max-width:none;}
@media (max-width:640px){#bach-page .bach-nav__logo img{height:44px;}}

.bach-nav__menu{display:flex;align-items:center;gap:10px;}
.bach-nav__list{display:flex;align-items:center;gap:2px;}
.bach-nav__list li{position:relative;}
/* Selektor z identyfikatorem, bo ogólna reguła `#bach-page a` ma wyższą wagę niż sama
   klasa i bez tego napisy menu wychodzą niebieskie na niebieskim tle. Ta sama pułapka
   złapała nas przy podmenu, przy akapitach i przy zakładkach — stąd konsekwentnie
   identyfikator wszędzie tam, gdzie kolor odnośnika ma być inny niż domyślny. */
#bach-page .bach-nav__list>li>a{
  display:block;padding:9px 12px;font-size:15.5px;font-weight:600;color:#fff;
  text-decoration:none;border-radius:8px;white-space:nowrap;transition:background .15s ease,color .15s ease;

}
#bach-page .bach-nav__list>li>a:hover,#bach-page .bach-has-sub:hover>a{
  background:rgba(255,255,255,.16);color:#fff;
  text-decoration:underline;text-decoration-color:var(--bach-akcent);
  text-decoration-thickness:2px;text-underline-offset:5px;
}

/* Pozycja odpowiadająca otwartej stronie: kreska w czerwieni marki. Na pasku
   czerwień podkreśla, nigdy nie wypełnia — wypełnienie ma wyłącznie „Wspieram". */
.bach-nav__list>li.is-aktywna>a{position:relative;}
.bach-nav__list>li.is-aktywna>a::before{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:2px;
  background:var(--bach-akcent);
}
.bach-sub li.is-aktywna>a{color:var(--bach-niebieski)!important;font-weight:700;}

.bach-sub-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--bach-ink);}
.bach-sub-toggle svg{width:16px;height:16px;transition:transform .2s ease;}
.bach-has-sub.is-open .bach-sub-toggle svg{transform:rotate(180deg);}
.bach-has-sub>a::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:7px;vertical-align:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.5;
}

.bach-sub{
  position:absolute;top:calc(100% - 2px);left:0;min-width:236px;background:#fff;
  border:1px solid var(--bach-line);border-radius:12px;box-shadow:var(--bach-shadow-lg);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.bach-has-sub:hover>.bach-sub,.bach-has-sub:focus-within>.bach-sub{opacity:1;visibility:visible;transform:translateY(0);}
.bach-sub a{display:block;padding:9px 12px;font-size:15px;color:var(--bach-body);text-decoration:none;border-radius:8px;}
.bach-sub a:hover,.bach-sub a:focus-visible{
  background:var(--bach-bg-soft);color:var(--bach-niebieski);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--bach-akcent);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.bach-nav__cta{padding:10px 22px;font-size:15px;}

.bach-nav__burger{
  display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:10px;
  background:rgba(255,255,255,.14);cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.bach-nav__burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:.2s;}
.bach-nav.is-open .bach-nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.bach-nav.is-open .bach-nav__burger span:nth-child(2){opacity:0;}
.bach-nav.is-open .bach-nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.bach-nav--na-hero.is-open{background:#fff;}

@media (max-width:1040px){
  .bach-nav__burger{display:flex;}
  .bach-nav__menu{
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--bach-line);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 18px;
    box-shadow:var(--bach-shadow-lg);max-height:calc(100vh - 70px);overflow-y:auto;display:none;
  }
  .bach-nav.is-open .bach-nav__menu{display:flex;}
  #bach-page .bach-nav.is-open .bach-nav__list>li>a{color:var(--bach-ink);}
  #bach-page .bach-nav.is-open .bach-nav__list>li>a:hover{background:var(--bach-bg-soft);color:var(--bach-niebieski);}
  .bach-nav.is-open .bach-nav__burger span{background:var(--bach-ink);}
  .bach-nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .bach-nav__list>li{border-bottom:1px solid var(--bach-line);display:flex;flex-wrap:wrap;align-items:center;}
  .bach-nav__list>li>a{flex:1;padding:13px 4px;font-size:16.5px;}
  .bach-has-sub>a::after{display:none;}
  .bach-sub-toggle{display:block;}
  .bach-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;width:100%;padding:0 0 10px 10px;display:none;min-width:0;}
  .bach-has-sub.is-open>.bach-sub{display:block;}
  .bach-nav__cta{margin-top:14px;width:100%;}
}

/* ---------- NAGŁÓWEK STRONY GŁÓWNEJ ---------- */
.bach-hero{
  position:relative;
  min-height:min(460px,74vh);
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  overflow:hidden;
  background:var(--bach-gradient);
}
.bach-hero__panel{
  position:relative;z-index:3;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 0 44px;
  background:linear-gradient(115deg,#449CE3 0%,#63B4E8 62%,rgba(127,199,237,.86) 100%);
}
.bach-hero__panel::after{
  content:"";position:absolute;top:0;bottom:0;left:100%;width:min(280px,22vw);
  background:linear-gradient(90deg,rgba(127,199,237,.9) 0%,rgba(184,239,244,.45) 55%,rgba(184,239,244,0) 100%);
  pointer-events:none;
}
.bach-hero__tresc{max-width:500px;margin-left:auto;padding:0 32px 0 26px;width:100%;}

.bach-hero__zdjecia{position:relative;z-index:1;min-height:300px;}
.bach-hero__zdjecie{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;}
.bach-hero__zdjecie.is-aktywne{opacity:1;}
.bach-hero__zdjecia::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%,rgba(20,72,143,.14));
  pointer-events:none;
}

/* Napisy na jasnym motywie są ciemne. Biały tekst na tym gradiencie ma kontrast
   poniżej progu czytelności — atrament daje 5,6:1 nawet na najciemniejszym końcu. */
.bach-hero .bach-eyebrow{color:var(--bach-niebieski-ciemny)!important;}
.bach-hero h1{color:var(--bach-ink)!important;margin-bottom:var(--odstep-maly);}
.bach-hero__quote{color:var(--bach-niebieski-ciemny)!important;font-size:calc(var(--tekst-tresc) + 1px);font-weight:700;margin-bottom:var(--odstep-maly);font-style:italic;}
.bach-hero__text{color:var(--bach-ink)!important;font-size:var(--tekst-tresc);margin-bottom:var(--odstep-duzy);}
.bach-hero__cta{display:flex;flex-wrap:wrap;gap:10px;}
.bach-hero__note{margin-top:var(--odstep-sredni);font-size:var(--tekst-podpis);color:var(--bach-body)!important;}

.bach-hero__kropki{position:absolute;z-index:4;bottom:18px;right:0;width:56%;display:flex;justify-content:center;gap:8px;}
.bach-hero__kropka{width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(19,36,51,.28);transition:.2s;}
.bach-hero__kropka:hover{background:rgba(19,36,51,.5);}
.bach-hero__kropka.is-aktywna{background:var(--bach-turkus);transform:scale(1.2);}
.bach-hero__kropka:focus-visible{outline:3px solid var(--bach-niebieski);outline-offset:3px;}

.bach-hero__podpis.is-widoczny{opacity:1;}
.bach-hero__podpis:empty{display:none;}
.bach-hero__podpis{
  position:absolute;z-index:4;right:26px;bottom:52px;opacity:0;transition:opacity .3s ease;
  background:rgba(255,255,255,.92);color:var(--bach-ink);font-weight:700;
  padding:7px 16px;border-radius:8px;font-size:var(--tekst-podpis);box-shadow:var(--bach-shadow);
}

@media (max-width:900px){
  .bach-hero{grid-template-columns:1fr;min-height:0;}
  .bach-hero__panel{padding:100px 0 40px;background:var(--bach-gradient);}
  .bach-hero__panel::after{display:none;}
  .bach-hero__tresc{margin:0 auto;padding:0 20px;}
  .bach-hero__zdjecia{min-height:260px;}
  .bach-hero__kropki{width:100%;bottom:14px;}
  .bach-hero__podpis{right:14px;bottom:44px;}
}

/* ---------- NAGŁÓWEK PODSTRONY ---------- */
#bach-page .bach-top{background:var(--bach-gradient);padding:var(--odstep-sekcja) 0;text-align:center;}
.bach-top .bach-eyebrow{color:var(--bach-niebieski-ciemny)!important;}
.bach-top h1{color:var(--bach-ink)!important;margin-bottom:var(--odstep-maly);}
#bach-page .bach-top p{color:var(--bach-ink)!important;max-width:640px;margin:0 auto var(--odstep-duzy);font-size:calc(var(--tekst-tresc) + 1px);}
.bach-top__cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}

/* ---------- LICZBY ---------- */
.bach-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--odstep-sredni);
  background:#fff;border-radius:var(--bach-radius);box-shadow:var(--bach-shadow);
  padding:var(--odstep-duzy) 22px;position:relative;
}
.bach-stat{text-align:center;padding:4px 8px;}
.bach-stat__num{display:block;font-size:clamp(26px,3vw,34px);font-weight:700;color:var(--bach-niebieski);line-height:1.1;letter-spacing:-.02em;}
.bach-stat__label{font-size:var(--tekst-podpis);color:var(--bach-body);margin-top:4px;display:block;}
.bach-stats__foot{grid-column:1/-1;text-align:center;font-size:13.5px;color:#7C8B99;border-top:1px solid var(--bach-line);padding-top:12px;margin-top:2px;}
.bach-stats--plaskie .bach-stat__num{color:var(--bach-niebieski);}

/* ---------- CO SIĘ DZIEJE TERAZ ---------- */
.bach-teraz{background:#fff;border-radius:var(--bach-radius);box-shadow:var(--bach-shadow);padding:var(--odstep-duzy) 26px 24px;position:relative;}
.bach-teraz__head{text-align:center;margin-bottom:var(--odstep-duzy);}
.bach-teraz__title{font-size:var(--tekst-h2);margin:0;}
.bach-teraz__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--odstep-duzy);}
.bach-teraz__item h3{margin-bottom:6px;}
.bach-teraz__item p{font-size:var(--tekst-podpis);margin:0;}
.bach-teraz__cta{text-align:center;margin-top:var(--odstep-duzy);padding-top:var(--odstep-sredni);border-top:1px solid var(--bach-line);}
#bach-page .bach-teraz__cta p{max-width:560px;margin:0 auto var(--odstep-sredni);font-size:var(--tekst-tresc);text-align:center;}

/* ---------- KAFELKI ---------- */
.bach-grid{display:grid;gap:var(--odstep-duzy);}
.bach-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.bach-grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.bach-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}

.bach-card{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;
}
.bach-card:hover{transform:translateY(-3px);box-shadow:var(--bach-shadow-lg);}
.bach-card__media{height:140px;position:relative;background:var(--bach-gradient);display:flex;align-items:flex-end;padding:14px;}
.bach-card--granat .bach-card__media{background:linear-gradient(135deg,#1D67CD 0%,#449CE3 100%);}
.bach-card--niebies .bach-card__media{background:linear-gradient(135deg,#449CE3 0%,#7FC7ED 100%);}
.bach-card--turkus .bach-card__media{background:linear-gradient(135deg,#3FB1B5 0%,#B8EFF4 100%);}
.bach-card--zielen .bach-card__media{background:linear-gradient(135deg,#7FC7ED 0%,#B8EFF4 100%);}
.bach-card__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.bach-card__body h3{margin-bottom:8px;}
.bach-card__body p{font-size:var(--tekst-podpis);margin-bottom:var(--odstep-sredni);}
.bach-card__stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--odstep-sredni);}
.bach-chip{display:inline-flex;align-items:baseline;gap:5px;background:var(--bach-bg-soft);border:1px solid var(--bach-line);border-radius:999px;padding:5px 11px;font-size:13.5px;color:var(--bach-body);}
.bach-chip b{color:var(--bach-niebieski);font-size:15px;font-weight:700;}
/* Przycisk przejścia na dole kafelka. `margin-top:auto` dosuwa go do dna, więc
   przyciski stoją w jednej linii niezależnie od długości opisów nad nimi. */
.bach-card__cta{margin-top:auto;align-self:flex-start;}

/* Plakietki stanu. Kolor niesie znaczenie, ale napis też je mówi — na kolor nie można
   liczyć u osób nierozróżniających barw. Zieleni nie ma: nie należy do palety.       */
.bach-tag{display:inline-block;background:rgba(255,255,255,.92);color:var(--bach-ink);font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;}
.bach-tag--aktywny{background:#E4F6F7;color:#17696C;}
.bach-tag--w-toku{background:#E4F6F7;color:#17696C;}
.bach-tag--wkrotce{background:#FFF4D6;color:#8A6100;}
.bach-tag--zakonczony{background:#ECF1F6;color:#4A5967;}

/* ---------- WARTOŚCI ---------- */
.bach-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--odstep-duzy);}
.bach-value{background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);padding:22px 20px;box-shadow:var(--bach-shadow);}
.bach-value__icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(63,177,181,.14);color:var(--bach-turkus);margin-bottom:12px;}
.bach-value__icon svg{width:22px;height:22px;}
.bach-value h3{margin-bottom:6px;}
.bach-value p{font-size:var(--tekst-podpis);margin:0;}

/* ---------- JAK POMÓC ---------- */
.bach-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--odstep-duzy);}
.bach-help__item{background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);padding:24px 20px;text-align:center;display:flex;flex-direction:column;}
.bach-help__num{width:38px;height:38px;border-radius:50%;background:var(--bach-niebieski);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:16px;}
.bach-help__item p{font-size:var(--tekst-podpis);flex:1;}

/* ---------- WSPARCIE / KONTA ---------- */
.bach-support{background:var(--bach-gradient);}
.bach-support h2,.bach-support h3{color:var(--bach-ink)!important;}
.bach-support .bach-eyebrow{color:var(--bach-niebieski-ciemny)!important;}
.bach-support__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--odstep-duzy);align-items:start;}
#bach-page .bach-support p{color:var(--bach-ink)!important;}
.bach-accounts{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);border-radius:var(--bach-radius);padding:22px;}
.bach-account{padding:11px 0;border-bottom:1px solid var(--bach-line);}
.bach-account:last-child{border-bottom:0;}
.bach-account__name{font-size:13.5px;color:var(--bach-niebieski)!important;display:block;margin-bottom:3px;font-weight:700;}
.bach-account__num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15.5px;color:var(--bach-ink)!important;font-weight:600;letter-spacing:.02em;word-break:break-word;}
.bach-support__hint{font-size:var(--tekst-podpis);color:var(--bach-body)!important;margin-top:var(--odstep-sredni);}

.bach-news{background:var(--bach-gradient-lekki);}
.bach-news__box{background:#fff;border-radius:var(--bach-radius);box-shadow:var(--bach-shadow);padding:28px 26px;display:grid;grid-template-columns:1fr 1fr;gap:var(--odstep-duzy);align-items:center;}
.bach-form{display:flex;flex-direction:column;gap:10px;}
.bach-form input[type=text],.bach-form input[type=email]{width:100%;padding:12px 14px;border:1px solid var(--bach-line);border-radius:10px;font-size:16px;font-family:inherit;color:var(--bach-ink);background:#fff;}
.bach-form input:focus{outline:2px solid var(--bach-niebieski);outline-offset:1px;border-color:transparent;}
.bach-form__check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--bach-body);}
.bach-form__check input{margin-top:4px;flex:0 0 auto;}
.bach-form button{width:100%;}

/* ---------- STOPKA ----------
   Niebieska, w tym samym odcieniu co pasek z menu — strona zaczyna się i kończy
   tym samym kolorem, a wszystko pomiędzy jest jasne.                             */
.bach-footer{background:var(--bach-pasek-tlo);border-top:0;color:rgba(255,255,255,.88);padding:var(--odstep-sekcja) 0 22px;}
#bach-page .bach-footer h4{color:#fff!important;font-size:15px;letter-spacing:.01em;text-transform:none;margin-bottom:12px;font-weight:700;}
#bach-page .bach-footer p,#bach-page .bach-footer li,#bach-page .bach-footer span{color:rgba(255,255,255,.88)!important;}
#bach-page .bach-footer a{color:rgba(255,255,255,.88)!important;text-decoration:none;}
#bach-page .bach-footer a:hover{color:#fff!important;text-decoration:underline;}
.bach-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--odstep-duzy);}
.bach-footer li{margin-bottom:7px;font-size:var(--tekst-podpis);}
.bach-footer__brand{font-size:22px;font-weight:700;color:#fff!important;letter-spacing:-.02em;margin-bottom:8px;}
.bach-footer__legal{border-top:1px solid rgba(255,255,255,.22);margin-top:var(--odstep-duzy);padding-top:16px;font-size:13.5px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:rgba(255,255,255,.75);}
.bach-social{display:flex;gap:8px;margin-top:12px;}
.bach-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;}
.bach-social a:hover{background:var(--bach-turkus);}
.bach-social svg{width:18px;height:18px;fill:#fff;}
.bach-social a:hover svg{fill:#fff;}

/* ---------- WPŁATA ONLINE ---------- */
.bach-donate{background:var(--bach-gradient-lekki);scroll-margin-top:86px;}
.bach-donate__box{background:#fff;border-radius:var(--bach-radius);box-shadow:var(--bach-shadow-lg);padding:26px 24px;max-width:860px;margin:0 auto;}
.bach-donate__secure{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:var(--odstep-sredni);font-size:var(--tekst-podpis);color:#7C8B99;}
.bach-donate__secure span{display:inline-flex;align-items:center;gap:6px;}
.bach-donate__secure svg{width:15px;height:15px;stroke:var(--bach-turkus);flex:0 0 auto;}

/* Zgodność z wtyczką BACh Darowizny — mój reset nie może psuć jej wyglądu. */
#bach-page .bach-dar h2,#bach-page .bach-dar h3,#bach-page .bach-dar h4{color:var(--bach-ink);font-weight:700;letter-spacing:normal;}
#bach-page .bach-dar ul{list-style:disc;padding-left:20px;margin:0 0 1em;}
#bach-page .bach-dar a{color:var(--bach-niebieski);}
#bach-page .bach-dar button{font-family:inherit;}

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width:900px){
  .bach-support__grid,.bach-news__box{grid-template-columns:1fr;gap:var(--odstep-duzy);}
  .bach-footer__grid{grid-template-columns:1fr 1fr;gap:var(--odstep-duzy);}
  .bach-section{padding:30px 0;}
  .bach-top{padding:84px 0 28px;}
}
@media (max-width:560px){
  #bach-page{font-size:17px;}
  .bach-wrap{padding:0 16px;}
  .bach-footer__grid{grid-template-columns:1fr;}
  .bach-hero__cta .bach-btn,.bach-top__cta .bach-btn{width:100%;}
  .bach-news__box{padding:22px 18px;}
  .bach-accounts{padding:18px;}
  .bach-donate__box{padding:20px 16px;}
}
/* Płynne przewijanie do kotwic. Skok natychmiastowy przy jednej długiej stronie gubi
   orientację: czytelnik nie wie, czy przeskoczył w górę, czy w dół. Kto poprosił system
   o mniej ruchu na ekranie, dostaje skok bez animacji.                                */
@media (prefers-reduced-motion:no-preference){
  html:has(#bach-page){scroll-behavior:smooth;}
}
@media (prefers-reduced-motion:reduce){
  #bach-page *{transition:none!important;}
}

/* ================================================================
   

/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= ZESPÓŁ ================= */

/* Osoby w siatce, nie w karuzeli. U Fundacji DSN ta sekcja jest przesuwana, bo osób
   jest tam dużo; przy pięciu chowanie ich za strzałkami znaczy, że część zespołu
   nigdy nie zostanie zobaczona. Gdy skład urośnie, warto to zmienić.                 */
.bach-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}

.bach-osoba{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bach-osoba:hover{transform:translateY(-4px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr, przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                      */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały. Pusta ramka wygląda na brak, inicjały wyglądają na decyzję. */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bach-niebieski) 0%,var(--bach-niebieski) 100%);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:.02em;
}

.bach-osoba__tresc{padding:24px 24px 26px;}
.bach-osoba__tresc h3{font-size:20px;margin-bottom:4px;}
.bach-osoba__funkcja{
  color:var(--bach-niebieski)!important;font-size:14px;font-weight:700;
  letter-spacing:.01em;margin-bottom:12px;
}
.bach-osoba__biogram{font-size:15.5px;margin:0;}

/* ================= HISTORIA — KAFELKI Z ROKIEM ================= */

/* Bez linii osi i bez układania na przemian. Rok stoi nad kafelkiem, więc nie ma jak
   wejść na zdjęcie ani na tekst — a wysokość kafelka zależy od długości opisu, więc
   każde położenie roku „na wspólnej linii" prędzej czy później na coś nachodziło.     */
.bach-os{
  position:relative;
  margin-top:10px;
  padding:0 clamp(12px,4vw,64px);
}

.bach-os__tor{
  display:flex;
  align-items:stretch;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:4px 4px 26px;
  scrollbar-width:thin;
}
.bach-os__tor:focus-visible{outline:3px solid var(--bach-niebieski);outline-offset:4px;}

.bach-os__wpis{
  flex:0 0 clamp(240px,26vw,300px);
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
}

.bach-os__data{
  align-self:flex-start;
  background:var(--bach-niebieski);color:#fff;font-weight:800;font-size:14px;
  padding:6px 16px;border-radius:999px;white-space:nowrap;margin-bottom:12px;
}

/* Kafelki równej wysokości w całym rzędzie — inaczej dolne krawędzie skaczą przy
   opisach różnej długości i rząd wygląda na rozsypany.                               */
.bach-os__karta{
  flex:1;
  background:#fff;border:1px solid var(--bach-line);border-radius:12px;overflow:hidden;
  box-shadow:var(--bach-shadow);
  display:flex;flex-direction:column;
}
.bach-os__foto{aspect-ratio:16/10;overflow:hidden;background:var(--bach-bg-soft);flex:0 0 auto;}
#bach-page .bach-os__foto img{width:100%;height:100%;object-fit:cover;display:block;}
.bach-os__tresc{padding:16px 18px 18px;}
.bach-os__tresc h3{font-size:16.5px;margin-bottom:6px;}
.bach-os__tresc p{font-size:14.5px;margin:0;line-height:1.6;}

.bach-os__strzalka{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--bach-line);
  background:#fff;color:var(--bach-niebieski);font-size:26px;line-height:1;cursor:pointer;
  box-shadow:var(--bach-shadow);transition:.18s;
}
.bach-os__strzalka:hover:not(:disabled){background:var(--bach-niebieski);color:#fff;}
.bach-os__strzalka:disabled{opacity:.28;cursor:default;}
.bach-os__strzalka--wstecz{left:0;}
.bach-os__strzalka--dalej{right:0;}

@media (max-width:720px){
  .bach-os{padding:0 8px;}
  .bach-os__wpis{flex-basis:80vw;}
  /* Strzałki znikają: na telefonie przesuwa się palcem, a przyciski zjadłyby miejsce
     na treść i nachodziły na kafelki.                                                 */
  .bach-os__strzalka{display:none;}
}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= ZESPÓŁ ================= */

/* Osoby w siatce, nie w karuzeli. U Fundacji DSN ta sekcja jest przesuwana, bo osób
   jest tam dużo; przy pięciu chowanie ich za strzałkami znaczy, że część zespołu
   nigdy nie zostanie zobaczona. Gdy skład urośnie, warto to zmienić.                 */
.bach-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}

.bach-osoba{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bach-osoba:hover{transform:translateY(-4px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr, przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                      */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały. Pusta ramka wygląda na brak, inicjały wyglądają na decyzję. */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bach-niebieski) 0%,var(--bach-niebieski) 100%);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:.02em;
}

.bach-osoba__tresc{padding:24px 24px 26px;}
.bach-osoba__tresc h3{font-size:20px;margin-bottom:4px;}
.bach-osoba__funkcja{
  color:var(--bach-niebieski)!important;font-size:14px;font-weight:700;
  letter-spacing:.01em;margin-bottom:12px;
}
.bach-osoba__biogram{font-size:15.5px;margin:0;}

/* ================= PODSTRONA PROJEKTU ================= */

/* Liczba w nagłówku. Jedna, potwierdzona — nie pas czterech kafelków, bo trzy z nich
   trzeba by wypełnić szacunkami.                                                     */
.bach-projekt-liczba{
  display:inline-flex;align-items:baseline;gap:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:9px 22px;margin-bottom:22px;
}
.bach-projekt-liczba b{font-size:24px;font-weight:800;color:#fff;}
.bach-projekt-liczba span{font-size:15px;color:rgba(255,255,255,.9);}

/* Cytat z Pisma. Osobny pas, bo to on ustawia ton całej podstrony.                   */
.bach-cytat{background:var(--bach-bg-soft);padding:56px 0;}
.bach-cytat__tresc{max-width:820px;margin:0 auto;text-align:center;}
#bach-page .bach-cytat__tresc p{
  font-size:clamp(19px,2.4vw,26px);line-height:1.45;font-style:italic;font-weight:600;
  color:var(--bach-niebieski)!important;margin:0 0 14px;
}
.bach-cytat__zrodlo{
  font-size:14px;font-weight:700;letter-spacing:.01em;
  color:var(--bach-niebieski);
}

/* Plany na rok — lista ze znakami wyboru zamiast kropek. Kropka mówi „punkt listy",
   ptaszek mówi „to zrobimy", a o to w tej sekcji chodzi.                              */
.bach-plany{max-width:820px;margin:0 auto;}
#bach-page .bach-plany ul{display:grid;gap:14px;}
#bach-page .bach-plany li{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--bach-line);border-radius:12px;
  padding:16px 20px;font-size:16px;
}
.bach-plany__znak{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(216,30,91,.16);color:var(--bach-akcent);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.bach-plany__znak svg{width:15px;height:15px;}

/* Zdjęcie na całą szerokość kolumny treści.                                           */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= PODSTRONA „POZNAJ NAS" ================= */

/* ---------- KOTWICE SEKCJI ----------

   Pięć tematów leży jeden pod drugim i wszystkie są widoczne od razu. Nic się nie
   przełącza i nic nie chowa: pozycje w menu głównym pod „Poznaj nas" to skoki do
   miejsc na tej samej stronie. Wejście w „Historia" stawia czytelnika na historii,
   a zespół zostaje wyżej — wystarczy przewinąć do góry.

   Odstęp od góry przy skoku: pasek z logo jest przyklejony do krawędzi ekranu, więc
   bez tego zasłaniałby nagłówek sekcji, na którą czytelnik właśnie wszedł.           */
.bach-kotwica{scroll-margin-top:86px;}

/* Płynne dojście zamiast skoku. Przy skoku o kilka ekranów czytelnik traci orientację,
   gdzie się znalazł — przewinięcie pokazuje mu, że został na tej samej stronie.

   Reguła pyta o ustawienie systemowe: część osób wyłącza ruch na stronach, bo wywołuje
   u nich zawroty głowy. Dla nich zostaje skok natychmiastowy.                        */
@media (prefers-reduced-motion:no-preference){
  html:has(#bach-page){scroll-behavior:smooth;}
}

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= ZESPÓŁ ================= */

/* Osoby w siatce, nie w karuzeli. U Fundacji DSN ta sekcja jest przesuwana, bo osób
   jest tam dużo; przy pięciu chowanie ich za strzałkami znaczy, że część zespołu
   nigdy nie zostanie zobaczona. Gdy skład urośnie, warto to zmienić.                 */
.bach-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}

.bach-osoba{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bach-osoba:hover{transform:translateY(-4px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr, przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                      */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały. Pusta ramka wygląda na brak, inicjały wyglądają na decyzję. */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bach-niebieski) 0%,var(--bach-niebieski) 100%);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:.02em;
}

.bach-osoba__tresc{padding:24px 24px 26px;}
.bach-osoba__tresc h3{font-size:20px;margin-bottom:4px;}
.bach-osoba__funkcja{
  color:var(--bach-niebieski)!important;font-size:14px;font-weight:700;
  letter-spacing:.01em;margin-bottom:12px;
}
.bach-osoba__biogram{font-size:15.5px;margin:0;}

/* ================= HISTORIA — KAFELKI Z ROKIEM ================= */

/* Bez linii osi i bez układania na przemian. Rok stoi nad kafelkiem, więc nie ma jak
   wejść na zdjęcie ani na tekst — a wysokość kafelka zależy od długości opisu, więc
   każde położenie roku „na wspólnej linii" prędzej czy później na coś nachodziło.     */
.bach-os{
  position:relative;
  margin-top:10px;
  padding:0 clamp(12px,4vw,64px);
}

.bach-os__tor{
  display:flex;
  align-items:stretch;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:4px 4px 26px;
  scrollbar-width:thin;
}
.bach-os__tor:focus-visible{outline:3px solid var(--bach-niebieski);outline-offset:4px;}

.bach-os__wpis{
  flex:0 0 clamp(240px,26vw,300px);
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
}

.bach-os__data{
  align-self:flex-start;
  background:var(--bach-niebieski);color:#fff;font-weight:800;font-size:14px;
  padding:6px 16px;border-radius:999px;white-space:nowrap;margin-bottom:12px;
}

/* Kafelki równej wysokości w całym rzędzie — inaczej dolne krawędzie skaczą przy
   opisach różnej długości i rząd wygląda na rozsypany.                               */
.bach-os__karta{
  flex:1;
  background:#fff;border:1px solid var(--bach-line);border-radius:12px;overflow:hidden;
  box-shadow:var(--bach-shadow);
  display:flex;flex-direction:column;
}
.bach-os__foto{aspect-ratio:16/10;overflow:hidden;background:var(--bach-bg-soft);flex:0 0 auto;}
#bach-page .bach-os__foto img{width:100%;height:100%;object-fit:cover;display:block;}
.bach-os__tresc{padding:16px 18px 18px;}
.bach-os__tresc h3{font-size:16.5px;margin-bottom:6px;}
.bach-os__tresc p{font-size:14.5px;margin:0;line-height:1.6;}

.bach-os__strzalka{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--bach-line);
  background:#fff;color:var(--bach-niebieski);font-size:26px;line-height:1;cursor:pointer;
  box-shadow:var(--bach-shadow);transition:.18s;
}
.bach-os__strzalka:hover:not(:disabled){background:var(--bach-niebieski);color:#fff;}
.bach-os__strzalka:disabled{opacity:.28;cursor:default;}
.bach-os__strzalka--wstecz{left:0;}
.bach-os__strzalka--dalej{right:0;}

@media (max-width:720px){
  .bach-os{padding:0 8px;}
  .bach-os__wpis{flex-basis:80vw;}
  /* Strzałki znikają: na telefonie przesuwa się palcem, a przyciski zjadłyby miejsce
     na treść i nachodziły na kafelki.                                                 */
  .bach-os__strzalka{display:none;}
}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= ZESPÓŁ ================= */

/* Osoby w siatce, nie w karuzeli. U Fundacji DSN ta sekcja jest przesuwana, bo osób
   jest tam dużo; przy pięciu chowanie ich za strzałkami znaczy, że część zespołu
   nigdy nie zostanie zobaczona. Gdy skład urośnie, warto to zmienić.                 */
.bach-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}

.bach-osoba{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bach-osoba:hover{transform:translateY(-4px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr, przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                      */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały. Pusta ramka wygląda na brak, inicjały wyglądają na decyzję. */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bach-niebieski) 0%,var(--bach-niebieski) 100%);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:.02em;
}

.bach-osoba__tresc{padding:24px 24px 26px;}
.bach-osoba__tresc h3{font-size:20px;margin-bottom:4px;}
.bach-osoba__funkcja{
  color:var(--bach-niebieski)!important;font-size:14px;font-weight:700;
  letter-spacing:.01em;margin-bottom:12px;
}
.bach-osoba__biogram{font-size:15.5px;margin:0;}

/* ================= PODSTRONA PROJEKTU ================= */

/* Liczba w nagłówku. Jedna, potwierdzona — nie pas czterech kafelków, bo trzy z nich
   trzeba by wypełnić szacunkami.                                                     */
.bach-projekt-liczba{
  display:inline-flex;align-items:baseline;gap:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:9px 22px;margin-bottom:22px;
}
.bach-projekt-liczba b{font-size:24px;font-weight:800;color:#fff;}
.bach-projekt-liczba span{font-size:15px;color:rgba(255,255,255,.9);}

/* Cytat z Pisma. Osobny pas, bo to on ustawia ton całej podstrony.                   */
.bach-cytat{background:var(--bach-bg-soft);padding:56px 0;}
.bach-cytat__tresc{max-width:820px;margin:0 auto;text-align:center;}
#bach-page .bach-cytat__tresc p{
  font-size:clamp(19px,2.4vw,26px);line-height:1.45;font-style:italic;font-weight:600;
  color:var(--bach-niebieski)!important;margin:0 0 14px;
}
.bach-cytat__zrodlo{
  font-size:14px;font-weight:700;letter-spacing:.01em;
  color:var(--bach-niebieski);
}

/* Plany na rok — lista ze znakami wyboru zamiast kropek. Kropka mówi „punkt listy",
   ptaszek mówi „to zrobimy", a o to w tej sekcji chodzi.                              */
.bach-plany{max-width:820px;margin:0 auto;}
#bach-page .bach-plany ul{display:grid;gap:14px;}
#bach-page .bach-plany li{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--bach-line);border-radius:12px;
  padding:16px 20px;font-size:16px;
}
.bach-plany__znak{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(216,30,91,.16);color:var(--bach-akcent);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.bach-plany__znak svg{width:15px;height:15px;}

/* Zdjęcie na całą szerokość kolumny treści.                                           */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= PODSTRONA „POZNAJ NAS" ================= */

/* Motto organizacji — największy tekst po nagłówku. */
.bach-motto{text-align:center;max-width:820px;margin:0 auto var(--odstep-duzy);}
#bach-page .bach-motto p{
  font-size:clamp(20px,2.6vw,28px);line-height:1.35;font-weight:700;
  color:var(--bach-ink)!important;margin:0;
}

.bach-proza{max-width:720px;margin:0 auto;}
#bach-page .bach-proza p{font-size:var(--tekst-tresc);margin-bottom:1em;}

/* Cytat z Pisma — zielona kreska zastąpiona turkusem z palety. */
.bach-verse{
  border-left:4px solid var(--bach-turkus);background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;padding:18px 22px;margin:var(--odstep-duzy) auto 0;max-width:720px;
}
#bach-page .bach-verse p{font-style:italic;font-size:var(--tekst-tresc);margin:0 0 6px;}
.bach-verse__zrodlo{display:block;font-size:13.5px;font-weight:700;color:var(--bach-niebieski);}

/* Wizja — punkty zamiast ściany tekstu. */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--odstep-duzy);}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:20px 18px;display:flex;gap:14px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  background:rgba(63,177,181,.14);color:var(--bach-turkus);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:20px;height:20px;}
.bach-vision__item h3{margin-bottom:5px;}
.bach-vision__item p{font-size:var(--tekst-podpis);margin:0;}

.bach-termin{
  display:inline-flex;align-items:center;gap:8px;background:var(--bach-niebieski);color:#fff;
  border-radius:999px;padding:7px 18px;font-size:var(--tekst-podpis);font-weight:700;
  margin-bottom:var(--odstep-maly);
}

/* Status prawny — najczęściej zadawane pytanie, więc dostaje własną, wyraźną ramkę. */
.bach-prawo{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;max-width:820px;margin:0 auto;box-shadow:var(--bach-shadow);
}
.bach-prawo__nie{
  background:var(--bach-bg-soft);border-left:4px solid var(--bach-akcent);
  border-radius:0 10px 10px 0;padding:14px 18px;margin-bottom:var(--odstep-duzy);
}
#bach-page .bach-prawo__nie p{margin:0;font-size:var(--tekst-tresc);}
.bach-prawo__podstawy{margin-top:var(--odstep-duzy);}
#bach-page .bach-prawo__podstawy ul{display:grid;gap:9px;}
#bach-page .bach-prawo__podstawy li{
  display:flex;gap:11px;align-items:flex-start;font-size:var(--tekst-podpis);
  padding-left:0;
}
.bach-prawo__znak{
  flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:rgba(29,103,205,.12);
  color:var(--bach-niebieski);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;margin-top:1px;
}
.bach-prawo__dane{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--odstep-sredni);
  margin-top:var(--odstep-duzy);padding-top:var(--odstep-sredni);border-top:1px solid var(--bach-line);
}
.bach-prawo__dana span{display:block;font-size:13px;color:#7C8B99;}
.bach-prawo__dana strong{font-size:var(--tekst-tresc);color:var(--bach-ink);}

/* ================= ZESPÓŁ ================= */

/* Karty w siatce, po trzy w rzędzie na szerokim ekranie. Zdjęcie na górze w kwadracie,
   pod nim imię, funkcja i biogram — układ z kart Ambasadorów Dobra u Fundacji DSN.

   Karuzeli nie ma celowo: przy pięciu osobach chowanie części zespołu za strzałkami
   znaczy, że ktoś z nich nigdy nie zostanie zobaczony.                                */
.bach-osoby{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--odstep-duzy);
  max-width:1000px;
  margin:0 auto;
}

.bach-osoba{
  background:#fff;
  border:1px solid var(--bach-line);
  border-radius:var(--bach-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.bach-osoba:hover{transform:translateY(-3px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                       */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały na motywie przewodnim. Pusta ramka wygląda na brak,
   inicjały wyglądają na decyzję.                                                      */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:var(--bach-gradient);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(34px,5vw,48px);font-weight:700;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(19,36,51,.18);
}

.bach-osoba__tresc{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.bach-osoba__tresc h3{font-size:var(--tekst-h3);margin-bottom:2px;}

/* Funkcja pod nazwiskiem: turkus, bez wersalików. Kolor wystarczy, żeby oddzielić ją
   od biogramu — wielkie litery przy pięciu kartach obok siebie robią szum.            */
.bach-osoba__funkcja{
  color:var(--bach-turkus)!important;font-size:var(--tekst-podpis);font-weight:700;
  margin-bottom:10px;
}
.bach-osoba__biogram{
  font-size:var(--tekst-podpis);margin:0;
  padding-top:10px;border-top:1px solid var(--bach-line);
}

/* ================= OŚ CZASU ================= */

/* Kafelki z rokiem nad każdym, przewijane w poziomie. Bez linii osi i bez układania
   na przemian: data położona na wspólnej linii z kartami zawsze w końcu ląduje
   na zdjęciu albo na tekście, bo wysokość karty zależy od długości opisu.             */
.bach-os{position:relative;margin-top:6px;padding:0 clamp(10px,4vw,56px);}

.bach-os__tor{
  display:flex;align-items:stretch;gap:var(--odstep-sredni);
  overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 4px 22px;scrollbar-width:thin;
}
.bach-os__tor:focus-visible{outline:3px solid var(--bach-niebieski);outline-offset:4px;}

.bach-os__wpis{
  flex:0 0 clamp(230px,25vw,280px);scroll-snap-align:center;
  display:flex;flex-direction:column;
}

.bach-os__data{
  align-self:flex-start;background:var(--bach-niebieski);color:#fff;font-weight:700;
  font-size:var(--tekst-podpis);padding:5px 14px;border-radius:999px;white-space:nowrap;
  margin-bottom:10px;
}

/* Kafelki równej wysokości w rzędzie — bez tego dolne krawędzie skaczą przy opisach
   różnej długości.                                                                    */
.bach-os__karta{
  flex:1;background:#fff;border:1px solid var(--bach-line);border-radius:12px;
  overflow:hidden;box-shadow:var(--bach-shadow);display:flex;flex-direction:column;
}
.bach-os__foto{aspect-ratio:16/10;overflow:hidden;background:var(--bach-bg-soft);flex:0 0 auto;}
#bach-page .bach-os__foto img{width:100%;height:100%;object-fit:cover;display:block;}
.bach-os__tresc{padding:14px 16px 16px;}
.bach-os__tresc h3{font-size:16px;margin-bottom:5px;}
.bach-os__tresc p{font-size:14px;margin:0;line-height:1.55;}

.bach-os__strzalka{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--bach-line);
  background:#fff;color:var(--bach-niebieski);font-size:24px;line-height:1;cursor:pointer;
  box-shadow:var(--bach-shadow);transition:.18s;
}
.bach-os__strzalka:hover:not(:disabled){background:var(--bach-niebieski);color:#fff;}
.bach-os__strzalka:disabled{opacity:.25;cursor:default;}
.bach-os__strzalka--wstecz{left:0;}
.bach-os__strzalka--dalej{right:0;}

@media (max-width:720px){
  .bach-os{padding:0 6px;}
  .bach-os__wpis{flex-basis:80vw;}
  .bach-os__strzalka{display:none;}
}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= ZESPÓŁ ================= */

/* Osoby w siatce, nie w karuzeli. U Fundacji DSN ta sekcja jest przesuwana, bo osób
   jest tam dużo; przy pięciu chowanie ich za strzałkami znaczy, że część zespołu
   nigdy nie zostanie zobaczona. Gdy skład urośnie, warto to zmienić.                 */
.bach-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}

.bach-osoba{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bach-osoba:hover{transform:translateY(-4px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr, przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                      */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały. Pusta ramka wygląda na brak, inicjały wyglądają na decyzję. */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bach-niebieski) 0%,var(--bach-niebieski) 100%);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:.02em;
}

.bach-osoba__tresc{padding:24px 24px 26px;}
.bach-osoba__tresc h3{font-size:20px;margin-bottom:4px;}
.bach-osoba__funkcja{
  color:var(--bach-niebieski)!important;font-size:14px;font-weight:700;
  letter-spacing:.01em;margin-bottom:12px;
}
.bach-osoba__biogram{font-size:15.5px;margin:0;}

/* ================= PODSTRONA PROJEKTU ================= */

/* Liczba w nagłówku. Jedna, potwierdzona — nie pas czterech kafelków, bo trzy z nich
   trzeba by wypełnić szacunkami.                                                     */
.bach-projekt-liczba{
  display:inline-flex;align-items:baseline;gap:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:9px 22px;margin-bottom:22px;
}
.bach-projekt-liczba b{font-size:24px;font-weight:800;color:#fff;}
.bach-projekt-liczba span{font-size:15px;color:rgba(255,255,255,.9);}

/* Cytat z Pisma. Osobny pas, bo to on ustawia ton całej podstrony.                   */
.bach-cytat{background:var(--bach-bg-soft);padding:56px 0;}
.bach-cytat__tresc{max-width:820px;margin:0 auto;text-align:center;}
#bach-page .bach-cytat__tresc p{
  font-size:clamp(19px,2.4vw,26px);line-height:1.45;font-style:italic;font-weight:600;
  color:var(--bach-niebieski)!important;margin:0 0 14px;
}
.bach-cytat__zrodlo{
  font-size:14px;font-weight:700;letter-spacing:.01em;
  color:var(--bach-niebieski);
}

/* Plany na rok — lista ze znakami wyboru zamiast kropek. Kropka mówi „punkt listy",
   ptaszek mówi „to zrobimy", a o to w tej sekcji chodzi.                              */
.bach-plany{max-width:820px;margin:0 auto;}
#bach-page .bach-plany ul{display:grid;gap:14px;}
#bach-page .bach-plany li{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--bach-line);border-radius:12px;
  padding:16px 20px;font-size:16px;
}
.bach-plany__znak{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(216,30,91,.16);color:var(--bach-akcent);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.bach-plany__znak svg{width:15px;height:15px;}

/* Zdjęcie na całą szerokość kolumny treści.                                           */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;}

/* Karta zakończonej akcji. Wyraźnie inna niż sekcje o tym, co trwa — szara plakietka
   z datami i chłodniejszy niebieski przy liczbach. Zakończona akcja opisana tak samo
   jak bieżąca zawsze w końcu wprowadza kogoś w błąd.                                 */
.bach-zamkniete{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:32px 30px;box-shadow:var(--bach-shadow);
}
.bach-zamkniete + .bach-zamkniete{margin-top:26px;}
.bach-zamkniete__okres{
  display:inline-block;background:#ECF1F6;color:var(--bach-body);
  font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
.bach-zamkniete h3{font-size:22px;margin-bottom:12px;}
.bach-zamkniete p{font-size:16px;}
.bach-zamkniete__liczby{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;}
.bach-zamkniete__liczba{
  display:inline-flex;align-items:baseline;gap:6px;
  background:var(--bach-bg-soft);border:1px solid var(--bach-line);border-radius:999px;
  padding:8px 16px;font-size:14px;color:var(--bach-body);
}
.bach-zamkniete__liczba b{font-size:17px;font-weight:800;color:var(--bach-niebieski);}
.bach-zamkniete__cytat{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--bach-line);
  font-style:italic;font-size:15px;color:var(--bach-body);
}
.bach-zamkniete__cytat span{
  display:block;margin-top:6px;font-style:normal;font-weight:700;font-size:13px;
  letter-spacing:.01em;color:var(--bach-niebieski);
}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= ZESPÓŁ ================= */

/* Osoby w siatce, nie w karuzeli. U Fundacji DSN ta sekcja jest przesuwana, bo osób
   jest tam dużo; przy pięciu chowanie ich za strzałkami znaczy, że część zespołu
   nigdy nie zostanie zobaczona. Gdy skład urośnie, warto to zmienić.                 */
.bach-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}

.bach-osoba{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bach-osoba:hover{transform:translateY(-4px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr, przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                      */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały. Pusta ramka wygląda na brak, inicjały wyglądają na decyzję. */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bach-niebieski) 0%,var(--bach-niebieski) 100%);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:.02em;
}

.bach-osoba__tresc{padding:24px 24px 26px;}
.bach-osoba__tresc h3{font-size:20px;margin-bottom:4px;}
.bach-osoba__funkcja{
  color:var(--bach-niebieski)!important;font-size:14px;font-weight:700;
  letter-spacing:.01em;margin-bottom:12px;
}
.bach-osoba__biogram{font-size:15.5px;margin:0;}


/* Trzy powody, ułożone jako karty. Każdy mówi o kimś konkretnym, nie o organizacji —
   darczyńca wspiera ludzi, a nie instytucję.                                        */
.bach-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;}
.bach-why__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:28px 26px;
}
.bach-why__item h3{font-size:19px;margin-bottom:10px;}
.bach-why__item p{font-size:15.5px;margin:0;}

/* Jak działa wsparcie stałe — numerowane kroki. Numer jest osobnym elementem,
   a nie znakiem listy, żeby dało się go ubrać w kółko i nie zniknął przy zawijaniu. */
.bach-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.bach-step{display:flex;gap:16px;align-items:flex-start;}
.bach-step__num{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bach-akcent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.bach-step h3{font-size:17px;margin-bottom:6px;}
.bach-step p{font-size:15px;margin:0;}

/* Tytuł przelewu — pole do przepisania. Krój maszynowy, bo tu liczy się każdy znak. */
.bach-tytul{
  background:var(--bach-bg-soft);border:1px dashed var(--bach-line);border-radius:10px;
  padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.5px;color:var(--bach-ink);margin:0 0 8px;
}

/* Podziękowanie. Osobny pas, bo po podaniu numerów kont trzeba powiedzieć jedno
   zdanie po ludzku — inaczej strona kończy się tabelką z cyframi.                   */
.bach-thanks{
  background:var(--bach-akcent);text-align:center;padding:56px 0;
}
.bach-thanks h2{color:#fff!important;font-size:clamp(24px,3.2vw,36px);margin-bottom:10px;}
#bach-page .bach-thanks p{color:rgba(255,255,255,.95)!important;max-width:640px;margin:0 auto;font-size:17px;}

@media (max-width:900px){
}

/* ================= STYLE TYLKO DLA PODSTRONY "MISJA I WIZJA" ================= */

/* Motto organizacji. Największy tekst na stronie po nagłówku — to zdanie jest
   punktem wyjścia dla wszystkiego, co niżej.                                       */
.bach-motto{
  text-align:center;max-width:900px;margin:0 auto 44px;
}
#bach-page .bach-motto p{
  font-size:clamp(22px,3.2vw,34px);line-height:1.35;font-weight:800;font-style:italic;
  color:var(--bach-niebieski)!important;margin:0;
}

/* Akapity misji. Węższa kolumna niż domyślna — dłuższy tekst czyta się źle,
   gdy wiersz ma pół ekranu szerokości.                                             */
.bach-proza{max-width:760px;margin:0 auto;}
#bach-page .bach-proza p{font-size:clamp(16.5px,1.8vw,18.5px);margin-bottom:1.15em;}

/* Cytat biblijny. Zielona kreska z boku zamiast cudzysłowu — cudzysłów w tekście,
   który sam jest w cudzysłowie, robi się nieczytelny.                              */
.bach-verse{
  border-left:4px solid var(--bach-akcent);
  background:var(--bach-bg-soft);
  border-radius:0 12px 12px 0;
  padding:22px 26px;margin:34px auto 0;max-width:760px;
}
#bach-page .bach-verse p{font-style:italic;font-size:17px;margin:0 0 8px;}
.bach-verse__zrodlo{
  display:block;font-size:14px;font-weight:700;font-style:normal;
  color:var(--bach-niebieski);letter-spacing:.01em;
}

/* Wizja jako lista punktów, a nie ściana tekstu. Każdy punkt to jedno zobowiązanie
   na przyszłość — w ciągłym akapicie zlewają się i nie da się ich zapamiętać.      */
.bach-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.bach-vision__item{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  padding:26px 24px;display:flex;gap:16px;align-items:flex-start;
}
.bach-vision__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(29,103,205,.10);color:var(--bach-niebieski);
  display:flex;align-items:center;justify-content:center;
}
.bach-vision__icon svg{width:21px;height:21px;}
.bach-vision__item h3{font-size:17px;margin-bottom:6px;}
.bach-vision__item p{font-size:15.5px;margin:0;}

/* Data celu. Wyróżniona, bo wizja bez terminu jest życzeniem.                      */
.bach-termin{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--bach-niebieski);color:#fff;border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;margin-bottom:16px;
}

/* Zdjęcie w sekcji misji.                                                          */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{
  background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;
}

/* ================= ZESPÓŁ ================= */

/* Osoby w siatce, nie w karuzeli. U Fundacji DSN ta sekcja jest przesuwana, bo osób
   jest tam dużo; przy pięciu chowanie ich za strzałkami znaczy, że część zespołu
   nigdy nie zostanie zobaczona. Gdy skład urośnie, warto to zmienić.                 */
.bach-osoby{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}

.bach-osoba{
  background:#fff;border:1px solid var(--bach-line);border-radius:var(--bach-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bach-osoba:hover{transform:translateY(-4px);box-shadow:var(--bach-shadow-lg);}

/* Kwadratowy kadr, przycinany do środka — twarze na zdjęciach o różnych proporcjach
   ustawiają się wtedy na tej samej wysokości i rząd nie faluje.                      */
.bach-osoba__foto{aspect-ratio:1/1;overflow:hidden;background:var(--bach-bg-soft);}
#bach-page .bach-osoba__foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Bez zdjęcia — inicjały. Pusta ramka wygląda na brak, inicjały wyglądają na decyzję. */
.bach-osoba__foto--brak{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bach-niebieski) 0%,var(--bach-niebieski) 100%);
}
.bach-osoba__foto--brak span{
  color:#fff;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:.02em;
}

.bach-osoba__tresc{padding:24px 24px 26px;}
.bach-osoba__tresc h3{font-size:20px;margin-bottom:4px;}
.bach-osoba__funkcja{
  color:var(--bach-niebieski)!important;font-size:14px;font-weight:700;
  letter-spacing:.01em;margin-bottom:12px;
}
.bach-osoba__biogram{font-size:15.5px;margin:0;}

/* ================= PODSTRONA PROJEKTU ================= */

/* Liczba w nagłówku. Jedna, potwierdzona — nie pas czterech kafelków, bo trzy z nich
   trzeba by wypełnić szacunkami.                                                     */
.bach-projekt-liczba{
  display:inline-flex;align-items:baseline;gap:9px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:9px 22px;margin-bottom:22px;
}
.bach-projekt-liczba b{font-size:24px;font-weight:800;color:#fff;}
.bach-projekt-liczba span:only-child{font-size:15px;font-weight:700;color:#fff;}
.bach-projekt-liczba span{font-size:15px;color:rgba(255,255,255,.9);}

/* Cytat z Pisma. Osobny pas, bo to on ustawia ton całej podstrony.                   */
.bach-cytat{background:var(--bach-bg-soft);padding:56px 0;}
.bach-cytat__tresc{max-width:820px;margin:0 auto;text-align:center;}
#bach-page .bach-cytat__tresc p{
  font-size:clamp(19px,2.4vw,26px);line-height:1.45;font-style:italic;font-weight:600;
  color:var(--bach-niebieski)!important;margin:0 0 14px;
}
.bach-cytat__zrodlo{
  font-size:14px;font-weight:700;letter-spacing:.01em;
  color:var(--bach-niebieski);
}

/* Plany na rok — lista ze znakami wyboru zamiast kropek. Kropka mówi „punkt listy",
   ptaszek mówi „to zrobimy", a o to w tej sekcji chodzi.                              */
.bach-plany{max-width:820px;margin:0 auto;}
#bach-page .bach-plany ul{display:grid;gap:14px;}
#bach-page .bach-plany li{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--bach-line);border-radius:12px;
  padding:16px 20px;font-size:16px;
}
.bach-plany__znak{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(216,30,91,.16);color:var(--bach-akcent);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.bach-plany__znak svg{width:15px;height:15px;}

/* Zdjęcie na całą szerokość kolumny treści.                                           */
.bach-foto{
  max-width:1000px;margin:0 auto 52px;border-radius:var(--bach-radius);
  overflow:hidden;box-shadow:var(--bach-shadow-lg);
}
#bach-page .bach-foto img{width:100%;height:auto;display:block;}
.bach-foto__podpis{background:#fff;padding:14px 20px;font-size:14px;color:var(--bach-body);text-align:center;}