*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  color:var(--text-body);background:var(--biel);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--granat)}
.kontener{width:min(1180px,100% - 40px);margin-inline:auto}

/* --- Typografia -------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;color:var(--granat);
  line-height:var(--lh-heading);letter-spacing:.06em;text-transform:uppercase;margin:0}
h1{font-size:clamp(26px,3.6vw,var(--fs-3xl));letter-spacing:.04em}
h2{font-size:clamp(22px,2.8vw,var(--fs-2xl))}
h3{font-size:var(--fs-lg);letter-spacing:.05em}
p{margin:0 0 var(--space-4)}
.wstep{font-size:var(--fs-lg);color:var(--tekst)}
.nadtytul{display:block;font-family:var(--font-body);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.16em;text-transform:uppercase;color:var(--trawa700);margin-bottom:var(--space-3)}
.glowa{margin-bottom:var(--space-6)}
.glowa h2::after{content:"";display:block;width:58px;height:3px;background:var(--slonce);margin-top:var(--space-5)}
.glowa--srodek{text-align:center}
.glowa--srodek h2::after{margin-inline:auto}
.drobne{font-size:var(--fs-sm);color:var(--cichy)}

/* --- Naglowek ---------------------------------------------------------- */
.szyld{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--obwodka)}
.szyld .kontener{display:flex;align-items:center;gap:var(--space-4);padding-block:var(--space-3)}
.znak-firmy{display:flex;align-items:center;text-decoration:none;flex:none}
.znak-firmy img{height:66px;width:auto}
.menu{display:none}
.menu a{text-decoration:none;color:var(--granat);font-family:var(--font-heading);font-weight:600;
  font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;padding-block:6px;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--slonce);
  transition:right var(--motion-dur) var(--motion-ease)}
.menu a:hover::after,.menu a[aria-current="page"]::after{right:0}

.szyld-tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--granat);color:#fff;font-weight:700;font-size:var(--fs-sm);
  padding:11px 18px;border-radius:var(--radius-pill);white-space:nowrap}
.szyld-tel:hover{background:var(--granat700)}
.menu-przycisk{flex:none;border:1px solid var(--obwodka);background:#fff;border-radius:12px;
  padding:9px 11px;line-height:0;cursor:pointer;color:var(--granat)}
@media(min-width:1060px){
  .menu-przycisk{display:none}
  .menu{display:flex;gap:var(--space-5);margin-inline:auto}
}
.szuflada{position:fixed;inset:0 0 0 auto;width:min(330px,86vw);background:#fff;z-index:70;
  transform:translateX(102%);transition:transform var(--motion-dur) var(--motion-ease);
  box-shadow:-18px 0 44px rgba(40,30,20,.18);padding:var(--space-6) var(--space-5);overflow-y:auto}
.szuflada.otwarta{transform:none}
.szuflada a{display:block;text-decoration:none;color:var(--granat);font-family:var(--font-heading);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-sm);
  padding:15px 0;border-bottom:1px solid var(--obwodka)}
.szuflada__social{display:flex;gap:var(--space-4);padding-top:var(--space-5)}
.szuflada__social a{border:0;padding:0;color:var(--granat)}
.zaslona{position:fixed;inset:0;background:rgba(20,15,10,.42);z-index:65;opacity:0;visibility:hidden;
  transition:opacity var(--motion-dur) var(--motion-ease)}
.zaslona.widoczna{opacity:1;visibility:visible}
.szuflada__zamknij{margin-bottom:var(--space-4);border:0;background:none;cursor:pointer;color:var(--granat);
  font:inherit;font-size:var(--fs-sm);padding:0}

