/* ══════════════════════════════════════════════════════════════════════════
   PODSTRONA OFERTY NA SYSTEMIE WIZUALNYM — arkusz pilota (faza 2A.1)
   ──────────────────────────────────────────────────────────────────────────
   Ani jednej nowej barwy: wszystko z tokenów `--vs-*`. Ten arkusz mówi tylko
   o KOMPOZYCJI — o tym, jak moduł jest zbudowany i gdzie się kończy.

   ZASADA MODUŁU (to jest sedno tej poprawki):
   moduł ma wspólny początek (nadtytuł i nagłówek stoją NAD tekstem i zdjęciem
   naraz), wspólne dopełnienie pionowe, wyrównanie górą i widoczny koniec.
   Wersja 2A miała tekst i zdjęcie w jednej siatce i to nie wystarczyło —
   czytelnik widział dwa elementy obok siebie, a nie jedną wypowiedź.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SKALA REDAKCYJNA (2A.2) ─────────────────────────────────────────────
   Zmierzone na stronie wzorcowej przy 1440 px: proza redakcyjna 21 px przy
   interlinii 33,6 px (1,6), wiersz 59-68 znakow, nagłówek rozdziału 66 px.
   Pilot 2A.1 mial 16/25,9 i wiersz 78-97 znakow — na pasmie 1328 px czytalo
   sie to jak notka, nie jak tekst strony.
   Anton jest szerszy od Saira Condensed, wiec 54 px daje podobna mase co
   66 px tam. Miare sprowadzamy do 60-70 znakow ZWEZENIEM KOLUMNY (para 6/6),
   nie sufitem na prozie — sufit jest w tym serwisie zakazany. */
.ov-hero,#of{
  --ov-lead:clamp(18px,1.45vw,21px);
  --ov-proza:clamp(17px,1.3vw,19px);
  --ov-lista:clamp(16px,1.2vw,18px);
  --ov-lh:1.62;
}

.ov-in{max-width:var(--vs-container);margin:0 auto;padding:0 var(--vs-gutter)}

/* ── BANER KINOWY ────────────────────────────────────────────────────────── */
/* Wysokosc: strona wzorcowa daje banerowi caly ekran. Tutaj 88vh z sufitem
   840 px — pelny ekran na laptopie, ale na monitorze 27" baner nie zjada
   dwoch przewiniec, zanim zacznie sie tresc. */
.ov-hero{position:relative;isolation:isolate;min-height:min(88vh,840px);
  display:flex;align-items:flex-end;overflow:hidden;background:#0B0B0C}
/* Baner bez fotografii: to samo pole, ta sama typografia, tlo z tokena.
   Panel traci szklo, bo nie ma czego rozmywac. */
.ov-hero--bez-foto{min-height:min(62vh,560px);background:var(--vs-canvas)}
.ov-hero--bez-foto .ov-hero__scrim{background:none}
.ov-hero--bez-foto .ov-hero__panel{background:none;border:0;box-shadow:none;
  padding-left:0;padding-right:0;max-width:min(760px,64%)}
.ov-hero__foto{position:absolute;inset:0;z-index:0;overflow:hidden}
/* `position:absolute` na obrazie jest po to, zeby trasa mogla podac wlasny
   kadr poziomy (szerokosc powyzej 100 % i przesuniecie w lewo). Bez tego
   `object-position` przesuwa kadr tylko w pionie. */
.ov-hero__foto img{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* Przyciemnienie jest MOCNIEJSZE od lewej: panel stoi po lewej, a prawa
   strona kadru ma zostać widoczna. Płaskie przyciemnienie na całość gasi
   zdjęcie i baner znowu robi się ciemnym prostokątem. */
.ov-hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(11,11,12,.92) 0%, rgba(11,11,12,.78) 34%,
    rgba(11,11,12,.42) 60%, rgba(11,11,12,.30) 100%)}
/* Szklo w banerze jest o stopien bardziej kryjace niz domyslne: pod panelem
   stoi zdjecie o duzym kontrascie wewnetrznym (jasny plecak, ciemna lawka)
   i przy domyslnych 7 % litery na granicy tych plam traca ostrosc. */
