/* nuvr — wersja B: „rocznik drukowany”.
   Układ: siatka 12 kolumn, oś pionowa na 6. kolumnie (ok. 42% szerokości), jedna para marginesów 16–32 px.
   Druk dwukolorowy: papier marki, czarny tusz, blok czerni i blok szarości studia portretów.
   Projekt świadomie jednotematyczny (jasny), wszystkie kolory zdefiniowane jako tokeny poniżej. */
:root {
  --papier: #F5F4F2;        /* biel marki (logo, plakaty) */
  --papier-2: #E8E7E3;      /* papier o ton ciemniejszy: kafle, pola */
  --tusz: #0B0B0B;          /* czerń druku */
  --tusz-2: #4B4A47;        /* tekst drugorzędny na papierze */
  --tusz-hover: #2E2D2B;    /* przycisk po najechaniu */
  --szary: #BABABA;         /* szarość tła portretów: drugi kolor druku */
  --szary-2: #3A3A38;       /* tekst drugorzędny na szarości */
  --czern: #0B0B0B;         /* strona koloru: czerń */
  --na-czerni: #F5F4F2;
  --na-czerni-2: #ABAAA6;
  --f-tytul: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-tekst: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --s-maly: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);   /* 13–14 */
  --s-tekst: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17–19 */
  --s-lead: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);          /* 20–28 */
  --s-tytul: clamp(2.125rem, 1.15rem + 3.65vw, 4.25rem);    /* 34–68 */
  --s-liczba: clamp(4rem, 1rem + 8vw, 9rem);                /* 64–144 */
  --m: clamp(20px, 2.2vw, 32px);
  --gut: clamp(12px, 1.4vw, 24px);
  --odstep: clamp(112px, 48px + 7vw, 208px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papier); color: var(--tusz);
  font-family: var(--f-tekst); font-size: var(--s-tekst); line-height: 1.5; font-weight: 400;
  font-kerning: normal; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, blockquote, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; }
::selection { background: var(--tusz); color: var(--papier); }
:focus-visible { outline: 3px solid var(--tusz); outline-offset: 3px; }
.ciemne :focus-visible { outline-color: var(--na-czerni); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- rama i siatka ---------- */
.ramka {
  padding-left: max(var(--m), env(safe-area-inset-left, 0px));
  padding-right: max(var(--m), env(safe-area-inset-right, 0px));
}
.siatka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }

/* ---------- typografia ---------- */
.tytul {
  font-family: var(--f-tytul); font-stretch: 125%; font-weight: 800;
  font-size: var(--s-tytul); line-height: 0.98; letter-spacing: -0.035em;
  text-wrap: balance; hyphens: none; margin-left: -0.04em;
}
.lead { font-size: var(--s-lead); line-height: 1.3; font-weight: 400; text-wrap: pretty; }
.maly { font-size: var(--s-maly); line-height: 1.45; }
.drugi { color: var(--tusz-2); }
p { text-wrap: pretty; max-width: 68ch; }
.liczba { font-family: var(--f-tytul); font-stretch: 125%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }

/* ---------- przyciski i linki ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--tusz); color: var(--papier); text-decoration: none;
  font-family: var(--f-tekst); font-size: var(--s-tekst); font-weight: 500; line-height: 1;
  transition: background-color .18s ease, transform .14s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .przycisk:hover { background: var(--tusz-hover); } }
.przycisk:active { transform: scale(.97); }
.ciemne .przycisk, .przycisk--jasny { background: var(--na-czerni); color: var(--tusz); }
.ciemne .przycisk:hover, .przycisk--jasny:hover { background: var(--papier-2); }
.link { font-weight: 500; text-decoration: underline; transition: text-decoration-color .2s var(--ease), color .2s var(--ease); }
.link:hover { text-decoration-color: transparent; }

/* ---------- nagłówek ---------- */
.naglowek { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding-block: clamp(16px, 2vw, 24px); position: relative; z-index: 20; }
.naglowek--nad { position: absolute; inset: 0 0 auto 0; }
.znak { display: block; width: clamp(78px, 7vw, 104px); color: var(--tusz); flex: none; }
.znak svg { width: 100%; height: auto; fill: currentColor; }
.nav { display: flex; gap: clamp(16px, 2.2vw, 36px); margin-left: auto; }
.nav a { position: relative; text-decoration: none; padding-block: 10px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--tusz); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-przycisk { display: none; }
.menu { display: none; }

