/* =========================================================================
   Green Lungs · Club 100
   Makieta: Figma "GREEN-LUNGS-design" / page-club-100 (1223:10568), 1440 px
   Wszystkie wartości przeniesione z makiety. Odstępstwa oznaczone [WŁASNE].
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Tokeny */
:root{
  /* Tła */
  --bg-page:        #F7F4EE;   /* wypełnienie ramki page-club-100 */
  --bg-alt:         #F7F4EE;   /* karty na białym tle: pytania FAQ, karta mapy, modal */
  --bg-white:       #FFFFFF;
  --bg-olive:       #424729;
  --bg-glass:       rgba(75,75,75,.6);   /* #4B4B4B @ 60% */
  --bg-glass-nav:   rgba(75,75,75,.01);  /* #4B4B4B @ 1%  */

  /* Tekst */
  --text:           #1C1A1A;
  --text-muted:     #8C8C8C;
  --text-on-dark:   #FFFFFF;
  --text-on-gold:   #000000;

  /* Złoto */
  --gold-ink:       #936002;   /* złoto na jasnym tle */
  --gold-accent:    #FFD079;   /* złoto na ciemnym tle, wypełnienie przycisku */
  --gold-fill:      #FFC14D;
  --gold-line:      #C9A25A;

  /* Linie */
  --line:           #BEBEBE;
  --line-soft:      #E8EDEB;
  --line-track:     #F1F1F1;

  /* Promienie */
  --r-1: 1px;
  --r-2: 2px;
  --r-4: 4px;

  /* Siatka
     [WŁASNE] Na życzenie klienta układ jest płynny: tła sekcji i sekcja hero zawsze
     zajmują pełną szerokość okna, bez żadnego górnego ograniczenia. Ograniczona jest
     wyłącznie treść — kontener zatrzymuje się na 1856 px i zostaje wyśrodkowany,
     czyli przy oknie 1920 px wypada dokładnie margines 32 px z każdej strony.
     Makieta jest zbudowana na 1440 px (kontener 1376 px), dlatego wszystkie sztywne
     szerokości z makiety przeliczono na procenty kontenera 1376 — przy tej szerokości
     układ jest co do piksela zgodny z Figmą, a szerzej skaluje się proporcjonalnie. */
  --page-w:      1440px;
  --container-w: 1856px;   /* 1920 − 2 × 32 */
  --gutter:        32px;
  /* Odległość od krawędzi okna do krawędzi kontenera — dla elementów, które są
     pozycjonowane względem sekcji, a mają się równać do treści (hero). */
  --page-inset:  max(var(--gutter), calc((100% - var(--container-w)) / 2));

  /* Typografia — style tekstu z pliku Figma */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------- 2. Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.03em;
  font-variation-settings:"opsz" 14;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* [WŁASNE] widoczny fokus — w makiecie nie ma stanów interakcji */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-accent);
  outline-offset:2px;
  border-radius:var(--r-2);
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold-accent); color:var(--text-on-gold);
  padding:12px 24px; border-radius:var(--r-2);
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{ left:16px; top:16px; }

/* --------------------------------------------------- 3. Skala typograficzna */
/* H1 — DM Sans Light 56 / 100% / −5% */
.h1{ font-weight:300; font-size:56px; line-height:1; letter-spacing:-.05em; }
/* H2 — DM Sans Light 48 / 100% / −4%, capitalize (styl z makiety) */
.h2{ font-weight:300; font-size:48px; line-height:1; letter-spacing:-.05em; text-transform:capitalize; }
/* Pozostałe style tekstu z makiety (H3 24/100 %/−4 %, H4 20/130 %/−3 %) są
   stosowane bezpośrednio w regułach sekcji — patrz .etap__title, .wood-sales-col__subtitle. */
/* Body L — 20 / 130% / −3% */
.body-l{ font-weight:400; font-size:20px; line-height:1.3; letter-spacing:-.03em; }
/* Body — 16 / 130% / −3% */
.body{ font-weight:400; font-size:16px; line-height:1.3; letter-spacing:-.03em; }
/* Body S — 14 / 130% / −3% */
.body-s{ font-weight:400; font-size:14px; line-height:1.3; letter-spacing:-.03em; }
/* [WŁASNE] Łamanie wierszy.
   balance — wyrównuje długość wierszy w nagłówkach, żeby nie robiła się „schodkowa"
   ostatnia linijka. pretty — pilnuje, żeby na końcu akapitu nie został sam jeden
   wyraz (wdowa). Sierotek, czyli pojedynczych liter na końcu wiersza, CSS nie
   umie — od tego są twarde spacje wstawiane przez tools/typografia.py. */
.h1,.h2,h1,h2,h3,h4{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* Subhead — 14 / 100% / +20%, wersaliki */
.subhead{ font-weight:400; font-size:14px; line-height:1; letter-spacing:.2em; text-transform:uppercase; }
.subhead--gold{ color:var(--gold-accent); }
.subhead--ink{ color:var(--gold-ink); }

/* ------------------------------------------------------------ 4. Przyciski */
/* Button label — DM Sans Medium 16 / 100% / +10%, wersaliki */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:500; font-size:16px; line-height:1;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--r-2); overflow:hidden; white-space:nowrap;
  text-align:center;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn--primary{
  height:40px; padding:0 24px;
  background:var(--gold-accent); color:var(--text-on-gold);
}
/* [WŁASNE] hover/active — w makiecie brak stanów */
.btn--primary:hover{ background:var(--gold-fill); }
.btn--primary:active{ background:#F0B23C; }

.btn--tertiary{
  height:44px; padding:0 35px; border-radius:var(--r-4);
  color:var(--text-on-dark);
}
.btn--tertiary:hover{ color:var(--gold-accent); }

/* ------------------------------------------------------- 5. Siatka sekcji */
.section{ padding:120px var(--gutter) 80px; }
.wrap{ width:100%; max-width:var(--container-w); margin-inline:auto; }

/* ======================================================= site-header 1289:680 */
/* Sam nagłówek jest w makiecie całkowicie przezroczysty — bez tła i bez obwódki.
   [WŁASNE] Jedyna zmiana: position:fixed zamiast absolute, żeby CTA było dostępne
   z każdego ekranu. Żadnej plakietki pod spodem — czytelność linków zapewnia ich
   własne szkło (tło #4B4B4B 30 % + backdrop-blur), tak jak w makiecie. */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:20;
  padding:32px var(--gutter) 0;
  pointer-events:none;   /* przezroczysty pasek nie może przechwytywać kliknięć w treść */
}
.site-header__inner > *,
.site-header .nav-toggle{ pointer-events:auto; }

/* Kotwice muszą zatrzymać się pod przyklejonym nagłówkiem.
   32 px odstępu od góry + 72 px logo = 104 px, plus zapas. */
:target,
main [id]{ scroll-margin-top:120px; }

.site-header__inner{
  max-width:var(--container-w); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  /* min-height, nie height — po powiększeniu logo pasek ma rosnąć razem z nim */
  min-height:48.071px;
}

/* Logo — jeden gotowy plik na wariant, nie składanka z czterech elementów jak w makiecie.
   Źródło ma 1016 × 384 px, więc w nagłówku (190,5 px) wypada 5,3× — ostro na każdym ekranie.
   --k skaluje cały znak: 1 = nagłówek, 1.5695 = stopka (299 px, jak w makiecie),
   .667 = telefon (127 px). Rozmiar w nagłówku powiększony o 50 % na życzenie klienta. */
.logo{ position:relative; --k:1; width:calc(190.5px * var(--k)); height:calc(72px * var(--k)); flex:none; }
.logo--footer{ --k:1.5695; }
.logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* [WŁASNE] Dwa warianty kolorystyczne logo, przełączane razem z nawigacją.
   logo-light = jasny napis, pokazywany na ciemnych sekcjach;
   logo-dark  = ciemny napis, na jasnych sekcjach i w stopce.
   Obie wersje leżą w dokumencie naraz i przenikają się przez opacity — bez migotania
   i bez dociągania pliku w trakcie przewijania. */
.logo__v--light,
.logo__v--dark{ transition:opacity .25s ease; }
.logo__v--dark{ opacity:0; }
.site-header.is-on-light .logo__v--light{ opacity:0; }
.site-header.is-on-light .logo__v--dark { opacity:1; }

/* header-nav 1289:682 */
.header-nav{ display:flex; align-items:center; gap:4px; }

/* Nav link 1185:329 — padding 2/8, tło #4B4B4B @30 %, BACKGROUND_BLUR 13.2 (= blur 6.6),
   obwódka 1 px OUTSIDE: gradient #FFFFFF → #C3C3C3 przy 10 % krycia, promień 2 */
