/* ============ TOKENS ============ */
:root{
--navy-deep: #081729;
--navy: #0B2545;
--navy-soft: #16345E;
--gold: #B8912F;
--gold-dark: #7A5D1C;
--gold-light: #E3C878;
--gold-pale: #F3E4B8;
--cream: #FCF0E4;
--cream-warm: #F4E7D4;
--white: #FFFFFF;
--crimson: #9C2B3A;
--green-ok: #3F7A5B;
--ink-muted: #52607A;
/* Libre Baskerville ma WYŁĄCZNIE wagi 400, 400 italic i 700 — nie ma 500 ani 600.
Nie ustawiać na tym kroju font-weight:500/600, bo przeglądarka podstawi 700. */
--font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
--font-body: 'Source Sans 3', Arial, Helvetica, sans-serif;
--container: 1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:var(--font-body);
color:var(--navy);
background:var(--cream);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* Odstep pod przyklejony naglowek. --header-h ustawia skrypt komponentu
naglowka na ZMIERZONA wysokosc paska: 61 px u gory strony, 55 px po
zwinieciu, 65/59 px ponizej 1120 px. Wpisane wczesniej 92 px nie
odpowiadalo zadnej z nich - sekcje zatrzymywaly sie 20-33 px za nisko.
Po podniesieniu menu do wlasnego pasa 48 px wysokosc paska na desktopie
wyznacza juz MENU, a nie przycisk: 73 px u gory strony, 63 px po zwinieciu,
69/59 px ponizej 1120 px (tam menu jest zwiniete i decyduje hamburger).
Wartosc zapasowa 73 px dziala, gdy JavaScript jest wylaczony - jest
dokladna dla desktopu i o 4 px hojna na telefonie. Hojna strona jest
bezpieczniejsza: zostawia szczeline, zamiast chowac poczatek sekcji.
*/
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h,73px);}
[id]{scroll-margin-top:var(--header-h,73px);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}
/* ============ NADTYTULY SEKCJI ============
JEDNA wielkosc, JEDEN odstep i JEDNA grubosc dla wszystkich etykiet nad
naglowkami. Bylo cztery rozmiary (0,72 / 0,82 / 0,84 / 0,86 rem), cztery
odstepy (0,15 / 0,16 / 0,19 / 0,22 em) i dwie grubosci - te same wizualnie
etykiety rozjezdzaly sie miedzy sekcjami i miedzy arkuszami.
0,94 rem wobec naglowka sekcji 46,4 px daje stosunek 1:3,1. Wersalik ma
wtedy ok. 9,9 px, czyli optycznie tyle co tekst ciagly przy 16 px -
nadtytul przestaje czytac sie jak dopisek nad naglowkiem.
Kreski po bokach przejete z etykiety "Wspolnicy" (.team-core-label),
ktora jako jedyna je miala. Kolor bierze sie z currentColor, wiec kreski
ida za kolorem tekstu: --gold-dark na jasnym tle, --gold-light na
granatowym - bez osobnego nadpisania dla kazdej ciemnej sekcji.
flex:0 1 42px, a NIE width:42px - kreski maja kurczyc sie PIERWSZE, gdy
etykieta nie miesci sie w kolumnie. Anonimowy element tekstowy ma
min-width:auto, wiec nie zejdzie ponizej najdluzszego slowa i to kreski
oddaja miejsce. Dzieki temu najdluzszy nadtytul serwisu ("Legal services
for the Polish diaspora" - 322 px na telefonie wobec kolumny 334 px)
zostaje w jednym wierszu, zamiast lamac sie na dwa. */
.eyebrow,
.team-core-label{
font-family:var(--font-body);
font-weight:600;
font-size:0.94rem;
letter-spacing:0.16em;
line-height:1.3;
text-transform:uppercase;
/* Nadtytul ZAWSZE w jednym wierszu. Zlamany na dwa wiersze rozjezdza sie
wzgledem kresek po bokach (kreski centruja sie do calego bloku, nie do
ostatniego wiersza) i przestaje czytac sie jak etykieta.
Zeby nowrap nie wypchnal tekstu poza kolumne, dwa najdluzsze nadtytuly
w serwisie zostaly skrocone - patrz CLAUDE.md. Granice wyznacza
najwezszy obslugiwany ekran 320 px (kolumna 264 px): najdluzsza
pozostala etykieta ("The Polish diaspora worldwide") ma tam 239,4 px,
czyli 9,3% zapasu. Dodajac nowy nadtytul trzymaj sie ok. 29 znakow. */
white-space:nowrap;
align-items:center;
gap:14px;
max-width:100%;
/* Ciemne złoto, bo bazowo etykieta leży na jasnym tle (--gold daje tam 2,6:1).
Sekcje na ciemnym tle nadpisują to na --gold-light — patrz .hero-eyebrow,
.process .eyebrow, .contact .eyebrow, .connection-content .eyebrow. */
color:var(--gold-dark);
}
/* .eyebrow jest inline-flex, zeby kreski obejmowaly SAM TEKST, a nie caly
wiersz - dziala to tak samo w sekcjach wysrodkowanych i wyrownanych
do lewej. .team-core-label zostaje przy flex + margin:auto, bo stoi
samodzielnie w kolumnie i sam sie centruje (patrz nizej). */
.eyebrow{display:inline-flex;}
.eyebrow::before,.eyebrow::after,
.team-core-label::before,.team-core-label::after{
content:"";
flex:0 1 42px;
height:1px;
background:currentColor;
opacity:0.45;
}
/* Waga 400 — Libre Baskerville w wersji podstawowej to „główne nagłówki i hasła".
Waga 700 zarezerwowana dla nazw usług, nazwisk i logotypu (patrz niżej).
Tracking wyzerowany: Libre Baskerville ma z założenia szerokie odstępy,
dodatnie światło rozjeżdżałoby nagłówki jeszcze bardziej. */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; color:var(--navy); letter-spacing:0;}
/* ===== SKALA NAGLOWKOW SEKCJI - jedna wartosc dla wszystkich h2 na stronie.
Wczesniej byly dwie rozjechane grupy: .section-head h2 (uslugi, proces,
kontakt) mialo 41,6 px, a .about-copy-new / .team-head / .connection-content
od 64 do 72 px - czyli TRZY naglowki sekcji byly WIEKSZE od h1 hero (56 px).
Wspolczynniki nie sa dobrane na oko, tylko wyliczone z h1: hero ma
clamp(2.55rem,4.1vw,3.5rem), a kazda z tych liczb podzielona przez 1,21 daje
clamp(2.1rem,3.4vw,2.9rem). Dzieki temu stosunek h1:h2 wynosi 1,21 na KAZDEJ
szerokosci okna, a nie tylko w jednym punkcie.
Odpowiednik dla telefonu jest w media query 640 px, przy regulach hero. */
.section-head h2,
.about-copy-new h2,
.team-head h2,
.connection-content h2{
font-size:clamp(2.1rem,3.4vw,2.9rem);
line-height:1.18;
}
/* ============ PRZYCISKI ============
Bez gradientu i bez poswiaty - czytaly sie jako tanie i sztuczne.
Kolor idzie za tlem sekcji, tym samym wzorcem co .eyebrow: WARTOSC BAZOWA
jest dla jasnego tla (--gold), a sekcje na granatowym tle nadpisuja ja na
jasniejsze --gold-light. Powod: #E3C878 na kremowym tle daje 1,45:1 wobec
tla i przycisk sie rozmywa, a na granacie swieci. Nadpisania sa tuz nizej.
Kontrast tekstu: --navy-deep na --gold = 6,2:1, na --gold-light = 11,2:1,
biel na --gold-dark = 4,7:1. Wszystkie spelniaja WCAG AA. */
/* WERSALIKI na przyciskach - decyzja uzytkownika: napis ma byc bardziej
widoczny. Tracking podniesiony z 0,01 na 0,07 em, bo wielkie litery bez
zwiekszonego swiatla zlewaja sie w jeden blok - to jedyny powod, dla
ktorego wersaliki bywaja MNIEJ czytelne, nie bardziej. Rozmiar zostaje
bez zmian (0,89 rem), zeby nie odbierac tego, po co ta zmiana powstala.
Wartosc 0,07 em jest wspolna dla home.css i service-pages.css. */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-height:42px;
padding:11px 22px;
font-family:var(--font-body);
font-weight:600;
font-size:0.89rem;
line-height:1.2;
letter-spacing:0.07em;
text-transform:uppercase;
border-radius:6px;
border:1px solid transparent;
transition:background-color .18s ease, border-color .18s ease, color .18s ease;
white-space:nowrap;
cursor:pointer;
}
.btn-primary{
background:var(--gold);
border-color:var(--gold);
color:var(--navy-deep);
}
.btn-primary:hover{background:var(--gold-dark); border-color:var(--gold-dark); color:var(--white);}
.btn-primary:disabled{opacity:0.45; cursor:not-allowed;}
.btn-primary:disabled:hover{background:var(--gold); border-color:var(--gold); color:var(--navy-deep);}
.btn-block{width:100%;}
/* Wariant granatowy - wylacznie przycisk w naglowku. Naglowek lezy na
kremowym tle na kazdej stronie, wiec granat daje najmocniejsze odciecie.
NAPIS JEST ZLOTY, nie bialy - decyzja uzytkownika. Odcien to --gold-light,
a nie --gold: podstawowe zloto ma na tym tle 5,22:1, co przechodzi prog
w spoczynku, ale po najechaniu (--navy-soft) spada do 4,23:1, czyli
PONIZEJ 4,5:1 wymaganych dla malego tekstu - a napis ma tu 13,76 px.
--gold-light ma 9,38:1 w spoczynku i 7,59:1 po najechaniu.
--gold-dark NIE nadaje sie na granat (2,79:1) - jest do jasnych tel. */
.btn-navy{background:var(--navy); border-color:var(--navy); color:var(--gold-light);}
/* Po najechaniu przycisk ZOSTAJE GRANATOWY, tylko o stopien jasniejszy.
Wczesniej zmienial sie w calosci na zloto - naraz zmieniala sie barwa tla
i barwa napisu, wiec oko czytalo podmiane elementu, a nie podswietlenie
tego samego przycisku. --navy-soft to ten sam granat o stopien wyzej.
Napis idzie z nim w gore o jeden stopien: --gold-light -> --gold-pale
(9,84:1 na --navy-soft), wiec ZOSTAJE ZLOTY - zmienia sie jasnosc, nie
tozsamosc. To ten sam wzorzec, ktory obowiazuje na zlotych CTA: hover
ROZJASNIA, nigdy nie przyciemnia. Sygnal interaktywnosci niesie tlo,
rozjasniony napis i zlote obramowanie.
UWAGA na przyszlosc: samo zlote obramowanie ma wobec tla paska 2,90:1,
czyli ponizej progu 3:1 dla elementow interfejsu - ale nie ono wyznacza
sylwetke przycisku. Robi to wypelnienie: --navy-soft ma wobec tla 12,26:1,
a --navy w spoczynku 15,15:1. Obramowanie jest tu akcentem na wyraznym
ksztalcie, a nie jedynym sposobem odroznienia kontrolki od tla. Wczesniej
bylo odwrotnie - przy zlotym wypelnieniu (1,62:1) obramowanie bylo nosne
i stad dawny komentarz o 2,90:1. */
.btn-navy:hover{background:var(--navy-soft); border-color:var(--gold); color:var(--gold-pale);}
/* Sekcje na granatowym tle - jasniejsze zloto. */
.hero .btn-primary,
.contact .btn-primary,
.sticky-cta .btn-primary{
background:var(--gold-light);
border-color:var(--gold-light);
color:var(--navy-deep);
}
/* Po najechaniu przycisk ZYSKUJE jasnosc. Wczesniej schodzil z --gold-light
na --gold, czyli o stopien ciemniej - kontrast wobec napisu spadal
z 11,0:1 na 6,1:1 i przycisk cofal sie optycznie w chwili, w ktorej
powinien wyjsc do przodu. Teraz idzie na --gold-pale (14,25:1).
--gold-pale jest tokenem obecnym w systemie, nie nowym kolorem.
Obramowanie schodzi na ciemniejsze --gold, zeby jasniejsze wypelnienie
nie rozlalo sie na granatowym tle i przycisk zachowal sylwetke. */
.hero .btn-primary:hover,
.contact .btn-primary:hover,
.sticky-cta .btn-primary:hover{
background:var(--gold-pale);
border-color:var(--gold);
color:var(--navy-deep);
}
.contact .btn-primary:disabled:hover{background:var(--gold-light); border-color:var(--gold-light);}
/* Rozmiar duzy: glowne CTA w hero, przycisk wysylki i pasek na telefonie. */
/* Przycisk wysylki rosnie razem z CTA w hero - to ten sam moment konwersji,
tylko na koncu drogi. 56 px, padding 18/24 (poziomy mniej wazny, bo
.btn-block i tak rozciaga przycisk na cala szerokosc karty). */
.contact .btn-block{min-height:56px; padding:18px 24px;}
/* ============ LANG TOGGLE ============ */
.lang-toggle{
display:flex; align-items:center; gap:8px;
}
.lang-toggle a{
background:transparent; border:2px solid transparent; border-radius:4px; padding:2px;
line-height:0; opacity:0.45; transition:all .2s ease; transform:scale(0.94);
}
.lang-toggle a svg{display:block; width:26px; height:18px; border-radius:2px;}
.lang-toggle a:hover{opacity:0.8;}
.lang-toggle a.active{opacity:1; border-color:var(--gold); transform:scale(1);}
.lang-toggle.light a.active{border-color:var(--gold-light);}
/* ============ HEADER ============ */
header{
position:sticky; top:0; z-index:50;
background:linear-gradient(110deg,rgba(255,253,250,.97) 0%,rgba(250,243,234,.95) 52%,rgba(255,253,250,.97) 100%);
backdrop-filter:saturate(125%) blur(12px);
border-bottom:1px solid rgba(11,37,69,.055);
box-shadow:0 4px 20px rgba(8,23,41,.035);
isolation:isolate;
}
header::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
background:linear-gradient(90deg,transparent 4%,rgba(184,145,47,.42) 27%,rgba(227,200,120,.66) 50%,rgba(184,145,47,.42) 73%,transparent 96%);
opacity:.46; transition:opacity .35s ease;
}
.nav{
display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
padding:12px 28px; gap:24px; transition:padding .35s ease;
}
/* Marka na poziomym srodku paska. Tor srodkowy siatki 1fr auto 1fr jest
wysrodkowany z definicji, bo oba tory 1fr dostaja rowna szerokosc.
Zapas sprawdzony: przy 1180 px kontenera kazdy tor 1fr ma 424 px,
a najszersza kolumna (nawigacja EN, ok. 326 px) miesci sie z zapasem.
Kolejnosc znacznikow w _zrodlo/naglowek.html zostala przestawiona tak,
zeby zgadzala sie z ukladem - grid-column sluzy tu tylko do jawnego
przypisania torow, nie do zmiany kolejnosci. */
/* Marka po LEWEJ, nawigacja na srodku, akcje po prawej - uklad klasyczny.
Byla przez chwile wysrodkowana; wrocila na lewo, bo badanie NN/g
(14 serwisow, 50 uczestnikow) wykazalo szesciokrotnie czestsza porazke
przy powrocie na strone glowna, gdy logo stoi na srodku, a lewy gorny rog
daje tez o 89% lepsza zapamietywalnosc znaku. Kolejnosc znacznikow
w _zrodlo/naglowek.html zgadza sie z ukladem. */
/* Odstep 8 px, nie 12 px: przy godle 31 px dwanascie pikseli rozrywalo
blokade na dwa osobne elementy. 8 px = ok. 1/4 wysokosci godla. */
.brand{display:flex; align-items:center; grid-column:1; justify-self:start; gap:8px; flex-shrink:0;}
/* Rozmiar zadawany przez WYSOKOSC, nie szerokosc - blokada logo opiera sie na
stosunku godla do wersalika napisu obok, a ten jest wielkoscia pionowa.
31 px = 2,47 x wysokosc wersalika "Polonia Iuris" (Libre Baskerville 700,
cap height 0,77 em przy 16,32 px = 12,57 px).
Bylo 51 px przy napisie 1,38 rem, czyli 3,00 x - znak wygladal tanio,
bo godlo przytlaczalo napis i wyznaczalo wysokosc calego paska.
UWAGA: komentarz mowil wczesniej o 34 px i proporcji 2,0 x, ale regula
stala od dawna na 51 px - opis byl nieaktualny wzgledem kodu.
Plik zostal przyciety do widocznej tresci (bylo 400x377 ze znakiem 358x331
i pustym pasem 46 px u gory, przez ktory align-items:center centrowalo
PUDELKO, a nie znak - godlo zwieszalo sie 2,87 px ponizej osi wiersza). */
.brand img{display:block; height:31px; width:auto; flex-shrink:0; opacity:0; animation:brandIn .7s ease .1s forwards;}
@keyframes brandIn{ from{opacity:0; transform:scale(0.7) rotate(-8deg);} to{opacity:1; transform:scale(1) rotate(0);} }
.brand-word{display:flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:1.02rem; line-height:1; letter-spacing:0.04em; color:var(--navy); white-space:nowrap;}
.brand-word span{color:var(--gold);}
/* Odstep 22 px zamiast 24: przy wiekszym pismie pozycje i tak stoja optycznie
dalej od siebie, a odzyskane 8 px idzie do przycisku, ktory rosnie do 44 px. */
nav.links{display:flex; align-items:center; grid-column:2; justify-self:center; gap:22px;}
/* WERSALIKI. Menu ma byc rozpoznawalne jako menu, a nie jako zdanie obok
logotypu - stad wielkie litery, mniejszy stopien pisma i wieksze swiatlo
miedzy literami. 0,84 rem zamiast 0,92, bo wersalik jest optycznie wiekszy
od tekstu mieszanego przy tym samym stopniu; tracking 0,13 em to wartosc
juz obecna w serwisie (nadtytul na telefonie), wiec nie dokladamy kolejnej
do listy z Priorytetu 6.
Szerokosc sprawdzona: menu EN strony glownej ok. 431 px, PL ok. 412 px,
menu podstrony (trzy pozycje) ok. 200-250 px - w pasie 1124 px zostaje
ponad 270 px zapasu.
WLASNY PAS 48 px. Pozycje dostaja jawna wysokosc wieksza niz przycisk
po prawej (44 px) i godlo po lewej (31 px), zeby menu czytalo sie jako
osobny element paska, a nie jako trzecia rzecz na tej samej linii.
To ONO wyznacza teraz wysokosc naglowka: 12 + 48 + 12 + 1 = 73 px.
line-height 1.2 jest wpisane wprost, bo bez tego wysokosc pola zalezalaby
od line-height , ktory rozni sie miedzy arkuszami (1,6 i 1,65). */
nav.links a{
display:flex; align-items:center; min-height:48px;
font-size:.84rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
line-height:1.2; color:var(--navy);
position:relative; white-space:nowrap; transition:color .25s ease;
opacity:0; transform:translateY(-6px); animation:navLinkIn .45s ease forwards;
}
nav.links a:nth-child(1){animation-delay:.12s;}
nav.links a:nth-child(2){animation-delay:.17s;}
nav.links a:nth-child(3){animation-delay:.22s;}
nav.links a:nth-child(4){animation-delay:.27s;}
nav.links a:nth-child(5){animation-delay:.32s;}
@keyframes navLinkIn{to{opacity:1;transform:translateY(0);}}
/* Podkreslenie 2 px zamiast 1 i w ciemniejszym zlocie: przy 1 px i --gold
na jasnym tle paska kreska byla ledwo widoczna, wiec najechanie nie dawalo
wyraznej odpowiedzi. --gold-dark ma wobec tla naglowka 4,90:1. */
nav.links a::after{content:'';position:absolute; left:0; bottom:11px; width:0; height:2px; background:var(--gold-dark); transition:width .25s ease;}
nav.links a:hover::after{width:100%;}
nav.links a:hover,nav.links a:focus-visible{color:var(--gold-dark);}
.nav-cta{
display:flex; align-items:center; grid-column:3; justify-self:end; gap:11px; flex-shrink:0;
opacity:0; animation:navToolsIn .5s ease .34s forwards;
}
@keyframes navToolsIn{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}}
/* 44 px zamiast 40 - to jednoczesnie minimalny cel dotykowy wymagany
w dokumentacji. Skutek uboczny: na desktopie wysokosc paska wyznacza teraz
przycisk (godlo ma 31 px), wiec naglowek rosnie z 61 na 65 px - dokladnie
tyle, ile ma juz ponizej 1120 px. --header-h mierzy to sam. */
.nav-cta > .btn{min-height:44px;padding:12px 20px;font-size:.86rem;}
#langToggle{gap:5px;}
#langToggle a{border-width:1px;border-radius:5px;padding:3px;opacity:.58;transform:none;}
#langToggle a svg{width:22px;height:15px;}
#langToggle a:hover{opacity:1;transform:translateY(-1px);}
#langToggle a.active{opacity:1;transform:none;background:rgba(184,145,47,.07);}
/* Jawne 44x44 px z dwoch powodow. Po pierwsze to minimalny cel dotykowy
wymagany na telefonie. Po drugie: po zmniejszeniu logo do 34 px to wlasnie
ten przycisk przejmuje wyznaczanie wysokosci naglowka ponizej 1120 px,
a jego dotychczasowa wysokosc byla NIEOZNACZONA - zalezala od tego, czy
przegladarka skleja marginesy trzech wewnetrznych kresek (42 px) czy nie
(52 px). Od tej wysokosci zalezy top: przy nav.links, wiec nie moze byc
wartoscia zgadywana. Wysrodkowanie flexem daje ten sam odstep kresek
co dotychczas, tylko policzalny. */
.menu-btn{display:none; flex-direction:column; align-items:center; justify-content:center; background:none; border:none; padding:0; width:44px; height:44px;}
.menu-btn span{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.25s;}
@media(max-width:1120px){
.nav{grid-template-columns:1fr auto;gap:14px;}
/* Ponizej 1120 px marka wraca na lewa strone - wysrodkowana marka obok
samego hamburgera zostawialaby pusta lewa polowe paska. */
.brand{grid-column:1; justify-self:start;}
.nav-cta{grid-column:2;}
/* top:69px = wysokosc naglowka: 12 px padding + 44 px (najwyzszy element to
tu .menu-btn, bo menu jest zwiniete i wypadlo z siatki) + 12 px padding
+ 1 px obramowania. Na desktopie pasek ma 73 px, bo wyznacza go menu. */
nav.links{position:fixed; top:69px; left:0; right:0; background:rgba(255,250,244,.98); backdrop-filter:blur(14px); flex-direction:column; gap:0; padding:8px 0 20px; border-bottom:1px solid rgba(11,37,69,0.1); transform:translateY(-130%); transition:transform .3s ease; z-index:40;}
nav.links.open{transform:translateY(0);}
nav.links a{width:100%; padding:14px 28px; border-top:1px solid rgba(11,37,69,0.06);}
/* W rozwinietym menu podkreslenie wraca na sam dol pozycji - 11 px nad
krawedzia wisialoby w powietrzu obok kreski rozdzielajacej. */
nav.links a::after{bottom:0;}
.nav-cta > .btn{min-height:38px;padding:9px 14px;font-size:.78rem;}
.menu-btn{display:flex;}
.brand-word{font-size:0.88rem;}
/* Napis schodzi tu na 0,88 rem (wersalik 10,84 px), a godlo na 25 px -
proporcja 2,31 x, praktycznie ta sama co 2,47 x na desktopie.
Godlo 25 px jest nizsze od hamburgera (44 px), wiec NIE wyznacza juz
wysokosci paska: zostaje ona przy 65 px i wartosci top nav.links
ponizej pozostaja poprawne. */
.brand img{height:25px;}
}
/* Ponizej 680 px przycisk z naglowka ustepuje miejsca przyklejonemu CTA na
dole ekranu. TEN SAM punkt zalamania musi byc w service-pages.css -
naglowek jest wspolny dla calego serwisu. */
@media(max-width:680px){
.nav-cta > .btn{display:none;}
/* 0,78 rem zamiast 0,94: naglowek sekcji schodzi na telefonie do 26-34 px,
wiec nadtytul musi zejsc razem z nim. Tracking schodzi z 0,16 na 0,13 em -
mniejszy stopien pisma potrzebuje proporcjonalnie mniej swiatla miedzy
literami, a przy nowrap kazdy odzyskany piksel powieksza zapas.
Ta para (0,78 rem + 0,13 em) daje 9,3% zapasu na ekranie 320 px;
0,80 rem z 0,16 em dawalo tylko 2,5%, czyli mniej niz dokladnosc pomiaru.
Kreski krotsze (24 px) i odstep mniejszy (10 px).
Ten sam punkt zalamania obowiazuje w service-pages.css. */
.eyebrow,.team-core-label{font-size:0.78rem;letter-spacing:0.13em;gap:10px;}
.eyebrow::before,.eyebrow::after,
.team-core-label::before,.team-core-label::after{flex-basis:24px;}
}
/* ============ HERO ============ */
.hero{
position:relative;
min-height:clamp(650px, 78vh, 820px);
display:flex;
align-items:center;
padding:112px 0 104px;
text-align:left;
overflow:hidden;
isolation:isolate;
background-image:
linear-gradient(90deg, rgba(8,23,41,0.98) 0%, rgba(8,23,41,0.93) 31%, rgba(8,23,41,0.74) 51%, rgba(8,23,41,0.36) 74%, rgba(8,23,41,0.25) 100%),
linear-gradient(180deg, rgba(8,23,41,0.14) 0%, rgba(8,23,41,0.08) 52%, rgba(8,23,41,0.56) 100%),
url('../img/hero-bg-desktop.webp');
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
}
.hero::before{
content:'';
position:absolute;
inset:0;
z-index:-1;
background:
linear-gradient(90deg, transparent 46%, rgba(8,23,41,0.07) 72%, rgba(8,23,41,0.16) 100%),
linear-gradient(180deg, transparent 72%, rgba(8,23,41,0.5) 100%);
pointer-events:none;
}
.hero::after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:4px;
background:linear-gradient(90deg, transparent 0%, var(--gold-light) 24%, var(--gold) 58%, transparent 100%);
opacity:0.72;
}
.hero .wrap{position:relative; z-index:2; width:100%;}
/* 900 px zamiast 720 px - wartosc wyznaczona przez POLSKI naglowek, patrz
komentarz przy .hero h1. Poszerza sie tu wylacznie h1: .lede ma wlasny
max-width 650 px, .hero-microcopy 610 px, a .hero-eyebrow i .hero-ctas
dopasowuja sie do tresci. Dlugosc wiersza tekstu ciaglego sie nie zmienia. */
.hero-copy{max-width:900px;}
/* Wielkosc, odstep i kreski przychodza z bloku nadtytulow - tu zostaje
wylacznie to, co jest wlasciwe dla hero: kolor na granatowym tle,
odstep pod spodem i wejscie. Wczesniej hero mialo WLASNY rozmiar
(0,86 rem) i pionowa kreske 2x16 px z lewej zamiast kresek po bokach. */
.hero-eyebrow{
margin-bottom:22px;
color:var(--gold-light);
opacity:0;
animation:fadeUp .6s ease .25s forwards;
}
/* Kreska PIONOWA, nie pozioma. Poprzednia miala 42 x 1 px i przy tekscie
wersalikowym czytala sie jak myslnik wpisany w zdanie, a nie jak ozdobnik.
Pionowa jest jednoznacznym separatorem. Te same dwa tokeny co wczesniej,
gradient obrocony o 90 stopni.
Uwaga: to jedyny nadtytul na stronie glownej, ktory ma jakikolwiek znak -
pozostale 7 i wszystkie na 26 podstronach zaczynaja sie wprost od tekstu. */
/* Pionowa kreska 2x16 px z lewej zostala zastapiona kreskami po obu
stronach, wspolnymi dla wszystkich nadtytulow. Nie przywracac. */
.hero h1{
/* JEDEN rozmiar dla obu wersji jezykowych - zadnych regul html[lang].
Wczesniej polski miał osobna, o 5,7% mniejsza wartosc (52,8 zamiast 56 px)
w zalozeniu, ze dluzsze polskie wyrazy zlamia sie o wiersz wiecej.
Zalozenie bylo BLEDNE: zmierzone szerokosci pokazuja, ze przy 56 px polski
naglowek lamie sie identycznie jak przy 52,8 px - 2 wiersze + 1 na desktopie
(815 px i 582 px w kolumnie 720 px) i 2 + 2 na telefonie. Regula nic nie
kupowala, a rozjezdzala obie wersje jezykowe.
NIE dodawac tu ani nigdzie indziej regul zaleznych od jezyka: uklad ma byc
identyczny w kazdym elemencie, niezaleznie od wersji. Rozjazd miedzy
wersjami rozwiazuje sie SZEROKOSCIA KOLUMNY (max-width nizej), nie
rozmiarem pisma - kolumna dziala tak samo na oba jezyki, a rozmiar nie. */
font-size:clamp(2.55rem, 4.1vw, 3.5rem);
/* Interlinia poluzowana z 0.98: Libre Baskerville ma długie wydłużenia dolne
i wysoką literę x, przy 0.98 wiersze zachodziłyby na siebie. Po zejsciu ze
skali do 56/53 px podniesiona z 1.12 na 1.15 - mniejszy stopien pisma
potrzebuje proporcjonalnie wiecej swiatla miedzy wierszami.
Nastepnie 1.15 -> 1.22, zeby zlota kreska pod "Poland"/"Polski" miescila
sie miedzy wierszami. Wartosc wiazaca wyznacza polski: akcent nad "s"
w "jestes" siega 0.97 em, wiec przeswit = 1.22 - 0.97 - 0.15 = 0.10 em.
Ta sama interlinia obowiazuje na telefonie - media query jej nie nadpisuje. */
line-height:1.22;
/* 900 px, a nie 720 px. Wartosc NIE jest dobrana na oko - wyznacza ja
najszerszy pierwszy wiersz naglowka w obu jezykach, zmierzony w Libre
Baskerville 400 przy 56 px (gorna granica clampa):
EN "Your legal bridge to Poland," = 803 px
PL "Twoj prawny most do Polski," = 839 px <- wartosc wiazaca
W kolumnie 720 px NIE miescil sie zaden z nich przy pelnym stopniu pisma,
ale progi wypadaly w roznych miejscach: angielski lamal sie dopiero od
50,2 px, polski juz od 48,1 px. Miedzy tymi progami - czyli przy oknie
ok. 1190-1235 px - angielski mial 2 wiersze, a polski 3, i do tego
text-wrap:balance zostawial w pierwszym wierszu same "Twoj prawny".
Dwie wersje jezykowe wygladaly wtedy inaczej mimo identycznego CSS.
900 px daje 61 px zapasu nad polskim (839) i 97 px nad angielskim, wiec
OBA jezyki maja 2 wiersze na kazdej szerokosci desktopu.
Zapas jest celowo wiekszy niz konieczne minimum (860 px): szerokosci sa
policzone z metryk kroju, a nie zmierzone w przegladarce, wiec 21 px
zapasu miescilo sie w granicy bledu pomiaru. Nie kosztuje to nic -
najdluzszy naglowek ma 839 px, wiec kolumna i tak nigdy nie jest pelna.
Gorna granica to szerokosc .wrap przy kontenerze 1180 px minus padding,
czyli 1124 px - 900 px miesci sie z zapasem.
Zmieniajac tekst naglowka w _zrodlo/teksty.json sprawdz, czy pierwszy
wiersz nadal miesci sie w 900 px przy 56 px - inaczej rozjazd wroci. */
max-width:900px;
margin:0 0 28px;
color:var(--white);
letter-spacing:-0.005em;
text-wrap:balance;
text-shadow:0 3px 24px rgba(4,12,24,0.42);
opacity:0;
animation:fadeUp .65s ease .42s forwards;
}
.hero h1 em{
font-style:italic;
color:var(--gold-light);
/* 400, bo Libre Baskerville ma tylko jedną kursywę (400). Każda wyższa waga
kazałaby przeglądarce pogrubić ją sztucznie, co daje rozmazany kontur. */
font-weight:400;
white-space:nowrap;
}
.hero p.lede{
max-width:650px;
/* 44 px zamiast 36 pod akapitem - przycisk potrzebuje wlasnego pola,
zeby nie czytal sie jak dalszy ciag tekstu. */
margin:0 0 44px;
color:rgba(255,255,255,0.88);
/* 18 px na szerokim ekranie zamiast dotychczasowych 16,6 px (a na laptopie
1280 px zamiast 15,4 px - tam wygrywalo minimum clampa i tekst schodzil
ponizej progu 16 px). Source Sans 3 ma niska litere x, wiec 15 px czytalo
sie jak 14. Stosunek h1 do lede spada z 4,8:1 na 3,1:1.
Regul html[lang] tu juz nie ma - oba jezyki mialy identyczna wartosc. */
font-size:clamp(1.05rem, 1.3vw, 1.125rem);
line-height:1.7;
font-weight:400;
text-shadow:0 2px 16px rgba(4,12,24,0.48);
opacity:0;
animation:fadeUp .65s ease .58s forwards;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
/* Odstep 32 px zamiast 22: glowne CTA stoi obok zwyklego linku tekstowego,
wiec to WOLNA PRZESTRZEN, a nie kolor, odroznia je od siebie. Przy 22 px
oba elementy czytaly sie jak jedna grupa o rownej wadze. */
.hero-ctas{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:32px;
opacity:0;
animation:fadeUp .65s ease .74s forwards;
}
/* Glowne CTA strony: 56 px zamiast 48, padding 18/34 zamiast 14/26,
pismo 1 rem zamiast 0,92. Przy naglowku hero siegajacym 56 px przycisk
w wysokosci 48 px czytal sie jak element pomocniczy.
Wysokosc wiaze min-height (18 px + 19,2 px interlinii + 18 px = 55,2 px),
wiec zmieniajac padding zmieniaj rowniez min-height - inaczej wynik nie
zgodzi sie z zamiarem. */
.hero-ctas .btn-primary{
min-height:56px;
padding:18px 34px;
font-size:1rem;
}
/* Przyciski NIE MAJA znaku strzalki obok napisu - byla, zostala usunieta
na zyczenie. Nie dodawac jej ponownie ani w tresci, ani jako ::after.
Uwage na przycisk kieruja wylacznie: wielkosc (56 px, 1 rem), wolna
przestrzen wokol (32 px do linku obok, 44 px nad grupa) oraz hover,
ktory rozjasnia zamiast przyciemniac. */
.hero-ctas .secondary-link{
position:relative;
padding:8px 0 6px;
font-size:0.88rem;
color:rgba(255,255,255,0.88);
font-weight:600;
display:inline-flex;
align-items:center;
gap:8px;
}
.hero-ctas .secondary-link::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background:rgba(227,200,120,0.6);
transform-origin:left;
transition:transform .25s ease, background .25s ease;
}
.hero-ctas .secondary-link:hover{color:var(--gold-light);}
.hero-ctas .secondary-link:hover::after{transform:scaleX(0.64); background:var(--gold-light);}
.hero-ctas .secondary-link svg{width:14px; height:14px;}
.hero-microcopy{
margin-top:26px;
max-width:610px;
/* 0,83 rem i biel 86% zamiast 0,77 rem i 68%. Zdanie stojace tuz pod CTA
niesie najwazniejsza obietnice sekcji (nic nie kosztuje, odpowiedz
w jeden dzien roboczy), a bylo podane najmniejszym i najbledszym
pismem w calym hero - czyli pracowalo przeciwko przyciskowi. */
font-size:0.83rem;
color:rgba(255,255,255,0.86);
display:flex;
align-items:center;
justify-content:flex-start;
gap:9px;
opacity:0;
animation:fadeUp .65s ease .88s forwards;
}
.hero-microcopy svg{width:15px; height:15px; color:var(--gold-light); flex-shrink:0;}
@media(max-width:980px){
.hero{
min-height:700px;
padding:108px 0 92px;
background-position:60% center;
background-image:
linear-gradient(90deg, rgba(8,23,41,0.98) 0%, rgba(8,23,41,0.91) 42%, rgba(8,23,41,0.62) 69%, rgba(8,23,41,0.38) 100%),
linear-gradient(180deg, rgba(8,23,41,0.05) 0%, rgba(8,23,41,0.5) 100%),
url('../img/hero-bg-tablet-mobile.webp');
}
.hero-copy{max-width:650px;}
}
@media(max-width:640px){
.hero{
min-height:auto;
padding:96px 0 70px;
background-position:68% center;
background-image:
linear-gradient(90deg, rgba(8,23,41,0.98) 0%, rgba(8,23,41,0.92) 58%, rgba(8,23,41,0.68) 100%),
linear-gradient(180deg, rgba(8,23,41,0.08) 0%, rgba(8,23,41,0.65) 100%),
url('../img/hero-bg-tablet-mobile.webp');
}
/* Hero nie ma juz wlasnego rozmiaru nadtytulu ani wlasnej kreski -
jedno i drugie przychodzi z bloku wspolnego (i z reguly mobilnej
przy 680 px). Zostaje sam kolor. */
.hero-eyebrow{color:var(--gold-light);}
/* Libre Baskerville jest wyraźnie szersza od poprzedniego kroju, więc na wąskim
ekranie nagłówek zjechał o stopień w dół, a interlinia w górę.
Tu zostaje wylacznie margines - rozmiar stoi w regule nizej, a interlinia
1.22 przychodzi z reguly desktopowej i nie jest nadpisywana, bo kreska pod
"Poland"/"Polski" potrzebuje tego samego przeswitu na kazdej szerokosci
(jest w em, wiec skaluje sie razem z naglowkiem). */
.hero h1{margin-bottom:24px;}
.hero h1 em{white-space:normal;}
/* Twarde lamanie przed "to Poland"/"do Polski" dziala WYLACZNIE na szerokim
ekranie. Na telefonie naglowek lamie sie juz sam po 2 wiersze na segment,
wiec trzecie wymuszone lamanie dawaloby ok. 5 wierszy i spychalo akapit
oraz przycisk ponizej krawedzi ekranu. Drugie (przed "wherever you
are") zostaje aktywne na kazdej szerokosci - to podzial zdania, nie
kosmetyka wiersza. */
.hero h1 br.hero-br{display:none;}
/* 17 px zamiast 15,5 px: ponizej 16 px tekst na telefonie schodzi pod prog
czytelnosci, a wiekszosc ruchu z USA przychodzi wlasnie z telefonu. */
.hero p.lede{font-size:1.06rem; line-height:1.65; margin-bottom:30px;}
/* Jedna wartosc dla obu jezykow. Gorna granica zgrana z dolna granica reguly
desktopowej (40,8 px), wiec na styku 640 px nie ma skoku rozmiaru. */
.hero h1{font-size:clamp(2rem, 9.5vw, 2.55rem);}
/* W kolumnie odstep moze byc mniejszy niz 32 px z desktopu - pion sam
rozdziela elementy, a kazdy dodatkowy piksel spycha przycisk pod krawedz. */
.hero-ctas{flex-direction:column; align-items:stretch; gap:16px;}
/* padding 18 px, zeby wysokosc zgadzala sie z min-height 56 px z desktopu. */
.hero-ctas .btn-primary{width:100%; padding:18px 20px; white-space:normal; text-align:center;}
.hero-ctas .secondary-link{align-self:center;}
.hero-microcopy{align-items:flex-start; line-height:1.55;}
/* h2 schodzi razem z h1 tym samym wspolczynnikiem 1,21 - punkt zalamania
jest ten sam co dla hero, wiec na styku 640/641 px nie ma skoku. */
.section-head h2,
.about-copy-new h2,
.team-head h2,
.connection-content h2{font-size:clamp(1.65rem,7.85vw,2.1rem);}
/* stopka ukladana w kolumnie - odpowiednik reguly z service-pages.css */
.footer-inner{align-items:flex-start; flex-direction:column; gap:18px;}
}
/* ============ TRUST STRIP ============ */
.trust-strip{
position:relative;
overflow:hidden;
background:linear-gradient(105deg, #071a31 0%, #0b2949 50%, #071a31 100%);
border-top:1px solid rgba(214,179,85,0.52);
border-bottom:1px solid rgba(214,179,85,0.34);
box-shadow:0 14px 34px rgba(5,17,32,0.16);
}
.trust-strip::before{
content:'';
position:absolute;
top:0;
left:50%;
width:min(620px,70vw);
height:1px;
transform:translateX(-50%);
pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(244,213,130,0.92),transparent);
}
.trust-inner{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
max-width:var(--container);
margin:0 auto;
padding:0 18px;
}
/* UKLAD PIETROWY: ikona i liczba w JEDNYM wierszu (oba zlote), etykieta pod
spodem. Wczesniej ikona byla osobna kolumna 64 px po lewej stronie, a liczba
z etykieta staly obok niej w pionie - stad wrazenie, ze ikona nie jest
"na rowni" z napisem. Wysokosc zeszla ze sztywnych 190 px, bo nowy uklad
potrzebuje ok. 141 px (wiersz liczby 40,8 + odstep 12 + dwa wiersze
etykiety 36 + padding 52). */
.trust-item{
position:relative;
min-height:150px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
padding:26px 18px;
text-align:center;
border-left:1px solid rgba(255,255,255,0.1);
transition:background-color .28s ease;
}
.trust-item:first-child{border-left:none;}
.trust-item:hover{
background:rgba(255,255,255,0.025);
}
/* Samo align-items:center wystarcza do zrownania ikony z cyframi: srodek
optyczny cyfry lezy zaledwie 0,24 px nad srodkiem jej pudelka wiersza
(Source Sans 3, cyfry 0,636 em, line-height 1). Zadna korekta nie jest
potrzebna - gdyby byla, nalezaloby ja podac w em, nie w px. */
.trust-head{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
}
/* 34 px, bo ikony wypelniaja swoje pole 24x24 mniej wiecej w 77%, co daje
widoczne ok. 26 px - dokladnie tyle, ile wysokosc cyfr (0,636 em przy
40,8 px = 25,95 px). Poprzednie 58 px bylo ponad dwa razy wieksze od cyfr. */
.trust-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
flex-shrink:0;
color:var(--gold-light);
}
.trust-icon svg{
width:34px;
height:34px;
stroke-width:1.55;
stroke-linecap:round;
stroke-linejoin:round;
}
.trust-number{
color:var(--gold-light);
font-family:var(--font-body);
font-size:2.55rem;
font-weight:600;
line-height:1;
letter-spacing:-0.02em;
text-shadow:0 3px 14px rgba(0,0,0,0.24);
font-variant-numeric:tabular-nums;
}
/* Ograniczenie szerokosci trzyma etykiete w zwartym bloku pod liczba. Bez
niego w ukladzie dwukolumnowym (<=1140 px) kafelek ma ponad 500 px i
najdluzsza etykieta rozciagnelaby sie w jeden bardzo dlugi wiersz. */
.trust-label{
max-width:260px;
color:rgba(251,246,236,0.82);
font-size:0.76rem;
font-weight:500;
line-height:1.48;
letter-spacing:0.012em;
}
@media(max-width:1140px){
.trust-inner{grid-template-columns:repeat(2,1fr);}
.trust-item{min-height:142px;}
.trust-item:nth-child(3){border-left:none;}
.trust-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,0.1);}
}
@media(max-width:620px){
.trust-inner{
grid-template-columns:1fr;
padding:0;
}
.trust-item{
min-height:0;
padding:24px 20px;
border-left:none;
border-top:1px solid rgba(255,255,255,0.1);
}
.trust-item:first-child{border-top:none;}
/* Liczba schodzi na 2,2 rem (cyfry 22,4 px), wiec ikona schodzi razem z nia. */
.trust-icon,.trust-icon svg{width:30px; height:30px;}
.trust-number{font-size:2.2rem;}
.trust-label{font-size:0.72rem; line-height:1.42;}
}
/* ============ SERVICES ============ */
/* Gorny odstep zmniejszony ze 100 na 64 px. Przerwa nad naglowkiem
"Czym sie zajmujemy" to SUMA dwoch paddingow: dolnego z .team-section
(bylo 124 px) i gornego stad (bylo 100 px), czyli 224 px - najwieksza
przerwa miedzy sekcjami na calej stronie. Po zmianie 96 + 64 = 160 px.
Zmieniac trzeba OBA - samo obciecie tutaj zostawiloby 124 px z zespolu. */
.services{padding:64px 0 90px;}
/* 640 -> 720 px: akapit urosl do 1,18 rem, wiec w kolumnie 640 px lamal sie
o wiersz wiecej niz przed zmiana. */
.section-head{text-align:center; max-width:720px; margin:0 auto 60px;}
/* Bez display:block - nadtytul ma byc inline-flex, zeby kreski konczyly sie
na tekscie, a nie rozciagaly na cala szerokosc kolumny. Naglowek pod nim
jest blokiem, wiec i tak zaczyna sie od nowego wiersza. */
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{margin-bottom:16px;}
/* 1,18 rem zamiast 1,07 rem (+10%). Akapit stal miedzy nadtytulem
a naglowkiem 46 px i czytal sie jak podpis, a nie jak wprowadzenie. */
.section-head p{color:var(--ink-muted); font-size:1.18rem;}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
.service-card{
position:relative;align-self:start;overflow:hidden;isolation:isolate;
background:var(--cream);border:1px solid rgba(11,37,69,.1);
box-shadow:0 12px 35px rgba(8,23,41,.045);
transition:transform .5s var(--ease-lux),box-shadow .5s var(--ease-lux),border-color .35s ease,background .35s ease;
}
.service-card:last-child{grid-column:2;}
.service-card::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;z-index:3;
background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
transition:right .6s var(--ease-lux);
}
.service-toggle{
display:flex;flex-direction:column;width:100%;min-height:345px;padding:32px 29px 28px;
border:0;background:transparent;color:var(--navy);text-align:left;font:inherit;cursor:pointer;
}
.service-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px;}
.service-icon-shell{
width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(184,145,47,.42);
color:var(--navy);background:rgba(255,255,255,.44);transition:background .35s ease,color .35s ease,border-color .35s ease,transform .5s var(--ease-lux);
}
.service-icon{width:28px;height:28px;}
.service-number{font:600 1rem/1 var(--font-body);color:var(--gold-dark);letter-spacing:.08em;}
.service-card .tag{display:block;min-height:2.9em;margin-bottom:9px;font-size:.7rem;line-height:1.45;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--gold-dark);}
/* Nazwy usług — waga 700 zgodnie z podziałem ról Libre Baskerville. */
.service-card .service-title{display:block;font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.3;margin-bottom:12px;letter-spacing:0;}
.service-card .service-summary{display:-webkit-box;min-height:6.2em;color:var(--ink-muted);font-size:.93rem;line-height:1.55;margin:0;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;}
.service-expand{
display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;color:var(--navy);
font-size:.7rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;
}
.service-expand svg{width:16px;height:16px;transition:transform .35s var(--ease-lux);}
.service-card:hover .service-expand svg{transform:translateX(5px);}
.service-card:hover{
background:var(--navy);border-color:var(--navy);
box-shadow:0 26px 55px rgba(8,23,41,.16);transform:translateY(-7px);
}
.service-card:hover::after{right:0;}
.service-card:hover .service-toggle{color:var(--white);}
.service-card:hover .service-icon-shell{
color:var(--gold-light);border-color:rgba(227,200,120,.7);background:rgba(255,255,255,.06);transform:translateY(-3px);
}
.service-card:hover .service-number,
.service-card:hover .tag{color:var(--gold-light);}
.service-card:hover .service-summary{color:rgba(255,255,255,.76);}
.service-card:hover .service-expand{color:var(--white);}
@media(max-width:860px){
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.service-card:last-child{grid-column:auto;}
.service-toggle{min-height:330px;}
}
@media(max-width:580px){
.service-grid{grid-template-columns:1fr;}
.service-toggle{min-height:0;padding:28px 25px 25px;}
.service-card .tag{min-height:0;}
.service-card .service-summary{min-height:0;-webkit-line-clamp:unset;}
}
/* ============ PHOTOGRAPHY (shared) ============ */
.photo-frame{position:relative; overflow:hidden; background:var(--navy);}
.photo-frame img{
width:100%; height:100%; object-fit:cover; display:block;
filter:saturate(1.04) contrast(1.02);
transform:scale(1.06); transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.photo-frame:hover img{transform:scale(1);}
.photo-frame .tint{
position:absolute; inset:0;
background:linear-gradient(160deg, rgba(11,37,69,0.32) 0%, rgba(11,37,69,0.06) 45%, rgba(184,145,47,0.14) 100%);
mix-blend-mode:multiply; pointer-events:none;
}
/* ============ CONNECTION BAND ============ */
.connection-band{position:relative; min-height:460px; display:flex; align-items:center; overflow:hidden; background:var(--navy);}
.connection-band img.cb-photo{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position:center 48%; filter:saturate(0.88) contrast(1.04);
}
.connection-band .scrim{
position:absolute; inset:0;
background:
linear-gradient(90deg, rgba(8,23,41,0.96) 0%, rgba(8,23,41,0.88) 35%, rgba(8,23,41,0.48) 66%, rgba(8,23,41,0.12) 100%),
linear-gradient(0deg, rgba(8,23,41,0.24), rgba(8,23,41,0.02));
}
.connection-band .wrap{position:relative; z-index:2;}
.connection-content{position:relative; max-width:760px; margin:0 auto; padding:74px 0 68px; text-align:center;}
/* Zostaje sam kolor i odstep. Wczesniej ta jedna sekcja miala wlasny rozmiar
nadtytulu (0,925 rem) i display:block, ktory rozciagalby kreski na cala
szerokosc kolumny zamiat konczyc je na tekscie. */
.connection-content .eyebrow{color:var(--gold-light); margin-bottom:19px;}
.connection-content h2{color:var(--white); margin-bottom:22px; text-wrap:balance;}
.connection-content h2::after{content:""; display:block; width:58px; height:2px; margin:17px auto 0; background:var(--gold);}
.connection-content h2 em{color:var(--gold-light); font-style:normal;}
.connection-content p{max-width:630px; color:rgba(251,246,236,0.78); font-size:clamp(.94rem,1.1vw,1.02rem); line-height:1.65; margin:0 auto 18px;}
.connection-content .connection-lead{color:var(--white); font-size:clamp(1.45rem,2.06vw,1.725rem); line-height:1.45; font-weight:500; margin-bottom:22px; text-wrap:balance;}
.connection-content .connection-lead strong{color:var(--gold-light); font-weight:600;}
.connection-source{display:inline-flex; align-items:center; gap:8px; color:rgba(251,246,236,0.58); font-size:.75rem; letter-spacing:.02em; text-decoration:none; transition:color .2s ease;}
.connection-source::before{content:""; width:18px; height:1px; background:var(--gold); flex:0 0 auto;}
.connection-source:hover{color:var(--gold-light);}
@media(max-width:760px){
.connection-band{min-height:430px; align-items:flex-end;}
.connection-band img.cb-photo{object-position:62% center;}
.connection-band .scrim{background:linear-gradient(180deg, rgba(8,23,41,0.18) 0%, rgba(8,23,41,0.68) 36%, rgba(8,23,41,0.97) 78%);}
.connection-content{padding:46px 0 40px; max-width:100%;}
.connection-content p{line-height:1.6;}
}
/* ============ PROCESS ============ */
.process{background:var(--navy); color:var(--cream); padding:100px 0;}
.process .section-head h2{color:var(--white);}
.process .section-head p{color:rgba(251,246,236,0.65);}
.process .eyebrow{color:var(--gold-light);}
.process-inner{display:grid; grid-template-columns:0.82fr 1fr; gap:64px; align-items:center;}
.process-photo{aspect-ratio:4/5; border:1px solid rgba(227,200,120,0.25);}
.process-photo .caption-chip{
position:absolute; top:16px; left:16px; background:rgba(8,23,41,0.55); backdrop-filter:blur(6px);
border:1px solid rgba(227,200,120,0.4); color:var(--gold-pale); font-size:0.76rem; font-weight:600;
letter-spacing:0.04em; padding:8px 14px; border-radius:20px; display:flex; align-items:center; gap:7px;
}
.process-photo .caption-chip svg{width:13px; height:13px;}
.steps{display:flex; flex-direction:column; gap:0; position:relative;}
.steps::before{
content:''; position:absolute; top:8px; bottom:8px; left:26px; width:1px;
background:repeating-linear-gradient(180deg, rgba(227,200,120,0.5) 0 8px, transparent 8px 16px);
}
.step{padding:0 0 40px 74px; text-align:left; position:relative;}
.step:last-child{padding-bottom:0;}
.step-num{
width:48px; height:48px; border-radius:50%; border:1.5px solid var(--gold);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-body); font-size:.88rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; color:var(--gold-light);
margin:0; background:var(--navy); box-shadow:0 0 0 5px var(--navy); position:absolute; left:2px; top:-5px; z-index:1;
}
.step h4{color:var(--white); font-size:1.2rem; line-height:1.32; margin-bottom:10px;}
.step p{color:rgba(251,246,236,0.62); font-size:0.96rem;}
@media(max-width:860px){
.process-inner{grid-template-columns:1fr; gap:44px;}
.process-photo{aspect-ratio:16/10;}
}
/* ============ CONTACT ============ */
.contact{background:var(--navy-deep); color:var(--cream); padding:100px 0 110px; position:relative; overflow:hidden;}
.contact-inner{display:grid; grid-template-columns:0.85fr 1fr; gap:64px;}
.contact .section-head{text-align:left; margin:0 0 36px; max-width:100%;}
.contact .section-head h2{color:var(--white);}
.contact .section-head p{color:rgba(251,246,236,0.65);}
.contact .eyebrow{color:var(--gold-light);}
.contact-info{display:flex; flex-direction:column; gap:22px; margin-bottom:36px;}
.contact-row{display:flex; align-items:center; gap:16px; font-size:0.98rem;}
.contact-row svg{width:20px; height:20px; flex-shrink:0; color:var(--gold-light);}
.contact-row a:hover{color:var(--gold-light);}
/* Kopiowanie adresu e-mail - dla osob, ktore nie korzystaja z klienta poczty
na tym urzadzeniu i chca wkleic adres gdzie indziej. */
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.copy-btn{
position:relative; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; margin-left:-6px; padding:0;
border:1px solid rgba(255,255,255,0.18); border-radius:6px;
background:rgba(255,255,255,0.06); color:rgba(251,246,236,0.72);
cursor:pointer;
transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
/* powiekszenie pola dotyku do 46x46 px bez powiekszania samego przycisku */
.copy-btn::before{content:""; position:absolute; inset:-5px;}
.copy-btn:hover{color:var(--gold-light); border-color:rgba(227,200,120,0.5); background:rgba(255,255,255,0.1);}
.copy-btn svg{width:16px; height:16px; color:inherit;}
.copy-btn .copy-check{display:none;}
.copy-btn.is-copied{color:var(--gold-light); border-color:rgba(227,200,120,0.55);}
.copy-btn.is-copied .copy-icon{display:none;}
.copy-btn.is-copied .copy-check{display:block;}
.copy-btn::after{
content:attr(data-label-copied);
position:absolute; bottom:calc(100% + 9px); left:50%;
transform:translateX(-50%) translateY(4px);
padding:5px 10px; border-radius:2px;
background:var(--gold-light); color:var(--navy-deep);
font-size:0.7rem; font-weight:600; letter-spacing:0.01em; white-space:nowrap;
opacity:0; pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.copy-btn.is-copied::after{opacity:1; transform:translateX(-50%) translateY(0);}
.qr-block{display:flex; align-items:center; gap:18px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12);}
.qr-block .qr{width:120px; height:120px; background:var(--white); padding:6px; flex-shrink:0;}
.qr-block p{font-size:0.84rem; color:rgba(251,246,236,0.6); max-width:220px;}
/* --- contact form card ---
Tlo karty jest NIEPRZEZROCZYSTE (#132133 = rgba(255,255,255,.045) zlozone
z --navy-deep). Dzieki temu pole