/* --- Sekcje ------------------------------------------------------------ */
.sekcja{padding-block:clamp(56px,7vw,var(--space-9))}
.sekcja--krem{background:var(--krem)}
.sekcja--granat{background:var(--granat);color:#EDE9E4}
.sekcja--granat h2,.sekcja--granat h3{color:#fff}
.sekcja--granat .nadtytul{color:var(--slonce)}

/* --- Hero -------------------------------------------------------------- */
/* Hero jest jasne, bo zdjecia bohaterow maja biale tlo i wtapiaja sie
   w karte strony bez zadnej ramki. */
.hero{position:relative;overflow:hidden;background:#fff}
.hero__uklad{display:grid;gap:var(--space-6);align-items:center;
  padding-block:clamp(40px,5vw,72px)}
@media(min-width:920px){.hero__uklad{grid-template-columns:1.02fr .98fr;gap:var(--space-7)}}
.hero__tresc{max-width:56ch}
.hero .nadtytul{color:var(--trawa700)}
.hero p{font-size:var(--fs-lg);margin-top:var(--space-5);color:var(--tekst)}
.hero__akcje{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero__obraz img{width:100%;height:auto}
@media(max-width:919px){.hero__obraz{order:-1}}

/* --- Przyciski --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;
  font-size:var(--fs-base);padding:14px 26px;border-radius:var(--radius-pill);
  transition:background var(--motion-dur) var(--motion-ease),color var(--motion-dur) var(--motion-ease)}
.btn--pelny{background:var(--slonce);color:var(--atrament)}
.btn--pelny:hover{background:#E39A00}
.btn--granat{background:var(--granat);color:#fff}
.btn--granat:hover{background:var(--granat700)}
.btn--pusty{border:2px solid #fff;color:#fff}
.btn--pusty:hover{background:#fff;color:var(--granat)}
.btn--obrys{border:2px solid var(--granat);color:var(--granat)}
.btn--obrys:hover{background:var(--granat);color:#fff}
.btn svg{flex:none}

/* --- Dwie sciezki ------------------------------------------------------ */
.sciezki{display:grid;gap:var(--space-6)}
@media(min-width:900px){.sciezki{grid-template-columns:1fr 1fr}}
.sciezka{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);text-decoration:none;color:inherit;
  transition:transform var(--motion-dur) var(--motion-ease)}
.sciezka:hover{transform:translateY(-4px)}
.sciezka__kadr{position:relative;aspect-ratio:4/3;overflow:hidden}
.sciezka__kadr img{width:100%;height:100%;object-fit:cover}
.sciezka__wstega{position:absolute;left:0;right:0;bottom:0;height:8px}
.sciezka--przedszkole .sciezka__wstega{background:var(--trawa)}
.sciezka--poradnia .sciezka__wstega{background:var(--granat)}
.sciezka__tresc{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.sciezka__tresc p{margin:0;color:var(--tekst)}
.sciezka__etykieta{font-family:var(--font-body);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;color:#fff;align-self:flex-start;
  padding:6px 14px;border-radius:var(--radius-pill)}
.sciezka--przedszkole .sciezka__etykieta{background:var(--trawa700)}
.sciezka--poradnia .sciezka__etykieta{background:var(--granat)}
.sciezka__dalej{margin-top:auto;padding-top:var(--space-4);font-weight:700;color:var(--granat)}
.sciezka:hover .sciezka__dalej{color:var(--trawa700)}

/* --- Kafelki ----------------------------------------------------------- */
.siatka{display:grid;gap:var(--space-5)}
@media(min-width:640px){.siatka--2{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.siatka--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.siatka--4{grid-template-columns:repeat(4,1fr)}}
.kafel{background:#fff;border:1px solid var(--obwodka);border-radius:var(--radius-md);
  padding:var(--space-5);box-shadow:var(--shadow-sm);height:100%}
.kafel h3{margin-bottom:var(--space-2)}
.kafel p{margin:0;font-size:var(--fs-sm);color:var(--tekst)}
.kafel__ikona{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:var(--space-4);color:#fff;background:var(--granat)}
.kafel--zielony .kafel__ikona{background:var(--trawa700)}

/* Lista specjalistow */
.lista-specjalistow{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
@media(min-width:760px){.lista-specjalistow{grid-template-columns:1fr 1fr}}
.lista-specjalistow li{display:flex;gap:12px;align-items:flex-start;background:#fff;
  border:1px solid var(--obwodka);border-radius:var(--radius-sm);padding:14px 16px}
.lista-specjalistow b{display:block;color:var(--granat);font-family:var(--font-heading);
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:var(--fs-sm)}
.lista-specjalistow span{font-size:var(--fs-sm);color:var(--tekst)}
.kropka{flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--slonce)}

/* Lista z ptaszkami */
.ptaszki{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ptaszki li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-base)}
.ptaszki svg{flex:none;margin-top:5px;color:var(--trawa)}

/* --- Galeria ----------------------------------------------------------- */
.galeria{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.galeria{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.galeria{grid-template-columns:repeat(4,1fr)}}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;
  transition:transform var(--motion-dur) var(--motion-ease)}
.galeria a{display:block;overflow:hidden;border-radius:var(--radius-md)}
.galeria a:hover img{transform:scale(1.04)}

/* --- Opinie ------------------------------------------------------------ */
/* Opinie jada w torze przewijanym strzalkami. Karta to figure, ktora
   od przegladarki dostaje 40 px marginesu, wiec zerujemy go tutaj. */
.karuzela{position:relative}
.opinie{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:none}
.opinie::-webkit-scrollbar{display:none}
.opinie>*{scroll-snap-align:start;margin:0;flex:0 0 min(86vw,340px)}
@media(min-width:860px){.opinie>*{flex:0 0 calc((100% - 2*var(--space-5))/3)}}
.karuzela__strzalki{display:flex;gap:12px;justify-content:center;margin-top:var(--space-5)}
.karuzela__btn{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-pill);
  cursor:pointer;color:var(--granat);background:#fff;border:1px solid var(--obwodka);
  box-shadow:var(--shadow-sm);transition:background var(--motion-dur) var(--motion-ease),
  color var(--motion-dur) var(--motion-ease)}
.karuzela__btn:hover{background:var(--granat);color:#fff;border-color:var(--granat)}
.opinia{background:#fff;border:1px solid var(--obwodka);border-radius:var(--radius-md);
  padding:var(--space-6);display:flex;flex-direction:column;margin:0;box-shadow:var(--shadow-sm)}
.opinia .gwiazdki{color:var(--slonce);letter-spacing:3px;margin-bottom:var(--space-3)}
.opinia blockquote{margin:0 0 var(--space-4);font-size:var(--fs-sm);color:var(--tekst)}
.opinia figcaption{margin-top:auto;font-weight:700;font-size:var(--fs-sm);color:var(--granat)}
.opinia figcaption span{display:block;font-weight:400;color:var(--cichy);font-size:var(--fs-xs)}

/* --- Pytania ----------------------------------------------------------- */
.pytania{display:grid;gap:var(--space-3)}
.pytanie{background:#fff;border:1px solid var(--obwodka);border-radius:var(--radius-md);padding:0}
.pytanie summary{cursor:pointer;padding:18px 22px;font-family:var(--font-heading);font-weight:600;
  color:var(--granat);letter-spacing:.03em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.pytanie summary::-webkit-details-marker{display:none}
.pytanie summary::after{content:"+";font-size:22px;line-height:1;color:var(--trawa700)}
.pytanie[open] summary::after{content:"\2013"}
.pytanie__tresc{padding:0 22px 20px;font-size:var(--fs-sm);color:var(--tekst)}
.pytanie__tresc p:last-child{margin-bottom:0}

/* --- Kontakt ----------------------------------------------------------- */
.kontakt__siatka{display:grid;gap:var(--space-6)}
@media(min-width:900px){.kontakt__siatka{grid-template-columns:1fr 1fr}}
.dana{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--obwodka);border-radius:var(--radius-md);padding:16px 18px;
  transition:border-color var(--motion-dur) var(--motion-ease)}
a.dana:hover{border-color:var(--granat)}
.dana svg{flex:none;margin-top:3px;color:var(--granat)}
.dana strong{display:block;color:var(--atrament);font-size:var(--fs-base)}
.dana small{display:block;color:var(--cichy);font-size:var(--fs-sm);margin-top:2px}
.karta-oddzialu{background:#fff;border:1px solid var(--obwodka);border-radius:var(--radius-md);
  padding:var(--space-5);display:grid;gap:var(--space-3)}
.karta-oddzialu h3{display:flex;align-items:center;gap:10px}
.karta-oddzialu .pasek{width:26px;height:6px;border-radius:3px;background:var(--trawa)}
.karta-oddzialu--poradnia .pasek{background:var(--granat)}
.godziny{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-sm)}
.godziny li{display:flex;gap:10px;align-items:baseline}
.godziny b{flex:none;min-width:130px;color:var(--atrament);font-weight:600}
.mapa{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--obwodka)}
.mapa iframe{width:100%;height:clamp(240px,26vw,320px);border:0;display:block}

/* --- Uwaga dla klientki ------------------------------------------------ */
.do-uzupelnienia{border:2px dashed var(--slonce);border-radius:var(--radius-md);
  padding:var(--space-5);background:#FFFBF2}
.do-uzupelnienia h3{color:#8A5A00}
.do-uzupelnienia ul{margin:var(--space-3) 0 0;padding-left:20px;font-size:var(--fs-sm);color:var(--tekst)}

/* --- Stopka ------------------------------------------------------------ */
.stopka{background:var(--atrament);color:#D6D0CA;padding-block:var(--space-6);font-size:var(--fs-sm)}
.stopka .kontener{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between}
.stopka a{color:#F0EBE6}
.stopka__demo{color:#A79F98}

/* --- Odslanianie ------------------------------------------------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--motion-ease),transform .6s var(--motion-ease)}
.rv.widac{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}