:root{
  --cream:#f0eddf;
  --cream-2:#eae6d6;
  --ink:#26241d;
  --ink-soft:#2b2620;
  --muted:#9c968a;
  --muted-2:#b3ad9f;
  --title-mute:#b7b1a3;
  --title-dark:#33322b;
  --green:#c2d9ae;
  --green-in:#d3e4c6;
  --green-title:#a9c091;
  --yellow:#ece2b0;
  --pill-border:#d8d2c0;
  --radius:26px;
  --overlay:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.75) 100%);
  /* Wspólny rytm pionowy między sekcjami — jeden token dla WSZYSTKICH stron/podstron.
     Odstęp między sekcjami = --sec-gap; przy modelu padding-block każda sekcja dostaje połowę.
     Desktop podbity 96 → 136 (10.08.2026): sekcje „O nas / Wydarzenia / Nasza oferta"
     zlewały się w jedną ścianę treści. Mobile bez zmian — tam ciasno jest z natury. */
  --sec-gap:136px;
}
@media(max-width:1100px){:root{--sec-gap:112px}}
@media(max-width:900px){:root{--sec-gap:88px}}
@media(max-width:560px){:root{--sec-gap:72px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:500;line-height:1.12}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:500;font-size:16px;border-radius:40px;
  padding:16px 30px;transition:.2s;text-align:center}
.btn-dark{background:var(--ink-soft);color:#fff}
.btn-dark:hover{background:#000}
.btn-light{background:#fff;color:var(--ink-soft);border:1.5px solid transparent}
.btn-light:hover{background:transparent;color:#fff;border-color:#fff}
.btn-yellow{background:#F2ECD1;color:var(--ink-soft);border:1px solid #E3D6B4;padding:20px 40px;font-size:18px}
.btn-yellow:hover{background:#AB8441;color:#fff;border-color:#AB8441}

/* ---------- Hero ---------- */
/* Full-bleed hero (styl „Paramount”): zdjęcie/wideo na całą szerokość i wysokość ekranu,
   wielki napis w lewym-dolnym rogu (1. słowo wypełnione, 2. konturowe), pigułki kontaktu. */
.hero{position:relative;width:100%;max-width:none;margin:0;padding:0}
.hero-inner{position:relative;width:100%;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#3a3d31}
/* Slider */
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#3a3d31}
.hero-slide::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--overlay)}
/* Dodatkowy scrim: przyciemnienie lewej-dolnej strefy pod wielki napis (czytelność). */
.hero-inner::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,16,12,.5) 0%,rgba(18,16,12,.2) 38%,rgba(18,16,12,0) 62%)}
/* Delikatny pasek postępu slajdera — cienka linia na górze hero. */
.hero-progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:6;pointer-events:none;background:rgba(255,255,255,.14)}
.hero-progress>i{display:block;height:100%;width:0;background:rgba(255,255,255,.8)}
/* Kropki slajdera — pasek na dole (lewy dół), niezależnie od wyśrodkowanego napisu. */

/* Wygląd 1:1 ze strzałkami sekcji „Wydarzenia” (.ev-arrow). */
/* Delikatne strzałki lewo/prawo — na bokach, wyśrodkowane w pionie. */
.hero-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:5;
  display:flex;justify-content:space-between;padding:0 clamp(10px,1.6vw,18px);pointer-events:none}
.hero-nav[hidden]{display:none}
.hero-arrow{pointer-events:auto;padding:8px;border:none;background:none;color:#fff;opacity:.8;
  display:grid;place-items:center;cursor:pointer;line-height:0;transition:opacity .25s ease,transform .25s ease}