.nav-link{
  position:relative;
  display:flex; align-items:center;
  padding:2px 8px;
  border-radius:var(--r-2);
  background:rgba(75,75,75,.3);
  -webkit-backdrop-filter:blur(6.6px); backdrop-filter:blur(6.6px);
  color:#fff; font-size:16px; line-height:normal; letter-spacing:-.03em;
  text-align:center; white-space:nowrap;
  transition:background-color .18s ease;
}
.nav-link::after{
  content:""; position:absolute; inset:-1px; border-radius:3px; padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(195,195,195,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
/* [WŁASNE] Inwersja nad jasnymi sekcjami.
   Makieta opisuje nagłówek tylko nad hero (ciemne tło) — tam obowiązują wartości 1:1:
   szkło #4B4B4B 30 % + biały tekst. Po przewinięciu nad białą sekcję te same wartości
   dają kontrast ~1,6:1 i gubią efekt rozmycia, więc szkło zmienia się na jasne,
   a tekst i obwódka na ciemne. Klasę ustawia JS na podstawie data-tone sekcji
   znajdującej się aktualnie pod nagłówkiem. */
.site-header.is-on-light .nav-link{
  background:rgba(255,255,255,.4);
  color:var(--text);
}
.site-header.is-on-light .nav-link::after{
  background:linear-gradient(180deg, rgba(28,26,26,.22), rgba(28,26,26,.08));
}
.site-header.is-on-light .nav-link:hover{ background:rgba(255,255,255,.72); }

/* Otwarty panel jest ciemny, więc ikona musi zostać biała nawet nad jasną sekcją */
.site-header.is-on-light .nav-toggle[aria-expanded="false"] .nav-toggle__bars,
.site-header.is-on-light .nav-toggle[aria-expanded="false"] .nav-toggle__bars::before,
.site-header.is-on-light .nav-toggle[aria-expanded="false"] .nav-toggle__bars::after{ background:var(--text); }
.site-header.is-on-light .nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }

/* [WŁASNE] hover nawigacji */
.nav-link:hover{ background:rgba(75,75,75,.55); }

/* [WŁASNE] przełącznik nawigacji mobilnej */
/* [WŁASNE] Hamburger bez obwódki i bez tła — na życzenie klienta. Zostaje nad
   pełnoekranowym panelem (z-index), więc ta sama ikona zamyka menu. */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  position:relative; z-index:2;
  width:40px; height:40px; flex:none;
  border:0; background:none;
}
.nav-toggle__bars{ position:relative; display:block; width:18px; height:2px; background:#fff; }
.nav-toggle__bars::before,
.nav-toggle__bars::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.nav-toggle__bars::before{ top:-6px; }
.nav-toggle__bars::after { top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top:0; transform:rotate(-45deg); }
/* Na desktopie kontener menu nie tworzy własnego pudełka — nawigacja i przycisk
   zachowują się jak bezpośrednie dzieci paska. Pełnoekranowy panel powstaje
   dopiero poniżej 768 px. */
.header-menu{ display:contents; }
/* kotwica dla rozwijanego menu */
.site-header__inner{ position:relative; }

/* ========================================================= section-hero 1223:10571 */
.section-hero{
  /* [WŁASNE] Makieta ma sztywne 860 px; klient poprosił o pełną wysokość okna.
     100svh = „small viewport height" — nie skacze, gdy na telefonie chowa się pasek adresu.
     Treść jest kotwiczona do dołu (bottom:46px), więc przy 860 px układ jest identyczny
     jak w makiecie, a przy innej wysokości okna skaluje się razem z nim. */
  position:relative; overflow:hidden;
  height:100vh; height:100svh; min-height:640px;
  isolation:isolate;
}

/* hero-media 1257:409 */
.hero-media{ position:absolute; inset:0; }
.hero-media__video{
  /* Zapas na paralaks: bez niego przesunięcie o 6 % odsłaniało pasek u góry hero
     (przy starcie strony realnie ~24 px pustki). */
  position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover;
}
/* PROGRESSIVE LAYER_BLUR: startRadius 5 @ x .56% → 0 @ x 64.69% */
.hero-media__blur{
  position:absolute; inset:0;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(90deg, #000 .56%, transparent 64.69%);
          mask-image:linear-gradient(90deg, #000 .56%, transparent 64.69%);
}
/* GRADIENT_LINEAR: #242424 → rgba(19,23,0,0), poziomo w lewo→w prawo */
.hero-media__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, #242424 0%, rgba(19,23,0,0) 100%);
}

/* hero-content 1226:286 — left 33, top 442, w 667, gap 56 */
.hero-content{
  /* W makiecie left:33 przy oknie 1440 (kontener 1376 + 1 px). Zapisane jako odległość
     do krawędzi kontenera, żeby na szerokim ekranie hero równało się do reszty strony
     i do nagłówka, a nie odklejało się do lewej krawędzi okna. */
  position:absolute; left:calc(var(--page-inset) + 1px); bottom:46px; z-index:2;
  /* 667 px z makiety, ale nigdy więcej niż zostaje po lewej od licznika (358 px)
     — inaczej przy 1024–1199 px oba bloki na siebie nachodziły. */
  width:min(667px, calc(100% - var(--page-inset) * 2 - 358px - 40px));
  display:flex; flex-direction:column; align-items:flex-start; gap:56px;
}
.hero-intro{ display:flex; flex-direction:column; gap:24px; width:100%; max-width:591px; }
.hero-intro__head{ display:flex; flex-direction:column; gap:16px; }
.hero-title{ color:#fff; text-transform:capitalize; }
.hero-lead{ color:#fff; }

.hero-actions{ display:flex; flex-direction:column; gap:16px; width:100%; }
.hero-actions__row{ display:flex; align-items:center; gap:11px; }
.hero-actions__note{ color:#fff; opacity:.6; }

/* hero-counter 1264:1034 — 358 × 252, prawy dolny róg (left 1051, bottom 48) */
.counter{
  /* W makiecie left:1051 przy szerokości 1440 — zapisane jako right:31, żeby przy
     węższym oknie licznik nie wychodził poza ekran (pozycja przy 1440 px identyczna). */
  position:absolute; right:calc(var(--page-inset) - 1px); bottom:48px; z-index:2;   /* right:31 przy 1440 */
  width:358px; padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:32px;
  background:var(--bg-glass);
  border-radius:var(--r-2);
  -webkit-backdrop-filter:blur(6.6px); backdrop-filter:blur(6.6px);
  color:#fff; overflow:hidden;
}
/* Obwódka 1 px OUTSIDE, gradient #FFFFFF → #C3C3C3 @ 30 %, z góry na dół */
.counter::after{
  content:""; position:absolute; inset:-1px; border-radius:3px; padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(195,195,195,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
/* NOISE (MONOTONE, rgba(0,0,0,.25), density 1, size .5) */
.counter__noise{
  position:absolute; inset:0; pointer-events:none; opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
  mix-blend-mode:multiply;
}
.counter > *:not(.counter__noise){ position:relative; z-index:1; width:100%; }

.counter__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.counter__label{ font-size:20px; line-height:1.3; letter-spacing:-.03em; white-space:nowrap; }
.counter__date{ font-size:14px; line-height:1.3; letter-spacing:-.03em; opacity:.6; white-space:nowrap; }

/* hero-item-3 1223:10598 — 326 × 84 */
.counter__gauge{ position:relative; height:84px; }
.counter__value{
  position:absolute; top:0; right:164px; width:108px; height:49px; transform:translateX(50%);
  display:flex; align-items:center; justify-content:center;
  font-weight:300; text-align:center; white-space:nowrap; letter-spacing:-.0575em;
}
.counter__value-num  { font-size:32px; line-height:48.764px; }
.counter__value-total{ font-size:24px; line-height:48.764px; color:rgba(255,255,255,.3); }

.counter__bar{ position:absolute; left:0; right:0; top:46px; height:38px; border-radius:var(--r-2); overflow:hidden; }
/* Vector 27 — stroke #F1F1F1, stroke-dasharray 1 2 → pionowe prążki co 3 px */
.counter__bar-track{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, var(--line-track) 0 1px, transparent 1px 3px);
}
/* Frame 159 — 236 × 38, gradient #FFC14D → #696969.
   [WŁASNE] W makiecie pasek jest narysowany schematycznie — szerokość 236 px, czyli
   72,4 % toru, nie ma nic wspólnego z liczbą 74. Tutaj wypełnienie i znacznik liczą
   się z jednej zmiennej --progress ustawionej na .counter, dzięki czemu zmiana liczby
   faktycznie przesuwa pasek. Różnica wobec makiety to ok. 1,5 % szerokości. */
.counter__bar-fill{
  position:absolute; left:0; top:0; height:100%;
  width:calc(var(--progress, 74) * 1%);
  background:linear-gradient(90deg, #FFC14D 0%, #696969 100%);
}
/* Vector 29 — pionowa kreska #FFD079, 2 px, wysokość 92 px od góry bloku.
   Prawa krawędź znacznika ma wypadać dokładnie na końcu wypełnienia — stąd −2 px. */
.counter__marker{
  position:absolute; top:0; right:auto;
  left:calc(var(--progress, 74) * 1% - 2px);
  width:2px; height:92px;
  background:var(--gold-accent); border-radius:1px;
}

.counter__stats{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.counter__stat{ display:flex; flex-direction:column; gap:4px; }
.counter__stat-num{ font-weight:300; font-size:24px; line-height:1; letter-spacing:-.04em; text-align:center; white-space:nowrap; }
.counter__stat-cap{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:rgba(255,255,255,.43); }

/* ================================================ section-proof-numbers 1228:365 */
.section-proof-numbers{ position:relative; background:var(--bg-white); }
.proof-numbers{ display:flex; flex-direction:column; align-items:flex-end; gap:80px; position:relative; z-index:1; }

/* decor-leaf-1 1228:366 / decor-leaf-2 1228:367 — ten sam obraz, dwa obroty */
.decor{ position:absolute; display:flex; align-items:center; justify-content:center; pointer-events:none; }
/* [WŁASNE] Liście tła wyłączone na życzenie klienta. Reguły pozycjonowania
   zostają — żeby je przywrócić, wystarczy usunąć poniższą linię. */
.decor{ display:none; }
.decor img{ width:100%; height:100%; object-fit:cover; }
.decor-leaf-1{ left:123px; top:129.81px; width:374.529px; height:374.529px; }
.decor-leaf-1 img{ width:270.535px; height:270.535px; flex:none; transform:rotate(-33.21deg); }
.decor-leaf-2{ left:895px; top:480px; width:286.232px; height:286.232px; }
.decor-leaf-2 img{ width:206.755px; height:206.755px; flex:none; transform:rotate(146.79deg); }

/* proof-numbers-heading 1228:368 */
.proof-numbers-heading{ display:flex; align-items:flex-start; gap:10.029%; width:100%; }   /* 138 px */
.proof-numbers-heading__eyebrow{ width:23.692%; flex:none; }                                /* 326 px */
.proof-numbers-heading__body{ width:62.5%; flex:none; display:flex; flex-direction:column; gap:24px; }  /* 860 px */
.proof-numbers-heading__title{ color:var(--bg-olive); }
.proof-numbers-heading__lead{ color:var(--text); opacity:.7; }

/* proof-numbers-stats 1228:373 — 4 karty, gap 24 */
.proof-numbers-stats{ display:flex; align-items:center; gap:24px; width:100%; }
.stat-card{
  flex:1 0 0; min-width:1px; height:281px; padding:2px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:40px;
  background:rgba(247,244,238,.2);
  border-left:1px solid rgba(201,162,90,.5);
  -webkit-backdrop-filter:blur(8.4px); backdrop-filter:blur(8.4px);
}
.stat-card__media{ flex:1 0 0; min-height:1px; width:100%; border-radius:var(--r-2); overflow:hidden; }
.stat-card__media img{ width:100%; height:100%; object-fit:cover; }
.stat-card__text{ height:98px; padding-left:8px; display:flex; flex-direction:column; gap:8px; }
.stat-card__num{ font-weight:300; font-size:48px; line-height:1; letter-spacing:-.04em; color:var(--gold-ink); }
.stat-card__cap{ font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--text); opacity:.7; }

/* ============================================ section-video-case-46ha 1228:582 */
.section-video-case{ background:var(--bg-olive); color:var(--text-on-dark); overflow:hidden; }
.video-case{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; }

.video-case__heading{ display:flex; align-items:flex-start; gap:20px; width:100%; }
.video-case__intro{ flex:1 0 0; min-width:1px; align-self:stretch; padding:17px 0; display:flex; flex-direction:column; gap:24px; }
.video-case__intro-head{ display:flex; flex-direction:column; gap:16px; }
.video-case__eyebrow{ width:auto; }   /* 326 px w makiecie — nadmiar, tekst jest krótszy */
.video-case__title{ color:#fff; }
.video-case__lead{ opacity:.7; }

.video-case__media{ position:relative; width:49.128%; aspect-ratio:676/300; flex:none; border-radius:var(--r-2); overflow:hidden; background:#D9D9D9; }   /* 676 × 300 */
.video-case__media img{ width:100%; height:100%; object-fit:cover; }

.video-case__stats{ display:flex; flex-direction:column; gap:24px; width:100%; }
.video-case__scope{ opacity:.7; }

/* Stat 1228:619 — wspólny komponent paska liczb na ciemnym tle */
.stat-row{ display:flex; align-items:flex-start; gap:24px; width:100%; height:77px; overflow:hidden;
  -webkit-backdrop-filter:blur(8.4px); backdrop-filter:blur(8.4px); }
.stat-line{
  flex:1 0 0; min-width:1px; height:77px; padding-left:8px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  border-left:1px solid rgba(201,162,90,.5);
  -webkit-backdrop-filter:blur(8.4px); backdrop-filter:blur(8.4px);
}
.stat-line__num{ font-weight:300; font-size:48px; line-height:1; letter-spacing:-.04em; color:var(--gold-accent); }
.stat-line__cap{ font-size:16px; line-height:1.3; letter-spacing:-.03em; color:#fff; opacity:.7; }

/* ================================================== section-case-study 1228:360 */
/* Sekcja bez własnego wypełnienia — prześwituje tło strony #F7F4EE */
.section-case-study{ background:transparent; }
.case-study{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; }

/* gap 27 taki sam jak w .case-study-content — dzięki temu prawa kolumna nagłówka
   (lead) i zdjęcie poniżej mają wspólną lewą krawędź. W makiecie nagłówek nie ma
   przerwy, przez co lead był przesunięty o 13,5 px w lewo względem zdjęcia. */
.case-study-heading{ display:flex; align-items:flex-end; gap:27px; width:100%; }
.case-study-heading__left { flex:1 0 0; min-width:1px; display:flex; flex-direction:column; gap:16px; }
.case-study-heading__right{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; }
.case-study-heading__title{ color:var(--bg-olive); }
.case-study-heading__lead { color:var(--text); opacity:.7; }

.case-study-content{ display:flex; align-items:stretch; gap:27px; width:100%; }
.etap-list{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; justify-content:center; gap:24px; }

/* Etap — stan nieaktywny (Text 1232:11059 …) */
.etap{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; width:100%;
  padding:0; text-align:left; font:inherit; color:inherit;
  background:rgba(255,255,255,.01); opacity:.8;
  -webkit-backdrop-filter:blur(8.4px); backdrop-filter:blur(8.4px);
  cursor:pointer;
  transition:opacity .3s ease, padding-left .3s ease;
}
.etap__head{ display:flex; flex-direction:column; gap:4px; width:100%; }
.etap__badge{
  align-self:flex-start; padding:4px 0; border-radius:var(--r-2);
  font-size:14px; line-height:1; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text); opacity:.7; white-space:nowrap;
  transition:background-color .3s ease, padding .3s ease;
}
.etap__title{ font-size:24px; line-height:1; letter-spacing:-.04em; color:var(--gold-ink); }
/* Opis pokazuje się wyłącznie w aktywnym etapie — tak jak w makiecie, gdzie wariant
   nieaktywny ma 50 px wysokości (numer + tytuł), a aktywny 79 px (z opisem).
   Zwijanie jest płynne, bo etapy zmieniają się same co 5 s. Łączna wysokość listy
   pozostaje stała: jeden etap się rozwija dokładnie wtedy, gdy inny się zwija. */
.etap__desc{
  font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--text);
  max-height:0; margin-top:0; overflow:hidden; opacity:0;
  transition:max-height .35s ease, margin-top .35s ease, opacity .25s ease;
}
.etap--active .etap__desc{ max-height:64px; margin-top:8px; opacity:.7; }

/* Etap — stan aktywny (Text 1232:11058, wariant „Active") */
.etap--active{ opacity:1; padding-left:16px; }
.etap--active .etap__head{ justify-content:center; }
.etap--active .etap__badge{ padding:4px; background:rgba(147,96,2,.08); }

/* [WŁASNE] Lewa kreska etapu pełni rolę paska postępu odtwarzania:
   w makiecie jest to statyczna obwódka 2 px rgba(255,193,77,.81). Tor zostaje
   przygaszony, a wypełnienie rośnie z góry na dół przez czas trwania etapu. */
.etap__progress{
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:rgba(255,193,77,.22);
  opacity:0; transition:opacity .3s ease;
}
.etap--active .etap__progress{ opacity:1; }
.etap__progress-fill{
  display:block; width:100%; height:100%;
  background:rgba(255,193,77,.81);
  transform:scaleY(0); transform-origin:top center;
}
/* Bez animacji pasek jest po prostu pełny — tak jak statyczna obwódka z makiety */
@media (prefers-reduced-motion: reduce){
  .etap__progress-fill{ transform:scaleY(1); }
}

/* [WŁASNE] hover / focus zakładek — w makiecie brak stanów */
.etap:hover{ opacity:1; }
.etap:focus-visible{ outline:2px solid var(--gold-accent); outline-offset:4px; }

/* Panele ze zdjęciami etapów — jeden kadr, płynne przejście */
/* Crossfade zdjęć etapów. Nieaktywne panele chowamy przez visibility, a nie display —
   z display:none przejście opacity nie startuje i zdjęcie mrugało przy każdej zmianie. */
.etap-panel{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.etap-panel.is-active{ opacity:1; visibility:visible; transition:opacity .45s ease; }
.etap-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.case-study-media{ position:relative; flex:1 0 0; min-width:1px; align-self:stretch; border-radius:var(--r-2); overflow:hidden; }

/* =============================================== section-what-included 1228:354 */
.section-what-included{ background:var(--bg-white); }
/* Odstęp powiększony na życzenie klienta z 40 do 96 px (×2,4 — wartość z siatki ×8) */
.what-included{ display:flex; flex-direction:column; align-items:flex-start; gap:96px; }

.what-included-heading{ display:flex; flex-direction:column; gap:24px; width:100%; }
.what-included-heading__head{ display:flex; flex-direction:column; gap:16px; width:100%; }
.what-included-heading__eyebrow{ width:auto; }
.what-included-heading__title{ color:var(--bg-olive); }
.what-included-heading__lead{ color:var(--text); opacity:.7; }

/* what-included-items 1228:343 — cztery karty, gap 24 */
.what-included-items{ display:flex; align-items:flex-start; gap:24px; width:100%; }
.scope-card{
  flex:1 0 0; min-width:1px;
  display:flex; flex-direction:column; align-items:flex-start; gap:40px;
  padding-top:16px; border-top:1px solid var(--gold-line);
  background:rgba(255,255,255,.01);
  -webkit-backdrop-filter:blur(8.4px); backdrop-filter:blur(8.4px);
}
.scope-card__title{ font-weight:400; font-size:24px; line-height:1; letter-spacing:-.04em; color:var(--gold-ink); width:100%; }
.scope-card__list{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; }

/* List item 1228:415 — romb 6×6 (kwadrat obrócony o 45°) w polu 8.485 px */
.list-item{ display:flex; align-items:flex-start; gap:11px; width:100%; }
.list-item__marker{
  flex:none; width:8.485px; height:8.485px; margin-block:5px;
  display:block; position:relative;
}
.list-item__marker::before{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; margin:-3px 0 0 -3px;
  background:var(--gold-fill); border-radius:1px; transform:rotate(45deg);
}
.list-item__text{
  flex:1 1 auto; width:auto;   /* 325,25 px w makiecie — przy płynnym układzie szerokość wynika z kolumny */
  font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--text); opacity:.7;
}

/* ================================================= section-selectivity 1263:581 */
/* Wypełnienie sekcji w makiecie jest wyłączone (visible:false) — prześwituje tło strony */
.section-selectivity{ background:transparent; overflow:hidden; }
/* Odstęp powiększony na życzenie klienta z 40 do 96 px (×2,4 — wartość z siatki ×8) */
/* Odstęp nad zdjęciem 96 px (×2,4 z 40 — wartość z siatki ×8), pod zdjęciem 24 px */
.selectivity{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }

.selectivity-heading{ display:flex; flex-direction:column; gap:24px; width:100%; }
.selectivity-heading__head{ display:flex; flex-direction:column; gap:16px; width:100%; }
.selectivity-heading__title{ color:var(--bg-olive); }
.selectivity-heading__lead{ color:var(--text); opacity:.7; }
.selectivity__note{ color:var(--text); opacity:.7; width:100%; }

/* selectivity-media 1263:585 — 1376 × 513, radius 2, padding 32 */
.selectivity-media{
  margin-top:72px;   /* 72 + gap 24 = 96 px od bloku tekstowego */
  position:relative; width:100%; height:513px; padding:32px;
  border-radius:var(--r-2); overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:24px;
}
.selectivity-media__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.criteria-list{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }

/* selectivity-item-* — „szklana" plakietka kryterium */
.criteria-chip{
  display:flex; align-items:center; gap:8px;
  padding:8px 16px 8px 17px;
  background:rgba(0,0,0,.4);
  border-left:1px solid var(--gold-fill);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  overflow:hidden;
}
.criteria-chip__icon{ flex:none; width:24px; height:24px; }
.criteria-chip__label{
  font-size:14px; line-height:1; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-accent); white-space:nowrap;
}

/* ================================================ section-testimonials 1236:406 */
.section-testimonials{ position:relative; background:var(--bg-white); overflow:hidden; }
/* Odstęp powiększony na życzenie klienta z 40 do 96 px (×2,4 — wartość z siatki ×8) */
.testimonials{ display:flex; flex-direction:column; align-items:flex-start; gap:96px; position:relative; z-index:1; }

.decor-leaf-3{ left:1028px; top:20px; width:146.431px; height:146.431px; }
.decor-leaf-3 img{ width:130.796px; height:130.796px; flex:none; transform:rotate(-82.66deg); }
.decor-leaf-4{ left:1174px; top:93px; width:301.044px; height:301.044px; }
.decor-leaf-4 img{ width:221.787px; height:221.787px; flex:none; transform:rotate(61.3deg); }

.testimonials-heading{ display:flex; flex-direction:column; gap:24px; width:100%; }
.testimonials-heading__head{ display:flex; flex-direction:column; gap:16px; width:100%; }
.testimonials-heading__title{ color:var(--bg-olive); }
.testimonials-heading__lead{ color:var(--text); opacity:.7; }

/* Siatka opinii: najwyżej trzy w rzędzie, ale bez sztywnej liczby kolumn.
   minmax(1/3 szerokości, 1fr) razem z auto-fit sprawia, że przy dwóch opiniach
   trzecia kolumna znika i obie rozciągają się na pół, przy czterech czwarta
   schodzi do drugiego rzędu zachowując szerokość jednej trzeciej. */
.testimonials-content{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(calc((100% - 48px) / 3), 1fr));
  align-items:start; gap:24px; width:100%;
}
.testimonial{
  flex:1 0 0; min-width:1px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:40px;
  padding:2px 2px 2px 2.5px;
  background:rgba(0,0,0,.01);
  border-left:1px solid var(--gold-line);
  -webkit-backdrop-filter:blur(8.4px); backdrop-filter:blur(8.4px);
  overflow:hidden;
}
.testimonial__text{ flex:none; width:100%; padding-left:8px; display:flex; flex-direction:column; gap:8px; }
/* Uwaga: makieta używa tu #1A1A1A i #6B6B6B — odrębnych od #1C1A1A i #8C8C8C (patrz raport) */
.testimonial__quote{ font-size:20px; line-height:1.3; letter-spacing:-.03em; color:#1A1A1A; }
.testimonial__meta { font-size:14px; line-height:1.3; letter-spacing:-.03em; color:#6B6B6B; }
.testimonial__media{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-2); overflow:hidden; background:#D9D9D9; }

/* ======================================================== section-map 1232:641 */
.section-map{ background:var(--bg-white); position:relative; }
.map-wrap{ position:relative; display:flex; align-items:stretch; justify-content:space-between; gap:1.962%; }   /* 27 px */

/* map-items 1232:648 — ramka 790 × 497 z eksportowaną mapą (1 755 ścieżek wektorowych
   z Mapboxa zostało spłaszczonych do PNG @2x — patrz raport) */
.map-items{
  width:57.413%; aspect-ratio:790/497; flex:none;   /* 790 × 497 */
  border-radius:var(--r-2); overflow:hidden;
  background:var(--bg-alt); border:1px solid rgba(201,162,90,.5);
}
/* [WŁASNE] Mapa Leaflet — to samo rozwiązanie, którego
   Green Lungs używa na greenlungs.pl/o-nas-green-lungs/ (te same 19 lokalizacji).
   Zastąpiła spłaszczony PNG z makiety (1 755 ścieżek wektorowych z Mapboxa). */
.map-canvas{ width:100%; height:100%; background:var(--bg-alt); }
/* Leaflet nadaje swoim warstwom z-index 400–1000 (kafelki, pinezki, dymki, kontrolki).
   .section-map ma position:relative, ale bez z-index NIE tworzy kontekstu układania,
   więc te wartości trafiały wprost do korzenia i przykrywały nagłówek (20) oraz
   modal (100). isolation:isolate zamyka je wewnątrz kontenera mapy. */
.map-items{ isolation:isolate; }
/* Kafelki OpenStreetMap (patrz js/main.js) stonowane pod paletę Club 100 — surowa
   zieleń i beż OSM są za jaskrawe obok oliwki i złota. Filtr wygasza kolory, ale
   zostawia czytelne granice województw, drogi i podpisy. Usuń tę regułę, żeby
   wrócić do oryginalnych barw OSM. */
.map-canvas .leaflet-tile-pane{ filter:grayscale(.55) brightness(1.06) contrast(.92); }
.map-canvas .leaflet-container{ background:var(--bg-alt); font-family:var(--font); }
.map-canvas .leaflet-control-attribution{
  background:rgba(247,244,238,.85); font-size:10px; letter-spacing:0;
}
.map-canvas .leaflet-bar a{ color:var(--text); }

/* Pinezka w stylu makiety */
.map-pin{ position:relative; }
.map-pin__dot{
  /* Powiększona 1,5× na życzenie klienta: 16 → 24 px (obwódka 2 → 3 px) */
  display:block; width:24px; height:24px; margin:0 auto;
  background:var(--gold-fill); border:3px solid #fff; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* map-heading 1232:642 — 559 × 497, padding 16/0, space-between */
.map-heading{
  width:40.625%; flex:none; padding:16px 0;   /* 559 px */
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:24px;
}
.map-heading__head{ display:flex; flex-direction:column; gap:16px; width:100%; }
.map-heading__title{ color:var(--bg-olive); }
.map-heading__foot{ width:81.932%; }   /* 458 px */
.map-heading__lead{ color:var(--text); opacity:.7; }

.decor-leaf-5{ left:730px; top:243px; width:262.42px; height:262.42px; }
.decor-leaf-5 img{ width:193.33px; height:193.33px; flex:none; transform:rotate(118.7deg); }
.decor-leaf-5{ z-index:2; }

/* ============================================= section-growth-timeline 1252:300 */
/* Wypełnienie sekcji w makiecie jest wyłączone — prześwituje tło strony */
.section-growth-timeline{ background:transparent; overflow:hidden; }
.growth-timeline{ display:flex; flex-direction:column; align-items:flex-start; gap:80px; }

.growth-timeline-heading{ display:flex; align-items:flex-end; justify-content:center; width:100%; }
.growth-timeline-heading__col{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.growth-timeline-heading__title{ color:var(--bg-olive); }

.growth-timeline-content{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:24px; width:100%; }
.growth-timeline__note{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:#6B6B6B; white-space:nowrap; }

/* g 1252:306 — sześć kolumn + dwie linie osi czasu */
.growth-row{ display:flex; align-items:flex-start; gap:24px; width:100%; overflow:hidden; }
.growth-row__rule{ position:absolute; left:var(--bleed); right:var(--bleed); top:4.5px; height:1px; background:#000; opacity:.3; }
/* Złota linia pokrywa całą szarą — w makiecie była narysowana schematycznie do połowy */
.growth-row__rule--gold{ top:4px; height:2px; background:var(--gold-fill); opacity:1; }

.growth-col{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; gap:24px; overflow:hidden; }
/* Odstęp od rombu na osi czasu do etykiety: 32 px z makiety → 16 px na życzenie klienta */
.growth-col__head{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
/* Romb osi czasu (wspólny dla „Rozwój paulowni" i „Proces").
   Stan domyślny = końcowy: złoty. Klasę .is-dim nakłada JS przed animacją,
   dzięki czemu bez JS i przy prefers-reduced-motion widać od razu stan docelowy. */
.tl-dot{ position:relative; width:8px; height:10px; display:block; flex:none; }
.tl-dot::before{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:1px; transform:rotate(45deg);
  background:var(--gold-fill);
  transition:background-color .35s ease;
}
.tl-dot.is-dim::before{ background:#ADABA7; }

.growth-col__label{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; height:71px; width:100%; }
.growth-col__badge{
  align-self:flex-start; padding:2px 8px; border:1px solid rgba(147,96,2,.27); border-radius:var(--r-2);
  font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--gold-ink); white-space:nowrap;
}
.growth-col__cap{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text); opacity:.7; width:100%; }
.growth-col__media{ position:relative; width:100%; height:180px; border-radius:var(--r-2); overflow:hidden; flex:none; }
.growth-col__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* =================================================== section-platform 1237:4668 */
.section-platform{ background:var(--bg-olive); color:var(--text-on-dark); overflow:hidden; }
.platform-heading{ display:flex; align-items:flex-start; gap:24px; }

.platform-media{
  position:relative; width:49.128%; flex:none; align-self:stretch;   /* 676 px */
  border-radius:var(--r-2); overflow:hidden;
}
.platform-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.platform-body{
  flex:1 0 0; min-width:1px; align-self:stretch; padding:17px 0;
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
}
.platform-body__head{ display:flex; flex-direction:column; gap:16px; width:100%; }
.platform-body__eyebrow{ width:auto; }
.platform-body__title{ color:#fff; }
.platform-body__lead{ opacity:.7; width:100%; }
.platform-body__list{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; }

/* Wariant listy na ciemnym tle */
.list-item--on-dark .list-item__text{ color:#fff; }

/* ==================================================== section-process 1237:4404 */
/* Wypełnienie sekcji w makiecie jest wyłączone — prześwituje tło strony */
.section-process{ background:transparent; overflow:hidden; }
.process{ display:flex; flex-direction:column; align-items:flex-start; gap:80px; }

/* Odstęp 40 px oddziela blok tekstowy od kolumny z etapami — bez niego lead
   „11 etapów rozłożonych…" dochodził wprost do opisu etapu 01. Kolumna z etapami
   nadal zaczyna się dokładnie na 50 % szerokości, więc złota linia górnego pasma
   (left:50%) pozostaje z nią wyrównana. */
.process-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; width:100%; }
.process-heading__col{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.process-heading__head{ display:flex; flex-direction:column; gap:8px; width:100%; }
.process-heading__title{ color:var(--bg-olive); }
.process-heading__lead{ color:var(--text); opacity:.7; }

.process-content{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; }

.process-heading{ position:relative; }
.process-row{ position:relative; }
.process-row--top   { width:50%;  flex:none; align-self:stretch; }   /* 688 px */
.process-row--bottom{ width:100%; flex:none; }                       /* 1376 px */

/* Linie osi czasu wychodzą poza kontener aż do krawędzi okna.
   --bleed liczy odległość od krawędzi kontenera (100 %) do krawędzi okna (100vw).
   Nadmiar przycina sekcja, która ma overflow:hidden, więc nie powstaje poziome
   przewijanie nawet przy widocznym pasku przewijania. */
.growth-row__rule,
.process-row__rule{ --bleed:calc((100% - 100vw) / 2); }

.process-row__rule{ position:absolute; top:4.5px; height:1px; background:#000; opacity:.3; }
/* Górne pasmo zaczyna się przy etapie 01 (prawa połowa nagłówka) — w lewo nie może,
   bo tam na tej samej wysokości leży nadtytuł „PROCES". W prawo idzie do krawędzi okna. */
.process-row__rule--top-band{ left:50%; right:var(--bleed); }
.process-row--bottom .process-row__rule{ left:var(--bleed); right:var(--bleed); }
.process-row__rule--gold{ top:4px; height:2px; background:var(--gold-fill); opacity:1; }

.etap-steps{ display:flex; align-items:flex-start; gap:32px; width:100%; }
.etap-step{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:center; gap:24px; overflow:hidden; }
/* jw. — 32 px z makiety → 16 px */
.etap-step__inner{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
.etap-step__label{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
.etap-step__title{ font-size:20px; line-height:1.3; letter-spacing:-.03em; color:var(--gold-ink); width:100%; }
.etap-step__desc { font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--text); opacity:.7; width:100%; }

/* ====================================================== section-costs 1252:522 */
/* Jedyna sekcja z paddingiem 72/72 zamiast 120/80 — tak jest w makiecie */
.section-costs{ background:var(--bg-white); padding-block:72px; }
/* Odstęp powiększony na życzenie klienta z 40 do 96 px (×2,4 — wartość z siatki ×8) */
.costs{ display:flex; flex-direction:column; align-items:flex-start; gap:96px; }

.costs-heading{ display:flex; flex-direction:column; gap:24px; width:100%; }
.costs-heading__head{ display:flex; flex-direction:column; gap:8px; width:100%; }
.costs-heading__title{ color:var(--bg-olive); }
.costs-heading__lead{ color:var(--text); opacity:.7; }

.costs-content{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }

/* g 1252:526 — kosztorys */
.costs-table{ width:100%; table-layout:fixed; }
.costs-table th, .costs-table td{
  padding:12px 0; text-align:left; font-weight:400;
  font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--text);
  border-bottom:1px solid rgba(255,193,77,.3);
  vertical-align:middle;
}
.costs-table th:nth-child(2), .costs-table td:nth-child(2),
.costs-table th:nth-child(3), .costs-table td:nth-child(3){
  width:160px; text-align:right; padding-left:20px;
}
.costs-table thead th{ font-size:14px; color:var(--gold-ink); }
.costs-table tfoot th, .costs-table tfoot td{ font-weight:700; border-bottom:0; }

.costs-note{ width:100%; opacity:.7; }
.costs-note__p{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text); }
.costs-note__p--bold{ font-weight:700; }

/* costs-tranches 1252:552 */
.costs-tranches{ display:flex; align-items:flex-start; gap:24px; width:100%; overflow:hidden; }
.tranche{
  flex:1 0 0; min-width:1px; padding-left:8px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  border-left:1px solid rgba(201,162,90,.5);
}
.tranche__num{ font-weight:300; font-size:48px; line-height:1; letter-spacing:-.04em; color:var(--gold-ink); }
.tranche__cap{ font-size:20px; line-height:1.3; letter-spacing:-.03em; color:var(--text); opacity:.7; }

/* [WŁASNE] Na życzenie klienta ukryte wzrokowo (powtarzały treść nagłówka), ale
   zostają w drzewie dostępności — nadtytuł i nazwy kroków opisują je czytnikom ekranu. */
.modal__eyebrow,
.modal-steps__name,
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ================================================= section-wood-sales 1252:601 */
.section-wood-sales{ background:var(--bg-white); }
.wood-sales{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }

.wood-sales-row{ display:flex; align-items:flex-start; gap:24px; height:480px; width:100%; }
.wood-sales-col{
  width:32.122%; flex:none; height:100%; padding:24px 0;   /* 442 px */
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
}
.wood-sales-col__head{ display:flex; flex-direction:column; gap:8px; width:100%; }
.wood-sales-col__title{ color:var(--bg-olive); }
.wood-sales-col__lead{ color:var(--text); opacity:.7; width:100%; }

.wood-sales-col__support{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; width:100%; }
/* H3 — DM Sans Regular 32 / 100% / −4% */
.wood-sales-col__subtitle{ font-weight:400; font-size:32px; line-height:1; letter-spacing:-.04em; color:var(--gold-ink); width:100%; }
.wood-sales-col__list{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; }
.wood-sales-col__note{ color:var(--text); opacity:.7; width:100%; }

.wood-sales-media{ position:relative; flex:1 0 0; min-width:1px; height:100%; border-radius:var(--r-2); overflow:hidden; }
.wood-sales-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wood-sales-media__bottom{ object-position:bottom; }

/* ======================================================= section-team 1262:459 */
.section-team{ position:relative; background:var(--bg-alt); overflow:hidden; }
.team{ position:relative; z-index:1; display:flex; align-items:flex-start; gap:40px; }

.decor-leaf-6{ left:545px;  top:13px;  width:146.431px; height:146.431px; }
.decor-leaf-6 img{ width:130.796px; height:130.796px; flex:none; transform:rotate(-82.66deg); }
.decor-leaf-7{ left:1191px; top:479px; width:301.044px; height:301.044px; }
.decor-leaf-7 img{ width:221.787px; height:221.787px; flex:none; transform:rotate(61.3deg); }

.team-heading{
  flex:1 0 0; min-width:1px; align-self:stretch; padding:24px 0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
}
.team-heading__head{ display:flex; flex-direction:column; gap:16px; width:100%; }
.team-heading__title{ color:var(--bg-olive); }
.team-heading__lead{ width:100%; max-width:375px; color:var(--text); opacity:.7; }

.team-content{ flex:1 0 0; min-width:1px; display:flex; align-items:flex-start; justify-content:flex-end; gap:32px; overflow:hidden; }
.team-card{
  flex:1 0 0; min-width:1px; height:517px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:40px;
  padding:2px 2px 2px 2.5px;
  background:rgba(0,0,0,.01);
  border-left:1px solid var(--gold-line);
  -webkit-backdrop-filter:blur(8.4px); backdrop-filter:blur(8.4px);
  overflow:hidden;
}
.team-card__media{ position:relative; flex:1 0 0; min-height:1px; width:100%; border-radius:var(--r-2); overflow:hidden; }
.team-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.team-card__text{ flex:none; width:100%; padding-left:8px; display:flex; flex-direction:column; gap:8px; }
.team-card__name{ font-size:24px; line-height:1; letter-spacing:-.04em; color:#1A1A1A; }
.team-card__role{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:#6B6B6B; }

/* ======================================================== section-faq 1264:816 */
.section-faq{ background:var(--bg-white); }
.faq-heading{ display:flex; align-items:flex-start; gap:24px; }

.faq-side{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:flex-start; gap:40px; }
.faq-side__head{ display:flex; flex-direction:column; gap:8px; width:100%; }
.faq-side__title{ color:var(--bg-olive); }

/* tabs_wrap 1264:942 — w makiecie widać tylko pierwszą zakładkę jako aktywną.
   [WŁASNE] Zakładki są prawdziwym przełącznikiem (wzorzec tablist: strzałki, Home/End,
   roving tabindex), każda ma własny panel z pytaniami. */
.faq-tabs{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
.faq-tab{
  width:100%; padding:0; text-align:left;
  font-weight:500; font-size:16px; line-height:normal;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text);
  opacity:.7;
  transition:opacity .25s ease, padding-left .25s ease;
}
.faq-tab:hover{ opacity:.9; }
.faq-tab--active,
.faq-tab--active:hover{ opacity:1; padding-left:8px; border-left:2px solid var(--gold-fill); }

/* pytanie 1264:965 — akordeon */
.faq-list{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; }
/* Klasa ustawia display:flex, więc atrybut hidden musi być mocniejszy */
.faq-list[hidden]{ display:none; }
/* [WŁASNE] Zaślepka kategorii, dla której makieta nie ma jeszcze pytań */
/* Układ z Figmy (1264:966): pytanie i odpowiedź stoją w jednej kolumnie,
   znak +/− obok niej. Dzięki temu odpowiedź kończy się tam, gdzie zaczyna się
   znak, i nigdy pod niego nie wchodzi, a znak jest wyśrodkowany względem całej
   kolumny — przy zamkniętym pytaniu dokładnie na jego wysokości. */
.faq-item{
  width:100%; background:var(--bg-alt);
  border-bottom:1px solid rgba(201,162,90,.5); border-radius:var(--r-2);
  overflow:hidden;
  display:flex; align-items:center; gap:16px; padding:13px 16px;
}
.faq-item__col{
  flex:1 0 0; min-width:1px;
  display:flex; flex-direction:column;
  /* Odstęp pytanie → odpowiedź. Panel zwinięty ma display:none, więc przy
     zamkniętym pytaniu odstęp znika sam — bez osobnej reguły na stan. */
  gap:24px;
}
.faq-item__h{ margin:0; font:inherit; font-weight:400; }
.faq-item__btn{ position:relative; display:block; width:100%; padding:0; text-align:left; }
/* Klikalne jest całe pytanie wraz ze znakiem +/− i wyściółką karty, nie sam tekst */
.faq-item__btn::after{ content:""; position:absolute; top:-13px; bottom:-13px; left:-16px; right:-56px; }
.faq-item__q{ font-size:20px; line-height:1.3; letter-spacing:-.03em; color:#1A1A1A; }
/* Plus / minus 1264:981 — dwie kreski 2 px #C9A25A w polu 24 × 24 */
.faq-item__icon{ position:relative; flex:none; width:24px; height:24px; pointer-events:none; }
.faq-item__icon::before,
.faq-item__icon::after{
  content:""; position:absolute; left:0; top:11px; width:24px; height:2px; background:var(--gold-line);
}
.faq-item__icon::after{ transform:rotate(90deg); transition:opacity .18s ease, transform .18s ease; }
.faq-item:has(.faq-item__btn[aria-expanded="true"]) .faq-item__icon::after{ opacity:0; transform:rotate(0deg); }

.faq-item__panel[hidden]{ display:none; }
/* Odpowiedzi przychodzą z edytora WordPressa, więc stylujemy zwykłe akapity
   wewnątrz panelu, nie tylko klasę z wersji statycznej. */
.faq-item__a,
.faq-item__panel p{ font-size:16px; line-height:1.35; letter-spacing:-.03em; color:rgba(26,26,26,.7); }
/* Przezroczystość jako składnik koloru, nie opacity — inaczej wyróżnienia w odpowiedzi
   nie mogłyby być ciemniejsze od akapitu, bo dziecko nie przebije opacity rodzica. */
.faq-item__a + .faq-item__a,
.faq-item__panel p + p{ margin-top:12px; }
.faq-item__a strong,
.faq-item__panel strong{ font-weight:500; color:#1A1A1A; }
.faq-item__link,
.faq-item__panel a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.faq-item__link:hover,
.faq-item__panel a:hover{ color:var(--bg-olive); }

/* ================================================== section-final-cta 1264:1058 */
.section-final-cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding:120px var(--gutter);
  color:var(--text-on-dark);
}
.final-cta-media{ position:absolute; inset:0; z-index:-1; }
.final-cta-media img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; }
/* GRADIENT_LINEAR: #0D1000 → rgba(66,71,41,.8), poziomo */
.final-cta-media__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, #0D1000 0%, rgba(66,71,41,.8) 100%);
}
.final-cta{ display:flex; align-items:flex-start; gap:24px; }
.final-cta-heading{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.final-cta-heading__title{ color:#fff; width:100%; }
.final-cta-heading__lead{ opacity:.7; width:100%; }
.final-cta-content{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* Wariant licznika w finałowym CTA: 431 px, tło #424729 @60 %, bez warstwy szumu */
.counter--wide{ position:relative; left:auto; bottom:auto; width:100%; max-width:431px; background:rgba(66,71,41,.6); }

/* ========================================================= site-footer 1264:1183 */
/* [WŁASNE] W makiecie stopka ma padding 120 px. Przy płynnym układzie trzymamy ją
   na tej samej siatce co reszta strony: margines --gutter + kontener --container-w. */
.site-footer{ background:var(--bg-white); border-top:1px solid #C9C9C9; padding:56px var(--gutter); }
.site-footer__inner{ width:100%; max-width:var(--container-w); margin-inline:auto; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }

.footer-content{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; }
.footer-brand{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:flex-start; }
.footer-cols{ flex:1 0 0; min-width:1px; display:flex; align-items:flex-start; gap:80px; }
.footer-col{ flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.footer-col__title{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--gold-ink); white-space:nowrap; }
.footer-col__body{ font-size:16px; line-height:1.3; letter-spacing:-.03em; color:#1A1A1A; font-style:normal; }
/* [WŁASNE] podkreślenie linków w stopce przy najechaniu — w makiecie brak stanów */
.footer-col__body a:hover{ text-decoration:underline; }

.footer-legal{ width:334px; font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text); opacity:.7; }

/* ================== MODAL 1269:697 / 1269:735 / 1270:697 / 1270:743 ================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.55);
  overflow:auto;
}
.modal-backdrop[hidden]{ display:none; }

.modal{ width:720px; max-width:100%; background:var(--bg-white); border-radius:var(--r-2); overflow:hidden; }
.modal__form{ display:flex; flex-direction:column; align-items:stretch; }

.modal__head{ display:flex; flex-direction:column; gap:10px; padding:40px 48px 28px; }
.modal__head-row{ display:flex; align-items:center; gap:16px; }
.modal__head-text{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; gap:10px; }
.modal__eyebrow{ font-size:14px; line-height:1; letter-spacing:.2em; color:var(--gold-ink); }
.modal__title{ font-weight:300; font-size:28px; line-height:1.15; letter-spacing:-.04em; color:var(--text); }
.modal__desc{ font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--text-muted); }
.modal__close{ flex:none; font-weight:300; font-size:20px; line-height:normal; color:var(--text-muted); padding:4px; }
.modal__close:hover{ color:var(--text); }

.modal__steps{ padding:0 48px 32px; }
.modal-steps{ display:flex; align-items:center; gap:8px; }
.modal-steps__item{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.modal-steps__bar{ display:block; width:100%; height:2px; background:#E5E1D8; }
.modal-steps__num{ font-size:14px; line-height:1; letter-spacing:.2em; color:var(--text-muted); white-space:pre; }
.modal-steps__name{ font-size:16px; line-height:1.3; letter-spacing:-.03em; color:var(--text-muted); }
.modal-steps__item.is-active .modal-steps__bar,
.modal-steps__item.is-done   .modal-steps__bar{ background:var(--gold-accent); }
.modal-steps__item.is-active .modal-steps__num,
.modal-steps__item.is-done   .modal-steps__num{ color:var(--gold-ink); }
.modal-steps__item.is-active .modal-steps__name{ color:var(--text); }

.modal__body{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding:36px 48px; background:var(--bg-alt); }
.modal__body[hidden]{ display:none; }
.modal__q{ font-size:20px; line-height:1.3; letter-spacing:-.03em; color:var(--text); width:100%; }
.modal__hint{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text-muted); width:100%; }

/* Krok 1 — suwak areału */
.modal__areal{ display:flex; align-items:baseline; gap:8px; color:var(--gold-ink); }
.modal__areal-num { font-weight:300; font-size:48px; line-height:1; letter-spacing:-.04em; }
.modal__areal-unit{ font-size:20px; line-height:1.3; letter-spacing:-.03em; }
.modal__slider{ position:relative; width:100%; height:6px; background:#E5E1D8; }
.modal__slider-fill{ position:absolute; left:0; top:0; height:100%; width:80px; background:var(--gold-accent); }
.modal__slider-input{
  position:absolute; inset:-9px 0; width:100%; height:24px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.modal__slider-input::-webkit-slider-runnable-track{ height:24px; background:transparent; }
.modal__slider-input::-moz-range-track{ height:24px; background:transparent; }
/* [WŁASNE] uchwyt suwaka — w makiecie go nie ma, bez niego suwak jest nieobsługiwalny */
.modal__slider-input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:4px; border-radius:50%;
  background:var(--gold-ink); border:2px solid #fff;
}
.modal__slider-input::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--gold-ink); border:2px solid #fff;
}
.modal__slider-legend{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text-muted); white-space:nowrap;
}

/* Pola formularza */
.modal__row{ display:flex; align-items:flex-start; gap:16px; width:100%; }
.modal__field{ flex:1 0 0; min-width:1px; display:flex; flex-direction:column; gap:8px; width:100%; }
.modal__label{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text); }
.modal__input{
  width:100%; height:48px; padding:0 16px;
  background:var(--bg-white); border:1px solid var(--line); border-radius:var(--r-2);
  font:inherit; font-size:16px; line-height:normal; letter-spacing:-.03em; color:var(--text);
}
.modal__input::placeholder{ color:var(--text-muted); }
select.modal__input:invalid{ color:var(--text-muted); }
/* [WŁASNE] stan błędu walidacji — w makiecie nie zaprojektowany */
.modal__input[aria-invalid="true"]{ border-color:#A6321E; }
.modal__error{ font-size:14px; line-height:1.3; letter-spacing:-.03em; color:#A6321E; }
.modal__error[hidden]{ display:none; }
.modal__trap{ display:none; }

.modal__choices{ display:flex; align-items:center; gap:12px; width:100%; }
.modal__choice{ flex:1 0 0; min-width:1px; }
.modal__choice input{ position:absolute; opacity:0; width:0; height:0; }
.modal__choice span{
  display:flex; align-items:center; justify-content:center;
  height:48px; padding:0 8px;
  background:var(--bg-white); border:1px solid var(--line); border-radius:var(--r-2);
  font-size:16px; line-height:normal; letter-spacing:-.03em; color:var(--text);
  cursor:pointer; white-space:nowrap;
}
.modal__choice input:checked + span{ border:2px solid var(--gold-line); color:var(--gold-ink); }
.modal__choice input:focus-visible + span{ outline:2px solid var(--gold-accent); outline-offset:2px; }

.modal__consent{ display:flex; align-items:flex-start; gap:12px; width:100%; }
.modal__consent input{ flex:none; width:18px; height:18px; margin:0; accent-color:var(--gold-ink); }
.modal__consent label{ flex:1 0 0; min-width:1px; font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text-muted); }
/* Odnośniki otwierają się w nowej karcie — inaczej kliknięcie w regulamin
   zamknęłoby wypełniany formularz razem z danymi. */
.modal__consent label a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.modal__consent label a:hover{ color:var(--gold-ink); }

/* Potwierdzenie */
.modal__body--done{ background:var(--bg-olive); gap:20px; color:#fff; }
.modal__done-lead{ font-size:20px; line-height:1.3; letter-spacing:-.03em; color:#fff; width:100%; }
.modal__done-sub { font-size:16px; line-height:1.3; letter-spacing:-.03em; color:#D8D6CE; width:100%; }
.modal__done-next{ display:flex; flex-direction:column; gap:10px; padding-top:12px; width:100%; }
.modal__done-eyebrow{ font-size:14px; line-height:1; letter-spacing:.2em; color:var(--gold-accent); }
.modal__done-list{ counter-reset:done; font-size:16px; line-height:1.7; letter-spacing:-.03em; color:#fff; }
.modal__done-list li{ counter-increment:done; }
.modal__done-list li::before{ content:counter(done) ".  "; white-space:pre; }

.modal__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 48px 32px; }
.modal__foot-note{ flex:1 0 0; min-width:1px; font-size:14px; line-height:1.3; letter-spacing:-.03em; color:var(--text-muted); }
.modal__back{ height:44px; padding:0 24px; border-radius:var(--r-2); font-size:16px; line-height:normal; letter-spacing:-.03em; color:var(--text-muted); }
.modal__back:hover{ color:var(--text); }
.modal__back[hidden]{ display:none; }
.modal__next{ height:44px; font-weight:400; text-transform:none; }

/* =============================================================================
   [WŁASNE] RESPONSYWNOŚĆ
   Makieta obejmuje wyłącznie desktop 1440 px. Poniższe reguły są decyzją
   wykonawcy — nie mają odpowiednika w pliku Figma. Zasada: do 1440 px układ
   pozostaje ten sam, tylko sztywne szerokości stają się elastyczne; poniżej
   1024 px siatki schodzą do dwóch kolumn, poniżej 768 px do jednej.
   ========================================================================== */

/* ---------------------------------------------------- < 1440 px — płynne szerokości */
@media (max-width:1439px){
  .proof-numbers-heading{ gap:64px; }
  .proof-numbers-heading__eyebrow{ width:auto; flex:0 1 240px; }
  .proof-numbers-heading__body{ width:auto; flex:1 1 auto; }

  .map-canvas{ height:100%; }
  .map-heading__foot{ width:100%; }
  .decor-leaf-5{ left:auto; right:16%; }

  .footer-cols{ flex-wrap:wrap; gap:32px 48px; }

  /* Liście dekoracyjne mają współrzędne bezwzględne z makiety 1440 —
     poniżej tej szerokości przycinamy sekcję, żeby nie powodowały przewijania w poziomie. */
  .section-proof-numbers,
  .section-map{ overflow:hidden; }
}

/* ------------- [WŁASNE] 1024–1199 px — hero zostaje dwukolumnowy, tylko mniejszy.
   Wcześniej już poniżej 1200 px tekst i licznik układały się jeden pod drugim,
   przez co na 1024 px hero robiło się bardzo wysokie. Teraz układ z makiety
   (tekst po lewej, licznik po prawej) trzyma się do 1024 px — schodzi w pion
   dopiero razem z resztą strony. */
@media (max-width:1199px) and (min-width:1024px){
  .section-hero .h1{ font-size:44px; }
  .section-hero .body-l{ font-size:18px; }
  .hero-content{ gap:40px; }
  /* 70 px poziomego paddingu linku „ZOBACZ REALIZACJĘ" to dokładnie tyle, ile brakuje,
     żeby oba przyciski zmieściły się w jednym rzędzie tak jak w makiecie. */
  .hero-actions__row{ flex-wrap:wrap; }
  .hero-actions__row .btn--tertiary{ padding-inline:0; }
  .counter{ width:320px; }
  .counter__stat-num{ font-size:20px; }
}

/* ------------------------------------------------------------ < 1024 px — hero */
@media (max-width:1023px){
  .section-hero{ height:auto; min-height:100svh; padding:140px var(--gutter) 48px; }
  /* position:relative, NIE static — static kasuje z-index:2 i wtedy .hero-media
     (element pozycjonowany) zamalowuje tekst hero. */
  .hero-content{
    position:relative; inset:auto; width:100%; max-width:667px; margin-top:120px;
  }
  .counter{ position:relative; inset:auto; width:100%; max-width:358px; margin-top:48px; }
  .hero-media__blur{ display:none; }
  .hero-media__scrim{ background:linear-gradient(90deg, #242424 0%, rgba(19,23,0,.35) 100%); }
}

/* ------------------------------------------ < 1024 px — siatki na dwie kolumny */
@media (max-width:1023px){
  :root{ --gutter:24px; }
  .section{ padding:80px var(--gutter) 56px; }
  .section-costs{ padding-block:56px; }
  .section-final-cta{ padding:80px var(--gutter); }
  .site-footer{ padding-block:40px; }

  .h1{ font-size:44px; }
  .h2{ font-size:36px; }
  .body-l{ font-size:18px; }

  .proof-numbers-heading{ gap:24px; }
  .proof-numbers-heading__eyebrow{ flex:none; }
  .proof-numbers-stats,
  .what-included-items,
  .costs-tranches{ flex-wrap:wrap; }
  .proof-numbers-stats > *,
  .what-included-items > *,
  .costs-tranches > *{ flex:1 1 calc(50% - 12px); min-width:240px; }
  /* Opinie mają własną siatkę, więc na tablecie po prostu dwie kolumny */
  .testimonials-content{ grid-template-columns:repeat(auto-fit, minmax(calc((100% - 24px) / 2), 1fr)); }

  /* Przy zmianie kierunku na pionowy trzeba wymusić rozciąganie dzieci —
     inaczej kolumny z align-items:flex-start kurczą się do treści i tekst wychodzi poza ekran. */
  .video-case__heading,
  .case-study-heading,
  .case-study-content,
  .platform-heading,
  .map-wrap,
  .team,
  .process-heading,
  .faq-heading,
  .final-cta,
  .footer-content,
  .proof-numbers-heading{ flex-direction:column; align-items:stretch; }
  .video-case__intro,
  .platform-body,
  .case-study-heading__left,
  .case-study-heading__right,
  .process-heading__col,
  .team-heading,
  .final-cta-heading,
  .footer-brand,
  .faq-side,
  .map-heading{ width:100%; }
  .video-case__media,
  .platform-media,
  .map-items{ width:100%; }
  .platform-media{ aspect-ratio:676/490; }
  /* flex:1 0 0 z układu poziomego dotyczyło w kolumnie WYSOKOŚCI — bazą było 0,
     więc kontener zdjęcia zwijał się do zera i zdjęcie znikało. */
  .case-study-media{ flex:none; width:100%; align-self:auto; aspect-ratio:16/10; }

  /* [WŁASNE] Case study — zdjęcie ląduje bezpośrednio pod aktywnym etapem.
     Lista etapów dostaje display:contents, więc przyciski i kontener zdjęcia są
     rodzeństwem w jednym flexie. Etapy mają parzyste `order` (2, 4, 6…), a zdjęcie
     nieparzysty, ustawiany przez JS (--media-order = 2 × indeks + 3) — dzięki temu
     wskakuje dokładnie pod wybrany etap. Kolejność w HTML zostaje nietknięta,
     więc czytnik ekranu i wyszukiwarka widzą listę tak jak na desktopie. */
  .case-study-content{ display:flex; flex-direction:column; align-items:stretch; gap:24px; }
  .etap-list{ display:contents; }
  .etap-list > .etap:nth-child(1){ order:2; }
  .etap-list > .etap:nth-child(2){ order:4; }
  .etap-list > .etap:nth-child(3){ order:6; }
  .etap-list > .etap:nth-child(4){ order:8; }
  .etap-list > .etap:nth-child(5){ order:10; }
  .etap-list > .etap:nth-child(6){ order:12; }
  .case-study-media{ order:var(--media-order, 3); }
  .map-heading{ min-height:0; }
  .team-content{ width:100%; }

  .stat-line__num{ font-size:32px; }
  /* Cztery kolumny na tablecie dają ok. 170 px na liczbę — „10–12 osób" się nie mieści.
     Po dwie w rzędzie wszystko zostaje w jednej linii. */
  .stat-line{ flex:1 1 calc(50% - 12px); min-width:140px; }

  .growth-row,
  .etap-steps{ flex-wrap:wrap; }
  .growth-col{ flex:1 1 calc(33.333% - 16px); min-width:180px; }
  .etap-step{ flex:1 1 calc(50% - 16px); min-width:220px; }
  /* Linia biegnąca przez cały rząd nie ma sensu, gdy karty się zawijają —
     zastępują ją odcinki rysowane przy każdej karcie (blok niżej). */
  .growth-row__rule,
  .process-row__rule{ display:none; }
  .process-heading{ gap:40px; }
  .process-row--top{ width:100%; }

  .wood-sales-row{ flex-wrap:wrap; height:auto; }
  .wood-sales-col{ width:100%; height:auto; }
  .wood-sales-media{ flex:1 1 calc(50% - 12px); min-width:220px; height:360px; }

  .faq-heading{ gap:40px; }
  .faq-list{ width:100%; }

  .final-cta{ gap:40px; }
  .final-cta-content{ align-items:flex-start; }
  .counter--wide{ max-width:100%; }

  .footer-content{ gap:32px; }
  .footer-cols{ flex-wrap:wrap; gap:32px; }
  .footer-legal{ width:100%; max-width:480px; }
}

@media (max-width:1279px){
  .decor{ display:none; }
  /* Pasek liczb zwęża się szybciej niż tekst — bez tego „10–12 osób" łamie się
     na dwie linie i sąsiednie kolumny mają różną wysokość. */
  .stat-line__num{ font-size:36px; }
}

/* ------------------------------------------------ < 768 px — jedna kolumna */
@media (max-width:767px){
  :root{ --gutter:20px; }
  .section{ padding:56px var(--gutter) 40px; }

  /* Rozmiary nagłówków i nadtytułów na życzenie klienta (makieta ma tylko desktop) */
  .h1{ font-size:40px; letter-spacing:-.04em; }
  .h2{ font-size:32px; letter-spacing:-.04em; }
  .subhead{ font-size:12px; }
  .body-l{ font-size:17px; }
  .stat-card__num,
  .tranche__num,
  .modal__areal-num{ font-size:36px; }
  /* Pasek liczb ma dwie kolumny na pół ekranu — przy 36 px „10–12 osób" łamało się
     na dwie linie i wiersze rozjeżdżały się na różną wysokość. */
  .stat-line__num{ font-size:26px; }
  .stat-line{ height:auto; min-height:64px; }

  .proof-numbers-stats > *,
  .what-included-items > *,
  .costs-tranches > *,
  .growth-col,
  .etap-step,
  .wood-sales-media,
  .team-card{ flex:1 1 100%; min-width:0; }
  .stat-card{ height:auto; }
  .stat-card__media{ height:160px; flex:none; }
  .stat-card__text{ height:auto; }
  .testimonials-content{ grid-template-columns:1fr; }
  .testimonial,.team-card{ height:auto; }
  .testimonial__media,.team-card__media{ height:200px; flex:none; }
  .growth-col__label{ height:auto; }
  .wood-sales-media{ height:260px; }
  .selectivity-media{ height:auto; padding:24px; }
  .criteria-chip__label{ white-space:normal; }
  .section-hero{ min-height:0; padding-top:112px; }
  .hero-actions__row{ flex-direction:column; align-items:stretch; }
  .btn--tertiary{ justify-content:flex-start; padding-inline:0; }

  .costs-table th,.costs-table td{ font-size:14px; }
  .costs-table th:nth-child(2),.costs-table td:nth-child(2),
  .costs-table th:nth-child(3),.costs-table td:nth-child(3){ width:96px; padding-left:8px; }

  .modal__head,.modal__steps,.modal__body,.modal__foot{ padding-inline:24px; }
  .modal__row{ flex-direction:column; }
  .modal__choices{ flex-wrap:wrap; }
  .modal__foot{ flex-wrap:wrap; }
  .modal__foot-note{ order:3; flex:1 1 100%; }

  /* [WŁASNE] Na telefonie pasek chowa się przy przewijaniu w dół i wraca przy
     przewijaniu w górę — ekran jest niski, a pasek zabiera 104 px. Klasę zakłada JS.
     Przy prefers-reduced-motion globalna reguła zdejmuje animację, więc pasek
     po prostu znika i wraca, bez przesunięcia. */
  .site-header{ transition:transform .3s ease; }
  .site-header.is-hidden{ transform:translateY(-100%); }

  /* [WŁASNE] nawigacja mobilna — w makiecie nie zaprojektowana.
     Menu jest pełnoekranowe i zawiera również przycisk „Aplikuj" (na życzenie klienta
     nie zostaje on w pasku). Panel jest zawsze ciemny, więc inwersja z jasnych sekcji
     tu nie obowiązuje. */
  .nav-toggle{ display:inline-flex; }
  .header-menu{
    position:fixed; inset:0; z-index:1;
    display:flex; flex-direction:column; align-items:stretch; justify-content:center;
    gap:8px; padding:96px var(--gutter) 48px;
    background:rgba(20,22,14,.96);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .header-menu[hidden]{ display:none; }
  .header-nav{ flex-direction:column; align-items:stretch; gap:4px; }
  .header-menu__cta{ margin-top:24px; align-self:stretch; }

  /* W panelu linki nie są już „pigułkami" — pełna szerokość, bez obwódki,
     powiększony cel dotykowy (25 px z makiety to za mało na palec). */
  .nav-link,
  .site-header.is-on-light .nav-link{
    padding:14px 12px; background:transparent; color:#fff;
    justify-content:flex-start; font-size:20px; letter-spacing:-.03em;
    /* rozmycie „pigułki" nad własnym tłem panelu rysowało widoczne prostokąty */
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav-link::after{ display:none; }

  /* Logo zostaje nad panelem — razem z „hamburgerem", który zmienił się w krzyżyk.
     Panel jest ciemny, więc niezależnie od sekcji pod spodem wraca jasny wariant znaku. */
  .site-header:has(.nav-toggle[aria-expanded="true"]) .logo{ position:relative; z-index:2; }
  .site-header:has(.nav-toggle[aria-expanded="true"]) .logo__v--light{ opacity:1; }
  .site-header:has(.nav-toggle[aria-expanded="true"]) .logo__v--dark { opacity:0; }
  .nav-link:hover,
  .site-header.is-on-light .nav-link:hover{ background:rgba(255,255,255,.12); }
}

@media (max-width:479px){
  .counter__stats{ gap:4px; }
  .stat-line__num{ font-size:22px; }
  .counter__stat-num{ font-size:20px; }
  .counter__label{ font-size:17px; }
  .modal__title{ font-size:22px; }
}


/* --------------------- [WŁASNE] < 768 px — łamanie długich, nieprzełamywalnych ciągów */
@media (max-width:767px){
  .btn{ white-space:normal; height:auto; min-height:40px; padding-block:10px; }
  .btn--tertiary{ min-height:44px; }
  .modal__next{ height:auto; min-height:44px; padding-block:10px; }
  .growth-timeline__note{ white-space:normal; }
  .counter__label,.counter__date,
  .counter__stat-num,.counter__stat-cap{ white-space:normal; }
  .stat-row{ flex-wrap:wrap; height:auto; }
  .stat-line{ flex:1 1 calc(50% - 12px); min-width:140px; }
  .footer-col__title{ white-space:normal; }
}
@media (max-width:1023px){
  .stat-row{ flex-wrap:wrap; height:auto; }
}

/* ===========================================================================
   [WŁASNE] Osie czasu na wąskich ekranach („Rozwój paulowni" i „Proces")
   Na desktopie linię rysuje jeden element pozycjonowany absolutnie przez całą
   szerokość rzędu. Poniżej 1024 px karty się zawijają, więc jedna linia przestaje
   pasować i wcześniej po prostu znikała. Teraz każda karta rysuje własny odcinek
   (::before), a odcinki sąsiadów łączą się w ciągłą linię — dzięki temu linia jest
   widoczna przy każdym układzie: na tablecie biegnie poziomo nad każdym rzędem kart,
   na telefonie pionowo po lewej stronie kolumny, a romby siedzą dokładnie na niej.
   Kolor odcinka idzie za stanem rombu (klasę .is-dim nakłada JS przed animacją),
   więc bez JS i przy prefers-reduced-motion od razu widać stan końcowy — złoto.
   ======================================================================== */
@media (max-width:1023px){
  .growth-row,
  .etap-steps{ overflow:visible; }
  .growth-col,
  .etap-step{ position:relative; overflow:visible; }
  .tl-dot{ z-index:1; }

  .growth-col::before,
  .etap-step::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    top:4px; height:2px; background:var(--gold-fill);
  }
  /* odcinek wychodzi w połowę odstępu z obu stron, żeby połączyć się z sąsiadem */
  .growth-col::before{ left:-12px; right:-12px; }   /* gap 24 */
  .etap-step::before { left:-16px; right:-16px; }   /* gap 32 */

  .growth-col:has(.tl-dot.is-dim)::before,
  .etap-step:has(.tl-dot.is-dim)::before{
    top:4.5px; height:1px; background:#000; opacity:.3;
  }
}

@media (max-width:767px){
  /* Jedna kolumna — linia obraca się w pionową, romby wychodzą na lewo od kart */
  .growth-col,
  .etap-step{ padding-left:24px; }
  .etap-step{ align-items:stretch; }

  .growth-col::before,
  .etap-step::before{
    left:3px; right:auto; top:0; width:2px; height:auto;
  }
  .growth-col::before{ bottom:-24px; }
  .etap-step::before { bottom:-32px; }
  .growth-col:first-child::before,
  .etap-step:first-child::before{ top:4px; }
  .growth-col:last-child::before,
  .etap-step:last-child::before{ bottom:0; }
  /* „Proces" ma dwie osobne listy (01–04 i 05–11) rozdzielone odstępem sekcji —
     ostatni etap górnej listy dociąga linię do pierwszego etapu dolnej. */
  .process-row--top .etap-step:last-child::before{ bottom:-80px; }

  .growth-col:has(.tl-dot.is-dim)::before,
  .etap-step:has(.tl-dot.is-dim)::before{ left:3.5px; top:0; width:1px; height:auto; }
  .growth-col:first-child:has(.tl-dot.is-dim)::before,
  .etap-step:first-child:has(.tl-dot.is-dim)::before{ top:4px; }

  .growth-col__head,
  .etap-step__inner{ position:relative; }
  .growth-col__head > .tl-dot,
  .etap-step__inner > .tl-dot{ position:absolute; left:-24px; top:0; }

}


/* --------------- [WŁASNE] > 1440 px — dekoracje podążają za wyśrodkowaną treścią */
@media (min-width:1441px){
  .decor-leaf-1{ left:calc(50% - 720px + 123px); }
  .decor-leaf-2{ left:calc(50% - 720px + 895px); }
  .decor-leaf-3{ left:calc(50% - 720px + 1028px); right:auto; }
  .decor-leaf-4{ left:calc(50% - 720px + 1174px); right:auto; }
  .decor-leaf-5{ left:calc(50% - 720px + 730px); }
  .decor-leaf-6{ left:calc(50% - 720px + 545px); }
  .decor-leaf-7{ left:calc(50% - 720px + 1191px); }
}


/* ============================================================================
   [WŁASNE] Osadzenie filmów z YouTube — fasada zamiast iframe od razu.
   Na starcie ładuje się tylko plakat; odtwarzacz (i całe skrypty YouTube)
   dociągają się dopiero po kliknięciu. Bez tego trzy iframe'y na stronie
   pobierałyby ~1,5 MB i spowalniały pierwsze wyświetlenie.
   ========================================================================= */
.yt{ position:absolute; inset:0; overflow:hidden; background:#1C1A1A; }
.testimonial__media .yt,
.video-case__media .yt{ position:absolute; inset:0; }
.yt__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.yt__play{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(28,26,26,.18);
  transition:background-color .25s ease;
}
.yt__play:hover{ background:rgba(28,26,26,.34); }
.yt__play-icon{
  position:relative; display:block; width:72px; height:72px;
  border-radius:50%; background:rgba(255,208,121,.92);
  box-shadow:0 4px 24px rgba(0,0,0,.35);
  transition:transform .25s ease, background-color .25s ease;
}
.yt__play:hover .yt__play-icon{ transform:scale(1.06); background:var(--gold-fill); }
.yt__play-icon::before{
  content:""; position:absolute; left:calc(50% + 3px); top:50%;
  transform:translate(-50%,-50%);
  border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--text-on-gold);
}
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ========================================== podstrony tekstowe (dokumenty) */
/* Górny odstęp większy niż w sekcjach, bo nad treścią jest przyklejony pasek. */
.section-doc{ background:var(--bg-white); padding-top:184px; padding-bottom:96px; }
.doc{ max-width:760px; }
/* Nagłówki sekcji kapitalizują każde słowo; w tytule dokumentu byłoby to „Polityka Prywatności” */
.doc__title{ color:var(--bg-olive); margin-bottom:32px; text-transform:none; }
.doc__body{ font-size:16px; line-height:1.55; letter-spacing:-.03em; color:rgba(26,26,26,.8); overflow-wrap:break-word; }
.doc__body h2{ font-size:24px; line-height:1.25; letter-spacing:-.03em; color:var(--bg-olive); margin:40px 0 12px; }
.doc__body h3{ font-size:20px; line-height:1.3; letter-spacing:-.03em; color:#1A1A1A; margin:28px 0 8px; }
.doc__body p{ margin:0 0 14px; }
.doc__body ul, .doc__body ol{ margin:0 0 14px; padding-left:1.3em; }
.doc__body li{ margin:0 0 6px; }
.doc__body strong{ font-weight:500; color:#1A1A1A; }
.doc__body a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.doc__body a:hover{ color:var(--bg-olive); }
@media (max-width:767px){
  .section-doc{ padding-top:128px; padding-bottom:64px; }
  .doc__body h2{ font-size:20px; }
}

/* ================================== dokumenty: meta, spis treści, listy, tabele */
.doc__body .doc-meta{ font-size:14px; line-height:1.45; color:var(--text-muted); margin:0 0 32px; }
.doc__body .doc-meta a{ color:inherit; }
.doc__body .doc-spis{ margin:0 0 40px; padding:20px 24px; background:var(--bg-alt); border-left:2px solid var(--gold-line); }
.doc__body .doc-spis__tytul{ margin:0 0 12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); }
.doc__body .doc-spis ol{ list-style:none; margin:0; padding:0; columns:2; column-gap:32px; }
.doc__body .doc-spis li{ break-inside:avoid; margin:0 0 6px; font-size:14px; line-height:1.35; }
.doc__body .doc-spis a{ text-decoration:none; }
.doc__body .doc-spis a:hover{ text-decoration:underline; }
/* Motyw zeruje style list — w dokumentach numeracja jest treścią, więc ją przywracamy */
.doc__body ol{ padding-left:1.5em; list-style:decimal; }
.doc__body ol ol{ margin:8px 0 4px; }
.doc__body ol[type="a"]{ list-style-type:lower-alpha; }
/* Definicje w regulaminie numerowane „1)", jak w dokumencie */
.doc__body ol.doc-nawias{ list-style:none; counter-reset:nawias; padding-left:2.2em; }
.doc__body ol.doc-nawias > li{ position:relative; counter-increment:nawias; }
.doc__body ol.doc-nawias > li::before{ content:counter(nawias) ")"; position:absolute; left:-2.2em; width:1.8em; text-align:right; }
.doc__body li > p{ margin:8px 0 0; }
.doc__body .doc-tabela{ overflow-x:auto; margin:10px 0 18px; }
.doc__body .doc-tabela table{ width:100%; min-width:520px; border-collapse:collapse; font-size:14px; line-height:1.4; }
.doc__body .doc-tabela th,
.doc__body .doc-tabela td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft); }
.doc__body .doc-tabela th{ font-weight:500; color:#1A1A1A; border-bottom-color:var(--gold-line); }
.doc__body .doc-tabela tfoot td{ font-weight:500; color:#1A1A1A; }
.doc__body .doc-tabela .doc-liczba{ text-align:right; white-space:nowrap; }
.doc__body .doc-stopka{ margin:48px 0 0; padding-top:16px; border-top:1px solid var(--line-soft); font-size:13px; line-height:1.45; color:var(--text-muted); }
@media (max-width:767px){
  .doc__body .doc-spis ol{ columns:1; }
}