/* ---------- hero: sztafeta ---------- */
.hero { position: relative; min-height: max(640px, min(100svh, 1000px)); overflow: hidden; background: var(--papier); display: grid; }
.hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 18% 50%; }
.hero__tresc { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-content: center; padding-block: 140px 220px; }
.hero__tekst { grid-column: 1 / span 6; }
.hero__h1 { max-width: 9.6em; }
.hero__zdanie { margin-top: 28px; max-width: 34ch; font-size: var(--s-lead); line-height: 1.32; }
.hero__fakt { position: absolute; z-index: 3; left: 40%; top: 33%; display: flex; align-items: center; gap: 14px; pointer-events: none; transition: opacity .6s var(--ease); }
.hero__fakt-tekst { text-align: right; font-size: var(--s-tekst); line-height: 1.3; max-width: 22ch; }
.hero__fakt-tekst strong, .hero__fakt-tekst span { display: block; }
.hero__fakt-tekst strong { font-weight: 600; }
.kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--tusz); flex: none; }
.hero__karty { position: absolute; z-index: 3; right: max(var(--m), env(safe-area-inset-right, 0px)); bottom: var(--m); display: flex; gap: 16px; }
.karta { display: block; width: clamp(180px, 14.6vw, 230px); text-decoration: none; color: var(--papier); background: var(--tusz); }
.karta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.karta__obraz { overflow: hidden; display: block; }
.karta:hover img { transform: scale(1.04); }
.karta__pasek { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; font-size: var(--s-tekst); font-weight: 500; }
.karta__pasek svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.karta:hover .karta__pasek svg { transform: translateX(4px); }
.hero__podpis-tel { display: none; }

/* ---------- wstęp: lead nad czterema kolumnami ---------- */
.wstep { padding-block: clamp(80px, 8vw, 128px) var(--odstep); }
.wstep__lead { font-size: var(--s-lead); line-height: 1.24; max-width: 46em; }
.wstep__kolumny { margin-top: 72px; row-gap: 40px; }
.wstep__kolumny > p { grid-column: span 3; color: var(--tusz-2); }
.wstep__kolumny strong { color: var(--tusz); font-weight: 600; }

/* ---------- drużyna: kwestionariusz ---------- */
.druzyna { padding-block: 0 var(--odstep); }
.druzyna__uklad { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.druzyna__szyna { grid-column: 1 / span 3; align-self: stretch; }
.druzyna__wstep { margin-top: 20px; max-width: 26ch; }
.pytania { margin-top: 28px; display: grid; gap: 2px; position: sticky; top: 28px; }
.pytanie {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 46px; cursor: pointer;
  font-family: var(--f-tekst); font-size: var(--s-lead); line-height: 1.15; color: var(--tusz-2);
  transition: color .25s var(--ease);
}
.pytanie::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tusz); flex: none; opacity: 0; transform: scale(.5); transition: transform .35s var(--ease), opacity .35s var(--ease); }
.pytanie:hover { color: var(--tusz); }
.pytanie[aria-selected="true"] { color: var(--tusz); }
.pytanie[aria-selected="true"]::before { opacity: 1; transform: none; }
.pytanie:focus-visible { outline: 3px solid var(--tusz); outline-offset: 4px; }
.druzyna__lista { grid-column: 4 / -1; display: grid; gap: clamp(40px, 4vw, 64px); }
.pasek__klatki {
  display: flex; gap: 8px; height: clamp(150px, 14.5vw, 224px);
  margin-right: calc(-1 * max(var(--m), env(safe-area-inset-right, 0px))); overflow: hidden; text-decoration: none;
}
.pasek__klatki img { height: 100%; width: auto; flex: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .pasek__klatki img { opacity: .62; }
.js .pasek__klatki img.is-on { opacity: 1; }
.pasek__klatki:hover img { opacity: 1 !important; }
.druzyna__lista:hover .pasek:not(:hover) .pasek__klatki img { opacity: .4; }
.kafel { flex: none; height: 100%; aspect-ratio: 3 / 2; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px; background: var(--szary); color: var(--tusz); }
.pasek:nth-child(even) .kafel { background: var(--tusz); color: var(--papier); }
.kafel__liczba { font-size: var(--s-tytul); font-stretch: 100%; line-height: .9; }
.kafel__opis { font-size: var(--s-tekst); line-height: 1.3; }
.pasek__podpis { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gut); margin-top: 18px; align-items: start; }
.pasek__imie { font-family: var(--f-tytul); font-stretch: 112%; font-weight: 700; font-size: var(--s-tekst); line-height: 1.25; letter-spacing: -0.01em; }
.pasek__imie a { text-decoration: none; }
.pasek__imie a:hover { text-decoration: underline; }
.pasek__rola { font-size: var(--s-tekst); line-height: 1.3; color: var(--tusz-2); margin-top: 2px; }
.odp { font-size: var(--s-lead); line-height: 1.28; max-width: 38em; }
.js .odp:not(.is-on) { display: none; }
.odp__pytanie { display: block; font-size: var(--s-maly); color: var(--tusz-2); }
.js .odp__pytanie { display: none; }
.odp.wchodzi { animation: odp-wejscie .7s var(--ease) both; }
@keyframes odp-wejscie { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.druzyna__stopka { margin-top: 8px; color: var(--tusz-2); }

/* ---------- pary: strona czerni ---------- */
.pary { background: var(--czern); color: var(--na-czerni); padding-block: var(--odstep); }
.pary .siatka { align-items: center; }
.pary__tekst { grid-column: 1 / span 7; }
.pary__liczba { display: block; font-size: var(--s-liczba); line-height: .86; margin-top: 28px; white-space: nowrap; }
.pary__opis { margin-top: 32px; max-width: 26em; color: var(--na-czerni); }
.pary__dalej { margin-top: 20px; max-width: 34em; color: var(--na-czerni-2); }
.pary__film { grid-column: 9 / span 4; }
.pary__film video { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--czern); }
.pary__film figcaption { margin-top: 14px; color: var(--na-czerni-2); }