.hero-arrow:hover:not(:disabled){opacity:1;transform:scale(1.12)}
.hero-arrow:disabled{opacity:.28;cursor:default}
.hero-arrow .fi{display:inline-flex;line-height:0;font-size:42px;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.nav{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:34px 52px}
.logo{display:flex}
.logo img,.logo svg{height:96px;width:auto}
.menu{display:flex;gap:16px}
.menu a{font-family:'Inter',sans-serif;font-weight:600;color:#fff;font-size:19px;letter-spacing:.2px;
  padding:16px 32px;border:1.5px solid transparent;border-radius:40px;transition:.2s}
.menu a:hover{border-color:#fff}
/* Lewy-dolny pierwszy plan (stały) — wielki napis + podpis + pigułki + kropki. */
.hero-lead{position:absolute;left:80px;right:80px;top:50%;transform:translateY(calc(-50% + 100px));z-index:4;max-width:1040px;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:42px}
/* Napis-marka ukryty wizualnie — zostaje jako <h1> dla SEO / czytników ekranu. */
.hero-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Opis slajdu = główny, największy tekst hero. */
.hero-tagline{margin:0;color:#fff;font-size:clamp(30px,3.8vw,54px);line-height:1.15;max-width:840px;min-height:2.3em;
  font-weight:500;letter-spacing:-.015em;text-shadow:0 2px 22px rgba(0,0,0,.42)}
/* Zmiana slajdu = zwykły fade tekstu (10.08.2026 — efekt „maszyny do pisania"
   z literami po kolei był męczący przy każdym przewinięciu). JS zdejmuje .is-in,
   po zakończeniu przejścia podmienia treść i zakłada klasę z powrotem. */
.hero-tagline{opacity:0}
.hero-tagline.is-in{opacity:1}
.hero-tagline{transition:opacity .45s ease}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* Domyślnie ukryte (bez flasha na starcie). Chowanie = natychmiast (powrót do tej reguły,
   brak transition), pojawianie = delikatny fade przez .is-shown po „wpisaniu” tekstu. */
.hero-pills{display:flex;flex-wrap:wrap;gap:14px;opacity:0}
.hero-pills.is-shown{opacity:1;transition:opacity .45s ease}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:20px 42px;border-radius:40px;
  border:1.5px solid transparent;font-family:'Inter',sans-serif;font-weight:500;font-size:18px;transition:background .25s ease,color .25s ease,border-color .25s ease}
.hero-pill .fi{display:inline-flex;font-size:16px;line-height:0;color:#b8944e}
/* Wygląd jak .news-row button: białe, bez bordera, ciemny hover #2D2D2D. */
.hero-pill--white{background:#fff;color:var(--ink-soft);border:none}
.hero-pill--white .fi{color:var(--ink-soft)}
.hero-pill--white:hover{background:#2D2D2D;color:#fff}
.hero-pill--white:hover .fi{color:#fff}
/* Strzałka „przewiń niżej” — na dole-środku, tylko na szerokich ekranach. */
.hero-scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:44px;z-index:5;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  border:1.5px solid rgba(255,255,255,.5);background:rgba(18,16,12,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.2s;animation:heroBob 2.2s ease-in-out infinite}
.hero-scroll .fi{display:inline-flex;font-size:22px;line-height:0}
.hero-scroll:hover{background:#fff;color:#2a2824;border-color:#fff}
@keyframes heroBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
.hero-social{position:absolute;right:52px;bottom:52px;z-index:5;display:flex;gap:22px}
.hero-social a{color:#fff;display:inline-flex}
.hero-social svg{width:26px;height:26px}
.hero-social .fi{font-size:24px}
.hero-social a:hover{animation:social-bounce .6s ease}

/* Mobilny przycisk „plus” + wysuwane menu z góry */
.nav-burger{display:none;width:44px;height:44px;flex-shrink:0;border:0;padding:0;cursor:pointer;
  background:transparent;color:#fff;align-items:center;justify-content:center}
.nav-burger .fi{display:inline-flex;font-size:30px;line-height:0;transition:transform .35s ease}
.hero.menu-open .nav-burger .fi{transform:rotate(135deg)}
.nav-drop{display:none;position:absolute;top:0;left:0;right:0;z-index:6;background:var(--cream);
  border-radius:0 0 28px 28px;padding:56px 22px 26px;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 22px 50px rgba(0,0,0,.28)}
.hero.menu-open .nav-drop{transform:translateY(0)}
.nd-close{position:absolute;top:14px;right:14px;width:46px;height:46px;border:0;background:transparent;
  color:#2A2824;cursor:pointer;display:grid;place-items:center;padding:0}
.nd-close .fi{display:inline-flex;line-height:0;font-size:30px;transform:rotate(45deg)}
.nd-links{margin-bottom:20px}
.nd-links a{display:block;color:#2A2824;font-family:'Inter',sans-serif;font-weight:400;font-size:32px;
  line-height:1;padding:13px 10px;text-decoration:none}
.nd-links a:active{opacity:.6}
/* Adres pod listą linków — oddzielony kreską od nawigacji. */
.nd-actions{display:flex;flex-direction:column;gap:12px}
.nd-row2{display:flex;gap:12px}
.nd-row2 .nd-btn{flex:1;min-width:0;font-size:15px;padding:15px 10px;gap:8px}
.nd-btn{display:flex;align-items:center;justify-content:center;gap:10px;color:#2A2824;text-decoration:none;
  font-family:'Inter',sans-serif;font-weight:600;font-size:16px;padding:16px 18px;
  background:#efe8d3;border:1px solid #e3d9bf;border-radius:50px;transition:background .2s ease}
.nd-btn:active{background:#e7dcc0}
.nd-btn svg{width:20px;height:20px;flex-shrink:0}
.nd-maps{background:#fff;border-color:#eae4d4;padding:15px}
.nd-maps-logo{height:24px;width:auto;display:block}
@keyframes social-bounce{
  0%{transform:translateY(0)}25%{transform:translateY(-8px)}45%{transform:translateY(0)}
  62%{transform:translateY(-4px)}80%{transform:translateY(0)}90%{transform:translateY(-1px)}100%{transform:translateY(0)}
}

/* Scroll reveal — tekst zapala się słowo po słowie (opacity ustawia JS) */
.reveal-text .rw{color:rgb(42,40,36);will-change:opacity}
.reveal-text .rw-b{font-weight:700}
@media(prefers-reduced-motion:reduce){
  .reveal-text .rw{opacity:1!important}
  .hero-social a:hover{animation:none}
  .hero-scroll{animation:none}
  .hero-pills{animation:none}
  /* Bez animacji tekst po prostu jest — JS i tak pomija fade przy tym ustawieniu. */
  .hero-tagline{transition:none;opacity:1}
}

/* ---------- Section ---------- */
section{scroll-margin-top:20px}
.sec-title{font-size:52px;font-weight:500;color:var(--title-mute);letter-spacing:-.5px}
.sec-title.dark{color:var(--title-dark)}
.sec-sub{color:var(--muted);font-size:18px;margin-top:6px}

/* O nas */
.onas{padding:calc(var(--sec-gap)/2) 0}
.onas .cols{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:34px}
.onas p{color:var(--muted);font-size:19px;text-align:justify}
.onas .btn{margin-top:40px}

/* Wydarzenia — featured slajd (zdjęcie + treść) z karuzelą */
.events{padding:calc(var(--sec-gap)/2) 0}
.events-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:40px}
.events-head-txt{min-width:0}

/* Prawa strona nagłówka sekcji: „Wszystkie wydarzenia" + strzałki karuzeli. */
.events-head-act{display:flex;align-items:center;gap:14px;flex-shrink:0}
/* Przycisk korzysta z metryki .ev-btn2 (wspólnej dla przycisków wydarzeń),
   dopisana jest tylko ikona — w index.html jest regular-rounded, nie bold. */
.ev-all{white-space:nowrap}
.ev-all i{font-size:18px;line-height:0}
/* Licznik slajdów „2/3". Cyfry o stałej szerokości, żeby przy przewijaniu
   karuzeli strzałki nie drgały w bok przy zmianie 9→10. */
.ev-count{font-size:16px;font-weight:500;color:var(--ink-soft);white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";min-width:44px;text-align:center}
.ev-count[hidden]{display:none}

.ev-arrows{display:flex;gap:14px;flex-shrink:0}
.ev-arrows[hidden]{display:none}
.ev-arrow{width:56px;height:56px;border-radius:50%;border:none;background:var(--cream-2);color:var(--ink-soft);
  display:grid;place-items:center;cursor:pointer;transition:background .2s,opacity .2s}
.ev-arrow:hover{background:#e0dbc9}
.ev-arrow:disabled{opacity:.35;cursor:default}
.ev-arrow svg{width:22px;height:22px}

.ev-carousel{position:relative}
.ev-viewport{overflow:hidden}
/* Slajdy stackowane w gridzie: wchodzący przenika i unosi się o 24px.
   Wychodzący gaśnie szybciej (.2s) niż wchodzący się pojawia (.45s), więc nie
   nakładają się widocznie i nic nie „mruga". Zero jazdy w bok. */
.ev-slides{display:grid}
/* Wychodzący: sam fade-out (.2s), bez ruchu — nie „opada". */
.ev-slide{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease-in,visibility 0s linear .2s}
/* Wchodzący: fade-in + wjazd z boku (32px), startuje gdy poprzedni już zgasł.
   Kierunek zależy od nawigacji — .ev-slides.is-back = cofamy się, slajd wjeżdża z lewej. */
.ev-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;
  animation:evSlideIn .5s cubic-bezier(.22,1,.36,1) .1s both}
.ev-slides.is-back .ev-slide.is-active{animation-name:evSlideInBack}
@keyframes evSlideIn{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes evSlideInBack{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}

/* `display:block` jest tu KONIECZNE — od 13.08.2026 to <a>, a element liniowy
   zignorowałby aspect-ratio i kafelek zniknąłby do wysokości tekstu (którego nie ma). */
.ev-photo{display:block;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:5/4;
  background-size:cover;background-position:center;background-color:#e4e0d2}
/* Na hover zdjęcie się NIE powiększa (decyzja użytkownika 13.08.2026) — przez
   kadr przejeżdża tylko smuga światła. Animujemy `transform` na warstwie
   ::after, a nie `background-position` czy `left`: przesunięcie idzie po GPU
   i nie wymusza przeliczania układu strony.
   `inset:-30%` daje smudze zapas poza kadrem, żeby wjeżdżała i wyjeżdżała
   całkiem poza obrazkiem mimo skosu. */
.ev-photo::after{
  content:'';position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,0) 58%);
  transform:translateX(-115%);
  transition:transform 1.5s cubic-bezier(.25,.46,.45,.94);
}
.ev-photo:hover::after,.ev-photo:focus-visible::after{transform:translateX(115%)}
/* Sam błysk to za mało jako sygnał „to jest klikalne" dla klawiatury. */
.ev-photo:focus-visible{outline:3px solid var(--title-dark);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .ev-photo::after{transition:none}
  .ev-photo:hover::after{transform:translateX(-115%)}
}

.ev-content{min-width:0}

@media(prefers-reduced-motion:reduce){
  .ev-slide{transition:opacity .01s}
  .ev-slide.is-active,.ev-slides.is-back .ev-slide.is-active{animation:none;opacity:1;transform:none}
}
.ev-day{font-size:15px;letter-spacing:.14em;color:var(--ink-soft);font-weight:500;margin-bottom:20px}
.ev-name{font-size:52px;font-weight:500;line-height:1.08;color:var(--title-dark);margin-bottom:16px}
.ev-name a{color:inherit;text-decoration:none;transition:color .25s ease}
/* Czerń, nie akcent — `--accent` nie jest zdefiniowany w tym arkuszu, więc
   działał zapasowy oliwkowy z panelu, obcy dla tej strony (decyzja użytkownika). */
.ev-name a:hover{color:#000}
.ev-sub{font-size:20px;color:#6a655b;margin-bottom:24px}
.ev-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.ev-tags span{border:1px solid #2b2620;border-radius:999px;padding:8px 17px;font-size:14px;color:var(--ink-soft);white-space:nowrap;line-height:1em}
.ev-btns{display:flex;flex-wrap:wrap;gap:14px}
/* Metryki wspólne dla przycisków wydarzeń w całym serwisie: .ev-btn2 (strona główna),
   .evl-btn (lista /wydarzenia/) i .evx-btn w hero podstrony — muszą się zgadzać. */
.ev-btn2{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:18px 30px;line-height:1;font-size:16px;font-weight:500;
  cursor:pointer;border:1.5px solid transparent;text-decoration:none;font-family:'Inter',sans-serif;transition:background .2s,color .2s,border-color .2s}
.ev-btn2--dark{background:var(--ink-soft);color:#fff}
.ev-btn2--dark:hover{background:#2D2D2D;color:#fff;border-color:#2D2D2D}
.ev-btn2--ghost{background:transparent;color:var(--ink-soft);border-color:var(--pill-border)}
.ev-btn2--ghost:hover{background:#2D2D2D;color:#fff;border-color:#2D2D2D}
.ev-btn2 svg{width:20px;height:20px}
.ev-empty{padding:34px 4px;color:var(--muted);font-size:16px}

/* generyczna strzałka (inne sekcje) */
.arrow{width:40px;height:40px;border-radius:50%;background:#dcd7c7;color:#8a8477;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.arrow svg{width:18px;height:18px}

/* ---------- Nagłówek podstron (poza homepage) ---------- */
.site-header{background:var(--cream);position:sticky;top:0;z-index:60}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;height:112px;transition:height .25s ease}
.site-header .site-logo{display:flex}
.site-header .site-logo img{height:58px;width:auto;transition:height .25s ease}
/* Po scrollu: tylko mniejsza wysokość. Bez cienia — na stronie głównej nagłówek
   też go nie ma, a menu ma wyglądać wszędzie tak samo. */
.site-header.scrolled .site-header-inner{height:78px}
.site-header.scrolled .site-menu a{padding:16px 26px}
.site-header.scrolled .site-logo img{height:46px}
.site-menu{display:flex;gap:26px;align-items:center}
.site-menu a{font-family:'Inter',sans-serif;font-weight:600;color:#2A2824;font-size:18px;letter-spacing:.2px;
  padding:16px 32px;border:1.5px solid transparent;border-radius:40px;transition:.2s}
.site-menu a:hover{border-color:#2A2824}
.site-menu a.active{background:#2A2824;color:#fff}
.site-burger{display:none;background:none;border:none;cursor:pointer;color:#2a2824;padding:6px;line-height:0}
.site-burger svg{width:30px;height:30px}
/* Menu mobilne podstron = ten sam panel .nav-drop co na stronie głównej.
   Ten sam próg (1100px) i ta sama klasa „menu-open", więc serwis ma jeden
   komponent menu zamiast dwóch. Panel jest pozycjonowany względem .site-header. */
/* Panel zamknięty stoi tuż NAD nagłówkiem (translateY(-100%)), a jego cień pada
   w dół — czyli prosto na pasek nagłówka. Na stronie głównej nie widać tego, bo
   .hero przycina panel; nagłówek podstrony niczego nie przycina. Dlatego cień
   włączamy dopiero razem z otwarciem menu. */
/* Plusik na podstronach jest ciemny — leży na kremowym pasku, a nie na wideo
   jak na stronie głównej (tam bazowa reguła .nav-burger daje kolor biały). */
.site-header .nav-burger{color:#2A2824}
.site-header .nav-drop{top:0;box-shadow:none}
.site-header.menu-open .nav-drop{transform:translateY(0);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.site-header.menu-open .nav-burger .fi{transform:rotate(135deg)}

@media(max-width:1100px){
  .site-header-inner{height:72px}
  .site-header .site-logo img{height:46px}
  .site-header.scrolled .site-header-inner{height:62px}
  .site-header.scrolled .site-logo img{height:40px}
  /* poziome menu i stary burger znikają — zastępuje je panel */
  .site-menu{display:none}
  .site-burger{display:none}
  .site-header .nav-burger{display:inline-flex}
  .site-header .nav-drop{display:block}
}

/* Oferta */
.offer{padding:calc(var(--sec-gap)/2) 0}
.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.off-card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:350/408;display:block;
  background-color:#2f3327}
/* Bez zoomu na hover: okładki mają tylko 300x450 px, więc skalowanie dawało pikselozę
   i szarpanie (przeglądarka doostrzała rozmytą teksturę w trakcie ruchu). */
.off-card .off-img{position:absolute;inset:0;max-width:none;z-index:0;background-size:cover;background-position:center}
.off-card::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--overlay);
  transition:background .45s ease}
.off-card span{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-size:19px;
  font-family:'Inter',sans-serif;font-weight:500;line-height:1.2;max-width:88%}

/* Kafelek: tytuł i opis WIDOCZNE ZAWSZE. Gradient stały, ale lekki — ciemno tylko
   w dolnym pasku pod tekstem, góra zdjęcia bez przyciemnienia. */
.off-card--rich::after{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.12) 52%,transparent 72%)}
/* Grid: tytuł na całą szerokość (wiersz 1), niżej opis i kółko ze strzałką obok siebie. */
.off-card--rich .off-content{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;
  display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:end}
/* Tytuł zajmuje oba słupki gridu — pełna szerokość kafelka, kółko go nie zwęża. */
.off-card--rich .off-title{position:static;left:auto;bottom:auto;display:block;grid-column:1/-1;color:#fff;font-size:24px;
  font-family:'Inter',sans-serif;font-weight:400;line-height:1.2;max-width:100%}
.off-reveal{display:block}
.off-reveal-in{min-height:0}
.off-desc{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:400;line-height:1.3;margin:10px 0 0;color:#f5f3ea}
/* Kółko ze strzałką: drugi słupek, w jednej linii z opisem. Hover = tło na białe. */
.off-card--rich .off-go{position:static;left:auto;bottom:auto;max-width:none;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;
  transition:background .25s ease,color .25s ease}
.off-card--rich .off-go svg{width:20px;height:20px}
.off-card--rich:hover .off-go{background:#fff;color:var(--title-dark)}

/* Opinie + Facebook ------------------------------------------------------
   JEDNA kolumna: same opinie z Google (decyzja użytkownika 13.08.2026 —
   karta z wtyczką Facebooka usunięta). Gdy opinii nie ma, JS chowa całą
   sekcję, bo nie zostaje już nic, co miałoby ją wypełnić. */
.social{padding:calc(var(--sec-gap)/2) 0}
.social-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;
  align-items:start;margin-top:38px}

.rev{background:#fff;border-radius:28px;padding:34px 36px;display:flex;flex-direction:column;
  min-height:100%;border:1px solid #e7e2d2}
.rev-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rev-glogo{width:26px;height:26px;display:block}
.rev-title{color:var(--muted);font-size:15px}
.rev-score{display:flex;align-items:center;gap:9px}
.rev-score b{font-size:26px;font-weight:600;color:var(--title-dark);line-height:1}
.rev-count{color:var(--muted);font-size:14px}
.rev-stars{color:#e8a33d;display:inline-flex;gap:2px;font-size:15px;line-height:1}
.rev-stars i{line-height:1}

/* Karty jadą jedna po drugiej w torze przesuwanym transformem — ten sam wzorzec
   co karuzela wydarzeń (#evTrack), więc bez dodatkowej biblioteki. */
.rev-view{overflow:hidden;margin-top:22px;flex:1}
.rev-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.rev-card{flex:0 0 100%;min-width:0;padding-right:2px}
.rev-card .rev-stars{margin-bottom:12px}
.rev-text{color:var(--ink-soft);font-size:17px;line-height:1.65;white-space:pre-line}
.rev-who{display:flex;align-items:center;gap:12px;margin-top:20px}
.rev-ava{width:42px;height:42px;border-radius:50%;background:var(--cream-2);color:var(--title-dark);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;flex:0 0 auto}
.rev-name{font-weight:600;color:var(--title-dark);font-size:16px}
.rev-date{color:var(--muted);font-size:13px}

/* Własne display:flex bije [hidden]{display:none} z arkusza przeglądarki — bez tych
   trzech reguł atrybut hidden z JS-a nic by nie schował (ta sama pułapka, co przy
   zasłonie cookies). Dotyczy elementów, które JS pokazuje warunkowo. */
.rev-score[hidden],.rev-nav[hidden],.rev-dots[hidden]{display:none}
.rev-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;min-height:34px}
.rev-dots{display:flex;flex-wrap:wrap;gap:8px}
.rev-dots button{width:9px;height:9px;flex:0 0 auto;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#ded8c7;transition:background .25s ease,width .25s ease}
.rev-dots button.is-active{background:var(--title-dark);width:22px;border-radius:999px}
.rev-nav{display:flex;gap:6px}
.rev-arrow{width:34px;height:34px;border-radius:50%;border:1px solid #e0dac9;background:transparent;
  color:var(--title-dark);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:18px;transition:background .25s ease,color .25s ease,opacity .25s ease}
.rev-arrow:hover:not(:disabled){background:var(--ink-soft);color:#fff;border-color:var(--ink-soft)}
.rev-arrow:disabled{opacity:.35;cursor:default}
.rev-all{display:inline-flex;align-items:center;gap:9px;margin-top:24px;align-self:flex-start;
  color:var(--title-dark);font-size:15.5px;font-weight:500;text-decoration:none;
  border-bottom:1px solid #ded8c7;padding-bottom:4px;transition:border-color .25s ease}
.rev-all:hover{border-color:var(--title-dark)}

/* Widget Trustindex — ta sama „karta” co nasze opinie, żeby po przełączeniu
   źródła sekcja nie zmieniała charakteru. Zasłona zgód przykrywa cały kafelek. */
.rev-ti{background:#fff;border-radius:28px;padding:28px;border:1px solid #e7e2d2;min-height:320px}
.rev-ti[hidden]{display:none}
/* .cc-veil jest pozycjonowana absolutnie na inset:0, więc kafelek musi mieć własną
   wysokość — inaczej pusty .ti-host zwinąłby go do zera i zasłony nie byłoby widać. */
.rev-ti.is-blocked > .ti-host{display:none}
.rev-ti .cc-veil{border-radius:inherit}
@media(max-width:560px){.rev-ti{padding:22px;border-radius:24px}}


@media(max-width:1100px){
  .social-grid{gap:30px}
}
@media(max-width:560px){
  .rev{padding:26px 22px;border-radius:24px}
  .rev-text{font-size:16px}
}

/* Newsletter */
.news-outer{padding:calc(var(--sec-gap)/2) 0}
.news{background:var(--green);border-radius:28px;padding:52px 56px}
.news h2{font-size:44px;font-weight:500;color:var(--green-title)}
.news .lead{color:var(--ink-soft);font-size:20px;margin-top:8px}
.news .hint{color:#5f6b4f;font-size:13px;margin:22px 0 12px}
/* Layout tagów siedzi na .chips-in (wewnętrzny wrapper), bo .chips służy
   na mobile do animacji rozwijania przez grid-template-rows. */
.chips-in{display:flex;flex-wrap:wrap;gap:14px}
.chip{border:1.5px solid var(--ink-soft);background:transparent;color:var(--ink-soft);
  border-radius:11px;padding:11px 18px;font-size:15px;font-family:'Inter';cursor:pointer;transition:.15s}
.chip.active{background:var(--ink-soft);color:#fff;border-color:var(--ink-soft)}
.chip.active::before{content:'✓';margin-right:7px;font-weight:700}
@media(hover:hover){.chip:hover{background:var(--ink-soft);color:#fff}}
/* Zwijana lista tematów — przełącznik pokazywany dopiero na mobile (patrz @media 640). */
.chips-toggle{display:none}
/* <form> jest teraz kontenerem (JS dokleja do niego ukryte pola kategorii),
   a samą „pigułką" jest .news-row — dzięki temu zgoda RODO mieści się pod spodem. */
.news-form{margin-top:26px}
/* Pełna pigułka — zaokrąglenie kontenera musi się zgadzać z przyciskiem w środku,
   inaczej zielona krawędź wygląda na mniej okrągłą niż biały przycisk. */
.news-row{background:var(--green-in);border-radius:999px;padding:10px;display:flex;gap:10px;align-items:center}
.news-row input[type=email]{flex:1;border:none;background:transparent;border-radius:40px;padding:22px 26px;font-size:17px;color:var(--ink-soft);outline:none;font-family:'Inter'}
.news-row input[type=email]::placeholder{color:#7f8a72}
.news-row button{background:#fff;color:var(--ink-soft);border:none;border-radius:40px;padding:22px 46px;
  font-family:'Inter';font-weight:500;font-size:18px;cursor:pointer;transition:background .25s ease,color .25s ease}
.news-row button:hover{background:#2D2D2D;color:#fff}
.news-row button:disabled{opacity:.65;cursor:default;background:#fff;color:var(--ink-soft)}
/* Zgoda marketingowa — wzorowana na .k-rodo z formularza kontaktowego. */
.news-rodo{display:flex;gap:11px;margin-top:16px;align-items:flex-start;text-align:left}
.news-rodo input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:#5f6b4f}
.news-rodo label{font-size:12px;line-height:1.5;color:#5f6b4f}
.news-rodo a{color:var(--ink-soft);text-decoration:underline}
.news-rodo a:hover{color:#000}

/* Feature image */
.feature{padding:calc(var(--sec-gap)/2) 0}
.feature img,.feature video{width:100%;aspect-ratio:16/9;height:auto;border-radius:26px;object-fit:cover;display:block}

/* mvw */
.mvw{padding:calc(var(--sec-gap)/2) 0}
.mvw .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:60px}
.mvw h3{font-size:30px;font-weight:500;color:var(--title-mute);margin-bottom:16px}
.mvw p{color:var(--muted);font-size:17px}
.mvw-cta{text-align:center;padding:44px 0 10px}

/* Contact CTA */
.cta-outer{padding:calc(var(--sec-gap)/2) 0}
.cta{background:#fff;border-radius:30px;padding:64px 40px;text-align:center}
.cta h2{font-size:34px;font-weight:500;color:var(--muted-2)}
.cta p{color:var(--muted-2);font-size:24px;max-width:1000px;margin:14px auto 0;font-family:'Inter';font-weight:400}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:44px;flex-wrap:wrap}
.cta-actions .sep{color:var(--muted);font-size:18px}
.cta-actions svg{width:22px;height:22px}

/* Footer */
footer{padding:64px 0 70px}
.foot-top{display:flex;align-items:center;gap:28px;flex-wrap:nowrap;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:26px}
.foot-brand .logo img{height:70px;display:block}
.foot-logo{display:inline-flex}
.foot-info{font-family:'Inter',sans-serif;font-size:16px;font-weight:500;color:var(--ink);line-height:30px}
.foot-contact{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;line-height:30px}
.foot-contact strong{font-weight:700}
.foot-pill{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid transparent;border-radius:40px;
  padding:0 22px;height:60px;font-family:'Inter',sans-serif;font-size:16px;white-space:nowrap;flex-wrap:nowrap;
  transition:background .2s,border-color .2s}
.foot-pill-social{background:#f0eddf;border:1px solid #d6ceaa}
a.foot-pill:hover{background:#f0eddf;border-color:#d6ceaa}
.foot-social{display:flex;gap:6px;align-items:center}
.foot-social a{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;transition:color .2s}
.foot-social a:hover{color:#D6CEAA}
.foot-social svg{width:18px;height:18px}
.foot-social a .fi{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.gmaps{display:flex;align-items:center;gap:8px;font-family:'Inter';font-weight:500}
.gmaps-logo{height:20px;width:auto;display:block}
.gmaps b{color:#4285F4}.gmaps .g2{color:#EA4335}.gmaps .g3{color:#FBBC05}.gmaps .g4{color:#34A853}
.foot-nav{display:flex;gap:32px;margin:40px 0 22px;font-size:16px}
.foot-nav a:first-child{color:var(--muted)}
.foot-nav a{font-weight:500}
.foot-chips{display:flex;flex-wrap:wrap;gap:8px}
.foot-chips a{border:1px solid var(--pill-border);border-radius:40px;padding:16px 24px;font-size:14px;background:#f4f1e7}
.foot-chips a:hover{background:#fff}
.foot-legal{margin-top:38px;display:flex;gap:40px;font-size:14px;color:var(--muted)}
.foot-legal a:hover{color:var(--ink)}
.foot-cols{display:flex;gap:28px;align-items:center;flex-wrap:nowrap}
@media(max-width:1300px){.foot-top,.foot-cols{flex-wrap:wrap}}

/* Responsive */
@media(max-width:1100px){
  .hero-scroll{display:none}
  .sec-title{font-size:40px}
  .onas .cols{grid-template-columns:1fr;gap:30px}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .mvw .cols{grid-template-columns:1fr;gap:36px}
  .menu{display:none}
  .nav-burger{display:inline-flex}
  .nav-drop{display:block}
  .logo img,.logo svg{height:58px}
  .nav{padding:24px 30px}
  .foot-top,.foot-cols{flex-wrap:wrap}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .nav{padding:22px}
  .sec-title{font-size:32px}
  .offer-grid{grid-template-columns:1fr}
  .off-card{aspect-ratio:4/3}
  /* nagłówek + strzałki w jednej linii także na mobile */
  .events-head{flex-direction:row;align-items:center;gap:14px;margin-bottom:28px}
  .sec-sub{line-height:1.3}
  .ev-arrows{align-self:center;gap:10px}
  .ev-arrow{width:40px;height:40px}
  .ev-arrow svg{width:18px;height:18px}
  .ev-slide{grid-template-columns:1fr;gap:24px}
  .ev-photo{aspect-ratio:16/11}
  .ev-name{font-size:30px}
  .ev-sub{font-size:17px;margin-bottom:18px}
  .ev-day{font-size:13px;letter-spacing:.12em;margin-bottom:8px}
  .ev-tags{margin-bottom:22px;gap:6px}
  .ev-tags span{padding:5px 11px;font-size:11px}
  /* oba przyciski w jednej linii, dzielą całą szerokość */
  .ev-btns{width:100%;flex-wrap:nowrap;gap:8px}
  .ev-btn2{padding:0 10px;height:46px;line-height:1;font-size:13px;gap:7px;min-width:0;flex:1 1 0;
    white-space:nowrap;overflow:hidden;justify-content:center;box-sizing:border-box}
  .ev-btn2 svg{width:16px;height:16px;flex:0 0 auto}
  /* Na telefonie obok tytułu sekcji zostają WYŁĄCZNIE strzałki: przycisk
     „Wszystkie wydarzenia" i licznik „2/3" zabierały szerokość, a do listy
     prowadzi też pozycja „Wydarzenia" w menu. */
  .events-head-act{gap:10px}
  .ev-all,.ev-count{display:none}
  .off-card span,.off-card--rich .off-title{font-size:16px}
  .off-desc{font-size:13px;margin:8px 0 0}
  .off-card--rich .off-content{column-gap:10px}
  /* opis przyklejony do tytułu: bez tego krótki (1-linijkowy) opis był
     dociskany do dołu wiersza wyznaczonego przez kółko → różne odstępy */
  .off-card--rich .off-reveal{align-self:start}
  .off-card--rich .off-go{width:40px;height:40px;align-self:end}
  .news,.cta{padding:34px 22px}
  .news h2{font-size:26px}
  .news .lead{font-size:15px;margin-top:6px}
  .news .hint{font-size:12px;margin:18px 0 10px}
  /* Tematy zwinięte pod jeden przycisk — 8 pełnowymiarowych tagów zajmowało
     na telefonie ~8 rzędów. Rozwijanie animowane przez grid-template-rows. */
  .chips-toggle{display:flex;align-items:center;gap:10px;width:100%;
    background:var(--green-in);border:0;border-radius:14px;padding:14px 16px;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:15px;font-weight:500;color:var(--ink-soft);text-align:left}
  .chips-toggle-lbl{flex:1;min-width:0}
  .chips-toggle-n{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
    background:var(--ink-soft);color:#fff;font-size:12px;font-weight:600;
    display:inline-flex;align-items:center;justify-content:center}
  .chips-toggle i{flex:0 0 auto;display:inline-flex;font-size:16px;line-height:0;transition:transform .3s ease}
  .chips-toggle[aria-expanded="true"] i{transform:rotate(180deg)}

  .chips{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .3s ease,margin-top .3s ease,opacity .2s ease;
    opacity:0;margin-top:0;overflow:hidden}
  .chips.is-open{grid-template-rows:1fr;opacity:1;margin-top:12px}
  .chips-in{gap:10px;min-height:0;overflow:hidden}
  .chip{font-size:13px;padding:9px 13px;border-radius:9px}
  /* Na mobile pigułka rozjeżdża się w pion (input nad przyciskiem) — tam pełne
     zaokrąglenie wyglądałoby jak balon, więc wracamy do łagodnego promienia. */
  .news-row{flex-direction:column;padding:8px;border-radius:26px}
  .news-row input[type=email]{padding:16px 18px;font-size:15px}
  .news-row button{width:100%;padding:15px 26px;font-size:15px}
  .news-rodo label{font-size:11.5px}
  .cta{padding:36px 22px}
  .cta h2{font-size:24px}
  .cta p{font-size:15px;margin-top:10px}
  .cta-actions{flex-direction:column;gap:10px;margin-top:26px}
  .cta-actions .sep{font-size:13px;color:var(--muted);margin:2px 0}
  .cta-actions .btn-yellow{width:100%;justify-content:center;padding:16px 24px;font-size:15px}
  /* Stopka */
  footer{padding:44px 0 40px}
  .foot-top{flex-direction:column;align-items:stretch;gap:22px}
  .foot-cols{flex-direction:column;align-items:stretch;gap:16px}
  .foot-brand{flex-direction:column;align-items:center;gap:12px;text-align:center;width:100%}
  .foot-brand .logo{justify-content:center}
  .foot-brand .logo img{height:66px}
  .foot-info{text-align:center;font-size:14px;line-height:1.6}
  .foot-contact{text-align:center;font-size:15px;line-height:1.7}
  .foot-pill{width:100%;justify-content:center}
  .foot-nav{gap:12px 18px;margin:26px 0 16px;font-size:13px;flex-wrap:wrap;justify-content:center}
  .foot-chips{justify-content:center;gap:7px}
  .foot-chips a{font-size:11px;padding:8px 13px}
  .foot-legal{flex-direction:column;gap:8px;align-items:center;text-align:center;font-size:12px;margin-top:24px}
}

/* wąskie telefony – sekcja Wydarzenia */
@media(max-width:400px){
  .ev-btn2{padding:0 8px;height:42px;font-size:12px;gap:6px}
  .ev-btn2 svg{width:15px;height:15px}
  .ev-tags{gap:5px}
  .ev-tags span{padding:4px 9px;font-size:10px}
  .ev-arrow{width:36px;height:36px}
  .ev-arrows{gap:8px}
}

.newsletter{padding:0 0 64px}
.nl-box{background:#2A2824;border-radius:26px;padding:48px 46px;color:#FFFDF4}
.nl-head{text-align:center;max-width:660px;margin:0 auto 26px}
.nl-head h2{font-family:'Inter',sans-serif;font-weight:600;font-size:30px;line-height:1.2;margin:0 0 8px;color:#FFFDF4}
.nl-head p{font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;color:#d8d2c0;margin:0}
.nl-head .rw{color:#FFFDF4}
.nl-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 18px;margin:0 0 24px}
.nl-chk{display:flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-size:14px;color:#e7e2d7;cursor:pointer}
.nl-chk input{width:17px;height:17px;flex-shrink:0;accent-color:#AB8441;cursor:pointer}
.nl-row{display:flex;gap:12px;max-width:560px;margin:0 auto}
.nl-input{flex:1;min-width:0;height:54px;border:1px solid #4a4640;border-radius:50px;background:#fff;padding:0 22px;font-family:'Inter',sans-serif;font-size:15px;color:#26241d}
.nl-input::placeholder{color:#a49e91}
.nl-input:focus{outline:none;border-color:#AB8441}
.nl-submit{height:54px;padding:0 32px;border:1px solid #AB8441;border-radius:50px;background:#AB8441;color:#FFFDF4;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:background .25s,color .25s;flex-shrink:0}
.nl-submit:hover{background:transparent;color:#AB8441}
/* Komunikat po zapisie. Odstęp górny jest tu, a nie na #nlMsg, bo kontener
   bywa pusty — pusty div z marginesem robiłby dziurę pod chipsami. */
.nl-alert{max-width:560px;margin:22px auto 0;border:1px solid transparent;border-radius:14px;
  padding:14px 20px;font-family:'Inter',sans-serif;font-size:15px;line-height:1.45;text-align:center;
  animation:nlAlertIn .35s ease-out both}
.nl-alert--ok{background:#e7f0dd;border-color:#cfe0bd;color:#3f5a2c}
.nl-alert--err{background:#f6e2df;border-color:#eccbc5;color:#7a3a30}
@keyframes nlAlertIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nl-alert{animation:none}}
@media(max-width:820px){.nl-cats{grid-template-columns:repeat(2,1fr)}.nl-box{padding:36px 24px}}
@media(max-width:560px){.nl-cats{grid-template-columns:1fr}.nl-row{flex-direction:column}.nl-submit{width:100%}}

@media(max-width:820px){
  .hero-inner{height:100vh;height:100svh;min-height:520px;border-radius:0}
  .nav{padding:18px 18px}
  .logo img,.logo svg{height:48px}
  .hero-lead{left:22px;right:22px;top:50%;bottom:auto;transform:translateY(-50%);gap:30px}
  .hero-tagline{font-size:clamp(25px,6.6vw,40px);max-width:none}
  .hero-pill{padding:14px 24px;font-size:15px}
  /* Social skrajnie po lewej u dołu, pod napisem; strzałka scroll ukryta. */
  .hero-social{left:22px;right:auto;bottom:24px;gap:20px}
  .hero-social svg,.hero-social .fi{width:24px;height:24px;font-size:24px}
  .hero-scroll,.hero-nav{display:none}
}
@media(max-width:560px){
  .hero-lead{gap:16px}
  .hero-pills{gap:10px}
  .hero-pill{padding:13px 22px;font-size:14px}
  .hero-social{left:18px;bottom:22px;gap:16px}
}