.ov-hero__panel{background:rgba(11,11,12,.42)}
@supports (backdrop-filter:blur(2px)){
  .ov-hero__panel{background:rgba(11,11,12,.30)}
}
/* Baner bez fotografii nie ma czego przyciemniac ani rozmywac — panel musi
   wtedy zniknac calkowicie, inaczej na czarnym plotnie zostaje ledwo widoczny
   prostokat. Regula stoi PO regule ogolnej, bo inaczej ta wygrywa kolejnoscia. */
.ov-hero--bez-foto .ov-hero__panel,
.ov-hero--bez-foto .ov-hero__panel:where(*){background:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;border:0;box-shadow:none}

.ov-hero__in{position:relative;z-index:2;width:100%;
  max-width:var(--vs-container);margin:0 auto;
  padding:calc(var(--vs-gutter) + 64px) var(--vs-gutter) var(--vs-gutter)}
.ov-drog{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vs-2);
  margin:0 0 var(--vs-4);font-size:var(--vs-caption);color:rgba(255,255,255,.74)}
.ov-drog a{color:rgba(255,255,255,.74);text-decoration:none}
.ov-drog a:hover{color:#fff;text-decoration:underline}
.ov-drog span{color:rgba(255,255,255,.62)}  /* separator: 3,80:1 przy .40 */
.ov-drog b{font-weight:400;color:#fff}

/* Panel: 54 % pasma i wieksze dopelnienie. Przy 58 % tytul miescil sie
   w jednej linii do samej krawedzi panelu i brakowalo mu powietrza. */
.ov-hero__panel{max-width:min(700px,54%);padding:var(--vs-7) var(--vs-7) var(--vs-7)}
#app .ov-hero__h1{margin:var(--vs-4) 0 var(--vs-5);
  font-family:var(--vs-font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,66px);line-height:.96;letter-spacing:.4px;
  color:var(--vs-text-on-image)}
#app .ov-hero__lead{margin:0;color:rgba(255,255,255,.90);
  font-size:var(--ov-lead);line-height:1.55}
.ov-hero__akcja{margin:var(--vs-7) 0 0}
#app .ov-hero__podpis{margin:var(--vs-4) 0 0;font-size:var(--vs-caption);
  color:rgba(255,255,255,.70)}

/* ── MODUŁ: TEKST I FOTOGRAFIA ───────────────────────────────────────────── */
.ov-mod{padding:var(--vs-section-space) 0;background:var(--vs-surface)}
.ov-mod--ciemny{background:var(--vs-canvas)}
.ov-mod--tekst{background:var(--vs-canvas)}

/* Otwarcie rozdziału stoi nad CAŁYM modułem — nad tekstem i nad zdjęciem
   naraz. To jest ten „wspólny początek": czytelnik widzi jeden tytuł, a pod
   nim dwie części jednej wypowiedzi, a nie dwa osobne elementy. */
.ov-otw{margin:0 0 var(--vs-5);padding-bottom:var(--vs-3);
  border-bottom:var(--vs-border)}