/* ---------- dla atletów: wiersze z fotografiami na marginesie ---------- */
.oferta { padding-block: var(--odstep); }
.oferta__tytul { grid-column: 1 / span 5; }
.oferta__glowa { grid-column: 6 / span 6; }
.oferta__lead { max-width: 30em; padding-top: .35em; }
.wiersze { margin-top: clamp(72px, 7vw, 112px); display: grid; gap: clamp(72px, 6.5vw, 104px); }
.wiersz { align-items: start; }
.wiersz__foto { grid-column: 1 / span 5; justify-self: start; }
.wiersz:nth-child(even) .wiersz__foto { justify-self: end; }
.wiersz__foto img { width: 100%; height: auto; object-fit: cover; }
.wiersz__foto--a { width: min(100%, 420px); } .wiersz__foto--a img { aspect-ratio: 4 / 5; }
.wiersz__foto--b { width: min(100%, 560px); } .wiersz__foto--b img { aspect-ratio: 3 / 2; }
.wiersz__foto--c { width: min(100%, 300px); } .wiersz__foto--c img { aspect-ratio: 1; }
.wiersz__tekst { grid-column: 6 / span 5; align-self: center; }
.wiersz__tytul { font-family: var(--f-tytul); font-stretch: 125%; font-weight: 800; font-size: var(--s-lead); line-height: 1.1; letter-spacing: -0.02em; }
.wiersz__tekst p { margin-top: 14px; max-width: 34ch; }
.oferta__akcja { grid-column: 6 / span 6; margin-top: clamp(72px, 7vw, 112px); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* ---------- dla marek: linie schodkami (strona szarości) ---------- */
.marki { background: var(--szary); color: var(--tusz); padding-block: var(--odstep); }
.marki .drugi { color: var(--szary-2); }
.marki__glowa { grid-column: 1 / span 12; display: grid; grid-template-columns: subgrid; align-items: end; }
.marki__glowa .tytul { grid-column: 1 / span 5; }
.marki__glowa .lead { grid-column: 6 / span 6; }
.schody { margin-top: clamp(72px, 8vw, 120px); display: grid; row-gap: clamp(36px, 3.6vw, 56px); }
.schod { grid-column-end: span 7; }
.schod:nth-child(1) { grid-column-start: 1; }
.schod:nth-child(2) { grid-column-start: 3; }
.schod:nth-child(3) { grid-column-start: 5; }
.schod:nth-child(4) { grid-column-start: 7; grid-column-end: span 6; }
.schod__linia { font-family: var(--f-tytul); font-stretch: 100%; font-weight: 700; font-size: var(--s-tytul); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.schod__zdanie { margin-top: 12px; max-width: 34ch; color: var(--szary-2); }
.marki__zasady { margin-top: clamp(72px, 7vw, 112px); align-items: end; row-gap: 28px; }
.marki__zasady p { grid-column: 1 / span 6; font-size: var(--s-lead); line-height: 1.3; }
.marki__zasady .przyciski { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: flex-end; }

/* ---------- realizacje: nazwy w kolumnach ---------- */
.realizacje { padding-block: var(--odstep) 0; }
.realizacje .tytul { grid-column: 1 / span 4; align-self: start; }
.nazwy { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.nazwy li { font-size: var(--s-lead); line-height: 1.38; font-weight: 400; }
.nazwy li.rodzaj { color: var(--tusz-2); }
.nazwy li.rodzaj--dalej { margin-top: 1.1em; }
.realizacje__notka { grid-column: 6 / span 6; margin-top: 48px; color: var(--tusz-2); max-width: 46em; }

/* ---------- grow: tekst i rząd do przeciągania ---------- */
.grow { padding-block: var(--odstep); }
.grow .tytul { grid-column: 1 / span 5; }
.grow__tekst { grid-column: 6 / span 6; }
.grow__tekst .lead { max-width: 24em; }
.grow__tekst p + p { margin-top: 18px; }
.edycje { margin-top: 36px; display: grid; gap: 0; }
.edycje li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding-block: 12px; }
.edycje li:nth-child(odd) { background: var(--papier-2); padding-inline: 14px; margin-inline: -14px; }
.edycje time { font-variant-numeric: tabular-nums; color: var(--tusz-2); white-space: nowrap; }
.grow__akcja { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.rzad__glowa { margin-top: clamp(88px, 8vw, 128px); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-left: max(6vw, var(--m)); }
.rzad__tytul { font-family: var(--f-tytul); font-stretch: 112%; font-weight: 700; font-size: var(--s-lead); letter-spacing: -0.02em; }
.rzad {
  margin-top: 32px; display: flex; gap: 12px; height: 68svh; min-height: 420px; max-height: 760px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-left: max(6vw, var(--m)); padding-right: max(var(--m), env(safe-area-inset-right, 0px));
  cursor: grab; overscroll-behavior-x: contain; scroll-padding-inline: max(6vw, var(--m));
}
.rzad::-webkit-scrollbar { display: none; }
.rzad.ciagniety { cursor: grabbing; scroll-snap-type: none; }
.modul { flex: none; height: 100%; display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start; }
.modul figure { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modul img { flex: 1; min-height: 0; width: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.modul figcaption { font-size: var(--s-maly); color: var(--tusz-2); padding-top: 8px; }
.modul--wysoki { aspect-ratio: 3 / 4.25; }
.modul--para { aspect-ratio: 4 / 6.6; }
.modul--szeroki { aspect-ratio: 16 / 10.8; }

/* ---------- kontakt: zdanie, zdjęcie, dwa linki (pas szarości) ---------- */
.kontakt { background: var(--szary); padding-block: clamp(120px, 10vw, 168px) clamp(96px, 8vw, 120px); }
.kontakt .siatka { align-items: start; }
.kontakt__lewa { grid-column: 1 / span 6; }
.kontakt__zdanie { margin-top: 28px; max-width: 24em; }
.kontakt__foto { grid-column: 8 / span 2; }
.kontakt__foto img { width: 100%; max-width: 168px; aspect-ratio: 1; object-fit: cover; }
.kontakt__prawa { grid-column: 10 / span 3; }
.kontakt__pytanie { font-weight: 500; }
.kontakt__linki { margin-top: 20px; display: grid; gap: 10px; }
.kontakt__linki a, .kopiuj__adres { font-size: var(--s-tekst); }
.kopiuj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kopiuj__adres { font-weight: 600; user-select: all; }
.kopiuj__przycisk { all: unset; cursor: pointer; font-size: var(--s-maly); text-decoration: underline; text-underline-offset: 0.18em; min-height: 32px; display: inline-flex; align-items: center; }
.kopiuj__przycisk:focus-visible { outline: 3px solid var(--tusz); outline-offset: 2px; }
.kontakt__miasto { margin-top: 18px; color: var(--szary-2); }

/* ---------- stopka: najpierw nazwa ---------- */
.stopka { background: var(--czern); color: var(--na-czerni); padding-block: clamp(56px, 6vw, 88px) 40px; overflow: hidden; }
.stopka__znak { color: var(--na-czerni); }
.stopka__znak svg { width: 100%; height: auto; fill: currentColor; }
.stopka__rzad { margin-top: 72px; row-gap: 48px; }
.stopka__miejsca { grid-column: 1 / span 5; display: grid; gap: 6px; }
.stopka__miejsca a, .stopka__miejsca span { font-size: var(--s-lead); line-height: 1.25; text-decoration: none; }
.stopka__miejsca a:hover { text-decoration: underline; }
.stopka__kol { grid-column: span 2; display: grid; gap: 8px; align-content: start; font-size: var(--s-maly); }
.stopka__kol:first-of-type { grid-column-start: 7; }
.stopka__kol h3 { font-size: var(--s-maly); font-weight: 400; color: var(--na-czerni-2); margin-bottom: 4px; }
.stopka__kol a { text-decoration: none; }
.stopka__kol a:hover { text-decoration: underline; }
.stopka__prawne { margin-top: 96px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; font-size: var(--s-maly); color: var(--na-czerni-2); }
.stopka__prawne p { max-width: 60ch; }
.stopka__prawne a { color: var(--na-czerni); }

/* ---------- telefon i tablet ---------- */
@media (max-width: 899px) {
  .nav { display: none; }
  .naglowek .przycisk { margin-left: auto; min-height: 44px; padding: 0 16px; }
  .menu-przycisk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-size: var(--s-tekst); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
  .menu { position: fixed; inset: 0; z-index: 30; background: var(--papier); padding: 88px max(var(--m), env(safe-area-inset-right, 0px)) 40px max(var(--m), env(safe-area-inset-left, 0px)); flex-direction: column; gap: 6px; }
  .menu.otwarte { display: flex; }
  .menu a { font-family: var(--f-tytul); font-stretch: 125%; font-weight: 800; font-size: var(--s-tytul); letter-spacing: -0.03em; text-decoration: none; padding-block: 6px; }
  .menu__zamknij { position: absolute; top: 20px; right: max(var(--m), env(safe-area-inset-right, 0px)); min-height: 44px; border: 0; background: none; font-size: var(--s-tekst); font-weight: 500; text-decoration: underline; cursor: pointer; }

  .hero { min-height: 0; display: block; }
  .hero__film { position: relative; inset: auto; height: auto; aspect-ratio: 720 / 760; object-position: 50% 0; }
  .hero__tresc { display: block; padding-block: 8px 0; }
  .hero__h1 { max-width: none; }
  .hero__zdanie { margin-top: 16px; font-size: var(--s-tekst); }
  .hero__fakt { display: none; }
  .hero__podpis-tel { display: flex; align-items: flex-start; gap: 10px; position: absolute; z-index: 3; left: max(var(--m), env(safe-area-inset-left, 0px)); right: max(var(--m), env(safe-area-inset-right, 0px)); top: 84px; font-size: var(--s-maly); line-height: 1.35; max-width: 17em; transition: opacity .6s var(--ease); }
  .hero__podpis-tel .kropka { margin-top: 5px; }
  .hero__podpis-tel .kropka { width: 8px; height: 8px; }
  .hero__karty { position: static; margin-top: 28px; padding-bottom: 8px; padding-left: max(var(--m), env(safe-area-inset-left, 0px)); padding-right: max(var(--m), env(safe-area-inset-right, 0px)); }
  .hero__karty li { flex: 1 1 0; min-width: 0; }
  .karta { width: 100%; }
  .karta__pasek { padding: 0 10px; }

  .wstep { padding-block: 72px 96px; }
  .wstep__kolumny > p { grid-column: span 6; }
  .wstep__kolumny { margin-top: 48px; }

  .druzyna__uklad { display: block; }
  .druzyna__szyna { padding-bottom: 0; }
  .pytania { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; position: static; }
  .pytanie { background: var(--papier-2); padding: 10px 12px; font-size: var(--s-tekst); min-height: 52px; }
  .pytanie[aria-selected="true"] { background: var(--tusz); color: var(--papier); }
  .pytanie::before { display: none; }
  .druzyna__lista { margin-top: 40px; gap: 44px; }
  .pasek__klatki { height: 156px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .kafel { aspect-ratio: 4 / 3; padding: 12px 14px; }
  .kafel__opis { font-size: var(--s-maly); }
  .pasek__klatki::-webkit-scrollbar { display: none; }
  .pasek__klatki img, .kafel { scroll-snap-align: start; }
  .pasek__podpis { grid-template-columns: 1fr; row-gap: 8px; margin-top: 14px; }

  .pary__tekst, .pary__film { grid-column: 1 / -1; }
  .pary__film { margin-top: 48px; max-width: 420px; }

  .oferta__tytul, .oferta__glowa, .wiersz__tekst, .oferta__akcja { grid-column: 1 / -1; }
  .oferta__glowa { margin-top: 20px; }
  .wiersz__foto { grid-column: 1 / -1; margin-bottom: 24px; }
  .wiersze { gap: 64px; }
  .wiersz__foto--a { width: 70%; } .wiersz__foto--b { width: 100%; } .wiersz__foto--c { width: 55%; }

  .marki__glowa .tytul, .marki__glowa .lead { grid-column: 1 / -1; }
  .marki__glowa .lead { margin-top: 20px; }
  .schod { grid-column: 1 / -1 !important; }
  .schod:nth-child(2) { padding-left: 4vw; } .schod:nth-child(3) { padding-left: 8vw; } .schod:nth-child(4) { padding-left: 12vw; }
  .marki__zasady p, .marki__zasady .przyciski { grid-column: 1 / -1; justify-content: flex-start; }

  .realizacje .tytul, .nazwy, .realizacje__notka { grid-column: 1 / -1; }
  .nazwy { grid-template-columns: 1fr 1fr; row-gap: 28px; margin-top: 32px; }
  .nazwy li { font-size: var(--s-tekst); }

  .grow .tytul, .grow__tekst { grid-column: 1 / -1; }
  .grow__tekst { margin-top: 24px; }
  .rzad { height: 62svh; min-height: 380px; gap: 8px; padding-left: max(20px, var(--m)); }
  .modul--wysoki { aspect-ratio: auto; width: 72vw; }
  .modul--para { aspect-ratio: auto; width: 64vw; }
  .modul--szeroki { aspect-ratio: auto; width: 88vw; height: 70%; align-self: center; }
  .rzad__glowa { padding-left: max(var(--m), env(safe-area-inset-left, 0px)); }

  .kontakt__lewa { grid-column: 1 / -1; }
  .kontakt__foto { grid-column: 1 / span 4; margin-top: 40px; }
  .kontakt__foto img { max-width: 112px; }
  .kontakt__prawa { grid-column: 5 / -1; margin-top: 40px; }

  .stopka__miejsca { grid-column: 1 / -1; }
  .stopka__kol, .stopka__kol:first-of-type { grid-column: span 6; }
  .stopka__prawne { margin-top: 56px; }
}
@media (max-width: 560px) {
  .wstep__kolumny > p { grid-column: 1 / -1; }
  .kontakt__foto { grid-column: 1 / span 3; }
  .kontakt__prawa { grid-column: 4 / -1; }
}


/* ================= podstrony ================= */
.strona-pod .naglowek { padding-bottom: 8px; }

/* nagłówek podstrony: pas zdjęcia, tytuł na osi */
.glowa-pod { padding-bottom: var(--odstep); }
.glowa-pod__pas { margin: 0; }
.glowa-pod__pas img { width: 100%; height: clamp(260px, 40vh, 460px); object-fit: cover; }
.glowa-pod__tekst { margin-top: clamp(40px, 4vw, 64px); row-gap: 28px; }
.glowa-pod__h1 { grid-column: 6 / -1; font-size: var(--s-liczba); line-height: .9; letter-spacing: -0.045em; }
.glowa-pod__prawa { grid-column: 6 / span 6; display: grid; gap: 16px; }
.glowa-pod__prawa .lead { max-width: 30em; }

/* nagłówek sekcji podstrony na marginesie, treść na osi */
.formaty, .pytania-marek, .edycje-pod { padding-bottom: var(--odstep); }
.formaty__tytul, .pm__tytul, .edycje-pod__tytul, .zasady__tytul { grid-column: 1 / span 5; align-self: start; }
.formaty__film { margin: 36px 0 0; max-width: 340px; }
.formaty__film video { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--papier-2); }
.formaty__film figcaption { margin-top: 10px; }
.formaty__lista { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--gut); }
.formaty__lista dt, .pm__lista dt, .kroki__lista h3, .poranek__lista h3, .edycje-pod__lista h3 {
  font-family: var(--f-tytul); font-stretch: 125%; font-weight: 800; font-size: var(--s-lead); line-height: 1.1; letter-spacing: -0.02em; }
.formaty__lista dd { margin: 12px 0 0; max-width: 34ch; }

/* kroki i poranek: kolejność pokazana miejscem, cztery kolumny */
.kroki, .poranek { padding-bottom: var(--odstep); }
.kroki__lista, .poranek__lista { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px var(--gut); }
.kroki__lista li, .poranek__lista li { padding-top: 22px; position: relative; }
.kroki__lista li::before, .poranek__lista li::before { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--tusz); }
.kroki__lista p, .poranek__lista p { margin-top: 12px; max-width: 30ch; }

/* zasady: strona czerni */
.zasady { background: var(--czern); color: var(--na-czerni); padding-block: var(--odstep); margin-bottom: var(--odstep); }
.zasady__lista { grid-column: 6 / -1; display: grid; gap: 14px; }
.zasady__lista li { font-size: var(--s-lead); line-height: 1.3; display: flex; gap: 16px; align-items: baseline; }
.zasady__lista li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--na-czerni); flex: none; transform: translateY(-0.15em); }

/* pytania marek: pytanie po lewej, odpowiedź na osi */
.pm__lista { grid-column: 1 / -1; margin-top: clamp(40px, 4vw, 64px); display: grid; gap: 0; }
.pm__lista > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding-block: 22px; }
.pm__lista > div:nth-child(odd) { background: var(--papier-2); margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); }
.pm__lista dt { grid-column: 1 / span 5; padding-right: 16px; }
.pm__lista dd { grid-column: 6 / span 6; margin: 0; max-width: 36em; }

