/* REDFORD V6 · mobile.css (R12-B, 20.10, Rafał: "dostosuj całą główną stronę pod telefon, żeby dobrze się wyświetlało").
 * Jedno miejsce poprawek telefonu i tabletu ładowane PO pozostałych arkuszach sekcji (build.py: ... cookies, btnfx, mkfx, mobile).
 * Breakpointy bez nowych progów: istniejące 1023 px (telefon i tablet), 389 px (wąski telefon, jak nav.css) oraz orientacja pozioma
 * z niską wysokością (telefon obrócony). Desktop >= 1024 px: żadna reguła poniżej nie działa (wyjątek: (pointer:coarse), czyli
 * ekran dotykowy, gdzie tylko poszerzamy niewidoczny obszar klikania). Treść, kolejność i linki bez zmian.
 * Pomiar przed/po: qa-R12B/audit.py (AUDYT.md). Hover tylko dla myszy: reguły :hover w arkuszach sekcji zamknięte w
 * @media (hover:hover) and (pointer:fine) skryptem qa-R12B/hoverwrap.py (bez lepkiego stanu po tapnięciu). */

/* ---------- safe-area (iPhone z notchem, viewport-fit=cover): boczne marginesy w poziomie i elementy fixed ---------- */
@media (max-width:1023px){
  :root{--m:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  .nv-bar{top:env(safe-area-inset-top,0px)}
  html.nv-hide:not(.is-menu) .nv-bar{transform:translateY(calc(-88px - env(safe-area-inset-top,0px)))}
  .skip{top:calc(12px + env(safe-area-inset-top,0px))}
  .mn-p{padding-top:calc(96px + env(safe-area-inset-top,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
    padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .ck{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .tdlg__foot{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .c-modal-contact_container{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  /* hero: znak R i tekst schodzą o wysokość paska statusu (przy env 0 bez zmian) */
  .hr-in{padding-top:calc(max(104px,13vh) + env(safe-area-inset-top,0px))}
  .hr-mark{top:calc(84px + env(safe-area-inset-top,0px))}
}

/* ---------- nawigacja i menu: cele dotykowe >= 44 px ---------- */
@media (max-width:1023px),(pointer:coarse){
  /* logo 150x26: niewidoczny obszar klikania 44 px wysokości (wygląd bez zmian) */
  .nv-logo::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}
@media (max-width:1023px){
  /* stopka menu (e-mail, telefon, wszystkie realizacje): wiersze 44 px zamiast 22 px z odstępem 4 */
  .mn-col{gap:0}
  .mn-c{display:inline-flex;align-items:center;min-height:44px}
  .mn-lbl{font-size:14px}
}

/* ---------- hero: telefon obrócony poziomo (np. 844x390). Było: nagłówek zaczynał się 284 px od góry przy oknie 390 px
 * (druga linia i przycisk poza pierwszym ekranem), zdjęcie 804x455 wyższe niż okno. Teraz: znak R po prawej (w całości na
 * pierwszym ekranie), nagłówek, zdanie i przycisk po lewej obok znaku, zdjęcie mieści się w wysokości okna. ---------- */
@media (max-width:1023px) and (orientation:landscape) and (max-height:540px){
  .hr-wrap{--rmw:min(30vw,250px)}
  .hr-mark{width:var(--rmw);top:calc(76px + env(safe-area-inset-top,0px))}
  .hr-in{padding-top:calc(84px + env(safe-area-inset-top,0px));padding-bottom:28px}
  .hr-h1{margin-top:0;max-width:calc(100% - var(--rmw) - 32px);font-size:clamp(30px,4.8vw,44px)}
  .hr-row{margin-top:24px;max-width:calc(100% - var(--rmw) - 32px)}
  .hr-foot-in{gap:14px}
  .hv-slot{width:min(calc(100vw - 2 * var(--m)),calc((100svh - 40px) * 1.7667))}
}

/* ---------- O nas, realizacje: przyciski z obrysem 43 -> 44 px, strzałki karuzeli 42 -> 44 px obszaru ---------- */
@media (max-width:1023px){
  .pill--out{height:44px}
  .rf-car_btn{position:relative}
  .rf-car_btn::after{content:"";position:absolute;inset:-2px;border-radius:50%}
  .rf-car_count{font-size:14px;white-space:nowrap}
}

/* ---------- liczby, cennik: małe opisy do 14 px; przycisk telefonu w karcie mieścił się tylko od 360 px ---------- */
@media (max-width:1023px){
  .st-n{font-size:14px}
  .of-meta{font-size:14px}
  .of-note{font-size:14px}
}
@media (max-width:389px){
  /* 320: napis "Zadzwoń: +48 535 791 191" (174 px) w polu 153 px był ucięty; karta i przycisk z mniejszym wcięciem (pole 188 px) */
  .of-card{padding-left:16px;padding-right:16px}
  .of-b{padding:0 16px 0 18px}
}

/* ---------- zespół, FAQ: etykiety i podpowiedź 12/13 -> 14 px ---------- */
@media (max-width:1023px){
  .team__label,.team__hint,.fq_kick{font-size:14px}
}

/* ---------- kontakt i stopka ---------- */
@media (max-width:1023px){
  .ft_lbl{font-size:14px}
  .ft_eco .ft_co{font-size:14px}
  /* linki sekcji: wiersz 44 px (było 29) */
  .ft_menu a{min-height:44px;padding-top:0;padding-bottom:0}
  /* linki prawne: element 44 px bez zmiany odstępów wiersza (wiersz 51 px: 14 + 23 + 14) */
  .ft_legal .ft_fine a,.ft_legal .ft_fine button{display:inline-block;padding:10.5px 0;margin:-10.5px 0}
}

/* ---------- modal kontaktu ---------- */
@media (max-width:1023px),(pointer:coarse){
  /* przycisk Zamknij 33x39: obszar klikania 47 px (wygląd bez zmian) */
  .c-modal-contact .modal_close::before{content:"";position:absolute;left:50%;top:50%;width:47px;height:47px;transform:translate(-50%,-50%)}
}
@media (max-width:1023px){
  /* tablet (768): wiersze kontaktu miały 19.7% szerokości karty (145 px), karta 288 px ucinała wiersz e-mail; limit 72 px
     (telefon do ok. 365 px karty bez zmian) */
  .c-modal-contact .c-card-cta_item::before{padding-top:min(19.7015%,72px)}
}

/* ---------- baner cookies: przyciski 35 -> 44 px obszaru, napis przycisku 14 px ---------- */
@media (max-width:1023px){
  .ck-b{gap:10px}
  .ck-set,.ck-yes{position:relative}
  .ck-set::after,.ck-yes::after{content:"";position:absolute;inset:-5px}
  .ck-yes{font-size:14px}
  .ck-t a{position:relative;display:inline-block}
  .ck-t a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* stopka: najkrótszy link sekcji ("FAQ", 38 px) z obszarem klikania co najmniej 44 px szerokości */
@media (max-width:1023px){
  .ft_menu a{min-width:44px}
}

/* ---------- R29 (25.10, Rafał: "wywal wszędzie swipe poza ekranem, dostosuj mobile"): nic nie wychodzi poza ekran, nic nie wymaga przesuwania palcem ---------- */
@media (max-width:1023px){
  /* karuzela realizacji: tylko aktywny slajd w pełnej szerokości, boczne ukryte (strzałki zostają) */
  .rz-car .rf-car{--sw:calc(100vw - 2 * var(--m));-webkit-mask-image:none;mask-image:none;overflow:hidden}
  .rz-car .rf-car .rf-slide:not([data-pos="c"]){opacity:0!important;visibility:hidden;pointer-events:none}
  .rz-car .rf-slide_frame{border-radius:16px}
  .rf-car_btn{width:52px;height:52px}
  .rf-car_name{font-size:1.2rem}
  /* opinie: kolumna kart zamiast bezkońcowej taśmy przesuwanej poza ekran */
  .op_marq{overflow:visible;padding:0 var(--m)}
  .op_marq::before,.op_marq::after{display:none}
  .op_view{-webkit-mask-image:none;mask-image:none;padding-block:0}
  .op_track{display:block;width:auto;animation:none;will-change:auto}
  .op_set{display:flex;flex-direction:column;gap:14px;padding:0}
  .op_set-clone{display:none}
  .op_card{width:100%;padding:24px 22px 22px}
  .op_set .op_card:nth-child(n+4){display:none}
  .op_marq.is-open .op_set .op_card:nth-child(n+4){display:flex}
  .op_more{display:flex;justify-content:center;margin-top:18px}
  .op_more .pill{min-height:48px}
}
@media (min-width:1024px){.op_more{display:none}}
@media (max-width:1023px){
  .op_more_btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid rgba(243,243,239,.45);border-radius:999px;background:transparent;color:var(--paper);font:700 15px/1 var(--f-text,inherit);cursor:pointer}
  .op_more_btn:active{background:rgba(243,243,239,.12)}
}
@media (max-width:1023px){
  /* R29: pas "Wybrane realizacje" bez ruchu i bez ucięcia: jeden napis w całości, zawija się do 2 linii */
  .rz-mq{padding:0 var(--m)}
  .rz-mq_track{width:auto!important;transform:none!important}
  .rz-mq_it:nth-child(n+2){display:none}
  .rz-mq_it{white-space:normal;flex-wrap:wrap;font-size:clamp(40px,12vw,56px);line-height:1.08;padding-right:0}
}
@media (max-width:1023px){
  .rz-mq_track{display:block}
  .rz-mq_it{display:block;flex:0 1 auto;max-width:100%;white-space:normal;font-size:clamp(38px,11vw,52px);line-height:1.1}
  .rz-mq_it .rz-mq_star{display:none}
}

@media (max-width:1023px){
  /* R29: etapy bez przyklejonych tytułów (nachodziły na przewijany tekst), zwykły układ jeden pod drugim */
  .et-side{position:static;margin:0;padding:0 0 10px;background:none;box-shadow:none;z-index:auto}
  .et-step{padding-bottom:44px}
  .et-title{font-size:32px}
}

/* ---------- R30 (27.10, Rafał: "dostosuj lepszy układ i całą stronę pod mobile"). Tylko telefon/tablet, desktop >= 1024 px bez zmian.
 * Pomiar przed/po: qa-R30/audit.cjs (przed.json, po.json). ---------- */
@media (max-width:767px) and (orientation:portrait){
  /* hero: nagłówek w 4 liniach zamiast 5 ("Projektujemy strony, / sklepy / i aplikacje dla realnych / potrzeb biznesu"; złamania <br>
     z HTML zostają, SplitText je respektuje). Rozmiar: najdłuższy odcinek "i aplikacje dla realnych" ma 9.22 em, więc
     (szerokość - 2 marginesy) / 9.45 mieści go w jednej linii (390: 39 -> 37 px, 360: 35 -> 34 px, 430: 43 -> 41.5 px). */
  .hr-h1{font-size:clamp(28px,calc((100vw - 2 * var(--m)) / 9.45),46px)}
  /* hero: dół 116 -> 48 px (dawny zapas nad pigułką starego banera cookies, banera już nie ma) i wysokość 100svh - 80 px:
     hero.js stawia ramkę filmu >= dół hero + 80 px, czyli dokładnie pod pierwszym ekranem, więc na pierwszym ekranie nie ma
     samotnej czerwonej kreski (górny brzeg ramki), a pusty pas przycisk -> ramka maleje (390: 196 -> 128 px).
     Odległości znak R -> ramka filmu (min. 520 px drogi kreski) liczy hero.js, animacja bez zmian. */
  .hr{min-height:0}
  .hr-in{min-height:calc(100vh - 80px);min-height:calc(100svh - 80px);padding-bottom:48px}
  /* akapit przy filmie: 118 px pustki nad nim -> 56 px, pod nim 80 + 72 px do "O nas" -> 72 px jak między pozostałymi sekcjami */
  .hv-intro{margin-top:56px}
  .hv{padding-bottom:0}
}
/* ---------- R31 (27.10, Rafał: "na telefonie popraw hero i tak by całość lepiej wyglądała wraz z animacją"). Wzór mkvision mobile:
 * duży nagłówek (u nich 50-56 px), znak marki mniejszy tuż nad/za nagłówkiem, szklane karty wyraźnie wychodzące za krawędzie.
 * Tylko telefon w pionie (<= 767 px), desktop i tablet bez zmian. Tekst bez zmian: na telefonie ukryte są tylko złamania <br>
 * z HTML (przy większym rozmiarze wymuszały sierotę "realnych"), linie układa text-wrap:balance, SplitText bierze je z układu.
 * Pomiar qa-R31/h1lines.cjs: (szerokość - 2 marginesy) / 7.6 daje 5 równych linii "Projektujemy / strony, sklepy / i aplikacje /
 * dla realnych / potrzeb biznesu" na 320-430 px (390: 46 px, 360: 42 px, 430: 51 px). ---------- */
@media (max-width:767px) and (orientation:portrait){
  /* znak ograniczony też wysokością okna */
  .hr-wrap{--rmw:min(56vw,230px,26vh);--rmw:min(56vw,230px,26svh)}
  .hr-mark{width:var(--rmw)}
  .hr-h1{font-size:clamp(30px,calc((100vw - 2 * var(--m)) / 7.6),52px);line-height:1.15;letter-spacing:-.04em;text-wrap:balance;
    /* niski ekran: nagłówek zaczyna się >= 24 px pod znakiem R (znak: top 84 px, wysokość 0.80419 szerokości) */
    margin-top:calc(var(--rmw) * .80419 + 84px + 24px - max(104px,13vh))}
  .hr-h1 br{display:none}
  .hr-h1 .ln{white-space:nowrap}
  .hr-row{margin-top:30px}
  /* szklane karty: bez backdrop-filter (rozmywał tylko gradient tła, a kosztował przemalowanie przy wejściu na słabszym telefonie);
     biel szkła odrobinę mocniejsza. Układ jak u wzoru: dwie karty wyraźnie za prawą krawędzią, jedna za lewą przy nagłówku, jedna
     mała między nimi; przycięcie jest celowe (min. 30% karty poza ekranem), a nie 5-10% jak dotąd. */
  .hr-glass-in,.hr-glass--1 .hr-glass-in{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hr-glass-in{background:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 40%,rgba(255,255,255,.06) 64%,rgba(255,255,255,.22) 88%,rgba(200,23,29,.05) 100%)}
  .hr-glass--1{width:50vw;right:-20vw;top:-10px}
  .hr-glass--2{width:36vw;right:30vw;top:70px}
  .hr-glass--3{width:28vw;right:-12vw;top:210px}
  .hr-glass--4{width:34vw;left:-16vw;right:auto;top:calc(var(--rmw) * .80419 + 150px)}
}
/* R31: niski telefon (wysokość <= 700 px, np. 375x667, 320x568) i szerszy ekran w pionie (> 480 px, gdzie limit 52 px dawał
   sierotę "realnych"): zostaje nagłówek z R30 (złamania <br>, (szerokość - 2 marginesy) / 9.45, 4 linie). Na niskim ekranie
   znak R mniejszy (24% wysokości okna), przycisk w całości na pierwszym ekranie. Pośrednie rozmiary z text-wrap:balance
   odrywały przecinek od "strony" po podziale SplitText, więc są tylko te dwa układy. */
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  .hr-wrap{--rmw:min(46vw,24vh);--rmw:min(46vw,24svh)}
}
@media (max-width:767px) and (orientation:portrait) and (max-height:700px),(min-width:481px) and (max-width:767px) and (orientation:portrait){
  .hr-h1{font-size:clamp(28px,calc((100vw - 2 * var(--m)) / 9.45),46px);text-wrap:wrap;letter-spacing:-.035em;line-height:1.18}
  .hr-h1 br{display:inline}
}
/* ---------- R32 (27.10) / R33 (27.10, Rafał: "popraw jeszcze hero by logo jednak nie bylo pod spodem i ta sciezka animacji nie
 * byla tak dluga"; logo "tam gdzie wczesniej"). R33 cofa z R32 położenie i rozmiar znaku R: na telefonie znak znów jak w R31
 * (mały, u góry nad nagłówkiem, margin-top H1 liczony od znaku; reguły R31 wyżej działają bez nadpisań). Zostaje z R32: kreska pod
 * tekstem bez maski (hero.js), przycisk z jasną obwódką 2 px, poświata zdania, karty bez stałego will-change.
 * Tylko telefon w pionie (<= 767 px), desktop i tablet bez zmian. ---------- */
@media (max-width:767px) and (orientation:portrait){
  /* karty na telefonie nie pływają i nie mają paralaksy (tylko wejście GSAP), więc bez stałych warstw will-change (4 warstwy mniej) */
  .hr-glass{will-change:auto}
  /* czytelność w miejscu przecięcia z czerwienią (znak, kreska): przycisk z jasną obwódką 2 px w kolorze papieru,
     zdanie (17 px, czarny na czerwieni ok. 3.3:1) z wąską jasną poświatą liter; nagłówek bez zmian (46 px bold, 3.3:1 = AA dla dużego tekstu) */
  .hr-pill{box-shadow:0 0 0 2px var(--paper)}
  .hr-lead{text-shadow:0 0 1px var(--paper),0 0 2px var(--paper),0 0 5px var(--paper)}
  /* R34: poświata liter nagłówka z R33 usunięta (kreska zaczyna się pod nagłówkiem i już go nie przecina) */
}
/* ---------- R34 (27.10, Rafał: "logo wstaw pod naglowkiem i ustaw tak by wszystko ladnie wygladalo"). Telefon w pionie:
 * kolejność od góry H1, znak R, zdanie, przycisk, wszystko w normalnym przepływie (.hr-in jako display:contents, sekcja .hr
 * jest kolumną flex), więc nic nie leży na znaku. Nagłówek zaczyna się wyżej (dawne miejsce znaku), odstępy H1 -> R -> zdanie
 * równe (--g). Znak po prawej (jak na komputerze): lewostronny tekst i znak tworzą przekątną, z lewej nogi wychodzi kreska
 * tym samym S co na komputerze w stronę środka ramki, a wolne pole obok znaku wypełnia karta 4. Rozmiary H1 bez zmian. ---------- */
@media (max-width:767px) and (orientation:portrait){
  .hr-wrap{--rmw:min(48vw,200px,23svh);--h1t:calc(clamp(104px,14svh,124px) + env(safe-area-inset-top,0px));--g:clamp(20px,3.6svh,34px)}
  .hr{display:flex;flex-direction:column;min-height:calc(100vh - 80px);min-height:calc(100svh - 80px);padding:var(--h1t) var(--m) 48px}
  .hr-in{display:contents}
  .hr-main,.hr-row{position:relative;z-index:2}
  .hr-main{margin:0;order:1}
  .hr-h1{margin-top:0}
  .hr-mark{position:relative;top:auto;right:auto;order:2;align-self:flex-end;margin:var(--g) 2vw 0 0;flex:none}
  .hr-row{margin-top:var(--g);order:3}
  /* karta 4: z lewej obok znaku (od góry nagłówka 5 linii x 1.15 + odstęp), za lewą krawędzią jak w R31 */
  .hr-glass--4{top:calc(var(--h1t) + clamp(30px,calc((100vw - 2 * var(--m)) / 7.6),52px) * 5.75 + var(--g) - 10px)}
}
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  .hr-wrap{--rmw:min(40vw,20svh);--g:clamp(16px,3svh,24px)}
}
@media (max-width:767px) and (orientation:portrait) and (max-height:700px),(min-width:481px) and (max-width:767px) and (orientation:portrait){
  /* nagłówek 4 linie (R31): karta 4 liczona od jego wysokości */
  .hr-glass--4{top:calc(var(--h1t) + clamp(28px,calc((100vw - 2 * var(--m)) / 9.45),46px) * 4.72 + var(--g) - 10px)}
}
/* ---------- R35 (27.10, Rafał: "popraw layout calego hero dla mobile"). Wzór: mkvision na telefonie (r35-ref/mk-A.jpg), trzy
 * pionowe strefy pierwszego ekranu: (1) krótki nagłówek u góry (4 linie, ok. 21% wysokości zamiast 5 linii i 37%), (2) duży znak R
 * jako dominanta środka (390: ok. 273 px zamiast 187), na tle szklanych kart, z równą pustką nad i pod (marginesy auto w kolumnie),
 * (3) zdanie i przycisk zakotwiczone przy dole pierwszego ekranu (dół przycisku 64 px nad dołem okna). Hero ma 100svh, więc ramka
 * filmu (hero.js: dół hero + 80 px) otwiera się ok. 200 px scrolla. Zdanie na wąskim pasie papieru: kreska przechodzi pod nim
 * i litery nie leżą na czerwieni. Tylko telefon w pionie; teksty, hero.js, desktop i tablet bez zmian. ---------- */
@media (max-width:767px) and (orientation:portrait){
  .hr-wrap{--rmw:min(70vw,300px,calc(28svh / .80419));--h1t:calc(clamp(92px,12svh,112px) + env(safe-area-inset-top,0px));--hb:64px}
  .hr{min-height:100vh;min-height:100svh;padding-bottom:calc(var(--hb) + env(safe-area-inset-bottom,0px))}
  /* nagłówek: 4 linie ze złamaniami z HTML (jak R30/R31 na niskim ekranie), 390: 37 px, 430: 41 px, 360: 34 px.
     Wariant bez <br> z text-wrap:balance sprawdzony (qa-R35/lines.cjs): SplitText odrywa przecinek od "strony", więc odrzucony. */
  .hr-h1{font-size:clamp(28px,calc((100vw - 2 * var(--m)) / 9.45),46px);text-wrap:wrap;letter-spacing:-.035em;line-height:1.18}
  .hr-h1 br{display:inline}
  /* znak: środek strefy między nagłówkiem a blokiem dolnym (równe odstępy), wyrównany do prawego marginesu */
  .hr-mark{margin:auto 0;align-self:flex-end;margin-right:0}
  .hr-row{margin-top:0}
  /* zdanie: wąski pas papieru tylko pod tekstem (kreska przechodzi pod nim), lekko zaokrąglony, wyrównanie tekstu bez zmian */
  .hr-foot .hr-lead{width:fit-content;max-width:calc(100% + 12px);margin:0 -6px;padding:3px 6px;border-radius:10px;background:rgba(243,243,239,.92)}
  /* szkło jako tło środkowej strefy: duża karta za znakiem przy prawej krawędzi, druga za lewą częścią znaku, mała za prawym
     końcem nagłówka, czwarta za lewą krawędzią pod znakiem; wszystkie wychodzą za krawędź jak u wzoru */
  .hr-glass--1{width:52vw;right:-22vw;top:calc(var(--h1t) + 34svh)}
  .hr-glass--2{width:34vw;right:36vw;top:calc(var(--h1t) + 24svh)}
  .hr-glass--3{width:26vw;right:-10vw;top:calc(var(--h1t) - 12px)}
  .hr-glass--4{width:30vw;left:-16vw;right:auto;top:calc(var(--h1t) + 48svh)}
}
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  .hr-wrap{--rmw:min(56vw,calc(22svh / .80419));--hb:48px}
}
@media (max-width:767px) and (orientation:portrait) and (max-height:700px),(min-width:481px) and (max-width:767px) and (orientation:portrait){
  .hr-glass--4{top:calc(var(--h1t) + 48svh)}
}
/* ---------- R37 (27.10, Rafał: "tekst tytułowy ustaw w trzech liniach na gorze, dopiero ponizej bedzie logo tylko wieksze").
 * Telefon w pionie: opływanie z R36 usunięte, układ R35 (znak w przepływie, margin auto), H1 w trzech liniach ze złamań <br>
 * z HTML: "Projektujemy strony, sklepy / i aplikacje dla realnych / potrzeb biznesu"; rozmiar = szerokość / 11.7 (najdłuższa linia 11.51 em). ---------- */
@media (max-width:767px) and (orientation:portrait){
  .hr-h1{font-size:clamp(26px,calc((100vw - 2 * var(--m)) / 11.7),40px);letter-spacing:-.03em;line-height:1.18}
  .hr-h1 .ln{white-space:nowrap}
}
/* ---------- R38 (28.10, Rafał: "napis tytulowy przesun troche nizej i zrob mniejszy odstep miedzy tytulem a opisem i logiem").
 * Telefon w pionie: zdanie i przycisk zostają przy dole (R35/R37), blok H1 + znak stoi zwarcie nad nimi (margin-top:auto na H1),
 * oba odstępy H1 -> znak i znak -> zdanie równe --g; wolne miejsce zajmuje większy znak (do szerokości treści, max 350 px). ---------- */
@media (max-width:767px) and (orientation:portrait){
  .hr-wrap{--rmw:min(calc(100vw - 2 * var(--m)),350px,calc(33svh / .80419));--g:clamp(28px,5.6svh,48px)}
  .hr-main{margin-top:auto}
  .hr-mark{margin:var(--g) 0 var(--g) auto}
}
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
  .hr-wrap{--rmw:min(calc(100vw - 2 * var(--m)),calc(30svh / .80419));--g:clamp(20px,4svh,28px)}
}
@media (max-width:1023px){
  /* okruszki podstron (projekty, /realizacje/): obszar klikania 44 px wysokości bez zmiany wyglądu i odstępów */
  .sp-crumbs a{position:relative;display:inline-block}
  .sp-crumbs a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  /* linki w treści polityki prywatności (e-mail, telefon, "cookies"): obszar klikania 44 px */
  .pg-s-b a{position:relative;display:inline-block}
  .pg-s-b a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
/* ---------- R39 (28.10, Rafał: "dostosuj jeszcze do tabletu wersje"). Tablet w pionie (768-1023 px): hero jako układ tabletowy,
 * nie rozciągnięty telefon. Kolejność jak na telefonie (R34/R35): H1 u góry pod nawigacją, znak R jako dominanta środka (marginesy
 * auto, przy prawym marginesie), zdanie na pasie papieru i przycisk przy dole pierwszego ekranu; kreska bez maski (hero.js: warunek
 * pionu rozszerzony do 1023 px). Rozmiary: H1 3 linie ze złamań <br> (szerokość / 11.7, 48-60 px), znak min(50vw, 34svh wys., 460 px),
 * zdanie 20 px, przycisk naturalnej szerokości 56 px wysokości do lewej. Telefon (<= 767) i komputer (>= 1024) bez zmian. ---------- */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  .hr-wrap{--rmw:min(50vw,calc(34svh / .80419),460px);--h1t:calc(clamp(120px,13svh,160px) + env(safe-area-inset-top,0px));--hb:72px}
  .hr{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:var(--h1t) var(--m) calc(var(--hb) + env(safe-area-inset-bottom,0px))}
  .hr-in{display:contents}
  .hr-main,.hr-row{position:relative;z-index:2}
  .hr-main{margin:0;order:1}
  .hr-h1{margin-top:0;font-size:clamp(48px,calc((100vw - 2 * var(--m)) / 11.7),60px);letter-spacing:-.03em;line-height:1.18}
  .hr-h1 .ln{white-space:nowrap}
  .hr-mark{position:relative;top:auto;right:auto;order:2;align-self:flex-end;width:var(--rmw);margin:auto 0;flex:none}
  .hr-row{margin-top:0;order:3}
  .hr-foot-in{gap:24px}
  .hr-foot .hr-lead{width:fit-content;max-width:calc(100% + 16px);margin:0 -8px;padding:4px 8px;border-radius:12px;background:rgba(243,243,239,.92);font-size:20px;line-height:1.4}
  .hr-foot .hr-pill{align-self:flex-start;height:56px;padding:0 30px;font-size:17px;box-shadow:0 0 0 2px var(--paper)}
  .hr-glass{will-change:auto}
  .hr-glass--1{width:44vw;right:-14vw;top:calc(var(--h1t) + 28svh)}
  .hr-glass--2{width:30vw;right:36vw;top:calc(var(--h1t) + 22svh)}
  .hr-glass--3{width:22vw;right:-6vw;top:calc(var(--h1t) - 24px)}
  .hr-glass--4{width:24vw;left:-10vw;right:auto;top:calc(var(--h1t) + 46svh)}
}
/* R39: tablet poziomo (1024-1439 px i proporcje <= 3/2, czyli 1024x768, 1112x834, 1180x820, 1194x834, 1366x1024; laptopy 1280x800,
 * 1440x900 i szersze bez zmian). Na 1366x1024 H1 5.9vw (81 px) wchodził na górną belkę znaku R ("realnych"), na 1024 koniec linii
 * stał ok. 30 px od ramienia R: H1 jak w 1024-1279 (4.6vw), znak x0.9 z prawym górnym rogiem w miejscu (więcej luzu do H1 i zdania). */
@media (min-width:1280px) and (max-width:1439px) and (max-aspect-ratio:3/2){
  .hr-wrap{--fs:4.6vw}
}
@media (min-width:1024px) and (max-width:1439px) and (max-aspect-ratio:3/2){
  .hr-wrap{--rh:calc(clamp(calc(var(--rhA) * .8),min(calc(max(100vh,640px) - var(--mtA) - 64px),calc((max(100vh,640px) - var(--mtA) - 20px) / 1.15)),var(--rhA)) * .9)}
}
/* R39: tablet poziomo: zdanie w jednej linii (1024: "Ciebie." spadało samo do drugiej linii, kolumna 32vw = 328 px) */
@media (min-width:1024px) and (max-width:1439px) and (max-aspect-ratio:3/2){
  .hr-foot .hr-lead{width:max-content;max-width:min(460px,40vw)}
}
/* R39: tablet 768-1023 px: przyciski o naturalnej szerokości zamiast na całą szerokość ekranu (740-980 px): O nas ("Oferta", "Zespół")
 * i blok kontaktu (wycena, telefon, e-mail w jednym rzędzie z zawijaniem). Wysokość i wygląd przycisków bez zmian. */
@media (min-width:768px) and (max-width:1023px){
  .onas-links .pill{flex:0 0 auto;min-width:200px}
  .ct_btns .bp{width:auto;flex:0 1 auto}
}