.ov-otw--srodek{text-align:center;border-bottom:0;padding-bottom:0}
.ov-h2{margin:var(--vs-2) 0 0;font-family:var(--vs-font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.4px;
  font-size:clamp(30px,3.6vw,54px);line-height:1.02;color:var(--vs-text)}

/* WSPOLNA OS ROZPOCZECIA. Tekst i fotografia zaczynaja sie w tej samej
   linii — to jest to, co robi z nich jeden modul. Wyrownanie do srodka
   (2A.1) laczylo je optycznie slabiej i przesuwalo tekst w dol wzgledem
   kadru. Roznice wysokosci wyrownuje teraz TYPOGRAFIA: lead jest wiekszy,
   a kadr przyciety do 3:2 zamiast 4:3. */
.ov-mod__tresc{display:grid;gap:var(--vs-cluster-space);align-items:start}
@media(min-width:900px){
  /* WYRÓWNANIE DO ŚRODKA, nie do góry. Akapit ma tu trzy do pięciu wierszy,
     fotografia jest wyższa — przy wyrównaniu górą pod tekstem zostawała
     pusta kolumna na 230 px i to WYGLĄDAŁO jak dziura. Wyśrodkowanie
     rozkłada tę różnicę na górę i dół, więc czyta się jako oddech modułu,
     a nie jako brak. Wspólny początek modułu daje otwarcie rozdziału, które
     stoi nad obiema kolumnami. */
  /* 6/6 — swiadomy wybor, nie kompromis. Przy 1328 px pasma kolumna tekstu
     ma 640 px, czyli przy 19 px daje 60-68 znakow w wierszu: dokladnie to
     pasmo, w ktorym czyta sie strone wzorcowa. Przy 7/5 kolumna miala 745 px
     i wiersz 78-97 znakow. Fotografia dostaje te same 640 px — 48 % pasma,
     wiec spelnia zasade minimum 40 %. */
  .ov-mod__tresc{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  /* Moduł odwrotny: fotografia po lewej. W kodzie tekst zostaje PIERWSZY,
     więc kolejność czytania nie zmienia się razem z wyglądem — przestawia
     się tylko kolumna siatki. */
  .ov-mod--odwrotnie .ov-mod__tekst{grid-column:2}
  .ov-mod--odwrotnie .ov-mod__foto{grid-column:1;grid-row:1}
}
.ov-mod__foto{margin:0;position:relative}
.ov-mod__foto picture{display:block}
.ov-mod__foto img{display:block;width:100%;height:auto;
  border-radius:var(--vs-radius-lg);background:var(--vs-surface-elevated)}
/* Wysoki kadr pionowy przycinamy do proporcji 4:3 — inaczej jedno zdjęcie
   wyznacza wysokość całego modułu i tekst pływa w pustce obok. */
@media(min-width:900px){
  /* 16:9, nie 3:2. Przy pasmie 640 px kadr 3:2 ma 428 px wysokosci, a lead
     z akapitem wspierajacym 272 px — pod tekstem zostawalo 157 px pustego.
     16:9 daje 360 px i roznica schodzi do 88 px, czyli mniej niz wysokosc
     jednego akapitu. To jest ten swiadomy offset, a nie przypadkowa dziura. */
  .ov-mod__foto img{aspect-ratio:16/9;object-fit:cover;height:auto}
}
#app .ov-mod__foto figcaption{margin:var(--vs-3) 0 0;font-size:var(--vs-caption);
  line-height:1.5;color:var(--vs-text-muted)}

/* WAGA SELEKTORA. Powloka serwisu ma `#app p, #app li, #app dd {font-size:
   var(--body)}` — waga 1,0,1, wiec bije kazda gola klase. Dlatego reguly
   typograficzne tej podstrony musza zaczynac sie od `#app`. Bez tego cala
   skala redakcyjna nizej byla deklaracja bez skutku: zmierzone 16 px zamiast
   19 px. To ta sama pulapka, ktora spłaszcza typografie na telefonie. */

/* PIERWSZY AKAPIT MODULU JEST LEADEM. Nie osobna klasa, tylko rola: to on
   ma odpowiedziec na naglowek, wiec jest wiekszy i jasniejszy od reszty.
   Dalsze akapity sa tekstem wspierajacym. Tak samo dziala strona wzorcowa:
   21 px na wejsciu rozdzialu, 15,5 px na notach pod spodem. */
/* PROZA MARKETINGOWA NIE JEST JUSTOWANA (decyzja wlasciciela, 08.09.2026).
   Justowanie z automatycznym dzieleniem dawalo podzialy w rodzaju
   „de-/terminacji", „so-/bie", „ura-/zu" i nierowne odstepy miedzy slowami.
   Na stronie publicznej wazniejsza jest plynnosc czytania niz rowna prawa
   krawedz, wiec: rowanie do lewej, zadnego dzielenia, naturalna chorągiewka.
   Miare (60-70 znakow) trzyma szerokosc kolumny, a nie justowanie — dlatego
   zdjecie justowania nic w niej nie zmienia. */
#app .ov-proza{margin:0 0 var(--vs-5);font-size:var(--ov-proza);
  line-height:var(--ov-lh);color:var(--vs-text-secondary);
  text-align:left;
  hyphens:none;-webkit-hyphens:none;
  text-wrap:pretty}
#app .ov-mod__tekst > .ov-proza:first-child,
#app .ov-pasmo__panel > .ov-proza:first-of-type{font-size:var(--ov-lead);
  line-height:1.5;color:var(--vs-text)}
#app .ov-proza:last-child{margin-bottom:0}
#app .ov-proza--po{color:var(--vs-text-muted);font-size:var(--vs-body)}