/* tabela realizacji i wyników */
.zrobione { padding-bottom: var(--odstep); }
.zrobione__zdjecia { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gut); align-items: end; }
.zrobione__zdjecia img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zrobione__zdjecia figure:first-child img { aspect-ratio: 16 / 10; }
.zrobione__zdjecia figcaption { margin-top: 8px; }
.edycje-pod__foto { margin: 36px 0 0; max-width: 360px; }
.edycje-pod__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.edycje-pod__foto figcaption { margin-top: 10px; }
.zrobione__tabela, .wyniki__tabela { margin-top: clamp(36px, 4vw, 56px); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--s-tekst); }
th { text-align: left; font-weight: 400; color: var(--tusz-2); font-size: var(--s-tekst); padding: 0 16px 12px 0; }
td { padding: 16px 16px 16px 0; vertical-align: top; }
tbody tr:nth-child(odd) td { background: var(--papier-2); }
tbody tr td:first-child { padding-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
th:first-child { padding-left: 12px; }
.zrobione__notka, .wyniki__notka { margin-top: 16px; }

/* mozaika bez odstępów (zdjęcia i płaskie kafle) */
.mozaika-sekcja { margin-bottom: var(--odstep); }
.mozaika { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; grid-template-rows: repeat(2, clamp(220px, 23vw, 360px)); }
.mozaika__podpis { margin-top: 14px; }
.mozaika__f video { width: 100%; height: 100%; object-fit: cover; }
.mozaika__f { position: relative; overflow: hidden; margin: 0; }
.mozaika__f img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mozaika__f:hover img { transform: scale(1.03); }
.mozaika__f--a { grid-column: 1; grid-row: 1 / span 2; }
.mozaika__f--b { grid-column: 3 / span 2; grid-row: 1; }
.mozaika__f--c { grid-column: 2 / span 2; grid-row: 2; }
.mozaika__kafel { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 2vw, 28px); }
.mozaika__kafel .liczba { font-size: var(--s-tytul); line-height: .9; }
.mozaika__kafel--szary { grid-column: 2; grid-row: 1; background: var(--szary); }
.mozaika__kafel--czarny { grid-column: 4; grid-row: 2; background: var(--czern); color: var(--na-czerni); }