.ov-lista{list-style:none;margin:0 0 var(--vs-5);padding:0}
#app .ov-lista li{position:relative;padding-left:30px;margin:0 0 var(--vs-4);
  font-size:var(--ov-lista);line-height:1.55;color:var(--vs-text-secondary)}
#app .ov-lista li:last-child{margin-bottom:0}
#app .ov-lista li::before{content:"";position:absolute;left:0;top:.72em;
  width:16px;height:2px;background:var(--vs-accent)}
.ov-kroki{list-style:none;counter-reset:ovk;margin:0 0 var(--vs-4);padding:0}
#app .ov-kroki li{counter-increment:ovk;position:relative;padding-left:42px;
  margin:0 0 var(--vs-3);font-size:var(--ov-lista);line-height:var(--vs-lh-text);
  color:var(--vs-text-secondary)}
.ov-kroki li::before{content:counter(ovk);position:absolute;left:0;top:-2px;
  width:28px;height:28px;border-radius:var(--vs-radius-pill);
  border:2px solid var(--vs-accent);color:var(--vs-text);
  display:grid;place-items:center;font-size:13px;font-weight:700}
.ov-pary{margin:0 0 var(--vs-4)}
.ov-pary>div{padding:var(--vs-4) 0;border-top:var(--vs-border)}
.ov-pary>div:last-child{border-bottom:var(--vs-border)}
.ov-pary dt{margin:0 0 var(--vs-1);font-size:var(--vs-caption);font-weight:700;
  color:var(--vs-text)}
#app .ov-pary dd{margin:0;font-size:var(--ov-proza);line-height:var(--vs-lh-text);
  color:var(--vs-text-secondary)}

/* Moduł tekstowy bez zdjęcia: proza w dwóch łamach (model E), żeby wiersz
   nie rozciągał się na całe pasmo. */
@media(min-width:900px){
  .ov-lamy{columns:2;column-gap:clamp(32px,3.4vw,64px)}
  /* Lamanie na POZYCJACH, nie na calych blokach. Przy `break-inside:avoid`
     na dziecku bezposrednim cala lista zostawala w pierwszej lamie, a druga
     stala pusta — zmierzone na /oferta/zajecia-firmowe, sekcja „Oferta":
     640 px pustej kolumny obok trzech pozycji. Teraz lista plynie przez obie. */
  .ov-lamy>p,
  .ov-lamy li,
  .ov-lamy .ov-pary>div{break-inside:avoid}
  .ov-lamy>ul,.ov-lamy>ol,.ov-lamy>dl{break-inside:auto}
  /* Naglowek listy nie moze zostac sam na dole lamy. */
  .ov-lamy>*{margin-top:0}
}

/* ── PASMO OBRAZU ZE ZDANIEM ─────────────────────────────────────────────── */
.ov-pasmo{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;min-height:min(70vh,620px);background:#0B0B0C}
.ov-pasmo__foto{position:absolute;inset:0;z-index:0;overflow:hidden}
/* KADR PASMA: PANEL STOI W PUSTCE ZDJECIA, NIE NA BOHATERZE.
   Fotografia ma proporcje 1,5, pasmo 2,4 — przy `cover` szerokosc nie ma
   zapasu, wiec `object-position` przesuwa kadr tylko w pionie i sylwetka
   zostawala dokladnie pod lewa krawedzia panelu. Zapas robimy sami:
   obraz jest szerszy od pasma i przesuniety w lewo, dzieki czemu twarz
   wchodzi w lewa polowe, a panel po prawej lezy na tle. */
.ov-pasmo__foto img{position:absolute;top:0;left:-38%;width:138%;height:100%;
  object-fit:cover;display:block}
/* PRZYCIEMNIENIE LZEJSZE (2A.2). Poprzednie zaczynalo sie od 0,92 i gasilo
   fotografie tak, ze widac bylo sam panel. Teraz ciemno jest TYLKO pod
   panelem (prawa strona), a lewa polowa kadru zostaje widoczna: bohaterem
   sekcji ma byc zdjecie, panel jest informacja NA nim. Kontrast pisma bierze
   sie z panelu (wlasne tlo), nie z przyciemnienia calego kadru. */
.ov-pasmo__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(260deg,
    rgba(11,11,12,.86) 0%, rgba(11,11,12,.66) 34%,
    rgba(11,11,12,.24) 62%, rgba(11,11,12,.10) 100%)}