/* edycje Grow */
.edycje-pod__lista { grid-column: 6 / -1; display: grid; }
.edycje-pod__lista li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--gut); padding-block: 22px; }
.edycje-pod__lista li:nth-child(odd) { background: var(--papier-2); padding-inline: 14px; margin-inline: -14px; }
.edycje-pod__lista time { font-size: var(--s-lead); font-variant-numeric: tabular-nums; }
.edycje-pod__lista p { margin-top: 8px; }

/* Grow Club Escape: strona czerni */
.escape { background: var(--czern); color: var(--na-czerni); padding-block: var(--odstep); }
.escape .siatka { align-items: center; }
.escape__foto { grid-column: 1 / span 5; margin: 0; }
.escape__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.escape__tekst { grid-column: 7 / span 6; display: grid; gap: 22px; }
.escape__program { display: grid; gap: 6px; }
.escape__program li { display: flex; gap: 14px; align-items: baseline; font-size: var(--s-lead); line-height: 1.3; }
.escape__program li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--na-czerni); flex: none; transform: translateY(-0.15em); }
.escape__glosy { display: grid; gap: 4px; font-size: var(--s-lead); line-height: 1.3; padding-top: 8px; }
.escape__zrodlo { color: var(--na-czerni-2); }

/* profil atlety */
.profil { padding-block: clamp(24px, 3vw, 48px) var(--odstep); }
.profil .siatka { align-items: end; }
.profil__tekst { grid-column: 1 / span 6; display: grid; gap: 22px; align-content: end; padding-bottom: 8px; }
.profil__rola { color: var(--tusz-2); }
.profil__bio { max-width: 36em; }
.profil__kafel { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; padding-top: 12px; }
.profil__liczba { font-size: var(--s-lead); line-height: 1; font-stretch: 112%; font-weight: 800; }
.profil__akcja { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; padding-top: 8px; }
.profil__portret { grid-column: 8 / -1; margin: 0; }
.profil__portret img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; background: var(--szary); }
.profil__portret figcaption { margin-top: 10px; }
.kw { padding-bottom: var(--odstep); }
.kw__tytul { grid-column: 1 / span 5; }
.kw__wstep { grid-column: 6 / span 6; align-self: end; max-width: 36em; }
.kw__lista { margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gut); }
.kw__pozycja img { width: 100%; aspect-ratio: 720 / 691; object-fit: cover; }
.kw__pytanie { font-family: var(--f-tytul); font-stretch: 112%; font-weight: 700; font-size: var(--s-tekst); margin-top: 16px; }
.kw__pozycja blockquote p { margin-top: 8px; font-size: var(--s-tekst); line-height: 1.45; }
.wyniki { padding-bottom: var(--odstep); }
.wyniki__tytul { grid-column: 1 / span 5; }
.wyniki__tabela { grid-column: 6 / -1; grid-row: 1 / span 2; margin-top: 0; }
.wyniki__tabela td.liczba { font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; white-space: nowrap; }
.wyniki__film { grid-column: 1 / span 4; margin: 40px 0 0; }
.wyniki__film video { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--papier-2); }
.wyniki__film figcaption { margin-top: 10px; }
.profil__ig { margin-top: clamp(64px, 6vw, 104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.profil__ig blockquote { grid-column: 6 / span 6; font-size: var(--s-lead); line-height: 1.3; }
.profil__ig figcaption { grid-column: 6 / span 6; margin-top: 12px; }
.wspolpraca { background: var(--szary); padding-block: clamp(96px, 8vw, 140px); }
.wspolpraca__lewa { grid-column: 1 / span 6; display: grid; gap: 24px; }
.wspolpraca__zdanie { max-width: 26em; }
.wspolpraca__prawa { grid-column: 8 / -1; align-self: end; display: grid; gap: 12px; }
.nastepny { padding-block: clamp(72px, 7vw, 112px); }
.nastepny__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--gut); align-items: end; text-decoration: none; }
.nastepny__link .drugi { grid-column: 1; }
.nastepny__imie { grid-column: 1; font-size: var(--s-liczba); line-height: .92; letter-spacing: -0.045em; transition: transform .5s var(--ease); }
.nastepny__link img { grid-column: 2; grid-row: 1 / span 2; width: clamp(140px, 16vw, 240px); aspect-ratio: 438 / 420; object-fit: cover; }
.nastepny__link:hover .nastepny__imie { transform: translateX(10px); }

@media (max-width: 899px) {
  .glowa-pod__h1, .glowa-pod__prawa { grid-column: 1 / -1; }
  .formaty__tytul, .pm__tytul, .edycje-pod__tytul, .zasady__tytul, .formaty__lista, .zasady__lista, .edycje-pod__lista, .kw__tytul, .kw__wstep, .wyniki__tytul, .wyniki__tabela, .wyniki__film, .profil__tekst, .profil__portret, .escape__foto, .escape__tekst, .wspolpraca__lewa, .wspolpraca__prawa { grid-column: 1 / -1; }
  .formaty__lista { grid-template-columns: 1fr; margin-top: 32px; gap: 32px; }
  .formaty__film { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gut); align-items: end; }
  .formaty__film figcaption { margin-top: 0; }
  .zasady__lista, .edycje-pod__lista { margin-top: 28px; }
  .kroki__lista, .poranek__lista { grid-template-columns: 1fr 1fr; gap: 36px var(--gut); }
  .pm__lista > div { grid-template-columns: 1fr; row-gap: 10px; }
  .pm__lista dt, .pm__lista dd { grid-column: 1 / -1; }
  .mozaika { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 56vw); }
  .mozaika__f--a { grid-column: 1; grid-row: 1 / span 2; }
  .mozaika__kafel--szary { grid-column: 2; grid-row: 1; }
  .mozaika__f--b { grid-column: 2; grid-row: 2; }
  .mozaika__f--c { grid-column: 1; grid-row: 3; }
  .mozaika__kafel--czarny { grid-column: 2; grid-row: 3; }
  .edycje-pod__lista li { grid-template-columns: 1fr; gap: 6px; }
  .escape__tekst { margin-top: 40px; }
  .profil__portret { margin-top: 36px; }
  .kw__wstep { margin-top: 16px; }
  .kw__lista { grid-template-columns: 1fr 1fr; }
  .wyniki__tabela { grid-row: auto; margin-top: 28px; }
  .wspolpraca__prawa { margin-top: 32px; }
  .nastepny__link { grid-template-columns: 1fr; }
  .nastepny__imie { font-size: var(--s-tytul); }
  .nastepny__link img { display: none; }
}
@media (max-width: 560px) {
  .kroki__lista, .poranek__lista, .kw__lista { grid-template-columns: 1fr; }
  .zrobione__zdjecia { grid-template-columns: 1fr 1fr; }
  .zrobione__zdjecia figure:first-child { grid-column: 1 / -1; }
  .zrobione__tabela table, .zrobione__tabela tbody, .zrobione__tabela tr, .zrobione__tabela td,
  .wyniki__tabela table, .wyniki__tabela tbody, .wyniki__tabela tr, .wyniki__tabela td { display: block; }
  .zrobione__tabela thead, .wyniki__tabela thead { display: none; }
  .zrobione__tabela tr, .wyniki__tabela tr { padding: 14px 12px; }
  .zrobione__tabela tbody tr:nth-child(odd), .wyniki__tabela tbody tr:nth-child(odd) { background: var(--papier-2); }
  .zrobione__tabela tbody tr:nth-child(odd) td, .wyniki__tabela tbody tr:nth-child(odd) td { background: none; }
  .zrobione__tabela td, .wyniki__tabela td { padding: 2px 0; }
  .zrobione__tabela td:first-child, .wyniki__tabela td:first-child { padding-left: 0; font-weight: 600; }
}