.ov-pasmo__in{position:relative;z-index:2;width:100%;
  max-width:var(--vs-container);margin:0 auto;
  padding:var(--vs-section-space) var(--vs-gutter);
  display:flex;justify-content:flex-end}
.ov-pasmo__panel{max-width:min(760px,58%);padding:var(--vs-7) var(--vs-6)}
.ov-pasmo__panel .ov-h2{color:var(--vs-text-on-image)}
/* Teza: mniejsza od naglowka rozdzialu, bo to zdanie, a nie tytul — ale
   z wlasna waga. Krój nagłówkowy, wersaliki wylaczone: zdanie wersalikami
   na 40 px czyta sie wolniej niz to samo zdanie normalnie. */
#app .ov-teza{margin:var(--vs-3) 0 var(--vs-5);font-family:var(--vs-font-display);
  font-weight:400;font-size:clamp(26px,2.9vw,42px);line-height:1.08;
  letter-spacing:.2px;color:var(--vs-text-on-image)}
#app .ov-pasmo__panel .ov-proza{color:rgba(255,255,255,.90);margin-bottom:0}

/* ── CZTERY REZULTATY ────────────────────────────────────────────────────── */
.ov-rez{padding:var(--vs-section-space) 0;background:var(--vs-canvas)}
.ov-rez__lista{list-style:none;margin:var(--vs-7) 0 0;padding:0;
  display:grid;gap:var(--vs-cluster-space) clamp(28px,3vw,56px)}