.wejdz--obraz { overflow: clip; }
/* ---------- ruch ----------
   Treść jest widoczna w spoczynku i bez skryptu. Skrypt dodaje animację tuż przed wejściem elementu w kadr,
   a pierwszy ekran ma sekwencję wejścia (maska linii tytułu, zdanie, karty) zamkniętą w ok. 1,2 s. */
.linie .line { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.linie .line > span { display: block; }
[data-ruch="lines"] .line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
[data-ruch="lines"] .line > span { display: block; }
.roll__cyfry { display: inline-flex; font-variant-numeric: tabular-nums; }
.roll__kol { display: inline-block; height: .86em; overflow: clip; vertical-align: top; }
.roll__kol::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; display: block; line-height: .86em; transform: translateY(calc(var(--d) * -0.86em)); }
@media (prefers-reduced-motion: no-preference) {
  .ladowanie .hero .linie .line > span { transform: translateY(105%); animation: m-wznies 850ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * 100ms); }
  .ladowanie .hero [data-load] { opacity: 0; transform: translateY(14px); animation: m-wznies-load 560ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .wejdz.wchodzi-teraz { animation: m-wejscie 700ms var(--ease-expo) both; animation-delay: var(--opoz, 0ms); }
  .js .wejdz--obraz.wchodzi-teraz { animation: m-migawka 900ms var(--ease-expo) both; animation-delay: calc(var(--opoz, 0ms) * .5); }
  .js .wejdz--obraz.wchodzi-teraz img, .js .wejdz--obraz.wchodzi-teraz video { animation: m-osiada 1300ms var(--ease-soft) both; animation-delay: calc(var(--opoz, 0ms) * .5); }
  .js [data-ruch="lines"].podzielony:not(.wchodzi-teraz) .line > span { transform: translateY(110%); }
  .js [data-ruch="lines"].podzielony.wchodzi-teraz .line > span { transform: none; transition: transform 900ms var(--ease-expo) calc(var(--i) * 90ms); }
  .js [data-ruch="roll"].roll:not(.wchodzi-teraz) .roll__kol::before { transform: none; }
  .js [data-ruch="roll"].roll.wchodzi-teraz .roll__kol::before { transition: transform 1000ms var(--ease-expo) calc(var(--i) * 60ms); }
  .js .pasek[data-ruch="pasek"].wchodzi-teraz .pasek__klatki > * { animation: m-zboku 760ms var(--ease-out) both; }
  .js .pasek[data-ruch="pasek"].wchodzi-teraz .pasek__klatki > :nth-child(2) { animation-delay: 60ms; }
  .js .pasek[data-ruch="pasek"].wchodzi-teraz .pasek__klatki > :nth-child(3) { animation-delay: 120ms; }
  .js .pasek[data-ruch="pasek"].wchodzi-teraz .pasek__klatki > :nth-child(4) { animation-delay: 180ms; }
  .js .pasek[data-ruch="pasek"].wchodzi-teraz .pasek__klatki > :nth-child(5) { animation-delay: 240ms; }
  .js .pasek[data-ruch="pasek"].wchodzi-teraz .pasek__podpis { animation: m-wejscie 700ms var(--ease-out) 160ms both; }
  .js .schod.wchodzi-teraz { animation-name: m-schod; }
}
@keyframes m-wznies { to { transform: none; } }
@keyframes m-wznies-load { to { opacity: 1; transform: none; } }
@keyframes m-wejscie { from { opacity: .25; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes m-migawka { from { opacity: .25; } to { opacity: 1; } }
@keyframes m-osiada { from { transform: scale(1.09); } to { transform: none; } }
@keyframes m-zboku { from { opacity: .25; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes m-schod { from { opacity: .25; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .odp.wchodzi { animation: none; }
  .karta img, .pasek__klatki img, .mozaika__f img { transition: none; }
}