@media(min-width:900px){ .ov-rez__lista{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1280px){ .ov-rez__lista{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Numer jest typografią, nie ramką — dlatego kreska nad pozycją zamiast
   pudełka. Cztery pudełka obok siebie zamieniłyby tę sekcję w rząd kart,
   a strona ma już jeden taki rytm w module z listą. */
.ov-rez__lista li{padding-top:var(--vs-4);border-top:2px solid var(--vs-accent)}
.ov-rez__nr{display:block;font-family:var(--vs-font-display);font-weight:400;
  font-size:28px;line-height:1;color:var(--vs-accent-text);margin:0 0 var(--vs-3)}
.ov-rez__h3{margin:0 0 var(--vs-2);font-size:var(--vs-h3);line-height:1.2;
  color:var(--vs-text)}
#app .ov-rez__p{margin:0;font-size:var(--ov-lista);line-height:1.6;
  color:var(--vs-text-muted)}

/* ── WEZWANIE I FORMULARZ ────────────────────────────────────────────────── */
.ov-cta{padding:var(--vs-section-space) 0;background:var(--vs-canvas);
  color:var(--vs-text)}
.ov-cta__uklad{display:grid;gap:var(--vs-cluster-space);align-items:start}
/* Zaproszenie zostaje w polu widzenia, kiedy czytelnik przewija formularz.
   Panel formularza jest od niego wyższy o 570 px i bez tego lewa kolumna
   znikała z ekranu w połowie pasa. */
@media(min-width:1024px){
  .ov-cta__tekst{position:sticky;top:96px}
}
@media(min-width:1024px){
  /* 5/7, nie 6/6. Panel formularza jest wyzszy od zaproszenia obok niego,
     wiec przy rownym podziale po lewej zostawala pusta polowa pasma na cala
     wysokosc formularza. Wezsza kolumna tekstu skraca te roznice i daje
     formularzowi tyle miejsca, ile realnie zajmuje. */
  .ov-cta__uklad{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
.ov-cta__tekst .ov-proza{color:var(--vs-text-secondary);text-align:left}
/* Kolumna zaproszenia ma 520 px i długie słowa („zespołu trenerskiego").
   Justowanie robi w niej rzeki białych plam — model C obowiązuje w kolumnie
   szerokiej, nie w każdej. */
.ov-dane{display:flex;flex-wrap:wrap;gap:var(--vs-3);margin:var(--vs-5) 0 0}
.ov-form{padding:var(--vs-6);background:var(--vs-surface);
  border:var(--vs-border);border-radius:var(--vs-radius-lg)}
.ov-form__h2{margin:var(--vs-2) 0 var(--vs-2);font-family:var(--vs-font-display);
  font-weight:400;text-transform:uppercase;letter-spacing:.4px;
  font-size:var(--vs-h3);line-height:1.12;color:var(--vs-text)}
#app .ov-form__wstep{margin:0 0 var(--vs-5);font-size:var(--vs-body);line-height:1.55;
  color:var(--vs-text-muted)}
.ov-pola{display:flex;flex-direction:column;gap:var(--vs-4)}
/* Blok informacji o danych doklada app.js. Oddzielamy go od pol formularza
   kreska i wlasnym tlem: bez tego czyta sie jak kolejne pole do wypelnienia,
   a jest notą prawną. */
/* app.js nadaje temu blokowi wlasny sufit szerokosci (410 px) wyliczony dla
   waskiej kolumny w starym ukladzie. Tutaj panel ma 700 px i nota konczyla sie
   w polowie, jakby byla urwana. Zdejmujemy sufit — szerokosc ma dawac panel. */
#app .ov-form .yk-info-dane{max-width:none;margin:var(--vs-2) 0 0;padding:var(--vs-4);
  border-top:var(--vs-border);border-radius:var(--vs-radius-sm);
  background:var(--vs-canvas)}
#app .ov-form .yk-info-dane *{font-size:var(--vs-caption);line-height:1.55}
.ov-dwa{display:flex;gap:var(--vs-3)}
.ov-dwa>*{flex:1;min-width:0}
.ov-form :is(input[type=text],input[type=email],input[type=tel],textarea){
  width:100%;padding:13px 16px;border-radius:var(--vs-radius-sm);
  border:var(--vs-border);background:var(--vs-surface-elevated);color:var(--vs-text);
  font-family:var(--vs-font-body);font-size:16px;line-height:1.4}
.ov-form textarea{resize:vertical;min-height:104px}
.ov-form ::placeholder{color:var(--vs-text-muted)}
.ov-form :is(input,textarea):focus-visible{outline:3px solid var(--vs-accent);
  outline-offset:2px}
/* Napis przy zgodzie musi zostać czytelny: app.js bierze jego kolor i maluje
   nim okienka, które dokłada niżej. */
.ov-zgoda{display:flex;gap:var(--vs-3);align-items:flex-start;min-height:44px;
  font-size:var(--vs-caption);line-height:1.55;color:var(--vs-text-muted);cursor:pointer}
.ov-zgoda input{margin-top:2px;accent-color:var(--vs-accent);flex-shrink:0;
  width:24px;height:24px}
.ov-zgoda a{color:var(--vs-accent-text);text-decoration:underline}
.ov-form button[type=submit]{align-self:flex-start;margin-top:var(--vs-2);
  min-height:52px;padding:0 30px;
  border:0;border-radius:var(--vs-radius-sm);background:var(--vs-accent);
  color:var(--vs-on-accent);font-family:var(--vs-font-body);font-size:14px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background var(--vs-ruch)}
@media(hover:hover){ .ov-form button[type=submit]:hover{background:var(--vs-accent-strong)} }
.ov-powrot{margin:var(--vs-7) 0 0;font-size:var(--vs-body)}
.ov-powrot a{display:inline-flex;align-items:center;min-height:24px;
  color:var(--vs-accent-text);font-weight:700;text-decoration:none}
.ov-powrot a:hover{text-decoration:underline}

/* ── TELEFON I TABLET ────────────────────────────────────────────────────── */
@media(max-width:899px){
  .ov-hero{min-height:auto}
  .ov-hero__panel{max-width:none}
  .ov-hero__scrim{background:linear-gradient(180deg,
    rgba(11,11,12,.55) 0%, rgba(11,11,12,.72) 46%, rgba(11,11,12,.94) 100%)}
  .ov-pasmo__panel{max-width:none}
  /* Na telefonie panel stoi na calej szerokosci, wiec nie ma czego omijac —
     kadr wraca do pelnego pola. */
  .ov-pasmo__foto img{left:0;width:100%}
  .ov-pasmo__scrim{background:linear-gradient(180deg,
    rgba(11,11,12,.55) 0%, rgba(11,11,12,.74) 44%, rgba(11,11,12,.94) 100%)}
  .ov-mod__foto img{aspect-ratio:3/2;object-fit:cover}
}
@media(max-width:600px){
  .ov-dwa{flex-direction:column}
  .ov-form{padding:var(--vs-5)}
}