@charset "UTF-8";
/* ==========================================================================
   VERITY CORPORATE SERVICES
   Design system, autorski. Nie korzysta z zadnego frameworka.
   Kolejnosc: 1 fonty  2 tokeny  3 reset  4 typografia  5 uklad  6 komponenty
             7 sekcje  8 formularze  9 cookies  10 ruch  11 druk
   ========================================================================== */

/* 1 ----------------------------------------------------------------- FONTY */
/* Kroje okrojone do alfabetu polskiego i angielskiego, po jednym pliku na krój.
   Wczesniej byly cztery pliki z podzialem na latin i latin-ext, przez co
   przegladarka pobierala ogonki w drugiej turze. Teraz 285 KB schodzi do 96 KB. */
/* Wracamy do dwoch plikow na krój, po jednym na zakres znakow.
   Proba scalenia ich w jeden plik skonczyla sie tym, ze w kazdym zostalo
   po dwadziescia glifow i przegladarka rysowala calą stronę krojem
   zastepczym. Zakresy sa te same, co u zrodla kroju: podstawowa lacinka
   i rozszerzona z polskimi ogonkami. Przegladarka pobiera drugi plik
   tylko wtedy, gdy na stronie stoi znak z tego zakresu. */
@font-face{
  font-family:'EB Garamond';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/eb-garamond-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/eb-garamond-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 2 ---------------------------------------------------------------- TOKENY */
:root{
  /* marka, wprost z key visuala */
  --burgundy:#2C0D12;
  --gold:#A8843C;
  --chalk:#F3EEE4;
  --ink:#17120E;
  --rust:#9E5A3A;
  --stone:#8A8177;

  /* powierzchnie jasne */
  --paper:#FCFAF6;
  --paper-warm:#F3EEE4;
  --paper-deep:#EDE6D8;

  /* powierzchnie ciemne */
  /* Dwie ciemne powierzchnie ukladane naprzemiennie, zeby zadne dwie
     sasiadujace sekcje nie mialy tej samej barwy. Ciemniejsza z nich byla
     wczesniej ciepla czernia #17120E z brandbooka, ale na duzej plaszczyznie
     czytala sie jako braz i odstawala od reszty. Teraz to ten sam burgund,
     tylko przygaszony, wiec roznica miedzy sekcjami zostaje, a barwa nie. */
  --dark:#2C0D12;
  --dark-deep:#1C070C;
  /* podklad pod obrazy i drobne powierzchnie na ciemnym */
  --dark-tlo:#22090D;

  /* tekst */
  --tx:#17120E;
  --tx-muted:#6B635A;
  --tx-faint:#8A8177;
  --tx-on-dark:#F3EEE4;
  --tx-on-dark-muted:rgba(243,238,228,.66);

  /* linie wlosowe, glowny srodek porzadkujacy */
  --line:rgba(23,18,14,.13);
  --line-soft:rgba(23,18,14,.07);
  --line-strong:rgba(23,18,14,.24);
  --line-on-dark:rgba(243,238,228,.16);
  --line-on-dark-soft:rgba(243,238,228,.09);

  /* typografia */
  --f-display:'EB Garamond','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --t-hero:clamp(2.85rem,1rem + 5.4vw,5.75rem);
  /* Trzy stopnie skali naglowkow sekcji. Bez tego wszystkie mialy
     identyczny rozmiar i strona czytala sie jak plaska linia. d0 to
     szczyt, d1 poziom podstawowy, d1s wyciszenie w dolnej czesci. */
  --t-d0:clamp(2.4rem,1rem + 4.9vw,5.15rem);
  --t-d1:clamp(2.25rem,1rem + 4.3vw,4.5rem);
  --t-d1s:clamp(1.75rem,1rem + 2.7vw,3rem);
  --t-d2:clamp(1.85rem,1.1rem + 2.6vw,3.1rem);
  --t-h3:clamp(1.25rem,1.05rem + .62vw,1.6rem);
  --t-h4:clamp(1.06rem,.98rem + .28vw,1.24rem);
  --t-lead:clamp(1rem,.95rem + .3vw,1.18rem);
  --t-body:1rem;
  --t-sm:.875rem;
  --t-xs:.78125rem;
  --t-eyebrow:.625rem;

  /* rytm */
  --sp-section:clamp(3rem,1.8rem + 4.4vw,6rem);
  --sp-section-sm:clamp(2.25rem,1.3rem + 3.2vw,4.25rem);
  --gutter:clamp(1.5rem,.5rem + 4.4vw,7.5rem);
  --maxw:90rem;          /* 1440px */
  --maxw-text:42rem;     /* miara wiersza dla czytania */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.7s;

  --hdr-h:5.25rem;
}

/* 3 ----------------------------------------------------------------- RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 1.5rem)}
body{
  margin:0;
  background:var(--paper);
  color:var(--tx);
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.76;
  /* "EB Garamond Semi Bold" i "Inter Medium" z pliku z logo opisuja sam
     znak firmowy, a nie tekst strony. Tekst ciagly zostaje w grubosci
     zwyklej, bo brief prosi o czytelna, spokojna typografie. */
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1,'liga' 1;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video,iframe{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
address{font-style:normal}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}
::selection{background:var(--gold);color:#fff}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* 4 ------------------------------------------------------------ TYPOGRAFIA */
.d-hero,.d-0,.d-1,.d-1s,.d-2,.h-3,.h-4{
  font-family:var(--f-display);
  font-weight:500;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.d-hero{font-size:var(--t-hero);line-height:1.07;letter-spacing:-.02em}
.d-0{font-size:var(--t-d0);line-height:1.06;letter-spacing:-.022em}
.d-1{font-size:var(--t-d1);line-height:1.15}
.d-1s{font-size:var(--t-d1s);line-height:1.22;letter-spacing:-.008em}
.d-2{font-size:var(--t-d2);line-height:1.19}
.h-3{font-size:var(--t-h3);line-height:1.28;letter-spacing:-.006em}
.h-4{font-size:var(--t-h4);line-height:1.34;letter-spacing:0;font-weight:500}

/* nadkreslenie sekcji: male wersaliki + zlota kreska */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-size:var(--t-eyebrow);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-faint);
  margin:0 0 1.75rem;
}
.eyebrow::before{
  content:"";width:2.5rem;height:1px;background:var(--gold);flex:none;
}
.eyebrow--plain::before{display:none}
.eyebrow--center{justify-content:center}
.on-dark .eyebrow{color:rgba(243,238,228,.6)}

.lead{font-size:var(--t-lead);line-height:1.66;color:var(--tx-muted);max-width:38ch}
.prose p{margin:0 0 1.25em;color:var(--tx-muted);text-wrap:pretty}
.lead{text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--tx);font-weight:600}
.measure{max-width:var(--maxw-text)}

/* numer indeksu, jak w spisie tresci */
.index-num{
  font-family:var(--f-display);font-size:.9rem;letter-spacing:.06em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}

.on-dark{color:var(--tx-on-dark)}
.on-dark .lead,.on-dark .prose p{color:var(--tx-on-dark-muted)}
.on-dark .prose strong{color:var(--tx-on-dark)}

/* 5 ---------------------------------------------------------------- UKLAD */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:64rem}
.section{padding-block:var(--sp-section)}
.section--sm{padding-block:var(--sp-section-sm)}
.section--dark{background:var(--dark);color:var(--tx-on-dark)}
/* Ciemna sekcja domykajaca strone tam, gdzie nie ma pasa z wezwaniem.
   Ciepla czern z brandbooka, zeby nie stykala sie z burgundem stopki. */
.section--deep{background:var(--dark-deep);color:var(--tx-on-dark)}
.section--warm{background:var(--paper-warm)}
.section--line{border-top:1px solid var(--line)}
/* Sekcja, w ktorej kazdy wiersz ma juz wlasny oddech i wlasna kreske.
   Bez tego gorny margines sumuje sie i nad pierwszym wierszem robi sie pustka. */
.section--rows{padding-top:clamp(2rem,1rem + 2.5vw,4rem)}
.section--dark.section--line{border-top-color:var(--line-on-dark)}

/* Dwie ciemne powierzchnie jedna po drugiej maja dokladnie to samo tlo,
   wiec granica miedzy nimi znika i czytelnik widzi jedna wielka plame.
   Kazda ciemna sekcja idaca po innej ciemnej dostaje wlosowa kreske.
   Regula obejmuje wszystkie pary, ktore moga wystapic w serwisie. */
/* Kazde przejscie miedzy dwiema ciemnymi powierzchniami dostaje wlosowa
   kreske. Barwy i tak sie roznia, burgund kontra ciepla czern, ale kreska
   domyka granice tam, gdzie roznica jest subtelna. */
.section--dark + .section--dark,
.section--dark + .cta-band,
.section--deep + .cta-band,
.cta-band + .section--dark,
.section--dark + .bleed + .section--dark,
.section--dark + .ftr,
.section--deep + .ftr,
.cta-band + .ftr,
.statement + .section--dark{
  border-top:1px solid var(--line-on-dark);
}

.grid{display:grid;gap:var(--gutter)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:56.25em){
  .cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:40em){
  .cols-2,.cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}
}

/* naglowek sekcji: tytul po lewej, opis po prawej, jak w raportach */
.sec-head{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:var(--gutter);align-items:start;
  padding-bottom:clamp(1.75rem,.9rem + 2.8vw,3.5rem);
}
/* Nadkreslenie stoi w osobnym wierszu nad naglowkiem, dzieki czemu tekst
   w drugiej kolumnie zaczyna sie dokladnie na wysokosci pierwszej litery
   naglowka, a nie nad nim. */
.sec-head > .eyebrow{grid-column:1;grid-row:1}
.sec-head__title{grid-column:1;grid-row:2;margin:0}
.sec-head__aside{grid-column:2;grid-row:2}
/* WYROWNANIE TEKSTU OBOK NAGLOWKA
   Jedna zasada dla calego serwisu: pierwszy wiersz tekstu w prawej kolumnie
   zaczyna sie na wysokosci wierzcholka pierwszego wersalika naglowka.
   Wczesniej byly tu trzy rozne zachowania naraz, do gory, do srodka i do
   dolu, wiec kazda sekcja wygladala inaczej.

   Wspolczynniki nie sa zgadywane. Zmierzylem obie kroje na gotowej stronie
   przez metryki tekstu w przegladarce. Odleglosc od gornej krawedzi wiersza
   do wierzcholka wersalika wynosi:
     EB Garamond, naglowki:  interlinia / 2 - 0.28 rozmiaru pisma
   Wspolczynnik 0.28 zamiast wyliczonego 0.316 wzial sie z pomiaru na
   gotowej stronie: przy 0.316 tekst obok zaczynal sie trzy piksele nad
   naglowkiem. Piksele sa tu wazniejsze niz metryki kroju.
     Inter, tekst obok:      interlinia / 2 - 0.291 rozmiaru pisma
   Przy interlinii 1.66 w tekscie obok daje to stale 0.539 em. */
.sec-head{--rozmiar-tytulu:var(--t-d1);--interlinia-tytulu:1.15}
/* Sekcja ze szczytem skali dostaje szersza kolumne na naglowek, zeby duze
   pismo mialo gdzie sie rozlozyc i nie lamalo sie po dwa slowa. */
.sec-head:has(.d-0){
  --rozmiar-tytulu:var(--t-d0);--interlinia-tytulu:1.06;
  /* Kolumny rowne, tak jak w pozostalych naglowkach. Szersza kolumna na
     tytul spychala tekst obok za daleko w prawo i sekcja odstawala od
     reszty strony. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.sec-head:has(.d-1s){--rozmiar-tytulu:var(--t-d1s);--interlinia-tytulu:1.22}
.sec-head:has(.d-2){--rozmiar-tytulu:var(--t-d2);--interlinia-tytulu:1.19}
.sec-head__aside{align-self:start}
/* Klase nadaje skrypt po zmierzeniu obu blokow. Bez skryptu zostaje
   wyrownanie do pierwszej litery, czyli zachowanie sprzed zmiany. */
.sec-head--wysrodkuj .sec-head__aside{align-self:center}
.sec-head--wysrodkuj .sec-head__aside > *:first-child{margin-top:0}
/* Wariant odwrotny: krotki naglowek siada w osi dluzszego tekstu obok. */
.sec-head--wysrodkuj-tytul .sec-head__title{align-self:center}
.sec-head__aside > *:first-child{
  margin-top:calc(
    var(--rozmiar-tytulu) * (var(--interlinia-tytulu) / 2 - .28)
    - .539em
  );
}
/* Gdy tekst obok ma naroza, to one sa gorna krawedzia bloku, a nie
   pierwsza litera. Doklada­my wiec odstep naroza, zeby rowno z naglowkiem
   stanela ramka, a nie tekst w srodku niej. */
.sec-head__aside > .lead:first-child{
  margin-top:calc(
    var(--rozmiar-tytulu) * (var(--interlinia-tytulu) / 2 - .28)
    - .539em
    + clamp(.7rem,1.05vw,.95rem)
  );
}
/* Regula z :has(.d-0) ustawia dwie kolumny i ma wyzsza szczegolowosc
   niz sam wariant jednokolumnowy, wiec trzeba ja tu pokonac wprost.
   Ten sam klopot wyszedl wczesniej przy naglowkach na telefonie. */
.sec-head--stack,
.sec-head--stack:has(.d-0){grid-template-columns:minmax(0,1fr)}
.sec-head--stack{max-width:52rem}
.sec-head--stack .sec-head__title{grid-column:1}
/* W jednej kolumnie tekst obok staje sie tekstem pod spodem, wiec traci
   wyrownanie optyczne do pierwszej litery naglowka i dostaje wlasny
   odstep. */
/* Wiersz trzeci, nie auto. Tytul siedzi w drugim wierszu na sztywno,
   wiec przy automatycznym rozmieszczeniu tekst ladowal w pierwszym
   wolnym miejscu, czyli nad naglowkiem. */
.sec-head--stack .sec-head__aside{grid-column:1;grid-row:3}
.sec-head--stack .sec-head__aside > *:first-child{margin-top:1.5rem}
/* Wariant jednokolumnowy i wysrodkowany naraz: obie reguly ustawiaja
   szerokosc, wiec potrzebna jest jedna, ktora wygrywa z obiema. */
.sec-head--stack.sec-head--center{max-width:56rem;margin-inline:auto}
.sec-head--center .sec-head__aside{text-align:center}
.sec-head--center .sec-head__aside .lead{margin-inline:auto;max-width:56ch}
/* tekst obok naglowka wypelnia kolumne, a nie wlasny limit znakow */
.sec-head__aside .lead{max-width:none}
/* odnosnik pod tekstem potrzebuje wlasnego oddechu */
.sec-head__aside .lead + .tlink,
.sec-head__aside .lead + .btn{margin-top:1.75rem}
/* naglowek bez tekstu obok, wysrodkowany */
.sec-head--center{justify-items:center;text-align:center;margin-inline:auto;max-width:none}
.sec-head--center .sec-head__title{grid-column:1;text-wrap:balance}
.sec-head--center .eyebrow{justify-content:center}
@media(max-width:56.25em){
  /* Przy jednej kolumnie trzeba zdjac takze przypisania do wierszy
     i kolumn, inaczej tytul i tekst obok trafiaja w to samo miejsce
     siatki i nachodza na siebie. */
  /* Regula z :has(.d-0) ma wyzsza szczegolowosc niz sam .sec-head, wiec
     bez powtorzenia jej tutaj siatka zostawala dwukolumnowa takze na
     telefonie. Naglowek dostawal wtedy okolo 165 pikseli szerokosci
     i lamal sie po jednym slowie, a obok stala pusta kolumna. */
  .sec-head,
  .sec-head:has(.d-0){grid-template-columns:minmax(0,1fr);row-gap:0}
  .sec-head > .eyebrow,
  .sec-head__title,
  .sec-head__aside{grid-column:1;grid-row:auto}
  /* W jednej kolumnie tekst stoi tuz pod naglowkiem, wiec gorne naroze
     ramki wchodzilo na jego ostatni wiersz. Potrzebuje wlasnego odstepu.
     Wariant z klasa lead musi byc powtorzony, bo reguła optyczna wyzej
     ma wyzsza szczegolowosc niz sama gwiazdka. */
  .sec-head__aside > *:first-child,
  .sec-head__aside > .lead:first-child{margin-top:2.75rem}
}

/* Przyciski w tresci stoja przy lewej krawedzi bloku, tak jak reszta
   tekstu. Wyjatkiem jest przycisk pod krokami procesu, ktory ma wlasna
   regule nizej, bo stoi w osobnej kolumnie obok akapitu. */

.stack-xs>*+*{margin-top:.5rem}
.stack-s>*+*{margin-top:1rem}
.stack-m>*+*{margin-top:1.5rem}
.stack-l>*+*{margin-top:2.25rem}
.center{text-align:center}
.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;
}
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--burgundy);color:var(--chalk);
  padding:.75rem 1.25rem;font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

/* 6 ------------------------------------------------------------ KOMPONENTY */

/* --- przyciski --- */
.btn{
  --btn-fg:var(--chalk);--btn-bg:var(--burgundy);--btn-bd:var(--burgundy);
  position:relative;display:inline-flex;align-items:center;gap:.75rem;
  padding:1.0625rem 1.75rem;
  font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  transition:color .38s var(--ease),background-color .38s var(--ease),border-color .38s var(--ease);
  overflow:hidden;isolation:isolate;
  text-align:left;
}
.btn>*{position:relative;z-index:1}
.btn::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--gold);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .48s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.btn:hover,.btn:focus-visible{color:#fff;border-color:var(--gold)}
.btn .ico{width:1rem;height:1rem;flex:none;transition:transform .38s var(--ease)}
.btn:hover .ico{transform:translateX(.28rem)}

.btn--ghost{--btn-fg:var(--tx);--btn-bg:transparent;--btn-bd:var(--line-strong)}
.btn--ghost-light{--btn-fg:var(--chalk);--btn-bg:transparent;--btn-bd:var(--line-on-dark)}
.btn--light{--btn-fg:var(--burgundy);--btn-bg:var(--chalk);--btn-bd:var(--chalk)}
.btn--gold{--btn-fg:#fff;--btn-bg:var(--gold);--btn-bd:var(--gold)}
.btn--gold::after{background:var(--burgundy)}
.btn--gold:hover,.btn--gold:focus-visible{border-color:var(--burgundy)}
.btn--sm{padding:.8125rem 1.25rem;font-size:.75rem;letter-spacing:.12em}
.btn--block{display:flex;width:100%;justify-content:center;text-align:center}
.form [type="submit"]{margin-top:clamp(.5rem,1.2vw,1rem)}

/* --- link tekstowy z podkresleniem rysowanym od lewej --- */
.tlink{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx);padding-bottom:.4rem;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 1px;
  box-shadow:inset 0 -1px 0 var(--line);
  transition:background-size .5s var(--ease-out),color .3s var(--ease);
}
.tlink:hover,.tlink:focus-visible{background-size:100% 1px;color:var(--burgundy)}
.tlink .ico{width:.9rem;height:.9rem;flex:none;transition:transform .38s var(--ease)}
.tlink:hover .ico{transform:translateX(.25rem)}
.on-dark .tlink{color:var(--chalk);box-shadow:inset 0 -1px 0 var(--line-on-dark)}
.on-dark .tlink:hover{color:#fff}

/* link w tresci */
.prose a:not(.btn):not(.tlink){
  color:var(--tx);box-shadow:inset 0 -1px 0 var(--gold);
  transition:box-shadow .3s var(--ease),color .3s var(--ease);
}
.prose a:not(.btn):not(.tlink):hover{box-shadow:inset 0 -2px 0 var(--gold);color:var(--rust)}

/* --- ikony --- */
.ico{display:inline-block;vertical-align:-.15em;
     width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.25;
     stroke-linecap:butt;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.ico--lg{width:2.5rem;height:2.5rem;stroke-width:1}
.ico--fill{fill:currentColor;stroke:none}

/* --- logo --- */
.logo{display:inline-flex;align-items:center;gap:.85rem;color:var(--burgundy)}
.logo__mark{width:2.1rem;height:1.99rem;flex:none;color:var(--gold)}
.logo__mark svg{width:100%;height:100%;display:block}
.logo__type{display:flex;flex-direction:column;gap:.16rem;line-height:1}
.logo__name{
  font-family:var(--f-display);font-weight:600;
  font-size:1.32rem;letter-spacing:.2em;
  color:currentColor;
}
.logo__sub{
  font-family:var(--f-sans);font-weight:500;
  font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stone);white-space:nowrap;
}
.on-dark .logo,.hdr--over .logo,.hdr--stuck .logo{color:var(--chalk)}
.on-dark .logo__sub,.hdr--over .logo__sub,
.hdr--stuck .logo__sub{color:rgba(243,238,228,.62)}
.logo--sm .logo__mark{width:1.65rem;height:1.56rem}
.logo--sm .logo__name{font-size:1.05rem}
.logo--sm .logo__sub{font-size:.44rem}

/* --- karta uslugi --- */
.svc{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.75rem,1rem + 1.8vw,2.5rem) 0 clamp(1.75rem,1rem + 1.8vw,2.5rem);
  border-top:1px solid var(--line);
  min-height:100%;
  transition:border-color .4s var(--ease);
}
/* Kafel uslugi ze zdjeciem. Zdjecie stoi nad ikona i lekko najezdza
   przy wskazaniu, tak jak karty na stronach z inspiracji. */
.svc__foto{
  display:block;overflow:hidden;margin-bottom:1.75rem;background:var(--paper-deep);
  /* Proporcje niesie pole, a nie obraz. Dzieki temu wysokosc jest znana,
     zanim kadr sie wczyta, i nie zalezy od tego, jak przegladarka liczy
     rozmiar obrazu wewnatrz siatki dzielonej. */
  aspect-ratio:16/10;
}
/* Kadr ma stac nieruchomo takze pod kursorem. Powiekszanie przy najechaniu
   sprawialo wrazenie, ze zdjecie skacze. Zamiast ruchu zostaje samo
   rozjasnienie, ktore wystarczy za informacje zwrotna. */
.svc__foto picture,
.svc__foto img{display:block;width:100%;height:100%}
.svc__foto img{
  object-fit:cover;transition:filter .45s var(--ease-out);
}
.svc--foto:hover .svc__foto img{filter:brightness(1.06)}
.svc--foto .svc__icon{margin-bottom:1.25rem}

.svc__icon{color:var(--gold);margin-bottom:1.5rem;transition:transform .55s var(--ease-out)}
.svc:hover .svc__icon{transform:translateY(-.2rem)}
.svc__title{margin-bottom:.65rem}
.svc__title a::after{content:"";position:absolute;inset:0;z-index:1}
.svc__desc{color:var(--tx-muted);font-size:var(--t-sm);margin-bottom:1.5rem}
/* Znak marki w miejscu ikony. Klientka prosila, zeby w sekcji o wspolnych
   potrzebach zamiast ikon stalo zlote V z logo. Wysokosc taka sama jak
   ikony w wariancie duzym, zeby kafelki nie zmienily rytmu. */
.svc__znak{
  display:block;width:2.1rem;height:2rem;color:var(--gold);
  margin-bottom:1.5rem;transition:transform .55s var(--ease-out);
}
.svc__znak svg{width:100%;height:100%;display:block}
.svc:hover .svc__znak{transform:translateY(-.2rem)}

/* Case study: numer, kategoria nad tytulem i znaczniki pod opisem.
   Znaczniki bez ramek, sama typografia, zgodnie z uwaga klientki. */
.svc__index{
  font-family:var(--font-head);font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--gold);margin-bottom:1.1rem;
}
.svc__kicker{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-faint);margin-bottom:.5rem;
}
.svc__tag{
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-top:auto;padding-top:.35rem;
}
.on-dark .svc__kicker{color:var(--tx-on-dark-muted)}

.svc__list{margin-bottom:1.75rem;font-size:var(--t-xs);color:var(--tx-faint)}
.svc__list li{padding-left:1.1rem;position:relative;margin-bottom:.4rem}
.svc__list li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:.32rem;height:.32rem;border:1px solid var(--gold);
  transform:rotate(45deg);
}
.svc__go{margin-top:auto;color:var(--tx-faint);transition:color .35s var(--ease),transform .45s var(--ease)}
.svc__go .ico{width:1.1rem;height:1.1rem}
.svc:hover .svc__go{color:var(--gold);transform:translateX(.35rem)}
/* Odmiana z przyciskiem: przycisk ma wlasne barwy i wlasna reakcje na
   kursor, wiec nie moze brac ich po strzalce, ktora zastapil. */
.svc__go--cta{color:inherit}
.svc:hover .svc__go--cta{transform:none}
/* Ramka przycisku w kaflu jest zlota, a nie w kolorze linii. Wypelnienie
   przy najechaniu i tak jest zlote, wiec obwodka tylko to zapowiada. */
.svc__go--cta .btn{--btn-bd:var(--gold)}
.svc:hover{border-top-color:var(--gold)}
@media(max-width:40em){
  /* W jednej kolumnie kreska nad kaflem lezy tuz nad zdjeciem i wyglada
     jak przypadkowa kreseczka, a nie jak linia porzadkujaca rzad. Rzad
     jest tu jeden, wiec nie ma czego porzadkowac. */
  .svc--foto{border-top:0;padding-top:0}
}
.on-dark .svc{border-top-color:var(--line-on-dark)}
.on-dark .svc__desc,.on-dark .svc__list{color:var(--tx-on-dark-muted)}

/* --- kafel z obrazem --- */
/* Kafel ze zdjeciem jako karta na wlasnym tle. Wypelnienie jest rowne
   ze wszystkich stron, wiec tekst nie przykleja sie do konturu, co bylo
   glownym zarzutem przy pierwszej wersji. */
/* Kafel bez pudelka. Ani bezowe wypelnienie, ani bordowa obwodka nie
   siadly, bo klopotem nie byl kolor, tylko sam pojemnik: reszta serwisu
   nigdzie nie zamyka tresci w ramce, rozdziela ja wloskowa kreska
   i swiatlem. Kafel wraca do tego jezyka.

   Kadr jest tu pionowy, 3:4, a nie poziomy jak w kaflach uslug wyzej.
   Dzieki temu rzad czyta sie jako osobny, spokojniejszy zestaw, a nie
   jako powtorzenie sekcji nad nim. Proporcje wymusza przegladarka na
   istniejacych plikach, wiec nie trzeba nowych grafik. */
.tile{
  position:relative;display:flex;flex-direction:column;
  background:transparent;border:0;padding:0;
}
.tile__media{
  position:relative;overflow:hidden;
  /* Kwadrat zamiast trzy do czterech. Kadr zostaje przyciety do srodka,
     wiec charakter zdjecia sie nie zmienia, ale plyta jest o cwierc
     nizsza i nie spycha tekstu poza ekran. Na 1440 to 385 pikseli
     zamiast 513. */
  aspect-ratio:1/1;
  background:var(--paper-deep);margin-bottom:0;
}
.tile__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:filter .45s var(--ease-out)}
.tile:hover .tile__media img{filter:brightness(1.06)}
.tile__body{display:flex;flex-direction:column;flex:1}
/* Kreska siedzi na ikonie, a nie na opakowaniu tresci, bo przy wyrownaniu
   wiersz w wiersz opakowanie znika z ukladu i jego obramowanie nie ma
   sie gdzie narysowac. */
.tile__icon{
  border-top:1px solid var(--line);
  margin-top:1.75rem;padding-top:1.5rem;
  transition:border-color .45s var(--ease),transform .55s var(--ease-out);
}
.tile:hover .tile__icon{border-top-color:rgba(44,13,18,.55)}
@media(max-width:40em){
  /* Bez pudelka kafle rozdziela juz tylko swiatlo, wiec w jednej kolumnie
     musi go byc wiecej, inaczej strzalka jednego kafla klei sie do kadru
     nastepnego. */
  .grid:has(> .tile){row-gap:clamp(3rem,9vw,4.5rem)}
}
.tile__icon{color:var(--gold);display:block;margin-bottom:1.1rem}
.tile:hover .tile__icon{transform:translateY(-.2rem)}
/* Najdluzsza nazwa sektora nie miescila sie w jednej linii, przez co
   w dwoch kolumnach opis odjezdzal od tytulu, a w trzeciej stal tuz pod
   nim. Rzad wygladal wtedy na krzywy. Stopien nizej mieszcza sie
   wszystkie trzy i wiersze same sie zgadzaja. */
.tile .svc__title{
  margin-bottom:.65rem;
  font-size:clamp(1.1rem,.78rem + .78vw,1.42rem);
  text-wrap:balance;
}
.tile .svc__desc{margin-bottom:1.5rem}
.tile .svc__go{margin-top:auto}

/* Wiersz w wiersz miedzy kafelkami. Tytuly lamia sie na rozna liczbe
   linii, wiec bez tego opis w srodkowym kafelku zaczynal sie wyzej niz
   w sasiednich. W obwiedzionym kafelku widac to od razu.
   tile__body przestaje byc pudelkiem, zeby jego dzieci trafily wprost
   do siatki kafla i mogly sie z nia wyrownac. */
@supports (grid-template-rows: subgrid){
  /* Tylko tam, gdzie kafle faktycznie stoja obok siebie. W jednej
     kolumnie zerowa przerwa miedzy wierszami sklejalaby je razem. */
  @media(min-width:40.0625em){
    .grid:has(> .tile){grid-template-rows:repeat(5,auto);row-gap:0}
    .tile{grid-row:span 5;display:grid;grid-template-rows:subgrid}
    .tile__body{display:contents}
    .tile .svc__go{margin-top:0;align-self:end;padding-top:1.25rem}
  }
}

/* --- zaslepka na zdjecie, gdy klientka nie dostarczyla materialu --- */
.ph{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.85rem;
  background:
    linear-gradient(var(--paper-deep),var(--paper-deep)) padding-box,
    repeating-linear-gradient(-45deg,transparent 0 7px,rgba(23,18,14,.045) 7px 8px) padding-box;
  border:1px solid var(--line);
  color:var(--tx-faint);text-align:center;padding:2rem;
  min-height:12rem;
}
.ph__label{
  font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}
.ph__hint{font-size:var(--t-xs);color:var(--tx-faint);max-width:26ch;line-height:1.5}
.ph .ico{color:var(--gold);opacity:.75}
.ph--video{aspect-ratio:16/9;min-height:0}
.ph--portrait{aspect-ratio:3/4;min-height:0}
.ph--wide{aspect-ratio:16/10;min-height:0}
.ph--square{aspect-ratio:1/1;min-height:0}
.on-dark .ph{
  background:
    linear-gradient(var(--dark-tlo),var(--dark-tlo)) padding-box,
    repeating-linear-gradient(-45deg,transparent 0 7px,rgba(243,238,228,.05) 7px 8px) padding-box;
  border-color:var(--line-on-dark);color:var(--tx-on-dark-muted);
}

/* --- pigulka / znacznik --- */
.tag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-faint);border:1px solid var(--line);
  padding:.45rem .8rem;
}
.tag--gold{color:var(--gold);border-color:rgba(168,132,60,.4)}
.on-dark .tag{color:var(--tx-on-dark-muted);border-color:var(--line-on-dark)}

/* --- okruszki --- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:var(--t-xs);color:var(--tx-faint);}
.crumbs li{display:flex;align-items:center;gap:.55rem}
.crumbs li+li::before{
  content:"›";color:var(--gold);
  font-size:1.15em;line-height:1;transform:translateY(-.04em);
}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--tx)}
.on-dark .crumbs{color:var(--tx-on-dark-muted)}
.on-dark .crumbs [aria-current]{color:var(--chalk)}

/* --- cytat --- */
.quote{position:relative;padding-left:clamp(1.5rem,3vw,3rem);border-left:1px solid var(--gold)}
.quote__text{font-family:var(--f-display);font-size:var(--t-d2);line-height:1.34;letter-spacing:-.01em}
.quote__by{margin-top:1.5rem;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-faint)}

/* 7 ------------------------------------------------------- NAGLOWEK STRONY */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--hdr-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:transform .45s var(--ease),background-color .45s var(--ease),
             border-color .45s var(--ease),height .45s var(--ease);
}
.hdr__inner{
  position:relative;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
/* Stan przyklejony. Pasek jest bordowy na kazdej podstronie, nie tylko nad
   ciemnym hero, wiec znak marki i menu maja wszedzie ten sam uklad barw co
   w hero: zloty znak, kredowy napis. Wczesniej na podstronach robil sie
   jasny i logo przechodzilo na bordo, przez co pasek zmienial tozsamosc
   w polowie przewijania. */
.hdr--stuck{
  background:rgba(34,9,13,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line-on-dark);
  color:var(--chalk);
  height:4.25rem;
}
/* stan: nad ciemnym hero, przed przewinieciem */
.hdr--over{color:var(--chalk)}
/* Podstrona bez ciemnego naglowka, na przyklad panel klienta. Pasek ma
   od razu pelne bordowe tlo, bo nie ma pod nim ciemnego hero. */
.hdr--pelny{
  background:var(--dark);color:var(--chalk);
  border-bottom-color:var(--line-on-dark);
}
.hdr--hidden{transform:translateY(-100%)}


/* --- nawigacja glowna --- */
.nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2.25rem)}
.nav__item{position:relative}
/* Pasek dzieli sie na dwie grupy: trzy pozycje przy logo i reszta
   dosunieta do prawej, tuz przed zlotym przyciskiem. */
.hdr .nav{flex:1;min-width:0}
.hdr .nav ul{width:100%}
.nav__item--przerwa{margin-left:auto}
@media (max-width:74.99rem){
  .nav__item--przerwa{margin-left:0}
}
.nav__item--has-mega{position:static}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 0;
  font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:currentColor;white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after,
.nav__item--active>.nav__link::after{transform:scaleX(1);transform-origin:left center}
.nav__item--active>.nav__link{color:var(--gold)}
.nav__link .ico{width:.6rem;height:.6rem;transition:transform .35s var(--ease)}
.nav__item--open>.nav__link .ico{transform:rotate(180deg)}

/* --- megamenu uslug --- */
/* Panel kotwiczy sie do kontenera naglowka, nie do pozycji menu.
   Wczesniej byl centrowany na slowie Uslugi i lewa czesc wychodzila
   poza ekran, gdzie obcinal go overflow strony. */
.mega{
  position:absolute;top:calc(100% + .9rem);transform:translateY(-.5rem);
  left:var(--gutter);
  width:min(62rem,calc(100% - var(--gutter) * 2));
  background:var(--paper);border:1px solid var(--line);color:var(--tx);
  padding:2rem;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem 2rem;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 24px 60px -30px rgba(23,18,14,.32);
  transition:opacity .32s var(--ease),transform .38s var(--ease-out),visibility .32s;
}
.nav__item--open .mega,.nav__item:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
.mega__link{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:.9rem .85rem;color:var(--tx);
  transition:background-color .3s var(--ease);
}
.mega__link:hover{background:var(--paper-warm)}
.mega__link .ico{width:1.35rem;height:1.35rem;color:var(--gold);flex:none;margin-top:.15rem}
.mega__name{font-size:var(--t-sm);font-weight:500;display:block;margin-bottom:.15rem}
.mega__desc{font-size:var(--t-xs);color:var(--tx-faint);line-height:1.45;display:block}
.mega__foot{
  /* Pozycje panelu maja wlasne wypelnienie po bokach, wiec ich ikony
     zaczynaja sie kawalek w prawo od krawedzi siatki. Stopka bez tego
     wypelnienia wisiala czternascie pikseli na lewo od pierwszej ikony
     i o tyle samo wystawala w prawo. */
  grid-column:1/-1;margin-top:1rem;padding-top:1.25rem;
  padding-inline:.85rem;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;
}

/* --- prawa strona naglowka --- */
.hdr__aside{display:flex;align-items:center;gap:clamp(.75rem,1.4vw,1.5rem)}
.hdr__aside .btn{white-space:nowrap}
.hdr__tel{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-size:var(--t-xs);letter-spacing:.06em;font-variant-numeric:tabular-nums;
  color:currentColor;transition:color .3s var(--ease);
}
.hdr__tel:hover{color:var(--gold)}
.hdr__tel .ico{width:1rem;height:1rem}

/* --- przelacznik jezyka --- */
.lang{display:flex;align-items:center;gap:.5rem;font-size:var(--t-xs);letter-spacing:.1em}
.lang__sep{width:1px;height:.75rem;background:currentColor;opacity:.3}
.lang a{opacity:.55;transition:opacity .3s var(--ease),color .3s var(--ease)}
.lang a:hover{opacity:1;color:var(--gold)}
.lang [aria-current]{opacity:1;font-weight:600}
/* Przelacznik jezyka stoi na prawym koncu paska, za przyciskiem. */
.lang--koniec{margin-left:.35rem}

/* --- hamburger --- */
.burger{display:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;
  margin-right:-.6rem;color:currentColor}
.burger__box{position:relative;width:1.5rem;height:.75rem}
.burger__box i{
  position:absolute;left:0;height:1px;width:100%;background:currentColor;
  transition:transform .42s var(--ease-out),opacity .25s var(--ease),width .42s var(--ease-out);
}
.burger__box i:nth-child(1){top:0}
.burger__box i:nth-child(2){top:50%;width:70%}
.burger__box i:nth-child(3){top:100%}
.is-menu-open .burger__box i:nth-child(1){transform:translateY(.375rem) rotate(45deg)}
.is-menu-open .burger__box i:nth-child(2){opacity:0;width:0}
.is-menu-open .burger__box i:nth-child(3){transform:translateY(-.375rem) rotate(-45deg)}

/* --- panel mobilny --- */
.mnav{
  position:fixed;inset:0;z-index:99;
  background:var(--dark);color:var(--chalk);
  padding:calc(var(--hdr-h) + 1.5rem) var(--gutter) 2rem;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--ease-out),opacity .3s var(--ease),visibility .5s;
}
.is-menu-open .mnav{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}
.mnav__list{border-top:1px solid var(--line-on-dark)}
.mnav__item{border-bottom:1px solid var(--line-on-dark)}
.mnav__link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1.15rem 0;font-family:var(--f-display);font-size:1.6rem;
  letter-spacing:-.01em;line-height:1.28;color:var(--chalk);text-align:left;
  opacity:0;transform:translateY(.85rem);
}
.is-menu-open .mnav__link,.is-menu-open .mnav__rozwin{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease-out) var(--d,0s);
}
/* Dzial z podlista: nazwa jest odnosnikiem, strzalka osobnym przyciskiem.
   Przycisk ma pelna wysokosc wiersza i wlasny zapas po bokach, zeby palec
   trafial w niego, a nie w nazwe obok. */
.mnav__rzad{display:flex;align-items:center}
.mnav__rzad .mnav__link{width:auto;flex:1;justify-content:flex-start}
.mnav__rozwin{
  display:flex;align-items:center;justify-content:center;
  flex:none;align-self:stretch;width:3.25rem;margin-right:-.75rem;
  color:var(--gold);opacity:0;transform:translateY(.85rem);
}
.mnav__link .ico,.mnav__rozwin .ico{
  width:1rem;height:1rem;color:var(--gold);flex:none;transition:transform .35s var(--ease);
}
.mnav__item--open .mnav__rozwin .ico{transform:rotate(180deg)}
.mnav__sub{overflow:hidden;height:0;transition:height .5s var(--ease-out)}
.mnav__sub a{
  display:block;padding:.65rem 0 .65rem 1.25rem;font-size:var(--t-sm);
  color:var(--tx-on-dark-muted);border-left:1px solid var(--line-on-dark);
  margin-left:.1rem;
}
.mnav__sub a:hover{color:var(--gold)}
.mnav__sub li:last-child a{padding-bottom:1.25rem}
.mnav__foot{margin-top:auto;padding-top:2.5rem;display:grid;gap:1.25rem}
.mnav__contact{display:grid;gap:.6rem;font-size:var(--t-sm);color:var(--tx-on-dark-muted)}
.mnav__contact a{display:inline-flex;align-items:center;gap:.65rem}
.mnav__contact .ico{width:1rem;height:1rem;color:var(--gold);flex:none}

@media(max-width:80em){.hdr__tel{display:none}}
@media(max-width:64em){
  .nav{display:none}
  .burger{display:inline-flex}
}
/* na telefonie CTA z naglowka znika, bo przejmuje je dolny pasek i menu */
@media(max-width:48em){
  .hdr__aside>.btn{display:none}
  .hdr__inner{gap:1rem}
}
@media(min-width:64.0625em){
  .mnav{display:none}
}
body.is-menu-open{overflow:hidden}

/* --- pasek CTA na mobile --- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;grid-template-columns:1fr 1fr;
  background:var(--dark);border-top:1px solid var(--line-on-dark);
  transform:translateY(100%);transition:transform .45s var(--ease-out);
}
.mcta--on{transform:none}
.mcta a{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem .75rem;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--chalk);
}
.mcta a+a{border-left:1px solid var(--line-on-dark);background:var(--gold);color:#fff}
.mcta .ico{width:1rem;height:1rem;flex:none}
@media(max-width:48em){
  .mcta{display:grid}
  .is-menu-open .mcta{transform:translateY(100%)}
}

/* 8 -------------------------------------------------------------------HERO */
.hero{
  /* Hero ma miescic sie na ekranie w calosci, razem z paskiem trzech
     okreslen pod spodem. Dlatego wysokosc bierze cala widoczna wysokosc
     okna, a nie sume wysokosci swoich czesci. To min-height, wiec przy
     bardzo niskim oknie tresc nadal sie nie przytnie, tylko urosnie. */
  position:relative;background:var(--dark);color:var(--tx-on-dark);overflow:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
/* pierwszy ekran: kadr na calej powierzchni, tresc przy dolnej krawedzi */
.hero__stage{
  position:relative;display:flex;align-items:center;
  padding-top:var(--hdr-h);
  /* Kadr wypelnia to, co zostaje po pasku okreslen. Prog na wypadek
     bardzo niskiego okna, zeby tresc nie zostala sciagnieta do kreski. */
  flex:1;min-height:min(30rem,58vh);
}
@supports (height:100svh){
  /* svh liczy sie bez paska adresu, wiec na telefonie nie ucieka poza ekran */
  .hero{min-height:100svh}
  .hero__stage{min-height:min(30rem,58svh)}
}
.hero__media{position:absolute;inset:0;overflow:hidden;background:var(--dark-tlo)}
/* Konwersja do AVIF opakowuje kadr w znacznik picture, ktory jest liniowy
   i nie ma wymiarow. Bez tego obraz liczyl swoja szerokosc wzgledem niego,
   a nie wzgledem pasa, i wystawal poza kadr. */
.hero__media picture{display:block;position:absolute;inset:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  animation:heroIn 2.6s var(--ease-out) both;
}
.hero__media .ph{position:absolute;inset:0;border:0}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(23,18,14,.5) 0%,rgba(23,18,14,.16) 13%,rgba(23,18,14,0) 26%),
    linear-gradient(to top,rgba(23,18,14,.72) 0%,rgba(23,18,14,.4) 20%,rgba(23,18,14,.12) 40%,rgba(23,18,14,0) 62%),
    /* Owal na srodku bierze na siebie czytelnosc tekstu. Wczesniej
       przycienienie szlo od lewej, bo tam stal blok tresci. */
    radial-gradient(ellipse 74% 68% at 50% 47%,
      rgba(23,18,14,.66) 0%,rgba(23,18,14,.44) 44%,rgba(23,18,14,.12) 74%,rgba(23,18,14,0) 100%);
}
/* Animujemy sama skale, bez krycia. Gdy przegladarka wstrzyma animacje,
   na przyklad w karcie trzymanej w tle albo w trybie oszczedzania,
   kadr i tak jest widoczny. */
@keyframes heroIn{from{transform:scale(1.09)}to{transform:none}}

.hero__inner{
  position:relative;width:100%;
  padding-block:clamp(2rem,1rem + 2.6vw,3.5rem);
}
/* Uklad symetryczny, jak na stronach z inspiracji: caly blok tresci
   stoi posrodku kadru i jest wyrownany do srodka. Warunek jest jeden,
   kadr musi miec spokojny srodek, bo to na nim lezy tekst. Za czytelnosc
   odpowiada przycienienie ponizej, liczone od srodka, a nie od lewej. */
.hero .eyebrow{color:rgba(243,238,228,.82);justify-content:center}
/* przy wyrownaniu do srodka kreska wyglada dobrze z obu stron */
.hero .eyebrow::after{
  content:"";width:2.5rem;height:1px;background:var(--gold);flex:none;
}
.hero__text{
  max-width:52rem;margin-inline:auto;text-align:center;
  text-shadow:0 1px 28px rgba(23,18,14,.7);
}
/* Naglowek jest tu wyraznie mniejszy niz w reszcie serwisu. Na stronach
   z briefu zdjecie jest glowne, a tekst pod nim pelni role podpisu.
   Duzy naglowek zaslanialby kadr i wchodzil na znak na scianie. */
.hero .hero__title{
  /* Szerokosc musi pozwolic na dwa rowne wiersze. Przy dwudziestu znakach
     przegladarka musiala lamac na trzy i srodkowy wiersz zostawal
     z jednym slowem, co wyglada na blad skladu. */
  margin:0 auto .9rem;max-width:31ch;
  font-size:clamp(1.75rem,1.05rem + 2.3vw,3.05rem);
  line-height:1.16;
}
.hero__title em{font-style:normal;color:var(--gold)}
.hero .hero__lead{
  max-width:50ch;margin:0 auto 2.15rem;text-wrap:balance;
  font-size:clamp(.95rem,.9rem + .25vw,1.1rem);
  color:var(--tx-on-dark);opacity:.9;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}


/* pasek pod hero, trzy filary z mockupu g8 */
/* Pas trzech okreslen ma wlasne, pelne bordowe tlo. Bez tego przeswitywal
   przez niego kadr z hero i cokoly kolumn wchodzily pod tekst. */
.hero__pas{
  position:relative;z-index:1;background:var(--dark);
}
.hero__pillars{
  border-top:1px solid var(--line-on-dark);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* Odstep siedzi miedzy kolumnami, a nie w wypelnieniu kafla. Dzieki
     temu tekst kazdego kafla zaczyna sie przy krawedzi swojej kolumny:
     pierwszy wyrownuje sie do marginesu strony tak samo jak reszta
     tresci, a wszystkie trzy maja identyczne odstepy. */
  --przerwa:clamp(2rem,4.6vw,5.5rem);
  column-gap:var(--przerwa);
}
/* Ikona i okreslenie w jednej linii. Pas pod naglowkiem ma byc waskim
   akcentem, a nie kolejna sekcja, wiec wszystko jest tu mniejsze niz
   w kaflach i uklada sie w rzad. */
.hero__pillar{
  position:relative;
  padding-block:clamp(.85rem,.6rem + .65vw,1.2rem);
  display:flex;flex-direction:row;align-items:center;gap:.8rem;
  /* Trzy okreslenia maja rozna dlugosc, wiec przy wyrownaniu do lewej
     prawe krawedzie byly nierowne. Wysrodkowanie w kolumnie daje rowny
     odstep z obu stron kazdej kreski dzielacej. */
  justify-content:center;
}
.hero__pillar-ico{color:var(--gold);display:flex;line-height:0;flex:none}
.hero__pillar-ico .ico{width:1.35rem;height:1.35rem;stroke-width:1.2}
/* Zamiast ikony stoi tu znak marki, taka byla uwaga klientki. */
.hero__pillar-znak{display:block;width:1.15rem;height:1.1rem;color:var(--gold);flex:none}
.hero__pillar-znak svg{width:100%;height:100%;display:block}
.hero__pillar span{
  font-family:var(--f-display);font-size:var(--t-h4);font-weight:500;
  letter-spacing:-.006em;
}
.hero__pillar h3{margin-bottom:0}
/* kreska dzielaca stoi posrodku przerwy, a nie przy tekscie */
.hero__pillar + .hero__pillar::before{
  content:"";position:absolute;
  left:calc(var(--przerwa) / -2);top:0;bottom:0;
  width:1px;background:var(--line-on-dark);
}
.hero__pillar h3{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.95rem,.82rem + .32vw,1.15rem);
  margin-bottom:0;letter-spacing:-.004em;
}
@media(max-width:64em){
  /* wezszy ekran przycina kadr w pionie, wiec przycienienie od dolu
     musi siegac wyzej, inaczej tekst wchodzi w jasna czesc zdjecia */
  .hero__media::after{
    background:
      linear-gradient(to bottom,rgba(23,18,14,.62) 0%,rgba(23,18,14,.24) 16%,rgba(23,18,14,0) 34%),
      linear-gradient(to top,rgba(23,18,14,.8) 0%,rgba(23,18,14,.46) 28%,rgba(23,18,14,.1) 60%,rgba(23,18,14,0) 100%),
      radial-gradient(ellipse 96% 62% at 50% 46%,
        rgba(23,18,14,.7) 0%,rgba(23,18,14,.48) 46%,rgba(23,18,14,.12) 78%,rgba(23,18,14,0) 100%);
  }
}
@media(max-width:56em){
  /* Waski ekran pokazuje tylko okolo jednej czwartej szerokosci kadru.
     Przy 70 procentach napis na scianie wypadal przecietny w polowie,
     co wyglada na blad. 90 procent miesci go w calosci na kazdej
     spotykanej proporcji telefonu. */
    /* Na waskim ekranie widac tylko okolo jednej trzeciej szerokosci kadru.
     Przy ustawieniu na znak nachodzil on na nadkreslenie nad naglowkiem,
     bo oba maja ten sam napis. Pokazujemy wiec ciemna czesc sciany,
     a marke niesie znak w pasku nawigacji. */
  /* Kadr jest symetryczny, a tekst stoi posrodku, wiec na waskim ekranie
     pokazujemy srodek zdjecia, a nie jego lewa czesc. */
  .hero__media img{object-position:50% 50%}
  .hero__pillars{grid-template-columns:minmax(0,1fr)}
  /* w jednej kolumnie kreska dzielaca lezy poziomo nad kazdym kolejnym */
  .hero__pillar + .hero__pillar{border-top:1px solid var(--line-on-dark)}
  .hero__pillar + .hero__pillar::before{display:none}
}
@media(max-width:40em){
  .hero__stage{min-height:min(26rem,52svh)}
  .hero__title{max-width:none}
  /* Przy wyrownaniu do srodka dwa przyciski o roznej szerokosci wygladaja
     na przypadkowe. W jednej kolumnie dostaja wspolna szerokosc. */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{justify-content:center}
}

/* --- hero podstrony: kadr w tle -------------------------------------------
   Wariant na probe, wlaczony tylko w Centrum wiedzy. Wchodzi dopiero od
   szerokosci panelu, bo na telefonie naglowek ma zostac taki, jaki byl.
   Przyciemnienie robi warstwa nad zdjeciem: burgund marki z gradientem
   mocniejszym po lewej, czyli tam, gdzie stoi tekst. Zdjecie zostaje
   nietkniete, wiec cofniecie to skasowanie argumentu tlo. */
.phero__tlo{display:none}
@media(min-width:56.3125em){
  /* Kadr w tle wchodzi tylko od szerokosci panelu w gore. Na telefonie
     naglowek zostaje plaski, a zdjecie stoi pod nim jako osobny pas,
     dokladnie tak, jak bylo przed ta proba. */
  .phero--z-kadrem .phero__tlo{
    display:block;position:absolute;inset:0;overflow:hidden;z-index:0;
  }
  .phero--z-kadrem .phero__tlo picture{display:block;position:absolute;inset:0}
  .phero--z-kadrem .phero__tlo img{
    /* Kadr jest szeroki i niski, wiec widac z niego poziomy pas. Bierzemy
       dolna czesc, bo w gornej na czesci zdjec wisi znak marki na scianie,
       a dwa znaki naraz, ten i ten z paska nawigacji, czytaja sie zle. */
    width:100%;height:100%;object-fit:cover;object-position:50% 80%;
  }
  /* Naglowki z blokiem faktow po prawej. Tam tekst stoi po obu stronach,
     wiec przyciemnienie musi siegac do prawej krawedzi. Gorny pas jest
     mocniejszy, zeby znak marki ze sciany nie wychodzil spod nawigacji. */
  .phero--z-kadrem .phero__tlo::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(rgba(28,7,12,.58),rgba(28,7,12,0) 30%),
      linear-gradient(100deg,
        rgba(28,7,12,.9) 0%,rgba(28,7,12,.82) 45%,rgba(28,7,12,.74) 100%);
  }
  /* Naglowek bez bloku faktow, czyli Centrum wiedzy. Po prawej nie ma
     tekstu, wiec kadr moze byc tam widoczny w calosci. */
  .phero--kadr-lekki .phero__tlo::after{
    background:linear-gradient(100deg,
      rgba(28,7,12,.93) 0%,rgba(28,7,12,.86) 34%,
      rgba(28,7,12,.55) 62%,rgba(28,7,12,.4) 100%);
  }
  .phero--z-kadrem .wrap{position:relative;z-index:1}
  /* Ten sam kadr stoi pod naglowkiem jako pas. Na duzym ekranie bylby
     wiec dwa razy pod rzad, wiec pas zostaje tylko na telefonie. */
  .bleed--tylko-telefon{display:none}
}
/* Pas wylaczony na stale. Zostaje w kodzie, zeby dalo sie go przywrocic
   skasowaniem jednej klasy. */
.bleed--wylaczony{display:none}
@media(min-width:56.3125em){
}

/* Gdy zaraz pod naglowkiem stoi pas ze zdjeciem, dolne wypelnienie
   naglowka zostawia miedzy tekstem a kadrem waski bordowy pasek. Na duzym
   ekranie czyta sie on jako powietrze, na telefonie jako przypadkowa
   kreska, bo jest kilka razy nizszy. Tam wiec znika i zdjecie zaczyna sie
   wprost pod trescia. */
@media(max-width:56.25em){
  .phero:has(+ .bleed){padding-bottom:clamp(1.1rem,4vw,1.6rem)}
}

/* --- hero podstrony --- */
.phero{
  position:relative;background:var(--dark);color:var(--tx-on-dark);
  padding-top:calc(var(--hdr-h) + clamp(2.5rem,4vw,5rem));
  padding-bottom:clamp(2.5rem,4vw,5rem);
  overflow:hidden;
}
.phero__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:0 var(--gutter);align-items:start;position:relative;z-index:1;
}
/* Nadkreslenie stoi w osobnym wierszu nad tytulem, dokladnie tak jak
   w naglowkach sekcji. Dzieki temu blok z faktami zaczyna sie w drugim
   wierszu, czyli na wysokosci tytulu, a nie przy gornej krawedzi
   calej kolumny. */
.phero__grid > .eyebrow{grid-column:1;grid-row:1}
.phero__title{grid-column:1;grid-row:2}
.phero__tresc{grid-column:1;grid-row:3}

/* Wariant ze szkicu podstrony Zespol: tytul idzie przez cala szerokosc,
   a wezsza kolumna z boku zaczyna sie dopiero pod nim, na wysokosci
   zdania pisanego zlotem. */
.phero__grid--pod{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.phero__grid--pod .phero__title{grid-column:1 / -1;max-width:none}
.phero__grid--pod .phero__aside{grid-row:3;margin-top:0}
.phero__podtytul{
  font-family:var(--f-display);color:var(--gold);
  font-size:clamp(1.15rem,.9rem + .75vw,1.6rem);line-height:1.35;
  margin:0 0 1.35rem;
}
.phero__aside{grid-column:2;grid-row:2}
/* Pierwsza kreska bloku ma lezec na wysokosci wierzcholka litery
   tytulu. Wspolczynnik ten sam co przy naglowkach sekcji, sprawdzony
   na pikselach gotowej strony. */
.phero__aside{margin-top:calc(var(--t-d1) * (1.15 / 2 - .28))}
/* Wariant z naglowkiem ze szczytu skali: wiecej powietrza i inna
   odleglosc do pierwszej litery, bo interlinia jest tu mniejsza. */
.phero--duzy{padding-top:calc(var(--hdr-h) + clamp(3rem,5.5vw,7rem))}
.phero--duzy{padding-bottom:clamp(3rem,5.5vw,7rem)}
.phero--duzy .phero__aside{margin-top:calc(var(--t-d0) * (1.06 / 2 - .28))}
.phero__crumbs{margin-bottom:clamp(2rem,4vw,3.5rem);position:relative;z-index:1}
.phero__title{margin-bottom:1.25rem}
.phero__lead{max-width:42ch}
.phero__aside{display:flex;flex-direction:column;gap:1.25rem}
/* Blok z faktami stoi tam, gdzie stal, ale ma byc widoczny. Zlota kreska
   u gory zamiast szarej, wartosci szeryfem w rozmiarze tekstu ciaglego
   i wiecej powietrza w wierszach. */
.phero .facts{border-top:1px solid rgba(168,132,60,.55)}
.phero .facts__row{padding:1.05rem 0}
.phero .facts__row dd{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-body);line-height:1.35;letter-spacing:-.004em;
}
/* --- lista faktow, czytelna i latwa do zacytowania przez wyszukiwarki AI --- */
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts__row{
  display:grid;grid-template-columns:minmax(7rem,auto) minmax(0,1fr);
  gap:.5rem 1.5rem;align-items:baseline;
  padding:.9rem 0;border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm);
}
.facts__row dt{
  color:var(--tx-faint);font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
}
.facts__row dd{margin:0;color:var(--tx)}
@media(max-width:34em){.facts__row{grid-template-columns:minmax(0,1fr)}}

/* W ciemnym naglowku podstrony nazwa stoi zlotem, a wartosc pod nia,
   wyrownana do lewej tak samo jak tekst w kolumnie obok. Wczesniej
   wartosci uciekaly do prawej krawedzi i oba bloki czytaly sie jak
   dwie rozne strony. */
.on-dark .facts{border-top-color:var(--line-on-dark)}
.on-dark .facts__row{border-bottom-color:var(--line-on-dark-soft)}
.on-dark .facts__row dt{color:var(--gold)}
.on-dark .facts__row dd{color:var(--chalk)}
.phero .facts__row{
  grid-template-columns:minmax(0,1fr);gap:.35rem;
  padding-block:1rem;
}
.phero .facts__row dt{letter-spacing:.1em}
.phero .facts__row dd{text-align:left;color:var(--tx-on-dark-muted);font-size:var(--t-sm)}
@media(max-width:34em){.phero .facts__row dd{text-align:left}}
@media(max-width:56.25em){
  .phero__grid{grid-template-columns:minmax(0,1fr)}
  .phero__grid > .eyebrow,
  .phero__tresc,
  .phero__aside{grid-column:1;grid-row:auto}
  .phero__aside{margin-top:clamp(2rem,4vw,3rem)}
}

/* tlo hero podstrony, subtelny monogram */
.phero__mark{
  position:absolute;right:-4%;top:-20%;width:min(30rem,42vw);
  color:var(--gold);opacity:.06;pointer-events:none;z-index:0;
}
.phero__mark svg{width:100%;height:auto}

/* 9 --------------------------------------------------------------- SEKCJE */

/* --- proces wspolpracy --- */
.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.25rem,3vw,3.5rem);
  /* Opis po prawej bywa o wiersz albo dwa dluzszy od nazwy kroku, wiec
     przy wyrownaniu do pierwszej linii numer i nazwa wisialy przy gornej
     krawedzi wiersza. Wysrodkowanie w pionie ustawia wszystkie trzy
     kolumny w osi wiersza. */
  align-items:center;
  padding:clamp(1.75rem,1rem + 2.2vw,2.75rem) 0;
  border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__num{
  font-family:var(--f-display);font-size:clamp(1.5rem,1rem + 1.6vw,2.4rem);
  /* Bordo z brandbooka lezy zbyt blisko czerni tekstu, wiec numer gubil
     sie na kremowym tle. Zloto odroznia go od razu i przy okazji wiaze
     z reszta akcentow w serwisie. */
  line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;
  min-width:2.5rem;
}
.step__title{margin-bottom:0;text-wrap:balance}
/* Opis kroku niesie konkret, a przy rozmiarze drobnego tekstu ginal
   obok duzej nazwy. Idzie o dwa stopnie w gore, do miary leadu. */
.step__body{color:var(--tx-muted);font-size:var(--t-lead);line-height:1.6}
.on-dark .step{border-top-color:var(--line-on-dark)}
.on-dark .step:last-child{border-bottom-color:var(--line-on-dark)}
.on-dark .step__body{color:var(--tx-on-dark-muted)}
@media(max-width:56.25em){
  .step{grid-template-columns:auto minmax(0,1fr)}
  .step__body{grid-column:2/-1}
}

/* --- FAQ --- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  width:100%;text-align:left;padding:clamp(1.25rem,2.2vw,1.85rem) 0;
  font-family:var(--f-display);font-size:var(--t-h3);font-weight:500;line-height:1.32;
  letter-spacing:-.006em;color:var(--tx);
  transition:color .3s var(--ease);
}
.faq__q:hover{color:var(--rust)}
.faq__sign{position:relative;flex:none;width:1.1rem;height:1.1rem;margin-top:.42em;color:var(--gold)}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .42s var(--ease-out),opacity .3s var(--ease);
}
.faq__sign::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%)}
.faq__sign::after{top:0;left:50%;height:100%;width:1px;transform:translateX(-50%)}
.faq__q[aria-expanded="true"] .faq__sign::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq__a{overflow:hidden;height:0;transition:height .48s var(--ease-out)}
.faq__a-inner{padding:0 clamp(2rem,6vw,7rem) clamp(1.5rem,2.5vw,2.25rem) 0;
  color:var(--tx-muted);font-size:var(--t-sm)}
.on-dark .faq,.on-dark .faq__item{border-color:var(--line-on-dark)}
.on-dark .faq__q{color:var(--chalk)}
.on-dark .faq__a-inner{color:var(--tx-on-dark-muted)}

/* --- sektory, duze pasy --- */
.sector{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding-block:clamp(3rem,6vw,6.5rem);
  border-top:1px solid var(--line);
}
/* Zygzak: co drugi wiersz ma obraz po prawej. Bez tego trzy sekcje
   ustawiaja sie w jedna kolumne i strona robi sie monotonna. */
.sector:nth-child(even) .sector__media{grid-column:2;grid-row:1}
.sector:nth-child(even) .sector__body{grid-column:1;grid-row:1;display:grid;justify-items:start}
/* Odnosnik pod trescia sektora stoi w pionowej osi bloku, a nie przy
   jego lewej krawedzi. */
.sector__num{
  font-family:var(--f-display);font-size:.9rem;color:var(--gold);
  letter-spacing:.1em;margin-bottom:1.25rem;display:block;
}
@media(max-width:56.25em){
  .sector{grid-template-columns:minmax(0,1fr)}
  .sector:nth-child(even) .sector__media,
  .sector:nth-child(even) .sector__body{grid-column:1;grid-row:auto}
}

/* --- lista atutow z ikonami --- */
/* Grafika obok tekstu wypelnia cala wysokosc wiersza. Bez tego konczy
   sie wyzej niz tekst i pod nia zostaje pusty prostokat, ktory na duzym
   ekranie potrafi zajac pol ekranu. */
.grid--media{align-items:stretch}
.grid--media > div{display:flex;flex-direction:column}
/* wariant z nadkresleniem: kadr rusza dopiero od naglowka */
.grid--media--od-naglowka{
  display:grid;align-items:stretch;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  grid-template-rows:auto minmax(0,1fr);
  column-gap:var(--gutter);
}
.grid--media--od-naglowka > .eyebrow{grid-column:1;grid-row:1}
.grid--media--od-naglowka > .tresc{grid-column:1;grid-row:2}
.grid--media--od-naglowka > .kadr{
  grid-column:2;grid-row:2;display:flex;flex-direction:column;
  /* kadr rusza od gornej krawedzi litery naglowka, nie od krawedzi bloku */
  padding-top:calc(.422 * var(--t-d1));
  position:relative;
}
/* Zlota ramka przesunieta jak passe-partout w oprawie graficznej, ta sama
   co przy sekcji o technologii, tylko odbita: tam kadr stoi po lewej
   i ramka wychodzi w prawo, tutaj kadr stoi po prawej, wiec ramka
   wychodzi w lewo. Widac z niej dwie krawedzie, reszta chowa sie za
   zdjeciem. */
.grid--media--od-naglowka > .kadr > *{position:relative;z-index:1}
.grid--media--od-naglowka > .kadr::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-1.75rem;right:2.5rem;
  top:calc(.422 * var(--t-d1) + 1.75rem);bottom:-1.75rem;
  border:1px solid rgba(168,132,60,.5);
}
@media(max-width:56.25em){
  /* w jednej kolumnie ramka nie ma dokad sie przesunac */
  .grid--media--od-naglowka > .kadr::after{display:none}
}
@media(max-width:56.25em){
  .grid--media--od-naglowka{grid-template-columns:minmax(0,1fr)}
  .grid--media--od-naglowka > .eyebrow,
  .grid--media--od-naglowka > .tresc,
  .grid--media--od-naglowka > .kadr{grid-column:1;grid-row:auto}
}
.grid--media picture{display:block;flex:1;min-height:0}
.grid--media picture img,
.grid--media > div > img{width:100%;height:100%;object-fit:cover;display:block}
.grid--media .ph{flex:1}
@media(max-width:56.25em){
  /* w jednej kolumnie grafika wraca do wlasnych proporcji */
  .grid--media picture img,
  .grid--media > div > img{height:auto}
}

.feats{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:start}
.feat>.ico{color:var(--gold);margin-top:.15rem;flex:none}
.feat h3{margin-bottom:.35rem}
.feat p{font-size:var(--t-sm);color:var(--tx-muted)}
.on-dark .feat p{color:var(--tx-on-dark-muted)}

/* ---- Hero w dwoch kolumnach -------------------------------------------
   Uklad z mockupu: po lewej tresc, po prawej kadr wtopiony w burgundowe
   tlo. Wtopienie robi maska, ktora wygasza lewa i dolna krawedz zdjecia,
   dzieki czemu nie widac twardego rogu na tle sekcji. Hero nadal miesci
   sie na jednym ekranie. */
.hero--dwie .hero__grid{
  flex:1;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);
  padding-top:calc(var(--hdr-h) + clamp(2rem,5vw,4.5rem));
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
/* Stary uklad mial tekst na srodku kadru, wiec wszystko bylo wysrodkowane.
   W ukladzie dwukolumnowym tresc stoi po lewej, wiec wracamy do wyrownania
   do lewej krawedzi i zdejmujemy cien, ktory byl potrzebny tylko wtedy,
   gdy litery lezaly na zdjeciu. */
.hero--dwie .hero__text{
  max-width:36rem;margin-inline:0;text-align:left;text-shadow:none;
}
.hero--dwie .hero__title{
  margin-inline:0;max-width:26ch;
  font-size:clamp(2.15rem,1.2rem + 2.6vw,3.6rem);
}
.hero--dwie .hero__lead{margin-inline:0;max-width:46ch;text-wrap:pretty}
.hero--dwie .hero__actions{justify-content:flex-start}
@media (max-width:59.99rem){
  /* Na telefonie kadr jest pod tekstem i zajmuje cala szerokosc, wiec
     wysrodkowanie znowu wyglada naturalnie. */
  .hero--dwie .hero__text{text-align:center;margin-inline:auto}
  .hero--dwie .hero__title,
  .hero--dwie .hero__lead{margin-inline:auto}
  .hero--dwie .hero__actions{justify-content:center}
}
.hero--dwie .hero__kadr{position:relative}
.hero--dwie .hero__kadr img,
.hero--dwie .hero__kadr picture{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:60rem){
  .hero--dwie .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hero--dwie .hero__kadr{
    /* Proporcje takie jak plik, zeby nie ucinac ani glowic kolumn, ani
       smugi swiatla na scianie. Kadr siega do prawej krawedzi okna,
       dzieki czemu mimo mniejszej wysokosci czyta sie jako duzy. */
    aspect-ratio:1672/941;max-height:none;margin-left:auto;width:100%;
    -webkit-mask:linear-gradient(to right,transparent,#000 22%),
                 linear-gradient(to top,transparent,#000 18%);
    -webkit-mask-composite:source-in;
    mask:linear-gradient(to right,transparent,#000 22%),
         linear-gradient(to top,transparent,#000 18%);
    mask-composite:intersect;
  }
}
@media (max-width:59.99rem){
  /* Na telefonie kadr staje pod tekstem. Zasada klientki: hero ma miescic
     sie na ekranie w calosci, wiec kadr jest wyrazenie nizszy, a odstepy
     mniejsze. Wysokosc kadru liczymy z tego, co zostaje po tekscie. */
  .hero--dwie .hero__grid{
    padding-top:calc(var(--hdr-h) + 1.25rem);
    padding-bottom:1.25rem;
    gap:1.5rem;
  }
  .hero--dwie .hero__kadr{
    aspect-ratio:16/7;max-height:32vh;opacity:.9;
    margin-inline:auto;width:100%;
  }
  .hero--dwie .hero__kadr img,
  .hero--dwie .hero__kadr picture{height:100%}
}

/* Znak marki w miejscu ikony na liscie powodow i obszarow technologii. */
.feat__znak{display:block;width:1.6rem;height:1.5rem;color:var(--gold);margin-top:.2rem;flex:none}
.feat__znak svg{width:100%;height:100%;display:block}

/* Krotkie zdanie nad przyciskami w pasie z wezwaniem. */
.cta-band__nad{
  font-size:var(--t-sm);color:var(--tx-on-dark-muted);margin-bottom:.9rem;
}

/* ---- Podstrona uslugi: spis po lewej, tresc po prawej ------------------
   Wytyczna klientki: po wejsciu na konkretna usluge strona lamie sie na
   dwie kolumny. Spis przykleja sie do gory, zeby przy dlugim opisie
   nadal bylo widac, gdzie jestesmy. Na wezszym ekranie wraca uklad
   jednokolumnowy, a spis staje nad trescia. */
/* Podstrona uslugi: po lewej spis na cieplej kredzie, po prawej tresc
   na jasnym tle. Pas z kreda ciagnie sie do lewej krawedzi okna, zeby
   podzial czytal sie jako dwa pola, a nie jako wciecie. */
.usluga{display:grid;gap:clamp(2rem,4vw,3.5rem);position:relative}
@media (min-width:62rem){
  .usluga{grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:clamp(3rem,5vw,5rem)}
  .usluga__obok{position:sticky;top:calc(var(--hdr-h) + 2rem);align-self:start}
  /* Tlo lewej kolumny wychodzi poza siatke az do krawedzi okna. */
  .usluga__obok::before{
    content:"";position:absolute;top:0;bottom:0;right:auto;
    left:calc(50% - 50vw);width:calc(50vw - 50% + 16rem + clamp(1.5rem,2.5vw,2.5rem));
    background:var(--paper-warm,#F3EEE4);z-index:-1;
  }
}
.usluga__obok{padding-block:clamp(1.5rem,3vw,2.5rem)}
/* Wstep ma ten sam lam co tresc rozwinieta nizej, zeby bloki tekstu
   zaczynaly i konczyly sie w tej samej pionowej linii. */
.usluga__wstep{margin-bottom:clamp(1.75rem,3vw,2.5rem);max-width:none}
.usluga__wstep p{max-width:64ch}
/* Wyliczenie w rozwinietym zakresie potrzebuje oddechu, bo inaczej
   pierwsza pozycja przykleja sie do ostatniego zdania. */
.faq--zakres .faq__a-inner .svc__list{margin-top:1.5rem}
.faq--zakres .faq__a-inner .prose p:last-child{margin-bottom:0}

.uslugi-nav__tytul{margin-bottom:1.25rem}
.uslugi-nav__lista{border-top:1px solid var(--line)}
.uslugi-nav__poz{border-bottom:1px solid var(--line)}
/* Numer, nazwa i znak rozwiniecia w jednym wierszu, jak na szkicu. */
.uslugi-nav__poz a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:.9rem;align-items:baseline;
  padding:1rem .9rem 1rem 0;font-size:var(--t-sm);color:var(--tx-muted);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.uslugi-nav__nr{font-family:var(--f-display);color:var(--tx-faint);font-size:var(--t-xs)}
.uslugi-nav__nazwa{font-family:var(--f-display);font-size:1.02rem;line-height:1.35}
/* Plus przy pozycjach zwinietych, minus przy biezacej. */
.uslugi-nav__znak{
  position:relative;width:.7rem;height:.7rem;align-self:center;color:var(--gold);
}
.uslugi-nav__znak::before,.uslugi-nav__znak::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:currentColor;
}
.uslugi-nav__znak::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
.uslugi-nav__poz a:hover{color:var(--ink)}
/* Biezaca usluga: zloty pasek przy krawedzi i mocniejszy kolor tekstu. */
.uslugi-nav__poz.is-tu{background:var(--paper)}
.uslugi-nav__poz.is-tu a{
  color:var(--ink);
  box-shadow:inset 2px 0 0 var(--gold);padding-left:.9rem;
}
.uslugi-nav__poz.is-tu .uslugi-nav__nr{color:var(--gold)}
.uslugi-nav__poz.is-tu .uslugi-nav__znak::after{transform:rotate(0deg)}
.uslugi-nav__stopka{margin-top:1.5rem}

/* ---- Centrum wiedzy ---------------------------------------------------- */
.kategorie{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;border-bottom:1px solid var(--line);padding-bottom:1rem}
.kategorie__poz{
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-faint);transition:color .3s var(--ease);
}
.kategorie__poz:hover{color:var(--ink)}
.kategorie__poz.is-tu{color:var(--gold)}

/* Wyrozniona publikacja: tresc po lewej, kadr po prawej. */
.wyrozniona{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:56rem){
  .wyrozniona{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
.wyrozniona__meta{
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.75rem;
}
.wyrozniona__tytul{margin-bottom:1rem}
.wyrozniona__kadr img,.wyrozniona__kadr picture{display:block;width:100%}

.newsletter{display:grid;gap:1.5rem 3rem;align-items:center}
@media (min-width:48rem){
  .newsletter{grid-template-columns:minmax(0,1fr) auto}
}
.newsletter__opis{color:var(--tx-muted);font-size:var(--t-sm);margin-top:.6rem;max-width:34rem}

/* ---- Atrapa panelu klienta --------------------------------------------
   Karta stoi posrodku, wezsza niz tresc, zeby od razu bylo widac, ze to
   ekran logowania, a nie kolejna sekcja strony. */
.panel-klienta__karta{
  max-width:26rem;margin-inline:auto;text-align:center;
  padding:clamp(2rem,4vw,3rem);border:1px solid var(--line);
  background:var(--paper);
}
.panel-klienta__znak{display:block;width:2.4rem;height:2.3rem;color:var(--gold);margin:0 auto 1.5rem}
.panel-klienta__znak svg{width:100%;height:100%;display:block}
.panel-klienta__tytul{margin-bottom:.4rem}
.panel-klienta__nad{color:var(--tx-muted);font-size:var(--t-sm);margin-bottom:1.75rem}
.panel-klienta__form{text-align:left;display:grid;gap:.9rem}
/* Etykieta w ramce po lewej, pole po prawej, tak jak na szkicu klientki. */
.panel-klienta__wiersz{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:.75rem;align-items:stretch}
.panel-klienta__etykieta{
  display:flex;align-items:center;padding:.7rem .9rem;
  border:1px solid var(--gold);font-size:var(--t-sm);white-space:nowrap;
}
.panel-klienta__pole{
  width:100%;padding:.7rem .9rem;border:1px solid var(--gold);
  background:transparent;font:inherit;color:var(--tx);
}
.panel-klienta__pole:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.panel-klienta__akcja{display:flex;justify-content:flex-end;margin-top:.5rem}
@media (max-width:30rem){
  .panel-klienta__wiersz{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .panel-klienta__etykieta{border:0;padding:0}
}
.panel-klienta__blad{
  color:var(--gold);font-size:var(--t-sm);margin:0;
}

/* Tekst obok naglowka bez ciasnego lamu. Klientka zwrocila uwage, ze
   akapit wciskal sie w waski kwadrat. Tutaj bierze cala kolumne
   i lamie sie naturalnie. */
.sec-head__szeroki{font-size:var(--t-lead);line-height:1.7;color:var(--tx-muted)}
.sec-head__szeroki p{margin:0}
.sec-head__szeroki p + p{margin-top:1.1rem}
.on-dark .sec-head__szeroki{color:var(--tx-on-dark-muted)}

/* Trzy kadry nad kaflami grup klientow. Kwadratowy wykrój, zeby rzad
   czytal sie jako jeden pas, a nie trzy rozne zdjecia. */
.sektory-kadry{margin-bottom:clamp(2rem,4vw,3.25rem)}
.sektory-kadr{overflow:hidden;background:var(--paper-deep);aspect-ratio:1/1}
.sektory-kadr img,.sektory-kadr picture{display:block;width:100%;height:100%;object-fit:cover}

/* Sekcja O nas jest wysrodkowana na zyczenie klientki. */
.prose.posrodku{
  display:block;margin-inline:auto;text-align:center;
}

/* ---- Kadr w cienkiej ramce ---------------------------------------------
   Wzor z projektu klientki: zdjecie ma wokol siebie wloskowa kreske
   odsunieta o kilkanascie pikseli, jak passe-partout w oprawie. Ramka
   jest elementem tla, wiec nie zmienia rozmiaru samego zdjecia. */
.foto-ramka{position:relative;display:block}
.foto-ramka::before{
  content:"";position:absolute;inset:clamp(-1.25rem,-1vw,-.75rem);
  border:1px solid var(--line);pointer-events:none;
}
.on-dark .foto-ramka::before,
.section--dark .foto-ramka::before{border-color:var(--line-on-dark)}
.foto-ramka img,.foto-ramka picture{display:block;width:100%}
@media (max-width:47.99rem){
  /* Na waskim ekranie ramka wychodzilaby poza margines strony. */
  .foto-ramka::before{inset:-.6rem}
}

/* ---- Pierwszy krok: kadr po lewej, sciezki po prawej -------------------
   Uklad z wizualizacji klientki. Tlo burgundowe w obu wersjach jezykowych,
   naglowek nad calym ukladem, a pod nim dwie kolumny. */
.cta-band--kadr .cta-band__naglowek{
  margin-bottom:clamp(2.5rem,4vw,4rem);max-width:30ch;
}
.cta-band__uklad{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:56rem){
  .cta-band__uklad{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.cta-band__kadr{overflow:visible}
.cta-band__kadr img,.cta-band__kadr picture{display:block;width:100%}
.cta-band__sciezki{display:grid;gap:0}

.sciezka{padding-block:clamp(1.5rem,2.5vw,2rem)}
.sciezka + .sciezka{border-top:1px solid var(--line-on-dark)}
.sciezka__nr{
  display:block;font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.14em;color:var(--gold);margin-bottom:.7rem;
}
.sciezka__tytul{margin-bottom:.5rem;color:var(--chalk)}
.sciezka__opis{
  color:var(--tx-on-dark-muted);font-size:var(--t-sm);margin-bottom:1rem;
  max-width:38ch;
}
.cta-band--kadr .cta-band__direct{
  margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line-on-dark);
}

/* ---- Kariera ------------------------------------------------------------
   Uklad ze szkicu klientki: po lewej opis, po prawej lista rozdzielona
   samymi kreskami. Bez ramek i bez kart, zgodnie z prosba o delikatniejsza
   prawa strone. */
.kariera-jak{position:relative;overflow:hidden}
/* Znak marki jako duzy, bardzo jasny znak wodny w tle sekcji. */
.kariera-jak__znak{
  position:absolute;left:34%;top:50%;transform:translateY(-50%);
  width:min(30rem,40vw);height:auto;aspect-ratio:249/236;
  color:rgba(168,132,60,.06);pointer-events:none;
}
.kariera-jak__znak svg{width:100%;height:100%;display:block}
.kariera-jak > .wrap{position:relative}

.kariera-uklad{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:62rem){
  .kariera-uklad{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .kariera-uklad--rowny{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.kariera-uklad__naglowek{margin-bottom:1.5rem;max-width:18ch}
/* Naglowek sekcji "Jak pracujemy" stoi nad kolumnami i jest wysrodkowany.
   Lam na 26 znakow lamie go na dwa wiersze przy typowej szerokosci. */
.kariera-jak__naglowek{
  /* Lam dobrany tak, zeby zdanie lamalo sie na dwa wiersze, o co
     prosila klientka. */
  max-width:42ch;margin:0 auto clamp(2.5rem,4vw,4rem);
  text-align:center;text-wrap:balance;
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.5rem);
}
.kariera-uklad__akapit{color:var(--tx-muted);max-width:46ch}
.kariera-uklad__opis .prose p{margin-bottom:1.1rem}
.kariera-uklad__lista .kicker{margin-bottom:1.5rem}
.kariera-uklad__powody{gap:2rem}

/* Cztery elementy wspolpracy. Numer po lewej, tresc po prawej, kreska
   miedzy pozycjami. Zadnych obramowan wokol calosci. */
.elementy{border-top:1px solid var(--line);list-style:none;margin:0;padding:0}
.element{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2vw,1.75rem);
  align-items:baseline;padding-block:clamp(1.35rem,2.2vw,1.85rem);
  border-bottom:1px solid var(--line);
}
.element__nr{
  font-family:var(--f-display);font-size:clamp(1.35rem,1rem + .9vw,1.9rem);
  color:var(--gold);line-height:1;
}
.element__tytul{margin-bottom:.45rem}
.element__opis{color:var(--tx-muted);font-size:var(--t-sm);margin:0}

/* Spis otwartych rekrutacji: nazwa, kreska, strzalka. */
.oferty{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-on-dark)}
.oferta{border-bottom:1px solid var(--line-on-dark)}
.oferta__link{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:.35rem 1.5rem;padding-block:clamp(1.25rem,2.4vw,1.9rem);
  color:var(--chalk);transition:color .3s var(--ease);
}
.oferta__nazwa{
  font-family:var(--f-sans);font-weight:600;letter-spacing:-.005em;
  font-size:clamp(1.05rem,.85rem + .55vw,1.35rem);
  grid-column:1;
}
.oferta__meta{
  grid-column:1;font-size:var(--t-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx-on-dark-muted);
}
.oferta__strzalka{
  grid-column:2;grid-row:1 / span 2;color:var(--gold);display:flex;
  transition:transform .35s var(--ease-out);
}
.oferta__link:hover{color:var(--gold)}
.oferta__link:hover .oferta__strzalka{transform:translateX(.35rem)}

/* Formularz aplikacyjny: ciemne pole z naglowkiem po lewej, pola po prawej. */
.aplikacja{display:grid}
@media (min-width:62rem){
  .aplikacja{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}
}
.aplikacja__panel{
  /* Ciemniejszy odcien burgundu niz sekcja nad nim, zeby oba pola
     dalo sie od siebie odroznic. */
  background:var(--dark-deep,#1C070C);color:var(--tx-on-dark);
  display:flex;align-items:center;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.75rem);
}
.aplikacja__panel .eyebrow{color:var(--gold)}
.aplikacja__naglowek{margin:.75rem 0 1.25rem;color:var(--chalk)}
.aplikacja__zdanie{color:var(--tx-on-dark-muted);margin:0}
.aplikacja__formularz{
  background:var(--paper-warm,var(--paper));
  padding:clamp(1.5rem,2.6vw,2.25rem) clamp(1.5rem,3vw,3rem);
}
/* Formularz ma zmiescic sie na jednym ekranie, tak jak naglowek strony. */
.aplikacja__formularz .field{margin-bottom:1rem}
.aplikacja__formularz .field__label{margin-bottom:.3rem}
.aplikacja__formularz input,
.aplikacja__formularz select{padding-block:.55rem}
.aplikacja__formularz textarea{min-height:5rem}
.aplikacja__formularz .field{margin-bottom:.85rem}
.aplikacja__formularz .btn{margin-top:.5rem}
@media (max-width:61.99rem){
  .aplikacja__panel{padding-block:clamp(2.5rem,7vw,3.5rem)}
}

/* ---- Case studies -------------------------------------------------------
   Uklad ze szkicu klientki: ciemna polowa z numerem i tytulem, jasna
   polowa z kategoria, opisem i znacznikami. Dwie pozycje w rzedzie. */
.dowody{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
@media (min-width:62rem){
  .dowody{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.dowod{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:34rem){
  .dowod{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
}
.dowod__glowa{
  background:var(--dark);color:var(--chalk);
  padding:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;
}
.dowod__nr{
  font-family:var(--f-display);font-size:clamp(1.5rem,1.1rem + 1vw,2.1rem);
  color:var(--gold);line-height:1;
}
.dowod__tytul{margin:0;color:var(--chalk)}
.dowod__tresc{
  background:var(--paper);padding:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:.9rem;
}
.dowod__kategoria{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin:0;
}
.dowod__opis{color:var(--tx-muted);font-size:var(--t-sm);margin:0}
.dowod__tagi{
  margin:auto 0 0;font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-faint);
}

/* Tresc sektora ma trzymac rytm ze zdjeciem obok. Domyslna interlinia
   serwisu jest dla tego bloku za luzna, przez co kolumna tekstu rosla
   wyzej niz kadr i sekcja sie rozjezdzala. */
.sector__naglowek{margin-bottom:.85rem;max-width:16ch}
.sector__lead{margin-bottom:1.25rem;line-height:1.55;max-width:44ch}
.sector__tekst{max-width:52ch;line-height:1.62;margin-bottom:1.5rem}
.sector__tekst p{margin-bottom:.85rem}
.sector__tekst p:last-child{margin-bottom:0}
.sector__punkty{margin-bottom:1.5rem}
.sector__punkty li{margin-bottom:.3rem}

/* Projekty specjalne wedlug szkicu klientki: kadr nad trescia, ramka
   wokol kafla, numer nad tytulem. Kolorystyka nasza, nie ze szkicu. */
.projekt{background:var(--paper);border:1px solid var(--line)}
.projekt__kadr{margin:0;overflow:hidden;aspect-ratio:16/9;background:var(--paper-deep)}
.projekt__kadr img,.projekt__kadr picture{display:block;width:100%;height:100%;object-fit:cover}
.projekt__tresc{padding:clamp(1.35rem,2.4vw,1.9rem);display:flex;flex-direction:column;flex:1}
.projekt__nr{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--gold);margin-bottom:.75rem;
}
.projekt__opis{font-size:var(--t-sm);line-height:1.65}

/* Przycisk, ktory jeszcze nie ma dokad prowadzic. Wyglada jak reszta,
   ale nie reaguje na kursor i nie da sie w niego kliknac. */
.btn--nieaktywny{
  opacity:.5;cursor:default;pointer-events:none;
}

/* ---- Zespol, kultura organizacyjna --------------------------------------
   Uklad ze szkicu: po lewej naglowek i tekst, po prawej cztery elementy
   w siatce dwa na dwa, rozdzielone wloskowymi kreskami. Pod calosc
   wchodzi jedno zdanie zamykajace. */
.kultura{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:64rem){
  .kultura{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}
.kultura__naglowek{margin:.75rem 0 0;max-width:12ch}
.kultura__kreska{
  display:block;width:3.5rem;height:1px;background:var(--gold);
  margin:1.5rem 0 1.75rem;
}
.kultura__tekst{max-width:48ch;line-height:1.68}
.kultura__tekst p{margin-bottom:1rem}

.kultura__elementy{display:grid;gap:0}
@media (min-width:34rem){
  .kultura__elementy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.kultura__element{
  padding:clamp(1.25rem,2.4vw,1.9rem);
  border-top:1px solid var(--line);
}
@media (min-width:34rem){
  /* Pionowa kreska tylko miedzy kolumnami, nie na zewnetrznych krawedziach. */
  .kultura__element:nth-child(2n){border-left:1px solid var(--line)}
}
.kultura__nr{
  display:block;font-family:var(--f-display);color:var(--gold);
  font-size:clamp(1.15rem,.9rem + .6vw,1.5rem);line-height:1;margin-bottom:.9rem;
}
.kultura__tytul{margin-bottom:1rem;max-width:14ch}
.kultura__opis-el{color:var(--tx-muted);font-size:var(--t-sm);margin:0;line-height:1.6}

.kultura__haslo{
  margin:clamp(2.5rem,5vw,4rem) 0 0;padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);
  font-family:var(--f-display);color:var(--gold);
  font-size:clamp(1.15rem,.9rem + .8vw,1.7rem);line-height:1.4;
  text-align:center;
}

/* ---- Partnerzy: kadr rozjasnia sie i lekko unosi pod kursorem ----------
   Wzor wskazany przez klientke: zdjecia ludzi, ktore ozywaja przy
   najechaniu, a podpis wsuwa sie od dolu. */
.partner__kadr{overflow:hidden;position:relative}
.partner__kadr img{
  transition:transform .7s var(--ease-out),filter .6s var(--ease);
  filter:grayscale(1) contrast(1.02);
}
.partner:hover .partner__kadr img,
.partner:focus-within .partner__kadr img{
  transform:scale(1.04);filter:grayscale(0) contrast(1);
}
.partner__opis{
  transition:transform .5s var(--ease-out);
}
.partner:hover .partner__opis{transform:translateY(-.2rem)}
.partner__rola{
  color:var(--gold);opacity:.85;
  transition:opacity .5s var(--ease);
}
.partner:hover .partner__rola{opacity:1}
@media (prefers-reduced-motion:reduce){
  .partner__kadr img,.partner__opis{transition:none}
  .partner:hover .partner__kadr img{transform:none}
}

/* Wstep na podstronie uslugi. Klientka zwrocila uwage, ze odstepy byly
   za duze i tekst rozjezdzal sie z lista pod spodem. */
.usluga__wstep{line-height:1.68;max-width:56ch}
.usluga__wstep p{margin-bottom:.9rem}
.usluga__wstep p:last-child{margin-bottom:0}

/* Podstrona bez hero: tresc zaczyna sie ponizej paska, ktory ma tu wlasne
   tlo i nie lezy juz na zdjeciu. */
.hdr--pelny ~ main .section:first-of-type,
body:has(.hdr--pelny) .panel-klienta{padding-top:calc(var(--hdr-h) + clamp(3rem,6vw,6rem))}

/* ---- Hero z kadrem jako tlem --------------------------------------------
   Wytyczna klientki: zdjecie wypelnia caly naglowek, tekst lezy na nim.
   Kadr ma po lewej stronie sama sciane, wiec tekst siedzi na spokojnym
   tle. Dodatkowa poziona przesłona domyka czytelnosc przy waskim oknie,
   gdzie kolumny wchodza blizej srodka. */
.hero--tlo{position:relative;overflow:hidden}
.hero__tlo{position:absolute;inset:0;z-index:0}
.hero__tlo img,.hero__tlo picture{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center right;
}
/* Przyciemnienie od lewej, zeby litery mialy kontrast niezaleznie od
   tego, jak kadr sie przytnie. */
.hero__tlo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    var(--dark) 0%,
    rgba(44,13,18,.92) 26%,
    rgba(44,13,18,.55) 48%,
    rgba(44,13,18,.15) 68%,
    rgba(44,13,18,0) 84%);
}
.hero--tlo .hero__grid{
  position:relative;z-index:1;flex:1;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);
  padding-top:calc(var(--hdr-h) + clamp(2rem,5vw,4.5rem));
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
.hero--tlo .hero__text{
  max-width:36rem;margin-inline:0;text-align:left;text-shadow:none;
}
.hero--tlo .hero__title{
  margin-inline:0;max-width:20ch;
  font-size:clamp(2.15rem,1.2rem + 2.6vw,3.6rem);
}
.hero--tlo .hero__lead{margin-inline:0;max-width:46ch;text-wrap:pretty}
.hero--tlo .hero__actions{justify-content:flex-start}
@media (max-width:47.99rem){
  /* Na telefonie kadr chowa sie za mocniejsza przeslona, bo kolumny
     wchodza wtedy pod tekst. */
  .hero__tlo::after{
    background:linear-gradient(180deg,
      rgba(44,13,18,.94) 0%, rgba(44,13,18,.86) 55%, rgba(44,13,18,.72) 100%);
  }
  .hero--tlo .hero__text{max-width:none}
}

/* ---- Odstepy w dlugich blokach tekstu ----------------------------------
   Uwaga klientki: sekcje z pelnym tekstem zajmowaly za duzo miejsca.
   Zageszczamy interlinie i odstepy miedzy akapitami, ale za to dajemy
   tekstowi wiecej szerokosci, wiec czyta sie tak samo swobodnie. */
.prose.posrodku{max-width:64ch;line-height:1.62}
.prose.posrodku p{margin-bottom:.9rem}
.prose.posrodku p:last-child{margin-bottom:0}

/* Sekcja "Partner, a nie dostawca uslug": zwarty tekst i lista powodow. */
.section--warm .prose.measure{line-height:1.62}
.section--warm .prose.measure p{margin-bottom:.85rem}

/* Tekst obok naglowka ma byc prostokatem, nie kwadratem. Klientka
   prosila o to wszedzie, gdzie stoi ten uklad.

   Regula musi siedziec w zapytaniu o szerokosc. Bez tego wygrywala
   z ustawieniem jednokolumnowym dla telefonu, bo stoi dalej w pliku,
   i kazdy naglowek sekcji dostawal na telefonie polowe szerokosci,
   a obok niego zostawalo puste pole. */
@media (min-width:56.3125em){
  .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.sec-head__aside,.sec-head__szeroki{max-width:none}
.sec-head__szeroki{font-size:var(--t-lead);line-height:1.62}
.sec-head__szeroki p + p{margin-top:.9rem}
.sec-head__aside .lead{max-width:none;line-height:1.62}

/* Kadr, ktory jedzie razem z tekstem obok. Przykleja sie pod paskiem
   i zatrzymuje, gdy kolumna z tekstem sie konczy. Na waskim ekranie
   kolumny sa jedna pod druga, wiec przyklejanie wylaczamy. */
@media (min-width:60rem){
  .foto-ramka--jedzie{
    position:sticky;top:calc(var(--hdr-h) + clamp(1.5rem,3vw,3rem));
    align-self:start;
  }
}
@media (prefers-reduced-motion:reduce){
  .foto-ramka--jedzie{position:static}
}

/* Technologia: kadr wiekszy, lista zwarta, kolumny wyrownane do srodka. */
.feats--techno{margin-top:clamp(1.5rem,3vw,2.25rem);gap:1.35rem}
.feats--techno .feat p{margin-top:.2rem}

/* Pas z wezwaniem: kadr jest tlem calej sekcji, a nie obrazkiem obok,
   i sekcja jest nizsza, bo miala za duzo pustej przestrzeni. */
.cta-band--kadr{
  position:relative;overflow:hidden;
  padding-block:clamp(2.25rem,1.5rem + 2.4vw,3.75rem);
}
.cta-band--kadr .cta-band__naglowek{margin-bottom:clamp(1.5rem,2.5vw,2.5rem)}
.cta-band--kadr .sciezka{padding-block:clamp(1.1rem,1.8vw,1.5rem)}
.cta-band__tlo{position:absolute;inset:0;z-index:0}
.cta-band__tlo img,.cta-band__tlo picture{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center left;
}
.cta-band__tlo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(260deg,
    var(--dark) 0%, rgba(44,13,18,.92) 30%, rgba(44,13,18,.6) 54%,
    rgba(44,13,18,.2) 76%, rgba(44,13,18,0) 92%);
}
.cta-band--kadr > .wrap{position:relative;z-index:1}
.cta-band--kadr .cta-band__uklad{grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){
  .cta-band--kadr .cta-band__uklad{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
.cta-band--kadr .cta-band__sciezki{grid-column:2}
@media (max-width:55.99rem){
  .cta-band--kadr .cta-band__sciezki{grid-column:1}
  .cta-band__tlo::after{
    background:linear-gradient(180deg,rgba(44,13,18,.93),rgba(44,13,18,.85));
  }
}

/* Ikona bez adresu profilu: widoczna w ukladzie, ale wygaszona. */
.ftr__socials{display:flex;gap:.9rem;margin-top:1.75rem}
.ftr__socials a,.ftr__socials span{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border:1px solid var(--line-on-dark);
  color:var(--gold);transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.ftr__socials a:hover{border-color:var(--gold);background:rgba(168,132,60,.12)}
.ftr__socials .ico{width:1.25rem;height:1.25rem}
.ftr__social--pusty{opacity:.5;cursor:default}

/* Zlote zdanie pod naglowkiem sekcji projektow. */
.projekty__nad{
  font-family:var(--f-display);color:var(--gold);
  font-size:clamp(.9rem,.8rem + .35vw,1.05rem);letter-spacing:.14em;
  text-transform:uppercase;margin:-1.5rem 0 clamp(2rem,4vw,3rem);
}

/* Pierwszy projekt: kadr wypelnia caly kafel, tresc lezy na nim. */
.projekt--tlo{position:relative;border-color:transparent;background:var(--dark)}
.projekt--tlo .projekt__kadr{
  position:absolute;inset:0;aspect-ratio:auto;margin:0;
}
.projekt--tlo .projekt__kadr::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,7,12,.15) 0%,rgba(28,7,12,.55) 45%,rgba(28,7,12,.9) 100%);
}
.projekt--tlo .projekt__tresc{
  position:relative;z-index:1;justify-content:flex-end;min-height:22rem;
}
.projekt--tlo .projekt__tytul{color:var(--chalk)}
.projekt--tlo .projekt__opis{color:var(--tx-on-dark-muted)}

/* Naglowek podstrony bez bocznej kolumny ma szerszy lam tekstu. */
.phero__grid--szeroki{grid-template-columns:minmax(0,1fr)}
.phero__grid--szeroki .phero__lead{max-width:68ch}
.phero__grid--szeroki .phero__title{max-width:24ch}

/* ---- Centrum wiedzy: panel ---------------------------------------------
   Uklad ze szkicu klientki: pasek kategorii, pod nim jedna rama, w ktorej
   stoja obok siebie wyrozniona publikacja, jej kadr i zapis do
   newslettera. Wszystko na wloskowych kreskach, bez cieni. */
.kategorie{
  display:flex;flex-wrap:wrap;gap:.4rem;border:0;padding:0;
  margin-bottom:clamp(1.25rem,2vw,1.75rem);
}
.kategorie__poz{
  padding:.5rem .95rem;border:1px solid var(--line);
  font-size:var(--t-xs);letter-spacing:.04em;text-transform:none;
  color:var(--tx-muted);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.kategorie__poz:hover{color:var(--ink);border-color:var(--gold)}
.kategorie__poz.is-tu{color:var(--ink);border-color:var(--gold)}

.panel-wiedzy{
  display:grid;border:1px solid var(--line);background:var(--paper);
}
@media (min-width:64rem){
  .panel-wiedzy{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,.7fr)}
}
.panel-wiedzy__glowna,
.panel-wiedzy__news{
  padding:clamp(1.5rem,2.6vw,2.25rem);
  display:flex;flex-direction:column;justify-content:center;
}
.panel-wiedzy__meta{
  font-size:var(--t-xs);letter-spacing:.1em;color:var(--gold);margin-bottom:.85rem;
}
.panel-wiedzy__tytul{margin-bottom:1rem;max-width:18ch}
.panel-wiedzy__opis{
  color:var(--tx-muted);font-size:var(--t-sm);line-height:1.6;margin-bottom:1.25rem;
}
.panel-wiedzy__kadr{margin:0;overflow:hidden;min-height:14rem;background:var(--paper-deep)}
.panel-wiedzy__kadr img,.panel-wiedzy__kadr picture{
  display:block;width:100%;height:100%;object-fit:cover;
}
.panel-wiedzy__news{text-align:center;align-items:center;border-left:1px solid var(--line)}
.panel-wiedzy__ikona{
  display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;
  border:1px solid var(--gold);color:var(--gold);margin-bottom:1.1rem;
}
.panel-wiedzy__news-tytul{margin-bottom:.85rem;max-width:14ch}
@media (max-width:63.99rem){
  .panel-wiedzy__news{border-left:0;border-top:1px solid var(--line)}
  .panel-wiedzy__kadr{min-height:12rem}
}

/* Rzad kafli z publikacjami. Na szkicu stoja w jednym rzedzie, wiec
   trzymamy rzad i pozwalamy mu przewijac sie w bok, zamiast lamac go
   na kolumny o roznej wysokosci. */
.publikacje__tytul{margin-bottom:clamp(1.25rem,2vw,1.75rem)}
.publikacje{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13.5rem,1fr);
  list-style:none;margin:0;padding:0 0 .5rem;
  overflow-x:auto;scroll-snap-type:x proximity;
  border-top:1px solid var(--line);
}
.publikacja{
  scroll-snap-align:start;
  padding:clamp(1.1rem,1.8vw,1.5rem) clamp(.9rem,1.4vw,1.25rem);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.publikacja:last-child{border-right:0}
.publikacja__kat{
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.75rem;
}
.publikacja__tytul{
  font-family:var(--f-display);font-size:1.02rem;line-height:1.35;
  margin-bottom:.75rem;
}
.publikacja__opis{
  color:var(--tx-muted);font-size:var(--t-xs);line-height:1.55;
  margin-bottom:1.1rem;
}
.publikacja__wiecej{
  margin-top:auto;font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;
  align-items:center;gap:.4rem;
}
.publikacja__wiecej .ico{width:.85rem;height:.85rem}

/* Pas na dole: ikona, naglowek i tekst obok. */
.wiedza-pas{display:grid;gap:1.25rem clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:56rem){
  .wiedza-pas{grid-template-columns:auto minmax(0,1.1fr) minmax(0,.9fr)}
}
.wiedza-pas__ikona{
  display:flex;width:3.25rem;height:3.25rem;align-items:center;justify-content:center;
  border:1px solid var(--gold);color:var(--gold);flex:none;
}
.wiedza-pas__tytul{margin:0;max-width:20ch}
.wiedza-pas__opis{color:var(--tx-muted);margin-bottom:1rem}

/* Kontakt: obie kolumny maja ten sam rytm i zaczynaja sie na tej samej
   wysokosci. Karta po prawej rusza od wysokosci naglowka, a nie od
   nadkreslenia, bo inaczej wyglada, jakby byla podniesiona. */
.contact-card{
  display:grid;gap:clamp(1.5rem,2.6vw,2.25rem);align-content:start;
  margin-top:calc(var(--t-d2) * (1.19 / 2 - .28));
}
.contact-block h2{
  font-family:var(--f-sans);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.5rem;
}
.contact-block .big{
  font-family:var(--f-display);font-size:clamp(1.1rem,.9rem + .5vw,1.4rem);
}
.contact-block address,.contact-block p{
  font-style:normal;color:var(--tx-muted);line-height:1.6;margin:0;
}
@media (max-width:47.99rem){
  .contact-card{margin-top:0}
}

/* --- liczby, zaslepka dopoki klientka ich nie ma --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border-top:1px solid var(--line)}
.stat{padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,2rem);border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat__v{font-family:var(--f-display);font-size:clamp(2rem,1.2rem + 2.4vw,3.2rem);
  line-height:1;color:var(--burgundy);margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.stat__l{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-faint)}
.on-dark .stats,.on-dark .stat{border-color:var(--line-on-dark)}
.on-dark .stat__v{color:var(--gold)}

/* --- zespol --- */
.person{display:flex;flex-direction:column}
.person__media{margin-bottom:1.25rem;overflow:hidden;background:var(--paper-deep)}
.person__media img{width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(1) contrast(1.02);transition:filter .7s var(--ease)}
.person:hover .person__media img{filter:none}
.person__role{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.4rem}
.person__name{margin-bottom:.5rem}
.person__bio{font-size:var(--t-sm);color:var(--tx-muted)}
.person__links{display:flex;gap:.85rem;margin-top:.9rem;color:var(--tx-faint)}
.person__links a:hover{color:var(--gold)}
.person__links .ico{width:1.05rem;height:1.05rem}

/* --- wpisy centrum wiedzy --- */
.post{display:flex;flex-direction:column;height:100%;position:relative;
  border-top:1px solid var(--line);padding-top:1.5rem;transition:border-color .4s var(--ease)}
/* Miniatura wpisu. Karta zachowuje sie tak samo jak kafel uslugi:
   kreska u gory, zdjecie, potem tresc. */
.post__media{display:block;overflow:hidden;background:var(--paper-deep);
  aspect-ratio:16/10;margin-bottom:1.5rem}
.post__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:filter .45s var(--ease-out)}
.post:hover .post__media img{filter:brightness(1.06)}

.post__meta{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--tx-faint);margin-bottom:1rem}
.post__meta time{font-variant-numeric:tabular-nums}
.post__cat{color:var(--gold);letter-spacing:.11em;text-transform:uppercase}
.post__title{margin-bottom:.75rem}
.post__title a::after{content:"";position:absolute;inset:0}
.post__excerpt{font-size:var(--t-sm);color:var(--tx-muted);margin-bottom:1.5rem}
.post__go{margin-top:auto;color:var(--tx-faint);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem}
.post:hover .post__go{color:var(--gold)}
.post:hover{border-top-color:var(--gold)}

/* --- kafelek panelu klienta --- */
.portal{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--line-on-dark);
  background:var(--dark-tlo);
  transition:border-color .4s var(--ease);
}
.portal:hover{border-color:rgba(168,132,60,.5)}
.portal__icon{color:var(--gold)}
.portal__soon{
  font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(168,132,60,.4);padding:.4rem .7rem;white-space:nowrap;
}
@media(max-width:40em){
  .portal{grid-template-columns:auto minmax(0,1fr)}
  .portal__soon{grid-column:2}
}

/* --- pas CTA --- */
/* Pas z wezwaniem do dzialania stoi zwykle tuz po innej ciemnej sekcji
   i przy identycznym tle zlewal sie z nia w jedna plame. Jasniejszy
   odcien burgundu rozdziela je bez dodatkowej kreski. */
.cta-band{position:relative;background:var(--dark-deep);color:var(--tx-on-dark);overflow:hidden}
.cta-band__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:0;
  align-items:center;position:relative;z-index:1;
}
.cta-band__kicker{grid-column:1;grid-row:1;margin-bottom:1.75rem}
.cta-band__tresc{grid-column:1;grid-row:2}
.cta-band__obok{grid-column:2;grid-row:2}
.cta-band__mark{
  position:absolute;left:-6%;bottom:-45%;width:min(34rem,46vw);
  color:var(--gold);opacity:.05;pointer-events:none;z-index:0;
}
.cta-band__mark svg{width:100%;height:auto}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:1rem}
.cta-band__direct{
  margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--line-on-dark);
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;
}
.cta-band__direct a{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--t-sm)}
.cta-band__direct .ico{width:1.1rem;height:1.1rem;color:var(--gold);flex:none}
.cta-band__direct a:hover{color:var(--gold)}
@media(max-width:56.25em){
  .cta-band__grid{grid-template-columns:minmax(0,1fr)}
  .cta-band__kicker,.cta-band__tresc,.cta-band__obok{grid-column:1;grid-row:auto}
  .cta-band__obok{margin-top:clamp(2rem,5vw,3rem)}
}

/* 10 ------------------------------------------------------------- STOPKA */
.ftr{background:var(--dark);color:var(--tx-on-dark);position:relative;overflow:hidden}
.ftr__top{
  display:grid;
  /* Kolumny z odnosnikami maja szerokosc swojej tresci, a wolne miejsce
     rozklada sie miedzy nie. Dzieki temu ostatnia konczy sie dokladnie
     przy prawym marginesie strony, zamiast wisiec w polowie. */
  grid-template-columns:minmax(0,1fr) repeat(3,max-content);
  justify-content:space-between;
  column-gap:clamp(2rem,5vw,6rem);row-gap:clamp(2.5rem,4vw,3.5rem);
  padding-block:clamp(3.5rem,2rem + 5vw,6rem);
}
.ftr__brand{max-width:26rem}
.ftr__brand .logo{margin-bottom:1.5rem}
.ftr__tagline{font-size:var(--t-sm);color:var(--tx-on-dark-muted);margin-bottom:2rem}
.ftr__col h3{
  font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--gold);margin-bottom:1.35rem;font-family:var(--f-sans);
}
.ftr__col li{margin-bottom:.7rem}
.ftr__col a{
  font-size:var(--t-sm);color:var(--tx-on-dark-muted);
  transition:color .3s var(--ease);
}
.ftr__col a:hover{color:var(--chalk)}
.ftr__contact{display:grid;gap:.85rem;font-size:var(--t-sm);color:var(--tx-on-dark-muted)}
.ftr__contact a,.ftr__contact div{display:flex;align-items:flex-start;gap:.75rem}
.ftr__contact .ico{width:1.05rem;height:1.05rem;color:var(--gold);flex:none;margin-top:.28rem}
.ftr__contact a:hover{color:var(--chalk)}
.ftr__legal{
  border-top:1px solid var(--line-on-dark);
  padding-block:1.75rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-size:var(--t-xs);color:rgba(243,238,228,.5);
}
.ftr__legal-links{display:flex;flex-wrap:wrap;gap:1rem 1.75rem}
.ftr__legal a:hover{color:var(--chalk)}
/* Dane rejestrowe przychodza z panelu jako tekst wielowierszowy, wiec
   lamania z panelu maja zostac lamaniami na stronie. */
.ftr__reg p,.contact-block p{white-space:pre-line;text-wrap:pretty}
/* Podpis wykonawcy. Ma byc na samym dole i cicho, wiec stopien nizszy
   niz dane rejestrowe i mocniej przygaszony. */
.ftr__autor{
  margin:.85rem 0 0;font-size:.6875rem;letter-spacing:.06em;
  color:var(--tx-on-dark-muted);opacity:.62;
}
.ftr__reg{
  border-top:1px solid var(--line-on-dark);
  padding-block:1.5rem;
  font-size:var(--t-xs);color:rgba(243,238,228,.42);line-height:1.7;
}
.ftr__socials{display:flex;gap:.85rem;margin-top:1.75rem}
.ftr__socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border:1px solid var(--line-on-dark);
  color:var(--tx-on-dark-muted);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.ftr__socials a:hover{color:var(--gold);border-color:rgba(168,132,60,.5)}
.ftr__socials .ico{width:1.05rem;height:1.05rem}
@media(max-width:64em){
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .ftr__brand{grid-column:1/-1;max-width:none}
}
@media(max-width:40em){
  .ftr__top{grid-template-columns:minmax(0,1fr)}
  .ftr__legal{flex-direction:column;align-items:flex-start}
}

/* 11 --------------------------------------------------------- FORMULARZE */
.form{display:grid;gap:clamp(1.35rem,2.4vw,1.75rem)}
.form__body{display:grid;gap:clamp(1.35rem,2.4vw,1.75rem)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
@media(max-width:40em){.form__row{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:.55rem;position:relative;align-content:start}
.field__label{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-faint);font-weight:500;
}
.field__label .req{color:var(--rust)}
.field__hint{font-size:var(--t-xs);color:var(--tx-faint);line-height:1.5}
.field input,.field textarea,.field select{
  width:100%;padding:.7rem 0 .8rem;min-height:3rem;
  background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  font-size:var(--t-body);color:var(--tx);
  border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .35s var(--ease);
}
.field textarea{min-height:8rem;resize:vertical;line-height:1.7}
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A8177' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .25rem center;background-size:.75rem;
  padding-right:2rem;
}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-faint);opacity:.7}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--gold);
}
.field--err input,.field--err textarea,.field--err select{border-bottom-color:var(--rust)}
.field__err{font-size:var(--t-xs);color:var(--rust);display:none}
.field--err .field__err{display:block}

/* pole honeypot, niewidoczne dla ludzi */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* zgody */
.consent{
  display:grid;gap:1.1rem;
  margin-top:clamp(.75rem,1.6vw,1.35rem);
  padding-top:clamp(1.35rem,2.4vw,1.85rem);
  border-top:1px solid var(--line);
}
.on-dark .consent{border-top-color:var(--line-on-dark)}
.consent .field__hint{margin-top:.15rem}
.check{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;
  align-items:start;cursor:pointer;font-size:var(--t-xs);
  color:var(--tx-muted);line-height:1.6;
}
.check input{
  -webkit-appearance:none;appearance:none;margin:0;
  width:1.15rem;height:1.15rem;flex:none;margin-top:.1rem;
  border:1px solid var(--line-strong);background:transparent;
  cursor:pointer;position:relative;border-radius:0;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.check input:checked{background:var(--burgundy);border-color:var(--burgundy)}
.check input:checked::after{
  content:"";position:absolute;left:.34rem;top:.13rem;
  width:.32rem;height:.6rem;border:solid var(--chalk);
  border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
.check--err input{border-color:var(--rust)}
.on-dark .check{color:var(--tx-on-dark-muted)}
.on-dark .check input{border-color:var(--line-on-dark)}
.on-dark .check input:checked{background:var(--gold);border-color:var(--gold)}
.on-dark .field input,.on-dark .field textarea,.on-dark .field select{
  color:var(--chalk);border-bottom-color:var(--line-on-dark);
}
/* Natywna lista rozwijana dziedziczy kolory po polu, wiec na ciemnym tle
   robila sie czarna na czarnym. Pozycjom nadajemy wlasne tlo i kolor,
   a schemat kolorow ustawiamy na jasny, zeby przegladarka nie rysowala
   listy po swojemu. */
.field select{color-scheme:light}
.field select option{background:var(--paper);color:var(--tx)}
.on-dark .field__label,.on-dark .field__hint{color:var(--tx-on-dark-muted)}
.on-dark .field input:focus,.on-dark .field textarea:focus{border-bottom-color:var(--gold)}

/* komunikat po wyslaniu */
.form__note{
  padding:1.15rem 1.35rem;border-left:2px solid var(--gold);
  background:var(--paper-warm);font-size:var(--t-sm);color:var(--tx-muted);
}
.on-dark .form__note{background:var(--dark-tlo);color:var(--tx-on-dark-muted)}
/* Deklaracja czasu odpowiedzi pod formularzem. Cicha, bo to informacja
   uzupelniajaca, a nie kolejne wezwanie do dzialania. */
.form__czas{
  margin:1.1rem 0 0;font-size:var(--t-xs);color:var(--tx-faint);
  letter-spacing:.02em;
}
.on-dark .form__czas{color:var(--tx-on-dark-muted)}
.form--sent .form__czas{display:none}
.form__ok,.form__fail{display:none}
.form--sent .form__ok{display:block}
.form--sent .form__body{display:none}
.form--failed .form__fail{display:block}

/* karta kontaktowa obok formularza */
.contact-card{display:grid;gap:2rem;align-content:start}
.contact-block h3{
  font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-family:var(--f-sans);font-weight:500;margin-bottom:.85rem;
}
.contact-block a,.contact-block p{font-size:var(--t-sm);color:var(--tx-muted);line-height:1.75}
.contact-block a:hover{color:var(--gold)}
.contact-block .big{
  font-family:var(--f-display);font-size:var(--t-h3);color:var(--tx);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.on-dark .contact-block a,.on-dark .contact-block p{color:var(--tx-on-dark-muted)}
.on-dark .contact-block .big{color:var(--chalk)}

/* mapa i osadzenia */
/* Szerokosc musi byc podana wprost. Przy samej proporcji i minimalnej
   wysokosci przegladarka liczy szerokosc z wysokosci, wiec osadzenie
   kalendarza rozpychalo strone do 580 pikseli na ekranie 390 i tresc
   uciekala poza prawa krawedz. */
.embed{
  position:relative;width:100%;
  background:var(--paper-deep);border:1px solid var(--line);overflow:hidden;
}
.embed iframe{width:100%;height:100%;border:0;display:block}
/* Ramka osadzenia czeka bez adresu, wiec zajmuje miejsce dopiero po
   zgodzie. Do tego czasu widac zaslepke pod spodem. */
.embed__ramka{position:absolute;inset:0;opacity:0;pointer-events:none}
/* Zaslepka wypelnia cale pole osadzenia, inaczej przy niskim pasie
   siedzi przy gornej krawedzi i wychodzi poza nia. */
/* aspect-ratio z wariantu zaslepki musi ustapic, inaczej pudelko liczy
   wysokosc z proporcji, wystaje poza pole osadzenia i jego tresc laduje
   ponizej srodka. */
.embed > .ph{position:absolute;inset:0;border:0;aspect-ratio:auto;min-height:0}
.embed.is-loaded .embed__ramka{opacity:1;pointer-events:auto}
.embed.is-loaded .ph{display:none}
.embed--map{aspect-ratio:21/9;min-height:20rem}
/* Odtwarzacz wideo w tej samej rodzinie co mapa i kalendarz:
   wczytuje sie dopiero po zgodzie na cookies funkcjonalne. */
/* Wideo zespolu bedzie nagrane telefonem, czyli w pionie. Pole ma wiec
   proporcje dziewiec do szesnastu i wlasna, ograniczona szerokosc,
   zeby nie urosnac na cala wysokosc ekranu. Stoi w osi sekcji. */
/* Wideo zespolu stoi w prawej kolumnie obok tekstu, w proporcji
   szesnascie do dziewieciu. W tej kolumnie to okolo 350 pikseli
   wysokosci, wiec nie przytlacza sekcji. */
/* Na stronie glownej wideo stoi w prawej kolumnie i wypelnia ja w calosci.
   Tam, gdzie stoi samo na calej szerokosci sekcji, dostaje ograniczenie,
   bo przy pelnej szerokosci mialoby ponad siedemset pikseli wysokosci. */
.embed--video{aspect-ratio:16/9}
.section--niska .embed--video{max-width:min(100%,46rem);margin-inline:auto}
/* Narzedzie do umawiania spotkan ma wlasna, dosc waska szerokosc
   roboczą. Na calej szerokosci sekcji pole rosło do ponad dziewieciuset
   pikseli wysokosci, wiec dostaje ograniczenie i stoi w osi sekcji. */
.embed--cal{
  aspect-ratio:4/3;min-height:0;
  max-width:min(100%,42rem);margin-inline:auto;
}
@media(max-width:40em){
  .embed--map{aspect-ratio:4/3;min-height:0}
  .embed--cal{aspect-ratio:4/5;min-height:0}
}

/* 12 ------------------------------------------------- KARIERA I OGLOSZENIA */
.job{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.75fr)) auto;
  gap:1.5rem;align-items:center;
  padding:clamp(1.35rem,2.4vw,1.9rem) 0;
  border-top:1px solid var(--line);position:relative;
  transition:border-color .4s var(--ease);
}
.job:last-of-type{border-bottom:1px solid var(--line)}
.job:hover{border-top-color:var(--gold)}
.job__title a::after{content:"";position:absolute;inset:0}
.job__meta{font-size:var(--t-sm);color:var(--tx-faint)}
.job__go{color:var(--tx-faint);transition:color .3s var(--ease),transform .4s var(--ease)}
.job:hover .job__go{color:var(--gold);transform:translateX(.3rem)}
@media(max-width:56.25em){
  .job{grid-template-columns:minmax(0,1fr) auto}
  .job__meta{grid-column:1;font-size:var(--t-xs)}
}

/* 13 ----------------------------------------------------- ARTYKUL I TRESC */
.article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);
  gap:clamp(2rem,5vw,5rem);align-items:start}
.article__body{max-width:var(--maxw-text)}
.article__body h2{
  font-family:var(--f-display);font-size:var(--t-d2);font-weight:500;line-height:1.2;
  letter-spacing:-.012em;margin:2.5em 0 .7em;
}
.article__body h2:first-child{margin-top:0}
.article__body h3{
  font-family:var(--f-display);font-size:var(--t-h3);font-weight:500;line-height:1.3;
  margin:2em 0 .6em;
}
.article__body p{margin:0 0 1.3em;color:var(--tx-muted)}
.article__body ul,.article__body ol{margin:0 0 1.6em;display:grid;gap:.6rem}
.article__body li{padding-left:1.4rem;position:relative;color:var(--tx-muted);font-size:var(--t-sm)}
.article__body ul li::before{
  content:"";position:absolute;left:0;top:.68em;width:.34rem;height:.34rem;
  border:1px solid var(--gold);transform:rotate(45deg);
}
.article__body ol{counter-reset:ol}
.article__body ol li{counter-increment:ol;padding-left:2rem}
.article__body ol li::before{
  content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--f-display);color:var(--gold);font-size:.9em;
}
.article__body blockquote{
  margin:2.25em 0;padding-left:clamp(1.25rem,2.5vw,2rem);
  border-left:1px solid var(--gold);
  font-family:var(--f-display);font-size:var(--t-h3);line-height:1.4;color:var(--tx);
}
.article__body figure{margin:2.5em 0}
.article__body figcaption{
  margin-top:.85rem;font-size:var(--t-xs);color:var(--tx-faint);
  padding-left:1rem;border-left:1px solid var(--line);
}
.article__body hr{margin:3em 0}

.toc{position:sticky;top:calc(var(--hdr-h) + 2rem);border-top:1px solid var(--line);padding-top:1.35rem}
.toc h2{
  font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-faint);font-weight:500;margin-bottom:1.1rem;font-family:var(--f-sans);
}
.toc li{margin-bottom:.6rem}
.toc a{font-size:var(--t-xs);color:var(--tx-muted);line-height:1.5;display:block;
  padding-left:.9rem;border-left:1px solid var(--line);transition:all .3s var(--ease)}
.toc a:hover,.toc a[aria-current]{color:var(--tx);border-left-color:var(--gold)}
@media(max-width:64em){
  .article{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:-1}
}

/* strony prawne, prosta kolumna */
.legal .article__body{max-width:48rem}

/* 14 ---------------------------------------------------------------- 404 */
.e404{
  min-height:78vh;display:grid;place-items:center;text-align:center;
  background:var(--dark);color:var(--tx-on-dark);
  padding-top:var(--hdr-h);position:relative;overflow:hidden;
}
.e404__num{
  font-family:var(--f-display);font-size:clamp(6rem,16vw,15rem);line-height:.85;
  color:var(--gold);opacity:.22;letter-spacing:-.03em;margin-bottom:-.1em;
}
.e404__inner{position:relative;z-index:1;max-width:42rem;padding-inline:var(--gutter)}

/* 15 ----------------------------------------------------- BANER COOKIES */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:180;
  background:var(--dark);color:var(--tx-on-dark);
  border-top:1px solid var(--line-on-dark);
  transform:translateY(102%);
  transition:transform .55s var(--ease-out);
  box-shadow:0 -24px 60px -30px rgba(0,0,0,.55);
}
.cc--on{transform:none}
.cc__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.25rem,2.4vw,2.5rem);
  align-items:center;padding-block:1.25rem;
}
/* Baner ma informowac, a nie przykrywac strony. Napis jest o stopien
   nizej niz naglowek sekcji, a tekst ma wlasna, weza miare. */
.cc__title{
  font-family:var(--f-display);font-size:var(--t-lead);font-weight:500;
  margin-bottom:.3rem;
}
.cc__text{font-size:var(--t-sm);color:var(--tx-on-dark-muted);max-width:70ch;line-height:1.5}
.cc__text a{color:var(--gold);box-shadow:inset 0 -1px 0 rgba(168,132,60,.45)}
.cc__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
@media(max-width:56.25em){
  .cc__inner{grid-template-columns:minmax(0,1fr)}
  .cc__actions .btn{flex:1 1 auto;justify-content:center;min-width:0}
}
@media(max-width:34em){
  /* Trzy przyciski jeden pod drugim zajmowaly polowe ekranu telefonu.
     Odrzucenie i przyjecie stoja teraz obok siebie, wiec oba sa tak samo
     latwo dostepne, a ustawienia siadaja pod nimi. */
  .cc__actions{
    display:grid;grid-template-columns:1fr 1fr;gap:.55rem;align-items:stretch;
  }
  .cc__actions .btn{width:auto;justify-content:center;text-align:center}
  .cc__actions [data-cc="reject"]{grid-column:1;grid-row:1}
  .cc__actions [data-cc="accept"]{grid-column:2;grid-row:1}
  .cc__actions [data-cc="settings"]{grid-column:1 / -1;grid-row:2}
  .cc__inner{padding-block:1.1rem}
  .cc-modal__foot{justify-content:stretch}
  .cc-modal__foot .btn{flex:1 1 auto;justify-content:center}
}
/* panel ustawien */
.cc-modal{
  position:fixed;inset:0;z-index:190;display:grid;place-items:center;
  padding:var(--gutter);
  background:rgba(23,18,14,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.cc-modal--on{opacity:1;visibility:visible}
.cc-modal__panel{
  width:min(44rem,100%);max-height:min(46rem,88vh);overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.5rem);
  transform:translateY(1rem) scale(.99);
  transition:transform .45s var(--ease-out);
}
.cc-modal--on .cc-modal__panel{transform:none}
.cc-modal__head{display:flex;justify-content:space-between;align-items:start;gap:1.5rem;margin-bottom:1.5rem}
.cc-cat{border-top:1px solid var(--line);padding-block:1.35rem}
.cc-cat__head{display:flex;justify-content:space-between;gap:1.5rem;align-items:center}
.cc-cat__name{font-size:var(--t-h4);font-weight:600}
.cc-cat__desc{font-size:var(--t-xs);color:var(--tx-muted);margin-top:.5rem;max-width:52ch}
.cc-cat__locked{font-size:var(--t-xs);color:var(--tx-faint);letter-spacing:.08em;text-transform:uppercase}
/* przelacznik */
.sw{position:relative;width:2.9rem;height:1.55rem;flex:none}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw__track{
  position:absolute;inset:0;background:var(--paper-deep);
  border:1px solid var(--line-strong);transition:background-color .32s var(--ease),border-color .32s var(--ease);
}
.sw__thumb{
  position:absolute;top:.2rem;left:.2rem;width:1.05rem;height:1.05rem;
  background:var(--stone);transition:transform .38s var(--ease-out),background-color .32s var(--ease);
}
.sw input:checked~.sw__track{background:var(--burgundy);border-color:var(--burgundy)}
.sw input:checked~.sw__thumb{transform:translateX(1.3rem);background:var(--gold)}
.sw input:disabled~.sw__track{opacity:.55}
.sw input:disabled{cursor:not-allowed}
.cc-modal__foot{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end;
  border-top:1px solid var(--line);padding-top:1.5rem;margin-top:.5rem;
}
/* male ogniwo w stopce do ponownego otwarcia ustawien */
.cc-reopen{background:none;border:0;color:inherit;cursor:pointer;font:inherit}
.cc-reopen:hover{color:var(--chalk)}

/* 16 --------------------------------------------------------------- RUCH */
/* Tresc jest widoczna domyslnie. Skrypt ukrywa tylko to, co lezy ponizej
   pierwszego ekranu, i odslania przy przewijaniu. Dzieki temu przy wolnym
   laczu albo bledzie skryptu strona nadal sie czyta, a naglowek widac od razu. */
.rise-armed{opacity:0;transform:translateY(.8rem)}
.rise-armed.is-in{
  opacity:1;transform:none;
  transition:opacity 1.15s var(--ease),transform 1.3s var(--ease-out);
  transition-delay:var(--d,0s);
}
.line-armed{transform:scaleX(0);transform-origin:left center}
.line-armed.is-in{transform:none;transition:transform 1.1s var(--ease-out) var(--d,0s)}

/* powrot na gore */
.totop{
  /* Przycisk stal dokladnie na marginesie strony, czyli tam, gdzie konczy
     sie tekst, wiec wchodzil mu w drogę. Idzie blizej krawedzi okna, poza
     kolumne tresci. */
  position:fixed;right:clamp(1rem,1.6vw,1.75rem);
  bottom:calc(var(--gutter) + 1rem);z-index:90;
  width:3rem;height:3rem;display:grid;place-items:center;
  background:var(--burgundy);color:var(--chalk);
  border:1px solid var(--burgundy);
  opacity:0;visibility:hidden;transform:translateY(.75rem);
  transition:opacity .4s var(--ease),transform .4s var(--ease-out),visibility .4s,
             background-color .35s var(--ease);
}
.totop--on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--gold);border-color:var(--gold)}
.totop .ico{width:1.05rem;height:1.05rem}
@media(max-width:48em){.totop{display:none}}

/* pasek postepu czytania artykulu */
.readbar{
  position:fixed;left:0;top:0;height:2px;z-index:101;
  background:var(--gold);width:0;transition:width .1s linear;
}

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

/* 17 ------------------------------------------------------------ POMOCNE */
.hairline{height:1px;background:var(--line);width:100%}
.on-dark .hairline{background:var(--line-on-dark)}
.gold{color:var(--gold)}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}
/* Sekcja tuz pod pasem ze zdjeciem nie potrzebuje pelnego odstepu
   u gory. Kadr sam w sobie jest juz przerwa, wiec pelny odstep robil
   z tego wielka biala dziure. */
.bleed + .section{padding-top:clamp(3rem,1.6rem + 4.6vw,6rem)}
/* Sekcja z jednym kaflem nie potrzebuje pelnej wysokosci ani duzego
   odstepu pod naglowkiem. */
.section--niska{
  padding-block:clamp(3rem,1.6rem + 4.4vw,5.5rem);
}
.section--niska .sec-head{padding-bottom:clamp(1.75rem,1rem + 2.2vw,2.75rem)}
.mt-l{margin-top:clamp(1.35rem,2.6vw,2.25rem)}
.mt-xl{margin-top:clamp(1.75rem,3.4vw,3rem)}
[hidden]{display:none!important}

/* 18 --------------------------------------------------------------- DRUK */
@media print{
  .hdr,.mnav,.mcta,.cc,.cc-modal,.totop,.readbar,.cta-band,.burger{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:1.5rem}
  .hero,.phero,.ftr,.section--dark{background:#fff!important;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* 19 ------------------------------- KOMPONENTY EDYTORSKIE, WERSJA ROZSZERZONA
   Dociagniecie do referencji wskazanych przez klientke:
   Freshfields (hierarchia i skala), Foster and Partners (przestrzen),
   Norm Architects (spokoj), Aesop (precyzja typograficzna),
   Rothschild (powaga). Wspolny mianownik: mniej ozdob, wiecej powietrza,
   obraz na calej szerokosci i tekst pomocniczy schodzacy o ton nizej.
   ========================================================================== */

/* --- kadr na calej szerokosci okna, bez marginesow --- */
.bleed{position:relative;margin-block:0}
.bleed__media{position:relative;overflow:hidden;background:var(--paper-deep)}
.bleed__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:21/9;   /* wartosc domyslna, szablon moze ja nadpisac */
}
@media(max-width:56.25em){.bleed__media img{aspect-ratio:16/10}}
@media(max-width:34em){.bleed__media img{aspect-ratio:4/3}}
.bleed .ph{border:0}
.bleed__cap{
  display:flex;gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding-top:1.15rem;
  font-size:var(--t-xs);color:var(--tx-faint);line-height:1.6;
}
.bleed__cap-i{
  font-family:var(--f-display);color:var(--gold);
  font-variant-numeric:tabular-nums;flex:none;
}
.bleed__cap p{max-width:52ch;margin:0}

/* --- wielkie zdanie na bieli, glowny akcent retoryczny strony --- */
/* Cytat jako ciemny pas na cala szerokosc. Wczesniej byl jasna sekcja
   miedzy dwiema jasnymi i po prostu znikal. Ciemne tlo daje mu wage
   glownego akcentu strony i jednoczesnie rozdziela sasiadow. */
.statement{
  padding-block:clamp(4.5rem,2.6rem + 6.5vw,9rem);
  position:relative;overflow:hidden;
}
/* znak wodny w tle, ten sam chwyt co w pasie z wezwaniem do dzialania */
.statement::before{
  content:"";position:absolute;right:-4%;top:-30%;
  width:min(30rem,42vw);aspect-ratio:249/236;
  background:currentColor;color:rgba(168,132,60,.07);
  -webkit-mask:url("../img/verity-v.svg") center/contain no-repeat;
  mask:url("../img/verity-v.svg") center/contain no-repeat;
  pointer-events:none;
}
.statement__inner{max-width:56rem;margin-inline:auto;text-align:center}
.statement__mark{
  display:block;width:2.75rem;height:2.6rem;margin:0 auto clamp(2rem,4vw,3.25rem);
  color:var(--gold);opacity:.9;
}
.statement__mark svg{width:100%;height:100%;display:block}

/* Wejscie cytatu. Najpierw znak, potem tekst wiersz po wierszu, kazdy
   z okienka pod nim. Stan ukryty obowiazuje tylko wtedy, gdy skrypt
   zdazyl juz podzielic tekst na wiersze i jeszcze go nie odslonil, wiec
   przy wylaczonym skrypcie znak jest widoczny od razu. */
.statement__mark{
  transition:opacity 1.15s var(--ease), transform 1.6s var(--ease-out);
}
.statement__inner:has(.statement__text.wiersze-gotowe:not(.is-in)) .statement__mark{
  opacity:0;transform:translateY(.7rem) scale(.84);
}
/* wiersze cytatu wchodza wolniej niz w pozostalych naglowkach */
.statement__text .wiersz > span{transition-duration:1.45s}
@media(prefers-reduced-motion:reduce){
  .statement__mark{opacity:.9!important;transform:none!important;transition:none}
}
html.bez-ruchu .statement__mark{opacity:.9!important;transform:none!important;transition:none}
.statement__text{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,.85rem + 1.85vw,2.3rem);
  line-height:1.36;letter-spacing:-.01em;
  text-wrap:balance;color:var(--tx);
}
.statement__by{
  margin-top:clamp(1.75rem,3vw,2.75rem);
  font-size:var(--t-eyebrow);letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-faint);
}
.on-dark .statement__text{color:var(--chalk)}
.on-dark .statement__by{color:var(--tx-on-dark-muted)}

/* --- podpis pod ilustracja, jak w katalogu wystawy --- */
.figcap{
  margin-top:.9rem;font-size:var(--t-xs);color:var(--tx-faint);
  line-height:1.55;max-width:46ch;
}

/* --- numer indeksowy przy kafelku, urzadzenie z Foster i Norm --- */
.svc__index{
  position:absolute;top:clamp(1.75rem,1rem + 1.8vw,2.5rem);right:0;
  font-family:var(--f-display);font-size:var(--t-xs);
  color:var(--tx-faint);font-variant-numeric:tabular-nums;
  letter-spacing:.08em;transition:color .4s var(--ease);
}
.svc:hover .svc__index{color:var(--gold)}
.on-dark .svc__index{color:var(--tx-on-dark-muted)}

/* --- dwie kolumny tekstu, uklad redakcyjny --- */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,4.5rem);
  align-items:center;
}
/* Przycisk stoi w osi prawej kolumny, czyli tej samej, w ktorej leza
   opisy krokow nad nim. Bez tego przyklejal sie do jej lewej krawedzi. */
.duo > *:nth-child(2){justify-self:center}
@media(max-width:48em){
  /* W jednej kolumnie przycisk stoi pod tekstem, wiec wyrownanie w pionie
     nic nie daje. Wysrodkowujemy go wzgledem akapitu nad nim. */
  .duo{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
}

/* --- pas ze zdjeciem, tekst wchodzi na obraz od dolu --- */
.showcase{position:relative;overflow:hidden;background:var(--dark)}
.showcase img{width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:16/9;opacity:.72}
.showcase__body{
  position:absolute;inset:auto 0 0 0;padding:clamp(2rem,5vw,5rem);
  background:linear-gradient(to top,rgba(34,9,13,.92) 12%,rgba(34,9,13,0));
  color:var(--chalk);
}
.showcase__body .lead{max-width:44ch}
@media(max-width:40em){
  .showcase img{aspect-ratio:4/5}
}

/* --- pierwsza litera akapitu otwierajacego, akcent redakcyjny --- */
.prose--opening > p:first-of-type{
  font-size:var(--t-lead);color:var(--tx);line-height:1.62;
}

/* --- linia dzielaca sekcje, cienka i szeroka --- */
.rule{height:1px;background:var(--line);margin-block:clamp(3rem,6vw,6rem)}
.on-dark .rule{background:var(--line-on-dark)}

/* 20 ----------------------------------- BLOKI Z TRESCI BRIEFU KLIENTKI

/* --- cytaty bolu klienta, sekcja "Z czym najczesciej do nas przychodza" --- */
.pains{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,5rem);
  border-top:1px solid var(--line);
;grid-auto-rows:1fr}
.pain{
  position:relative;margin:0;
  padding:clamp(1.5rem,2.6vw,2.25rem) 0 clamp(1.5rem,2.6vw,2.25rem) clamp(1.75rem,3vw,2.75rem);
  border-bottom:1px solid var(--line);
}
.pain::before{
  content:"";position:absolute;left:0;top:clamp(1.9rem,3vw,2.7rem);
  width:.85rem;height:1px;background:var(--gold);
}
.pain p{
  margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.12rem,1rem + .55vw,1.5rem);
  line-height:1.4;letter-spacing:-.008em;color:var(--tx);
  text-wrap:pretty;
}
/* ostatni wiersz przy nieparzystej liczbie cytatow bierze cala szerokosc */
.pain:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:48em){
  .pains{grid-template-columns:minmax(0,1fr)}
  .pain:last-child:nth-child(odd){grid-column:1}
}

/* --- lista wyzwan, z ktorymi klienci przychodza --- */
.challenges{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,5rem);
  border-top:1px solid var(--line);
}
.challenges li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:1.25rem;align-items:baseline;
  padding:clamp(1.15rem,2vw,1.6rem) 0;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm);color:var(--tx-muted);line-height:1.6;
}
.challenges__n{
  font-family:var(--f-display);color:var(--gold);
  font-variant-numeric:tabular-nums;font-size:var(--t-xs);letter-spacing:.06em;
}
@media(max-width:48em){.challenges{grid-template-columns:minmax(0,1fr)}}

/* --- 4. wyrownanie tresci w kafelkach, wiersz w wiersz ---
   Bez tego opis zaczyna sie na innej wysokosci w kazdym kafelku,
   bo tytuly lamia sie na rozna liczbe linii. */
@supports (grid-template-rows: subgrid){
  .grid--sub{grid-template-rows:repeat(4,auto);row-gap:0}
  .grid--sub>.svc{
    grid-row:span 4;display:grid;grid-template-rows:subgrid;gap:0;
  }
  .grid--sub>.svc .svc__icon{margin-bottom:1.5rem}
  .grid--sub>.svc .svc__go{align-self:end;padding-top:1.5rem}
}
@supports (grid-template-rows: subgrid){
  /* Kafle uslug maja rozna dlugosc opisu, wiec bez tego tytuly, opisy
     i listy zaczynaly sie na roznych wysokosciach w kazdej kolumnie.
     Liczba wierszy siedzi w zmiennej, bo kafel z numerem i z lista ma
     ich szesc, a bez nich cztery. */
  .grid--rowsub{grid-template-rows:repeat(var(--rzedy),auto);row-gap:0}
  .grid--rowsub>.svc{
    grid-row:span var(--rzedy);display:grid;grid-template-rows:subgrid;gap:0;
  }
  .grid--rowsub>.svc .svc__go{align-self:end;padding-top:1.5rem}
  .grid--rowsub>.svc .svc__desc,
  .grid--rowsub>.svc .svc__list{margin-bottom:0}
}

/* Najdluzszy naglowek sektora nie miescil sie w jednej linii przy
   rozmiarze h3. Brakowalo mu okolo jednego punktu, wiec schodzimy
   z 1,6 do 1,5 rem na szerokich ekranach. */
.grid--sub .svc__title{font-size:clamp(1.1rem,.72rem + .92vw,1.5rem)}

/* zapas dla przegladarek bez subgrid */
@supports not (grid-template-rows: subgrid){
  .grid--sub>.svc .svc__title{min-height:2.6em}
}

/* 21 --------------------------------- KOLUMNY Z FORMULARZEM I KONTAKTEM
   Formularz aplikacyjny stoi po prawej, formularz ofertowy po lewej.
   Obie kolumny maja te sama miare, zeby pola nie rozjezdzaly sie
   na szerokich ekranach i zachowaly premium proporcje. */
.form-col{width:100%;max-width:34rem}
.form-col--right{margin-left:auto}
@media(max-width:56.25em){
  .form-col,.form-col--right{max-width:none;margin-left:0}
}

/* Opis obok dlugiego formularza. Sam opis jest krotki, wiec przy
   przewijaniu zostawal wysoko i pod nim wisiala pusta polowa ekranu.
   Teraz przykleja sie pod belka i jedzie razem z formularzem. */
.grid--przy-formularzu{align-items:start}
.przy-formularzu{position:sticky;top:calc(var(--hdr-h) + 2rem);align-self:start}
@media(max-width:56.25em){.przy-formularzu{position:static}}

/* Karta kontaktowa wyrownana do gornej krawedzi formularza obok.
   Formularz jest od niej znacznie wyzszy, wiec przy przewijaniu karta
   przykleja sie pod belka i jedzie razem z nim do konca formularza. */
.contact-card.form-col{
  max-width:26rem;margin-left:auto;
  position:sticky;top:calc(var(--hdr-h) + 2rem);align-self:start;
}
@media(max-width:56.25em){.contact-card.form-col{position:static}}
@media(max-width:56.25em){.contact-card.form-col{max-width:none;margin-left:0}}

/* pole pliku: wyglad spojny z reszta formularza */
.field input[type="file"]{
  padding:.8rem 0;font-size:var(--t-sm);color:var(--tx-muted);
  cursor:pointer;
}
.field input[type="file"]::file-selector-button{
  margin-right:1rem;padding:.6rem 1rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx);background:transparent;
  border:1px solid var(--line-strong);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.field input[type="file"]::file-selector-button:hover{
  border-color:var(--gold);color:var(--gold);
}
.on-dark .field input[type="file"]{color:var(--tx-on-dark-muted)}
.on-dark .field input[type="file"]::file-selector-button{
  color:var(--chalk);border-color:var(--line-on-dark);
}

/* 22 ------------------------------------- ODSLANIANIE OBRAZOW PRZY SCROLLU
   Chwyt z Norm Architects: obraz nie wjezdza, tylko powoli sie wywoluje,
   jak odbitka. Ruch jest ledwo zauwazalny i trwa dluzej niz przy tekscie. */
.bleed__media img,
.article__body figure img,
.sector__media img{
  will-change:transform,opacity;
}
[data-reveal].reveal-armed{opacity:0;transform:scale(1.045)}
[data-reveal].reveal-armed.is-in{
  opacity:1;transform:none;
  transition:opacity 1.4s var(--ease),transform 1.8s var(--ease-out);
}
@media(prefers-reduced-motion:reduce){
  [data-reveal].reveal-armed{opacity:1!important;transform:none!important}
}

/* 23 ------------------------------------------- DOSTEPNOSC NA DOTYKU
   Wytyczne WCAG i obu producentow systemow mobilnych mowia o polu dotyku
   nie mniejszym niz 44 na 44 piksele. Male przyciski mialy 40. */
@media(pointer:coarse){
  .btn--sm{min-height:44px;padding-block:.9rem}
  .nav__link,.tlink{padding-block:.6rem}
  .crumbs a,.ftr__col a,.ftr__legal a{display:inline-block;padding-block:.25rem}
  .cc-reopen{padding-block:.25rem}
  .person__links a,.ftr__socials a{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
}

/* --- bardzo waskie ekrany, od 320 pikseli --- */
@media(max-width:23.5em){
  /* etykieta przycisku miescila sie w dwoch wierszach, teraz w jednym */
  .btn{padding-inline:1.25rem;letter-spacing:.1em;font-size:.7rem}
  .btn .ico{width:.9rem;height:.9rem}
  /* hamburger wychodzil o piksel poza krawedz przez ujemny margines */
  .burger{margin-right:-.35rem}
  .logo__mark{width:1.85rem;height:1.75rem}
  .logo__name{font-size:1.15rem;letter-spacing:.16em}
  .hero__pillar h3{font-size:1.15rem}
}

/* --- ekrany o duzej gestosci: cienkie kreski nie moga znikac --- */
@media(min-resolution:2dppx){
  .ico{stroke-width:1.35}
}

/* --- tryb wysokiego kontrastu i wymuszone kolory systemowe --- */
@media(forced-colors:active){
  .btn,.tag,.svc,.post,.job{border:1px solid ButtonText}
  .ico{stroke:CanvasText}
  .ph{border:1px solid CanvasText}
}

/* 24 ------------------------------- WYROWNANIE POZYCJI W ROZWIJANYM MENU
   Bez tego wiersz dopasowuje sie do najwyzszej pozycji, ale tlo po najechaniu
   ma rozna wysokosc w kazdej komorce i uklad wyglada na krzywy. */
/* Rozwijana lista uslug: wszystkie pozycje w rownych wierszach, opis
   w calosci, bez ikon. Klientka prosila, zeby odstepy byly identyczne. */
.mega{grid-auto-rows:1fr}
.mega__link{align-items:flex-start;padding:1rem}
.mega__name{line-height:1.35;margin-bottom:.35rem}
.mega__desc{max-width:30ch;line-height:1.5}
.mega__foot .mega__desc{max-width:none}

/* 25 ----------------------------------------------------- RUCH, WARSTWA 2
   Trzy chwyty wzięte wprost ze stron wskazanych w briefie:
   Norm Architects, Freshfields i Foster and Partners.
   Wszystkie ustepuja przy wlaczonym ograniczeniu ruchu w systemie. */

/* --- 1. obraz odslaniany maska, nie pojawiajacy sie przez krycie --------
   Kadr wywoluje sie od dolu do gory, jak odbitka wychodzaca z wywolywacza,
   i jednoczesnie bardzo powoli siada ze skali. */
[data-reveal].reveal-armed{
  clip-path:inset(0 0 101% 0);
  transform:scale(1.06);
}
[data-reveal].reveal-armed.is-in{
  clip-path:inset(0 0 0 0);
  transform:none;
  transition:clip-path 1.35s var(--ease-out),
             transform 2s var(--ease-out);
}

/* --- 2. naglowek wchodzacy linia po linii ------------------------------
   Kazdy wiersz siedzi w wlasnym okienku i wysuwa sie spod jego dolnej
   krawedzi, z niewielkim opoznieniem wzgledem poprzedniego. */
.wiersz{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.wiersz > span{
  display:block;
  transform:translateY(105%);
  will-change:transform;
}
.is-in .wiersz > span,
.wiersze-gotowe.is-in .wiersz > span{
  transform:none;
  transition:transform 1.05s var(--ease-out);
  transition-delay:var(--dl,0s);
}

/* --- 3. paralaksa na pasach pelnej szerokosci --------------------------
   Obraz przesuwa sie wolniej niz strona, wiec pas sprawia wrazenie
   glebszego niz reszta tresci. Ruch jest celowo maly. */
.bleed__media img{
  transform:translate3d(0,var(--par),0);
  will-change:transform;
}

/* Awaryjne zdjecie ruchu. Znacznik ustawia skrypt dopiero wtedy, gdy
   przegladarka nie odpowiada na obserwatora, czyli takze nie posuwa
   przejsc CSS. Bez tego tresc stalaby zamrozona w polozeniu poczatkowym,
   na przyklad wiersz naglowka odsuniety poza swoje okienko. */
html.bez-ruchu .wiersz > span{transform:none!important;transition:none!important}
html.bez-ruchu .rise-armed,
html.bez-ruchu .line-armed{opacity:1!important;transform:none!important;transition:none!important}
html.bez-ruchu [data-reveal].reveal-armed{
  opacity:1!important;clip-path:none!important;transform:none!important;transition:none!important;
}
html.bez-ruchu .bleed__media img{transform:none!important;height:100%;top:0}

@media(prefers-reduced-motion:reduce){
  [data-reveal].reveal-armed{clip-path:none!important;transform:none!important}
  .wiersz > span{transform:none!important}
  .bleed__media img{transform:none!important;height:100%;top:0}
}

/* 26 -------------------------------------------------- RUCH, WARSTWA 3
   Trzy zachowania podpatrzone na stronach z inspiracji klientki.
   Sprawdzilem, czym one sa naprawde zrobione: norm cph to pokaz slajdow
   w tle co dziesiec sekund, aesop to rozmyta miniatura, ktora ostrzeje po
   wczytaniu kadru, foster and partners wygasza strone przy przejsciu na
   kolejna. Zadna z nich nie przechwytuje przewijania i zadna nie uzywa
   biblioteki do animacji. Trzymamy sie tego samego poziomu powsciagliwosci. */

/* --- 26.1 rozmyta miniatura pod kadrem, jak w aesop -------------------- */
.lqip{
  /* Znacznik picture jest domyslnie liniowy. Przegladarki oparte na Blink
     radzily sobie z tym mimo wszystko, ale Safari na iPhonie liczylo
     wysokosc takiego pola na zero i kadr znikal razem z miejscem po nim.
     Wszystkie kadry w serwisie ida przez ten znacznik, wiec ustawienie
     stoi tutaj, a nie przy kazdym uzyciu z osobna. */
  display:block;
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
}
.lqip > img{transition:opacity .75s var(--ease-out)}
/* Krycie zeruje dopiero skrypt i tylko wtedy, gdy kadr faktycznie sie
   jeszcze wczytuje. Gdyby skrypt nie wystartowal, obraz jest widoczny. */
.lqip--czeka > img{opacity:0}
/* hero ma wlasne kadrowanie, wiec miniatura musi lezec tak samo */
.hero__media .lqip{background-position:50% 22%}
@media(max-width:56em){
  .hero__media .lqip{background-position:50% 50%}
}

/* --- 26.2 wygaszenie strony przy przejsciu, jak w foster and partners -- */
.przejscie{transition:opacity .3s var(--ease-out)}
.przejscie.wychodzi{opacity:0}

/* --- 26.3 powolna zmiana kadru w hero, jak w norm cph ------------------ */
/* Klatki leza jedna na drugiej. Pierwsza jest widoczna od razu, wiec bez
   skryptu hero wyglada dokladnie tak jak dzis. */
.hero__media picture{opacity:0;transition:opacity 1.8s linear}
.hero__media picture:first-of-type{opacity:1}
/* Klase karuzela nadaje skrypt dopiero wtedy, gdy naprawde przejmuje
   zmiane klatek. Bez niej pierwsza klatka zostaje widoczna na stale. */
.hero__media.karuzela picture:first-of-type{opacity:0}
.hero__media.karuzela picture.jest{opacity:1}

@media(prefers-reduced-motion:reduce){
  .lqip > img{transition:none}
  .przejscie{transition:none}
  .przejscie.wychodzi{opacity:1}
  .hero__media picture{transition:none}
}


/* 27 ------------------------------------------- PAS O TECHNOLOGII
   Kadr wychodzi poza margines strony do lewej krawedzi ekranu, bo
   prostokat stojacy w srodku kolumny czytal sie jak wypelniacz. Zlota
   ramka jest przesunieta w dol i w prawo, jak passe-partout w oprawie
   graficznej: widac z niej tylko dwie krawedzie, bo trzecia chowa sie
   za zdjeciem, a czwarta wychodzi poza ekran. */
.techno{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2.5rem,5vw,6rem);align-items:center;
}
.techno__kadr{margin:0;position:relative}
.techno__obraz{position:relative;z-index:1;overflow:hidden;line-height:0}
.techno__obraz img{display:block;width:100%;height:auto}
.techno__kadr::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:2.5rem;right:-1.75rem;top:1.75rem;bottom:-1.75rem;
  border:1px solid rgba(168,132,60,.5);
}
/* Zakres w trzech wierszach, rozdzielony wloskowymi kreskami. Daje
   kolumnie z tekstem dolna krawedz i rytm, ktorego brakowalo. */
.techno__lista{margin-top:2.25rem;border-top:1px solid var(--line)}
.techno__lista li{
  display:flex;align-items:baseline;gap:.9rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);
  font-size:var(--t-sm);color:var(--tx);
}
.techno__lista li::before{
  content:"";flex:none;width:1.25rem;height:1px;background:var(--gold);
  transform:translateY(-.3em);
}
/* Wariant odbity: tekst po lewej, kadr po prawej i to on wychodzi poza
   prawy margines strony. Ramka przesuwa sie wtedy w lewo, wiec widac
   z niej lewa i dolna krawedz. */
.techno--odwrotny{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
@media(min-width:56.3125em){
  .techno--odwrotny .techno__kadr{
    margin-left:0;margin-right:calc(var(--gutter) * -1);
  }
  .techno--odwrotny .techno__kadr::after{
    left:-1.75rem;right:2.5rem;
  }
}
@media(min-width:56.3125em){
  /* wyjscie poza margines strony tylko tam, gdzie sa dwie kolumny */
  .techno__kadr{margin-left:calc(var(--gutter) * -1)}
}
@media(max-width:56.25em){
  .techno{grid-template-columns:minmax(0,1fr);row-gap:clamp(2.25rem,6vw,3.5rem)}
  /* na waskim ekranie kadr idzie od krawedzi do krawedzi, a ramka znika,
     bo nie ma juz dokad sie przesunac */
  .techno__kadr{margin-inline:calc(var(--gutter) * -1)}
  .techno__kadr::after{display:none}
}


/* 28 --------------------------------------------- PROJEKTY SPECJALNE
   Cztery waskie kolumny nie daly rady niczego pokazac: tytul lamal sie
   na trzy wiersze, a opis schodzil do rozmiaru przypisu. Dwie szerokie
   kolumny czytaja sie jak osobne pozycje oferty, a nie jak lista
   haselek. Bez zdjec, bo ta strona ma zostac na tekscie. */
.projekty{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
}
.projekt{display:flex;flex-direction:column}
/* Bez numeracji: ikona, nazwa, opis. Numer okazal sie zbedny, bo cztery
   pozycje nie tworza zadnej kolejnosci, ktora trzeba by odliczac. */
.projekt__ico{color:var(--gold);display:block;margin-bottom:1.35rem;line-height:0}
.projekt__tytul{margin-bottom:.75rem}
.projekt__opis{color:var(--tx-muted);font-size:var(--t-body);line-height:1.7}
@supports (grid-template-rows: subgrid){
  @media(min-width:40.0625em){
    .projekty{grid-template-rows:repeat(3,auto);row-gap:0}
    .projekt{grid-row:span 3;display:grid;grid-template-rows:subgrid;gap:0;
      padding-bottom:clamp(2.5rem,5vw,4rem)}
  }
}
/* Zlote kreski dzielace, poziom i pion, ukladaja sie w krzyz posrodku
   czterech pozycji. Kreski leza w przerwie miedzy kolumnami i rzedami,
   wiec nie zamykaja niczego w ramke. */
@media(min-width:40.0625em){
  .projekt{position:relative}
  .projekt:nth-child(2n)::before{
    content:"";position:absolute;
    left:calc(var(--gutter) / -2);top:0;bottom:0;width:1px;
    background:rgba(168,132,60,.45);
  }
  .projekt:nth-child(n+3)::after{
    content:"";position:absolute;
    left:0;right:0;top:calc(clamp(2.5rem,5vw,4rem) / -2);height:1px;
    background:rgba(168,132,60,.45);
  }
  /* kreska pozioma ma przechodzic przez cala szerokosc rzedu, takze
     przez przerwe miedzy kolumnami */
  .projekt:nth-child(3)::after{right:calc(var(--gutter) / -2)}
  .projekt:nth-child(4)::after{left:calc(var(--gutter) / -2)}
}
@media(max-width:40em){
  .projekty{grid-template-columns:minmax(0,1fr)}
}

/* 29 ------------------------------------------ WYZWANIA NA CIEMNYM TLE
   To najwazniejsza tresc na stronie z uslugami, a byla zlozona
   najdrobniejszym pismem w calym serwisie. Idzie na ciemne tlo
   i o dwa stopnie w gore. */
.on-dark .challenges{border-top-color:var(--line-on-dark)}
.on-dark .challenges li{
  border-bottom-color:var(--line-on-dark-soft);
  color:var(--tx-on-dark);
}
.challenges li{font-size:var(--t-lead);line-height:1.6;color:var(--tx)}
.challenges__n{font-size:var(--t-sm)}


/* 30 ------------------------------------------------- BLOK "W SKROCIE"
   Poza ciemnym naglowkiem podstrony ta sama tabelka sluzy za karte
   danych uslugi. Tam byla drobna i cicha, a to jest miejsce, w ktorym
   klient szuka konkretu, wiec dostaje zlota kreske u gory, wiecej
   powietrza w wierszach i wartosci w rozmiarze tekstu ciaglego. */
.section .facts{border-top:1px solid rgba(168,132,60,.55)}
.section .facts__row{
  padding:1.15rem 0;
  grid-template-columns:minmax(9rem,auto) minmax(0,1fr);
  gap:.5rem 2rem;
}
.section .facts__row dd{font-size:var(--t-body);line-height:1.6}
@media(max-width:34em){
  .section .facts__row{grid-template-columns:minmax(0,1fr);gap:.35rem}
}


/* 31 ------------------------------------------ RAMKA NA DWOCH ROGACH
   Zamiast obwodki dookola tekstu dwa naroza po przekatnej, jak znaki
   kadrowania w skladzie. Dostaje je kazdy tekst stojacy obok naglowka
   sekcji, bo wszystkie te bloki sa zbudowane tak samo.

   Naroza leza poza polem tekstu, wiec pierwszy wiersz nadal zaczyna sie
   dokladnie na wysokosci wierzcholka naglowka obok. Szerokosc pola jest
   ograniczona, inaczej prawy dolny narożnik wisial w pustce daleko od
   ostatniego wiersza. */
.sec-head__aside .lead{
  --luz-ramki:clamp(.95rem,1.35vw,1.3rem);
  /* Tekst siedzi w osi ramki. Przy wyrownaniu do lewej ostatni wiersz
     bywal duzo krotszy od najdluzszego, przez co prawy dolny narożnik
     wisial obok pustego miejsca. Szerokosc pola wyznacza najdluzszy
     wiersz, wiec wysrodkowanie ustawia caly blok symetrycznie wzgledem
     obu naroznikow. */
  position:relative;max-width:46ch;text-wrap:balance;text-align:center;
}
.sec-head__aside .lead::before,
.sec-head__aside .lead::after{
  content:"";position:absolute;pointer-events:none;
  width:clamp(1.35rem,2vw,1.85rem);height:clamp(1.35rem,2vw,1.85rem);
  border:1px solid rgba(168,132,60,.6);
}
/* Jeden luz na wszystkie cztery strony. Wartosci wyliczone przy wczytaniu
   strony nadpisuja te wyjsciowe i odmierzaja go od pierwszego i ostatniego
   wiersza tekstu, a nie od krawedzi pola. Bez skryptu naroza stoja tam,
   gdzie stały dotad, wiec ramka nie znika. */
.sec-head__aside .lead::before{
  top:var(--naroze-g,calc(var(--luz-ramki) * -1));
  left:var(--naroze-l,calc(var(--luz-ramki) * -1));
  border-right:0;border-bottom:0;
}
.sec-head__aside .lead::after{
  bottom:var(--naroze-d,calc(var(--luz-ramki) * -1));
  right:var(--naroze-p,calc(var(--luz-ramki) * -1));
  border-left:0;border-top:0;
}
/* na ciemnym tle zloto jest jasniejsze, wiec kreska moze byc cichsza */
.on-dark .sec-head__aside .lead::before,
.on-dark .sec-head__aside .lead::after{border-color:rgba(168,132,60,.5)}
/* w wariancie wysrodkowanym tekst stoi pod naglowkiem i naroza tylko
   przeszkadzaja, bo nie ma juz dwoch kolumn do zwiazania */
.sec-head--center .sec-head__aside .lead::before,
.sec-head--center .sec-head__aside .lead::after{display:none}
.sec-head--center .sec-head__aside .lead{max-width:56ch}

.posrodku{display:flex;justify-content:center}


/* 32 ------------------------------ KARTA DANYCH W PASIE Z KADREM
   Na podstronie uslugi ten sam pas niesie jeszcze karte danych pod
   opisem. Odstep jest wiekszy niz miedzy akapitami, zeby bylo widac,
   ze to osobny blok, a nie dalszy ciag tekstu. */
.techno__karta{margin-top:clamp(2rem,3.5vw,3rem)}


/* 35 ----------------------------------------- RZAD ZE ZDJECIAMI
   Nazwa rzedu zlozona pionowo na obu marginesach strony, tak jak na
   normcph. Marginesy sa u nas szerokie i puste, wiec etykieta wypelnia
   je, nie zabierajac ani piksela tresci. Na waskim ekranie marginesy
   maja po dwadziescia kilka pikseli, wiec etykieta znika. */
.rzad{position:relative}
.rzad__etykieta{
  position:absolute;top:0;
  left:calc(var(--gutter) / -2);
  transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-size:var(--t-eyebrow);letter-spacing:.34em;text-transform:uppercase;
  color:var(--tx-faint);white-space:nowrap;pointer-events:none;
}
.rzad__etykieta--prawa{
  left:auto;right:calc(var(--gutter) / -2);
  transform:translateX(50%) rotate(180deg);
}
@media(max-width:64em){
  .rzad__etykieta{display:none}
}

/* Kolumny o roznej szerokosci i kadry o roznej proporcji. Trzy rowne
   kolumny czytaly sie jak tabelka; przy szerszej pierwszej pozycji rzad
   dostaje kierunek czytania. */
@media(min-width:56.3125em){
  /* Najszersza kolumna po prawej. Rzad czyta sie wtedy narastajaco,
     a nie opadajaco. */
  .rzad--sektory .grid.cols-3{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.32fr);
  }
  .rzad--sektory .tile:last-child .tile__media{aspect-ratio:4/3}
}


/* 36 --------------------------------------------- SPIS OBSZAROW
   Uklad z aesop: nie karty, tylko spis. Duza nazwa, krotkie zdanie obok,
   wloskowa kreska miedzy pozycjami. Zdjecie wychodzi z ukladu i pojawia
   sie dopiero przy najechaniu, podazajac za kursorem. */
.indeks{position:relative;border-top:1px solid var(--line)}
.indeks__poz{
  position:relative;display:grid;align-items:baseline;
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr) auto;
  gap:clamp(1.25rem,3vw,3rem);
  padding:clamp(1.75rem,1rem + 2.4vw,3rem) 0;
  border-bottom:1px solid var(--line);
  color:var(--tx);
  transition:color .4s var(--ease);
}
.indeks__poz:hover{color:var(--burgundy)}
.indeks__n{
  font-family:var(--f-display);color:var(--gold);
  font-variant-numeric:tabular-nums;font-size:var(--t-sm);
  letter-spacing:.06em;line-height:1;
}
.indeks__tytul{
  display:block;margin:0;color:inherit;
  transition:transform .5s var(--ease-out);
}
.indeks__poz:hover .indeks__tytul{transform:translateX(.6rem)}
.indeks__opis{
  display:block;color:var(--tx-muted);font-size:var(--t-lead);line-height:1.6;
}
.indeks__go{color:var(--tx-faint);align-self:center;transition:transform .5s var(--ease-out)}
.indeks__poz:hover .indeks__go{transform:translateX(.4rem);color:var(--gold)}

/* --- kadr, wersja z kursorem ---------------------------------------- */
@media(min-width:56.3125em) and (hover:hover){
  .indeks__kadr{
    position:fixed;z-index:60;pointer-events:none;
    width:min(22rem,26vw);aspect-ratio:4/3;overflow:hidden;
    opacity:0;transform:translate(-50%,-50%) scale(.96);
    transition:opacity .4s var(--ease),transform .5s var(--ease-out);
    box-shadow:0 30px 70px -40px rgba(23,18,14,.55);
  }
  .indeks__kadr img{width:100%;height:100%;object-fit:cover;display:block}
  .indeks__poz:hover .indeks__kadr,
  .indeks__poz:focus-visible .indeks__kadr{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
/* --- kadr, wersja dotykowa ------------------------------------------ */
@media(max-width:56.25em),(hover:none){
  .indeks__poz{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;row-gap:1rem;
  }
  .indeks__n{grid-column:1;grid-row:1}
  .indeks__kadr{
    grid-column:2;grid-row:1;display:block;overflow:hidden;aspect-ratio:16/10;
    background:var(--paper-deep);
  }
  .indeks__kadr img{width:100%;height:100%;object-fit:cover;display:block}
  .indeks__tytul{grid-column:2;grid-row:2}
  .indeks__opis{grid-column:2;grid-row:3;font-size:var(--t-body)}
  .indeks__go{grid-column:2;grid-row:4;justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .indeks__poz:hover .indeks__tytul,
  .indeks__poz:hover .indeks__go{transform:none}
  .indeks__kadr{transition:opacity .001ms}
}


/* Opis ma stac dokladnie pod nazwa pozycji, a nie pod ikona. Szerokosc
   kolumny z ikona plus przerwa to 54 piksele przy tym rozmiarze znaku. */
.faq__item:has(.faq__ico) .faq__a-inner{padding-left:3.375rem}
@media(max-width:40em){
  .faq__item:has(.faq__ico) .faq__a-inner{padding-left:0}
}

/* 33 ------------------------------------- SPIS ZAKRESU I POLE Z KADREM
   Uklad redakcyjny: numerowany spis po lewej, kadr po prawej. Skladnia
   jest ta sama co w pytaniach, wiec obsluguje ja ten sam skrypt razem
   z aria-expanded, aria-controls i obsluga klawiatury. Rozni je tylko
   odmiana wygladu. */
.zakres{
  display:grid;
  /* Kolumny rowne, zeby kadr byl szerszy. Przy 1.38 do 1 pole na zdjecie
     mialo okolo 510 pikseli, teraz ma ponad 600. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gutter);
  /* Kadr nie moze zmieniac wysokosci razem ze spisem, bo przy kazdym
     rozwinieciu pozycji zdjecie podskakiwalo. Dlatego wyrownanie do
     gory i stala proporcja, a nie rozciaganie na wysokosc kolumny. */
  align-items:start;
}
.zakres--sam{grid-template-columns:minmax(0,1fr)}
.zakres__spis{min-width:0}
.zakres__kadr{
  position:relative;margin:0;overflow:hidden;
  /* Kadr lezacy, a nie kwadratowy. Przy rownych kolumnach kwadrat mial
     ponad szescset pikseli wysokosci i wystawal daleko pod spis. */
  background:var(--paper-deep);aspect-ratio:4/3;
}
.zakres__kadr img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* --- odmiana akordeonu ------------------------------------------------ */
.faq--zakres .faq__q{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,2vw,1.75rem);align-items:baseline;
  padding-block:clamp(1.15rem,2vw,1.6rem);
  color:var(--tx-muted);
  transition:color .4s var(--ease);
}
.faq--zakres .faq__n{
  font-family:var(--f-display);font-variant-numeric:tabular-nums;
  font-size:var(--t-sm);letter-spacing:.06em;line-height:1;
  color:var(--tx-faint);
  transition:color .4s var(--ease);
}
.faq--zakres .faq__tekst{
  display:block;
  transition:transform .5s var(--ease-out);
}
.faq--zakres .faq__q:hover,
.faq--zakres .faq__q:focus-visible{color:var(--tx)}
.faq--zakres .faq__q:hover .faq__n,
.faq--zakres .faq__q:focus-visible .faq__n{color:var(--gold)}
/* pozycja otwarta: pelny kontrast, zloty numer, tytul odsuniety */
.faq--zakres .faq__q[aria-expanded="true"]{color:var(--tx)}
.faq--zakres .faq__q[aria-expanded="true"] .faq__n{color:var(--gold)}
.faq--zakres .faq__q[aria-expanded="true"] .faq__tekst{transform:translateX(.55rem)}
.faq--zakres .faq__a-inner{
  padding:0 clamp(1.5rem,3vw,3rem) clamp(1.25rem,2vw,1.75rem)
          calc(var(--t-sm) * 2.6 + clamp(1rem,2vw,1.75rem));
  font-size:var(--t-body);line-height:1.7;
}
/* zlota kreska rozwijana od lewej pod otwarta pozycja */
.faq--zakres .faq__item{position:relative}
.faq--zakres .faq__item::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease-out);
}
.faq--zakres .faq__item:has(.faq__q[aria-expanded="true"])::after{transform:scaleX(1)}

@media(max-width:56.25em){
  .zakres{grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,5vw,3rem)}
  .zakres__kadr{aspect-ratio:16/10}
}
@media(max-width:40em){
  .faq--zakres .faq__a-inner{padding-right:0}
}
@media(pointer:coarse){
  /* pole dotyku nie mniejsze niz czterdziesci cztery piksele */
  .faq--zakres .faq__q{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .faq--zakres .faq__tekst,
  .faq--zakres .faq__item::after{transition:none}
  .faq--zakres .faq__q[aria-expanded="true"] .faq__tekst{transform:none}
}

/* 33b ------------------------------------------------------- PARTNERZY
   Duze portrety obok siebie, podpis pod kadrem. Bez kart i bez ramek,
   samo zdjecie i typografia. */
.partnerzy{
  margin-top:clamp(2.5rem,4.5vw,4rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
}
.partner{margin:0}
.partner__kadr{
  position:relative;overflow:hidden;line-height:0;
  aspect-ratio:3/4;background:var(--paper-deep);
}
.partner__kadr img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04);
  transition:filter .6s var(--ease-out);
}
/* Kolor wraca przy wskazaniu. Zdjecie stoi nieruchomo, bez powiekszania. */
.partner:hover .partner__kadr img{filter:grayscale(0) contrast(1)}
.partner__opis{margin-top:clamp(1.1rem,1.8vw,1.5rem)}
.partner__nazwa{margin:0 0 .3rem}
.partner__rola{
  margin:0;color:var(--tx-muted);font-size:var(--t-sm);
  letter-spacing:.02em;
}
.on-dark .partner__rola{color:var(--tx-on-dark-muted)}

@media(max-width:48em){
  .partnerzy{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,7vw,3rem)}
}

/* 34 ------------------------------------------------ SIATKA EFEKTOW
   Cztery rezultaty w siatce dwa na dwa, rozdzielone wloskowymi kreskami.
   Bez kart, bez cieni, bez zaokraglen: sam podzial i typografia. */
.efekty{
  /* Rynna miedzy kolumnami. Kazda pozycja ma ja po prawej, zadna po lewej,
     wiec teksty wszystkich kolumn zaczynaja sie dokladnie na poczatku
     swojej kolumny i sa rozstawione co ta sama odleglosc. Kreska stoi
     w polowie rynny, czyli w rownej odleglosci od obu sasiadow. */
  --rynna-efektow:clamp(2rem,3.2vw,3.25rem);
  margin-top:clamp(2.5rem,4.5vw,4rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.on-dark .efekty{border-top-color:var(--line-on-dark)}
.efekt{
  position:relative;
  display:flex;flex-direction:column;gap:clamp(.7rem,1.3vw,1.1rem);
  padding:clamp(1.35rem,2.4vw,2rem) calc(var(--rynna-efektow) / 2);
  /* Tresc stoi w osi kafelka, wiec rynna musi byc po obu stronach po rowno,
     inaczej srodek tekstu przesuwalby sie wzgledem srodka kolumny. */
  align-items:center;text-align:center;
  border-bottom:1px solid var(--line);
}
.on-dark .efekt{border-bottom-color:var(--line-on-dark)}
/* pionowa kreska miedzy kolumnami, bez zamykania pozycji w ramke */
.efekt:nth-child(2n)::before{
  content:"";position:absolute;left:0;
  top:0;bottom:0;width:1px;background:var(--line);
}
.on-dark .efekt:nth-child(2n)::before{background:var(--line-on-dark)}
.efekt__n{
  font-family:var(--f-display);font-variant-numeric:tabular-nums;
  font-size:var(--t-sm);letter-spacing:.06em;line-height:1;
  color:var(--gold);opacity:.75;
}
.efekt__tytul{
  margin:0;font-family:var(--f-display);font-weight:500;
  /* Rezultat ma byc wyrazny, ale to nadal krotkie haslo, a nie naglowek
     sekcji. Stopien nizej niz d-1s, zeby siatka nie rosla na pol ekranu. */
  font-size:clamp(1.35rem,1rem + 1.1vw,2rem);line-height:1.2;letter-spacing:-.012em;
  text-wrap:balance;color:var(--tx);
}
.on-dark .efekt__tytul{color:var(--chalk)}
.efekt__opis{
  margin:0;color:var(--tx-muted);font-size:var(--t-sm);line-height:1.7;
  max-width:34ch;
}
.on-dark .efekt__opis{color:var(--tx-on-dark-muted)}
/* Kafelek rezultatu nie jest odnosnikiem, wiec nie reaguje na kursor.
   Podswietlenie tla, rozjasnienie numeru i przesuniecie tytulu sugerowaly,
   ze da sie w niego kliknac, a nie da. */
/* Wariant trzykolumnowy, uzywany przy spisie specjalizacji zespolu.
   Pionowa kreska stoi wtedy przed kazda kolumna poza pierwsza. */
@media(min-width:56.3125em){
  .efekty--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .efekty--3 .efekt:nth-child(2n)::before{display:none}
  .efekty--3 .efekt:nth-child(3n+2)::before,
  .efekty--3 .efekt:nth-child(3n)::before{
    content:"";display:block;position:absolute;
    left:0;top:0;bottom:0;width:1px;
    background:var(--line);
  }
  .on-dark .efekty--3 .efekt:nth-child(3n+2)::before,
  .on-dark .efekty--3 .efekt:nth-child(3n)::before{background:var(--line-on-dark)}
  /* Nazwa stanowiska to nie rezultat biznesowy, wiec stopien jest tu
     wyraznie nizszy niz na podstronach uslug, a pola cieplejsze. */
  .efekty--3 .efekt__tytul{font-size:clamp(1.25rem,.95rem + .95vw,1.7rem)}
}
.efekty--3 .efekt{
  gap:clamp(.7rem,1.2vw,1rem);
  padding-block:clamp(1.25rem,2.2vw,1.9rem);
}
@media(max-width:56.25em){
  .efekty--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:48em){
  .efekty{grid-template-columns:minmax(0,1fr)}
  .efekt{padding-inline:0}
  .efekt:nth-child(2n)::before{display:none}
}

/* ---- Zespol: partnerzy i kultura, poprawki po uwagach klientki ---------- */

/* Naglowek sekcji z partnerkami ma lamac sie na dwa wiersze. Przy skali
   d-1 wyrownywanie dlugosci wierszy rozbijalo go na cztery, wiec skala
   jest mniejsza, a wyrownywanie wylaczone. */
.partnerzy-naglowek .sec-head__title{
  font-size:clamp(1.7rem,1.15rem + 1.7vw,2.6rem);
  max-width:26ch;text-wrap:pretty;
}

/* Zdjecia partnerek o polowe mniejsze. Rzad zostaje wyrownany do lewej,
   zeby przy dwoch osobach nie rozjezdzal sie na cala szerokosc. */
.partnerzy{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fill,minmax(0,1fr));
}
@media (min-width:48rem){
  .partnerzy{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.partner__kadr{aspect-ratio:3/4}
.partner__nazwa{font-size:clamp(1rem,.85rem + .4vw,1.25rem);margin-bottom:.15rem}
.partner__rola{font-size:var(--t-xs);letter-spacing:.04em}
.partner__opis{margin-top:.9rem}

/* Cztery elementy kultury: jedna kolumna, wloskowe kreski, rowny rytm.
   Siatka dwa na dwa dawala kafle roznej wysokosci i duzo pustego pola. */
.kultura__elementy{grid-template-columns:minmax(0,1fr)}
.kultura__element{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.35rem clamp(1rem,2vw,1.6rem);
  align-items:baseline;
  padding:clamp(1rem,1.8vw,1.4rem) 0;
  border-top:1px solid var(--line);border-left:0;
}
.kultura__element:first-child{border-top:0;padding-top:0}
@media (min-width:34rem){
  .kultura__element:nth-child(2n){border-left:0}
}
.kultura__nr{margin-bottom:0;grid-row:1 / span 2;line-height:1.15}
.kultura__tytul{margin-bottom:.35rem;max-width:none;grid-column:2}
.kultura__opis-el{grid-column:2;max-width:52ch}

/* Kadry sektorow w pionie, zeby rownaly sie z wysokoscia tekstu obok. */
.sektory-kadr{aspect-ratio:4/5}

/* Kafle case studies rownej wysokosci, takze miedzy rzedami. */
.dowody{grid-auto-rows:1fr}
.dowod{height:100%}

/* Strona w przygotowaniu: sam znak marki i jedno zdanie, wysrodkowane. */
.wkrotce{display:flex;align-items:center;min-height:60vh}
.wkrotce__srodek{max-width:34rem;margin-inline:auto;text-align:center}
.wkrotce__znak{display:block;width:3.25rem;height:3.1rem;color:var(--gold);margin:0 auto 1.75rem}
.wkrotce__znak svg{width:100%;height:100%;display:block}
.wkrotce__tytul{margin-bottom:1.25rem}
.wkrotce__kreska{display:block;width:3.5rem;height:1px;background:var(--gold);margin:0 auto 1.5rem}
.wkrotce__zdanie{color:var(--tx-muted);margin:0}

/* Pas z wezwaniem byl nadal za wysoki. Schodzimy z odstepami gora i dol. */
.cta-band--kadr{padding-block:clamp(1.75rem,1.2rem + 1.8vw,2.75rem)}
.cta-band--kadr .cta-band__naglowek{margin-bottom:clamp(1.1rem,2vw,1.75rem)}
.cta-band--kadr .sciezka{padding-block:clamp(.9rem,1.4vw,1.2rem)}
.cta-band--kadr .cta-band__direct{margin-top:1.1rem;padding-top:1rem}

/* Otwarte rekrutacje: naglowek po lewej, spis stanowisk po prawej.
   Sekcja jest przez to o polowe nizsza niz przy ukladzie jeden pod
   drugim, a spis nadal ma szerokosc, ktorej potrzebuje. */
.rekrutacje{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:56rem){
  .rekrutacje{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
}
.rekrutacje__naglowek{margin:0;max-width:12ch}
.rekrutacje__spis .oferty{border-top:1px solid var(--line-on-dark)}
.rekrutacje__spis .oferta__link{padding-block:clamp(1rem,1.8vw,1.4rem)}

/* Wyrozniona publikacja i spis pozostalych stoja w jednej sekcji, wiec
   dzieli je sam odstep, a nie dwa marginesy sekcji. */
.publikacje-blok{margin-top:clamp(1.5rem,1rem + 1.6vw,2.25rem)}
.publikacje-blok .publikacje__tytul{margin-bottom:clamp(.9rem,1.5vw,1.25rem)}

/* Pasek przewijania rzedu publikacji w zlocie marki zamiast szarosci. */
.publikacje{scrollbar-width:thin;scrollbar-color:var(--gold) rgba(23,18,14,.08)}
.publikacje::-webkit-scrollbar{height:8px}
.publikacje::-webkit-scrollbar-track{background:rgba(23,18,14,.08)}
.publikacje::-webkit-scrollbar-thumb{background:var(--gold)}
.publikacje::-webkit-scrollbar-thumb:hover{background:var(--gold-deep,#8C6C2E)}

/* ---- Projekty specjalne: kadr lezy obok tekstu, a nie nad nim --------
   Uklad ze szkicu klientki. Pierwszy kafel zostaje ciemny, ze zdjeciem
   na calym polu i trescia na nim. Trzy pozostale maja tekst po lewej,
   a martwa nature po prawej, wtopiona w tlo kafla maska, tak samo jak
   kadr w hero. Kafle stykaja sie ze soba: wloskowa kreska miedzy nimi
   to przerwa w siatce podswietlona zlotem, wiec nic nie jest zamkniete
   w ramke.

   Zdjecie obok tekstu potrzebuje szerokiego kafla. Ponizej 1200 pikseli
   kolumna tekstu robila sie wezsza niz dwiescie pikseli, wiec tam kadr
   wraca nad tekst. */
.projekty{gap:1px;background:rgba(168,132,60,.35);border:0}
.projekt{
  position:relative;overflow:hidden;border:0;grid-row:auto;
  background:var(--paper-deep);
}
/* kreski rysowane wczesniej w przerwie siatki nie sa juz potrzebne */
.projekt:nth-child(2n)::before,
.projekt:nth-child(n+3)::after{content:none;display:none}
.projekt:not(.projekt--tlo) .projekt__kadr{aspect-ratio:16/10}
/* Ciemne tlo pierwszego kafla musi stac za pozniejsza regula .projekt,
   ktora daje wszystkim kaflom kremowe tlo. Na duzym ekranie nie bylo tego
   widac, bo cale pole zakrywalo zdjecie, ale gdy kadr przechodzi nad
   tekst, spod jasnych liter wychodzil krem. */
.projekt--tlo{
  background:var(--dark);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:20rem;
}

/* Ponizej 1200 pikseli kafle stoja jeden pod drugim i kadr jest nad
   tekstem. Pierwszy kafel musi zachowac sie tak samo, inaczej raz tekst
   lezy na zdjeciu, a raz pod nim. Tlo zostaje ciemne, zmienia sie tylko
   ulozenie. */
@media (max-width:74.99em){
  /* W ukladzie pionowym pierwszy kafel wyglada tak samo jak pozostale:
     kremowe tlo i ciemne pismo. Ciemny wariant ma sens tylko wtedy, gdy
     zdjecie jest tlem calego kafla, czyli na szerokim ekranie. */
  .projekt--tlo{
    display:block;min-height:0;padding:0;
    background:var(--paper-deep);border-color:var(--line);
  }
  /* wyzsza szczegolowosc, bo jasne pismo ciemnego kafla jest zapisane
     dalej w pliku */
  .projekty .projekt--tlo .projekt__tytul{color:var(--tx)}
  .projekty .projekt--tlo .projekt__opis{color:var(--tx-muted)}
  .projekt--tlo .projekt__kadr{
    position:relative;inset:auto;aspect-ratio:16/10;width:100%;
  }
  .projekt--tlo .projekt__kadr img,
  .projekt--tlo .projekt__kadr picture{width:100%;height:100%;object-fit:cover;display:block}
  /* zaslona byla potrzebna tylko wtedy, gdy tekst lezal na zdjeciu */
  .projekt--tlo .projekt__kadr::after{content:none}
  .projekt--tlo .projekt__tresc{
    position:relative;z-index:1;min-height:0;justify-content:flex-start;
    padding:clamp(1.25rem,4vw,1.7rem);max-width:none;
  }
}

@media (min-width:75em){
  .projekt{
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:clamp(17rem,23vw,20.5rem);
    padding:clamp(1.5rem,2.4vw,2.15rem);
  }
  .projekt:not(.projekt--tlo) .projekt__kadr{
    position:absolute;top:0;right:0;bottom:0;left:auto;
    width:66%;margin:0;aspect-ratio:auto;overflow:hidden;background:transparent;
    -webkit-mask:linear-gradient(to right,transparent 2%,#000 42%);
    mask:linear-gradient(to right,transparent 2%,#000 42%);
  }
  .projekt:not(.projekt--tlo) .projekt__kadr img,
  .projekt:not(.projekt--tlo) .projekt__kadr picture{
    width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  }
  .projekt:not(.projekt--tlo) .projekt__tresc{
    position:relative;z-index:1;padding:0;flex:0 0 auto;
    max-width:min(58%,24rem);
  }
  .projekt--tlo .projekt__tresc{padding:0;min-height:0}
}

/* Kafle rownej wysokosci takze wtedy, gdy kadr stoi nad tekstem. */
.projekty{grid-auto-rows:1fr}

/* ---- Czytelnosc na telefonie i pola dotyku ---------------------------
   Skala pisma jest ustawiona pod ekran biurkowy, gdzie drobne wersaliki
   maja wokol siebie duzo powietrza. Na telefonie te same dziesiec
   pikseli robi sie nieczytelne, wiec najmniejsze stopnie ida w gore.
   Uklad zostaje bez zmian, rosna same litery. */
@media (max-width:47.99em){
  :root{
    --t-eyebrow:.72rem;   /* bylo .625rem, czyli dziesiec pikseli */
    --t-xs:.8125rem;      /* napisy na przyciskach i etykiety */
  }
  .logo__sub{font-size:.5625rem;letter-spacing:.2em}
  .nav__link{font-size:.78rem}
  .ftr__col h3{font-size:.72rem}
}

/* Palec potrzebuje wiekszego pola niz kursor. Reguly dotycza wylacznie
   ekranow dotykowych, wiec na biurku nie zmienia sie nic. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .lang a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.35rem}
  .ftr__contact a,.ftr__col a,.ftr__legal-links a,
  .mnav__contact a,.cta-band__direct a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .cc-reopen{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- Wysokosci liczone od widocznej czesci ekranu --------------------
   Na telefonie pasek adresu chowa sie przy przewijaniu, przez co 100vh
   jest wyzsze niz to, co widac. Hero mialo juz na to poprawke, tutaj
   dostaja ja pozostale miejsca liczone w procentach wysokosci okna.
   Przegladarki, ktore nie znaja svh, czytaja wartosci wyjsciowe. */
@supports (height:100svh){
  .e404{min-height:78svh}
  .wkrotce{min-height:60svh}
  .cc-modal__panel{max-height:min(46rem,88svh)}
  @media (max-width:59.99rem){
    .hero--dwie .hero__kadr{max-height:32svh}
  }
}

/* Panel klienta stoi zawsze pod pelnym, bordowym paskiem, wiec odstep
   u gory nie musi zalezec od selektora :has. Starsze przegladarki, ktore
   go nie znaja, ustawialy tresc pod paskiem. */
.panel-klienta{padding-top:calc(var(--hdr-h) + clamp(3rem,6vw,6rem))}

/* Krzyzyk zamykajacy ustawienia cookies mial trzynascie pikseli
   szerokosci. Sam znak zostaje taki sam, rosnie tylko pole klikniecia. */
.cc-modal__head button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin:-.6rem -.6rem -.6rem 0;
}

/* ---- Telefon w poziomie -----------------------------------------------
   Na wysokosc zostaje wtedy mniej niz czterysta pikseli. Naglowek schodzi
   o stopien, odstepy sa mniejsze, a pas okreslen ciasniejszy. Cala tresc
   zostaje na miejscu, zmienia sie sam rytm. */
@media (orientation:landscape) and (max-height:30em){
  .hero{min-height:auto}
  .hero__stage{min-height:0;padding-top:calc(var(--hdr-h) + .75rem);padding-bottom:.75rem}
  /* selektory dwuczlonowe, bo warianty hero maja swoje rozmiary */
  .hero .hero__title{font-size:clamp(1.5rem,1rem + 2.4vw,2.1rem)}
  .hero .hero__lead{font-size:var(--t-body);margin-bottom:1.25rem}
  .hero__pillar{padding-block:.6rem}
  .hero__pillar h3{font-size:.92rem}
  .phero .phero__grid{padding-block:clamp(1.5rem,5vh,2.25rem)}
  .phero .phero__title{font-size:clamp(1.6rem,1rem + 2.6vw,2.3rem)}
}

/* ---- Strona glowna, poprawki po uwagach klientki ---------------------- */

/* 1. "Wiecej niz jedna perspektywa": tekst na cala szerokosc sekcji,
   z lewa krawedzia rowna naglowkowi i takim samym odstepem po prawej. */
#o-nas .prose.o-nas__tekst{max-width:none;display:block;text-align:left}

/* 2. "Partner, a nie dostawca uslug": naglowek zajmuje pierwszy wiersz,
   kadr obok zaczyna sie dopiero w drugim, rowno z tekstem pod nim. */
.partner-uklad{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:56.3125em){
  .partner-uklad{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:var(--gutter);row-gap:clamp(1.5rem,2.5vw,2.25rem);
    align-items:start;
  }
  .partner-uklad__naglowek{grid-column:1;grid-row:1}
  .partner-uklad__tresc{grid-column:1;grid-row:2}
  .partner-uklad__kadr{grid-column:2;grid-row:2}
}

/* 3. "Dla kogo pracujemy": kadry kwadratowe. Na podstronie Sektory
   zostaja pionowe, bo tam rownaja sie z wysokoscia tekstu obok. */
.sektory-kadry--kwadrat .sektory-kadr{aspect-ratio:1/1}

/* 4. "Dane, ktore wspieraja decyzje": kadr rosnie do wysokosci kolumny
   z tekstem, tak jak na szkicu klientki. */
.techno-uklad__kadr{align-self:stretch;display:block}
.techno-uklad__kadr picture,
.techno-uklad__kadr img{height:100%;object-fit:cover}
@media (min-width:56.3125em){
  .techno-uklad{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .techno-uklad__kadr{min-height:26rem}
}

/* 5. Pas "Porozmawiajmy o Twoim biznesie": bordowa zaslona siega dalej
   w lewo, zeby tekst po prawej lezal na spokojnym tle. */
/* Zaslona ma zostac mocna tam, gdzie lezy tekst, czyli po prawej, i
   szybciej znikac po lewej, zeby bylo widac martwa nature na zdjeciu. */
.cta-band__tlo::after{
  background:linear-gradient(260deg,
    var(--dark) 0%, rgba(44,13,18,.96) 42%, rgba(44,13,18,.78) 56%,
    rgba(44,13,18,.32) 70%, rgba(44,13,18,0) 84%);
}

/* 6. Ikony spolecznosciowe: pelne zloto zamiast wygaszonego, ramka
   w tym samym kolorze. Bez adresu profilu ikona nadal jest czytelna. */
.ftr__socials a,.ftr__socials span{
  width:2.5rem;height:2.5rem;
  color:var(--gold);border-color:rgba(168,132,60,.55);
}
.ftr__socials a:hover{color:#D9B673;border-color:var(--gold);background:rgba(168,132,60,.14)}
.ftr__socials .ico{width:1.2rem;height:1.2rem}
.ftr__social--pusty{opacity:.8}

/* ---- Uslugi: kafle obszarow ------------------------------------------
   Trzy najdluzsze opisy lamaly sie na cztery wiersze, reszta na trzy,
   przez co rzad byl nierowny. Kolumny dostaja wiecej miejsca kosztem
   rynny, a sam opis schodzi o wlos w dol. */
@media (min-width:56.3125em){
  .uslugi-siatka{column-gap:clamp(1.75rem,2.6vw,2.75rem)}
}
.uslugi-siatka .svc__desc{font-size:.82rem;line-height:1.62}

/* Projekty specjalne: tekst na ciemnym kaflu ma taka sama szerokosc jak
   na pozostalych trzech, a zaslona pod nim jest mocniejsza od dolu
   i od lewej, czyli tam, gdzie lezy tresc. */
@media (min-width:75em){
  .projekt--tlo .projekt__tresc{max-width:min(58%,24rem)}
}
.projekt--tlo .projekt__kadr::after{
  background:
    linear-gradient(180deg,rgba(28,7,12,.12) 0%,rgba(28,7,12,.5) 42%,rgba(28,7,12,.93) 100%),
    linear-gradient(90deg,rgba(28,7,12,.6) 0%,rgba(28,7,12,.2) 52%,rgba(28,7,12,0) 100%);
}
.projekt--tlo .projekt__opis{color:rgba(247,243,236,.86)}

/* ---- Podstrona uslugi: wstep i tresc zakresow w jednym bloku ----------
   Wstep lamal sie po 565 pikselach, a opisy zakresow pod nim po 847,
   wiec dwa akapity o tym samym o czym mowia mialy rozna szerokosc.
   Wstep dostaje dokladnie te same wciecia co tekst rozwinietej pozycji. */
.prose.usluga__wstep{
  max-width:none;
  padding-left:calc(var(--t-sm) * 2.6 + clamp(1rem,2vw,1.75rem));
  padding-right:clamp(1.5rem,3vw,3rem);
}
@media (max-width:40em){
  .prose.usluga__wstep{padding-left:0;padding-right:0}
}

/* Naglowek grupy klientow lamal sie na trzy wiersze. Klientka prosi
   o dwa, wiec stopien schodzi o wlos, a kolumna zostaje bez zmian. */
.sector__naglowek{font-size:clamp(1.6rem,1.05rem + 1.65vw,2.55rem)}

/* Kafel publikacji klika sie w calosci, razem z napisem "Czytaj wiecej".
   Odnosnik tytulu rozciaga sie na cale pole, wiec nie trzeba zagniezdzac
   dwoch odnosnikow w jednym kaflu. */
.publikacja{position:relative}
.publikacja__link::after{content:"";position:absolute;inset:0;z-index:1}
.publikacja:hover .publikacja__wiecej{color:var(--gold)}
.publikacja__wiecej{transition:color .3s var(--ease)}

/* Akapit wstepu nie ma juz wlasnego limitu szerokosci: blok jest ten sam
   co przy opisach zakresow, wiec i wiersz ma byc tej samej dlugosci. */
.prose.usluga__wstep p{max-width:none}

/* Naglowek grupy klientow: bez wyrownywania dlugosci wierszy i bez
   wlasnego limitu, inaczej "Inwestorzy wchodzacy na polski rynek"
   rozpadal sie na trzy wiersze zamiast dwoch. */
.sector__naglowek{max-width:24ch;text-wrap:pretty}

/* ---- Naglowek podstrony: zdanie zlote jako osobny wiersz siatki -------
   Blok z okresleniami po prawej ma zaczynac sie rowno z akapitem po
   lewej, a nie ze zdaniem zlotym nad nim. Zeby oba zaczynaly sie w tym
   samym wierszu, zdanie zlote dostaje wlasny wiersz. */
@media (min-width:56.3125em){
  .phero__podtytul{grid-column:1;grid-row:3}
  .phero__grid .phero__tresc{grid-row:4}
  .phero__grid--pod .phero__aside{grid-column:2;grid-row:4;margin-top:0}
}
@media (max-width:56.25em){
  .phero__podtytul{grid-column:1;grid-row:auto}
  /* Na telefonie kolejnosc ma isc za trescia: zdanie zlote i akapit, a
     dopiero pod nimi blok z okresleniami. Wariant "pod tytulem" ustawia
     mu na sztywno trzeci wiersz, wiec trzeba go tutaj zdjac. */
  .phero__grid--pod .phero__aside{grid-column:1;grid-row:auto;margin-top:clamp(2rem,4vw,3rem)}
}

/* ---- Zespol ----------------------------------------------------------- */

/* Naglowek nad portretami o stopien wyzej, tak jak prosila klientka. */
.partnerzy-naglowek .sec-head__title{
  font-size:clamp(2rem,1.3rem + 2.1vw,3.15rem);
  max-width:22ch;
}

/* Portrety o polowe wieksze i wysrodkowane w rzedzie. Przy dwoch osobach
   siatka czterokolumnowa spychala je do lewej krawedzi. */
@media (min-width:48rem){
  .partnerzy{
    grid-template-columns:repeat(2,minmax(0,28rem));
    justify-content:center;
    gap:clamp(2rem,4vw,3.5rem);
  }
}

/* Podpis pod portretem stoi nieruchomo. Przesuwal sie przy najechaniu,
   co przy dwoch nazwiskach obok siebie bylo wyraznie widac. */
.partner:hover .partner__opis{transform:none}

/* "Jak pracujemy razem" wedlug szkicu: opis po lewej, cztery elementy
   w siatce dwa na dwa po prawej, rozdzielone wloskowymi kreskami, ktore
   skladaja sie w krzyz. */
.kultura__elementy{
  --rynna-kultury:clamp(1.5rem,2.8vw,2.5rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--rynna-kultury);row-gap:0;
}
.kultura__element{
  position:relative;display:block;
  /* ciasniej, zeby kolumna z krokami miala podobna wysokosc co tekst */
  padding:clamp(.75rem,1.35vw,1.15rem) 0;
  border:0;
}
.kultura__element:first-child,
.kultura__element:nth-child(2){padding-top:0}
.kultura__element:nth-child(n+3){border-top:1px solid var(--line)}
.kultura__element:nth-child(2n)::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--rynna-kultury) / -2);width:1px;background:var(--line);
}
.kultura__nr{
  display:block;grid-row:auto;
  font-family:var(--f-display);font-variant-numeric:tabular-nums;
  color:var(--gold);font-size:clamp(1.1rem,.95rem + .5vw,1.45rem);
  line-height:1;margin-bottom:.7rem;
}
.kultura__tytul{
  grid-column:auto;margin:0 0 .6rem;max-width:16ch;
  font-size:clamp(1.05rem,.92rem + .5vw,1.35rem);line-height:1.25;
}
.kultura__opis-el{
  grid-column:auto;max-width:34ch;
  font-size:var(--t-sm);line-height:1.6;color:var(--tx-muted);
}
@media (max-width:40em){
  .kultura__elementy{grid-template-columns:minmax(0,1fr)}
  .kultura__element:nth-child(2){padding-top:clamp(1.1rem,2vw,1.7rem)}
  .kultura__element:nth-child(n+2){border-top:1px solid var(--line)}
  .kultura__element:nth-child(2n)::before{content:none}
}

/* Blok okreslen po prawej ma konczyc sie tam, gdzie akapit po lewej.
   Wiersze sa nizsze o tyle, ile wynosila roznica wysokosci. */
.phero__grid--pod .facts__row{padding-block:.6rem}

/* Sekcja o kulturze ma miescic sie na jednym ekranie, tak jak na szkicu.
   Schodzimy z odstepami sekcji, ze stopniem naglowka i z interlinia
   opisu; tresc zostaje w calosci. */
/* Uwaga na szczegolowosc: pierwszy selektor z :has ma ja wyzsza niz sama
   klasa sekcji, wiec to tutaj ustawia sie odstep, a nie w dopiskach
   nizej w pliku. */
.section.section--warm.section--line:has(.kultura),
.kultura-sekcja{padding-block:clamp(1.75rem,.8rem + 1.7vw,2.6rem)}
.kultura__naglowek{font-size:clamp(1.9rem,1.2rem + 2.2vw,3.1rem);max-width:14ch}
.kultura__kreska{margin:.85rem 0 .95rem}
.kultura__tekst{font-size:.92rem;line-height:1.62;max-width:46ch}
.kultura__tekst p{margin-bottom:.8rem}
.kultura__opis .mt-l{margin-top:clamp(1.25rem,2vw,2rem)}
.kultura__haslo{margin-top:clamp(1.75rem,3vw,2.5rem)}

/* jeszcze o wlos nizej, zeby sekcja zmiescila sie w oknie 900 pikseli */
.kultura__haslo{margin-top:clamp(1.1rem,1.9vw,1.5rem)}
.kultura-sekcja{padding-block:clamp(2.75rem,1.3rem + 2.7vw,4.25rem)}

/* ---- Kariera: "Miejsce, w ktorym ludzie wspieraja sie nawzajem" -------
   Tekst idzie przez cala szerokosc pod naglowkiem, a cztery elementy
   wspolpracy stoja pod nim obok siebie. Kazdy ma zlota ramke, po ktorej
   plynie swiatlo: efekt jest wylaczony, gdy uzytkownik prosi
   o ograniczenie ruchu. */
.kariera-jak__tekst{
  max-width:none;text-align:center;margin-inline:auto;
  font-size:var(--t-lead);line-height:1.7;
}
.kariera-jak__tekst p{margin-bottom:.9rem}
.kariera-jak__tekst p:last-child{margin-bottom:0}
.kariera-jak__nad{
  display:flex;justify-content:center;
  margin-top:clamp(2rem,4vw,3.25rem);
}
.kariera-jak__nad .eyebrow{margin-bottom:0}

.elementy--rzad{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:clamp(1rem,1.8vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.25rem);
  list-style:none;padding:0;
}
@media (max-width:64em){
  .elementy--rzad{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:40em){
  .elementy--rzad{grid-template-columns:minmax(0,1fr)}
}
.element--ramka{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.25rem,2.2vw,1.75rem);
  display:flex;flex-direction:column;gap:.75rem;
  background:transparent;border:0;
}
/* Swiatlo obiegajace ramke: stozkowy gradient obracany w kolko. */
.element--ramka::before{
  content:"";position:absolute;left:50%;top:50%;
  width:220%;aspect-ratio:1;translate:-50% -50%;z-index:-2;
  background:conic-gradient(from 0deg,
    rgba(168,132,60,.13) 0deg, rgba(168,132,60,.13) 250deg,
    rgba(200,164,96,.5) 300deg, rgba(168,132,60,.13) 340deg,
    rgba(168,132,60,.13) 360deg);
  animation:verity-obieg 9s linear infinite;
}
.element--ramka:nth-child(2)::before{animation-delay:-1.75s}
.element--ramka:nth-child(3)::before{animation-delay:-3.5s}
.element--ramka:nth-child(4)::before{animation-delay:-5.25s}
/* Wnetrze kafla zaslania srodek gradientu, wiec zostaje sam rant. */
.element--ramka::after{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--paper-deep,#EDE6D8);
}
.section--warm .element--ramka::after{background:#FBF8F2}
@keyframes verity-obieg{to{rotate:1turn}}
@media (prefers-reduced-motion:reduce){
  .element--ramka::before{animation:none;background:rgba(168,132,60,.55)}
}
.element--ramka .element__nr{
  font-family:var(--f-display);font-variant-numeric:tabular-nums;
  color:var(--gold);font-size:clamp(1rem,.9rem + .4vw,1.25rem);line-height:1;
}
.element--ramka .element__tytul{
  margin:0 0 .45rem;font-size:clamp(1rem,.9rem + .45vw,1.28rem);line-height:1.25;
}
.element--ramka .element__opis{
  margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--tx-muted);
}

/* ---- Kariera: dwie ostatnie sekcje nizsze -----------------------------
   Naglowek spisu stanowisk schodzi ze stopnia d-1 na skale sekcji, przez
   co przestaje sprawiac wrazenie pogrubionego, a caly pas jest nizszy.
   Formularz ma zmiescic sie na jednym ekranie razem z panelem obok. */
.rekrutacje__naglowek{
  font-size:clamp(1.75rem,1.15rem + 1.9vw,2.7rem);
  font-weight:500;max-width:11ch;
}
#rekrutacje{padding-block:clamp(2.5rem,1.4rem + 2.4vw,4rem)}

.aplikacja__panel{padding-block:clamp(2rem,1.4rem + 1.6vw,2.75rem)}
.aplikacja__formularz{padding-block:clamp(1.5rem,1.1rem + 1.2vw,2rem)}
.aplikacja__formularz form{gap:1.25rem}
.aplikacja__formularz .field textarea{min-height:5.5rem}

/* ---- Kontakt: formularz i dane rowno po obu stronach ------------------
   Naglowek ze zdaniem stoi nad obiema kolumnami, wiec formularz i dane
   kontaktowe zaczynaja sie w tym samym miejscu. Odstepy sa mniejsze,
   zeby cala sekcja zmiescila sie na jednym ekranie. */
.kontakt-uklad{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:56.3125em){
  .kontakt-uklad{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:var(--gutter);row-gap:clamp(1.5rem,2.5vw,2.25rem);
    align-items:start;
  }
  .kontakt-uklad__naglowek{grid-column:1 / -1;grid-row:1}
  .kontakt-uklad__formularz{grid-column:1;grid-row:2}
  .kontakt-uklad__dane{grid-column:2;grid-row:2}
}
.kontakt-uklad__lead{margin-bottom:0;max-width:60ch}
.kontakt-uklad__formularz .form__body{row-gap:1.15rem}
.kontakt-uklad__formularz .field textarea{min-height:5rem}
.kontakt-sekcja{padding-block:clamp(2.75rem,1.3rem + 2.7vw,4.25rem)}

/* Ostatnie doprecyzowanie sekcji kontaktu: ciasniejszy rytm formularza,
   karta z danymi rozciagnieta do jego wysokosci, zeby obie kolumny
   konczyly sie w tym samym miejscu. */
.kontakt-sekcja{padding-block:clamp(2.5rem,1.2rem + 2.4vw,3.75rem)}
.kontakt-uklad__formularz .form__body{row-gap:.75rem}
.kontakt-uklad__formularz .consent{margin-top:.5rem;padding-top:1rem}
.kontakt-uklad__formularz .consent p,
.kontakt-uklad__formularz .consent label{font-size:.78rem;line-height:1.5}
@media (min-width:56.3125em){
  .kontakt-uklad__dane{
    align-self:stretch;display:flex;flex-direction:column;
    justify-content:space-between;
  }
}

.kontakt-sekcja{padding-block:clamp(2.25rem,1.05rem + 2.1vw,3.25rem)}
@media (min-width:56.3125em){
  .kontakt-uklad{row-gap:clamp(1rem,1.6vw,1.5rem)}
  /* Karta z danymi nie rozciaga sie juz na wysokosc formularza, bo
     odstepy miedzy blokami robily sie przez to bardzo duze. Zamiast tego
     jedzie razem z przewijaniem, dopoki formularz obok sie nie skonczy. */
  .kontakt-uklad .kontakt-uklad__dane{
    align-self:start;display:block;
    position:sticky;top:calc(var(--hdr-h) + clamp(1.5rem,3vw,3rem));
  }
}
@media (prefers-reduced-motion:reduce){
  .kontakt-uklad .kontakt-uklad__dane{position:static}
}

/* Karta z danymi zaczyna sie dokladnie na wysokosci pierwszego pola
   formularza: pierwszy blok nie ma juz wlasnego odstepu u gory. */
.kontakt-uklad__dane > :first-child{padding-top:0;margin-top:0;border-top:0}
.kontakt-sekcja{padding-block:clamp(2rem,.9rem + 1.9vw,2.9rem)}

/* Na telefonie siatka portretow miala repeat(auto-fill,minmax(0,1fr)),
   co daje kolumny szerokosci jednego piksela: zdjecia partnerek nie
   byly widoczne w ogole. Jedna kolumna na pelna szerokosc. */
@media (max-width:47.99rem){
  .partnerzy{grid-template-columns:minmax(0,1fr)}
}

/* Na telefonie kafelek z ramka stoi obok naglowka, tak jak prosila
   klientka. Naglowek dostaje w tej jednej sekcji mniejszy stopien,
   inaczej w polowie szerokosci lamalby sie po jednym slowie. */
@media (max-width:56.25em){
  #o-nas .sec-head{
    /* wiecej powietrza miedzy naglowkiem a kafelkiem, bo staly za blisko */
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    column-gap:clamp(1.6rem,6.5vw,2.5rem);align-items:start;
  }
  #o-nas .sec-head > .eyebrow{grid-column:1 / -1;grid-row:1}
  #o-nas .sec-head__title{
    grid-column:1;grid-row:2;
    font-size:clamp(1.5rem,1.05rem + 2.1vw,2.1rem);max-width:none;
  }
  #o-nas .sec-head__aside{grid-column:2;grid-row:2}
  #o-nas .sec-head__aside > *:first-child,
  #o-nas .sec-head__aside > .lead:first-child{margin-top:.35rem}
  #o-nas .sec-head__aside .lead{font-size:.86rem;line-height:1.55;text-align:left}
}

/* ---- Kafle uslug: odstep miedzy opisem a wyliczeniem -----------------
   W ukladzie z subgrid marginesy byly wyzerowane, zeby wiersze kafli
   stanely rowno. Margines opisu wraca: jest taki sam w kazdym kaflu,
   wiec rownanie wierszy zostaje. */
@supports (grid-template-rows: subgrid){
  .grid--rowsub>.svc .svc__desc{margin-bottom:1.15rem}
}

/* ---- Podstrona uslugi: ciasniejszy rytm tekstu ----------------------- */
.faq--zakres .faq__a-inner .prose p{margin-bottom:.7rem}
.faq--zakres .faq__a-inner{line-height:1.62}
.prose.usluga__wstep p{margin-bottom:.7rem}

/* ---- Zespol: blok okreslen rowno ze zdaniem zlotym -------------------
   Prawa kolumna zaczyna sie na wysokosci zdania "Rozne doswiadczenia",
   a nie akapitu pod nim, a pismo jest zblizone do tego po lewej. */
@media (min-width:56.3125em){
  /* Blok zaczyna sie na wysokosci zdania zlotego, ale rozciaga sie na
     oba wiersze. Gdyby siedzial tylko w wierszu ze zdaniem, ten wiersz
     musialby urosnac do jego wysokosci i akapit po lewej zjechalby
     o kilkadziesiat pikselow w dol. */
  .phero__grid--pod .phero__aside{
    grid-column:2;grid-row:3 / span 2;align-self:start;margin-top:0;
  }
}
/* Pismo po prawej w tej samej skali co akapit po lewej. */
.phero__grid--pod .facts__row dt{font-size:.82rem;letter-spacing:.12em}
.phero__grid--pod .facts__row dd{font-size:var(--t-lead);line-height:1.45}
.phero__grid--pod .facts__row{padding-block:.85rem}

/* ---- Zespol: portrety blizej naglowka -------------------------------- */
.partnerzy-naglowek{padding-block:clamp(2.5rem,1.2rem + 2.4vw,3.75rem)}
.partnerzy-naglowek .sec-head{padding-bottom:clamp(1.25rem,2vw,2rem)}
.partnerzy{margin-top:0}

/* Naglowek "Jak pracujemy razem" wraca do duzej skali, tak jak na szkicu
   klientki. Odstepy sekcji sa za to ciasniejsze, zeby calosc nadal
   miescila sie na jednym ekranie. */
.kultura__naglowek{font-size:clamp(2.3rem,1.35rem + 3.1vw,4.35rem);max-width:11ch;line-height:1.08}
.kultura-sekcja{padding-block:clamp(2.3rem,.95rem + 2.3vw,3.45rem)}
/* Tekst po lewej ma zajmowac tyle samo miejsca co cztery kroki po prawej,
   wiec stopien idzie w gore do skali tekstu ciaglego. */
.kultura__tekst{font-size:1.06rem;line-height:1.7}
.kultura__tekst p{margin-bottom:.85rem}

/* ---- Centrum wiedzy: znak, ze rzad publikacji przewija sie w bok -----
   Na telefonie pasek przewijania bywa niewidoczny, wiec pod rzedem stoi
   krotka wskazowka, a prawa krawedz rzedu jest wygaszona. */
.publikacje__wskazowka{
  display:none;margin:.85rem 0 0;
  font-size:var(--t-xs);letter-spacing:.06em;color:var(--tx-faint);
  align-items:center;gap:.5rem;
}
.publikacje__wskazowka .ico{width:1rem;height:1rem;animation:verity-przesun 2.4s ease-in-out infinite}
@keyframes verity-przesun{0%,100%{transform:translateX(0)}50%{transform:translateX(.35rem)}}
@media (pointer:coarse),(max-width:47.99em){
  .publikacje__wskazowka{display:flex}
  .publikacje{
    -webkit-mask:linear-gradient(to right,#000 88%,rgba(0,0,0,.3) 100%);
    mask:linear-gradient(to right,#000 88%,rgba(0,0,0,.3) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .publikacje__wskazowka .ico{animation:none}
}

/* ---- Kariera: naglowek z boku, tresc obok ----------------------------
   Naglowek lamie sie na dwa wiersze i stoi w wezszej kolumnie po lewej.
   Tekst i cztery elementy wspolpracy zajmuja kolumne obok i maja te same
   krawedzie, wiec czytaja sie jak jeden blok. */
.kariera-jak__uklad{display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
@media (min-width:56.3125em){
  .kariera-jak__uklad{
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    column-gap:var(--gutter);align-items:stretch;
  }
  /* Tekst po lewej ma zwykly, ciasny rytm akapitow. To spis krokow po
     prawej rozklada sie na wysokosc kolumny, a nie odwrotnie: wczesniej
     to tekst byl rozciagany i miedzy akapitami robily sie duze dziury. */
  .kariera-jak__lewa{display:flex;flex-direction:column}
  .kariera-jak__lewa .kariera-jak__tekst{flex:0 0 auto;display:block}
}
/* Naglowek i tekst siedza w jednej kolumnie po lewej, kafle w drugiej.
   Obie kolumny zaczynaja sie na tej samej wysokosci. */
.kariera-jak__lewa{min-width:0}
.kariera-jak__lewa .kariera-jak__tekst{margin-top:clamp(1.25rem,2.2vw,1.9rem)}
/* Naglowek ma zmiescic sie w dwoch wierszach w swojej kolumnie, wiec
   stopien jest dobrany do jej szerokosci. */
.kariera-jak__naglowek{
  margin:0;text-align:left;
  /* Stopien skaluje sie stromo, zeby naglowek trzymal dwa wiersze
     takze przy 1200 pikselach, gdzie kolumna jest wyraznie wezsza. */
  font-size:clamp(1.5rem,-0.68rem + 3.37vw,2.35rem);
  line-height:1.18;max-width:none;text-wrap:pretty;
}
.kariera-jak__prawa{min-width:0}
.kariera-jak__tekst{
  max-width:none;margin-inline:0;text-align:left;
  font-size:var(--t-body);line-height:1.68;
}
.kariera-jak__nad{justify-content:flex-start;margin-top:clamp(1.5rem,2.6vw,2.25rem)}
@media (min-width:56.3125em){
  .elementy--rzad{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Na podstronach bez ciemnego naglowka, jak panel klienta, pasek ma od
   razu bordowe tlo, ale logo zostawalo ciemne, bo brakowalo go w liscie
   stanow jasnych. */
.hdr--pelny .logo{color:var(--chalk)}
.hdr--pelny .logo__sub{color:rgba(243,238,228,.62)}

/* ---- Strona glowna: "Partner, a nie dostawca uslug" na jednym ekranie
   Uklad ze szkicu klientki: naglowek, pod nim zwarty tekst i cztery
   punkty, a obok kadr o tej samej wysokosci co kolumna z trescia. */
.partner-sekcja{padding-block:clamp(1.75rem,.8rem + 1.8vw,2.4rem)}
/* Naglowek idzie przez cala szerokosc sekcji i miesci sie w jednym
   wierszu, w pelnej skali. W polowie szerokosci lamal sie na dwa. */
.partner-uklad__naglowek{grid-column:1 / -1}
.partner-uklad__naglowek h2{
  /* Polowa skali d-1: przy tym stopniu napis miesci sie w jednej linii
     na kazdej szerokosci ekranu biurkowego, a na telefonie moze zlamac
     sie normalnie. */
  font-size:clamp(1.6rem,.7rem + 2.4vw,3rem);
  line-height:1.14;max-width:none;text-wrap:pretty;
}
.partner-uklad__tresc .prose.measure{
  font-size:.89rem;line-height:1.56;margin-bottom:clamp(1rem,1.6vw,1.4rem)!important;
}
.partner-uklad__tresc .prose.measure p{margin-bottom:.6rem}
.partner-uklad__tresc .feats{gap:clamp(.7rem,1.2vw,.95rem)}
.partner-uklad__tresc .feat{gap:.85rem}
.partner-uklad__tresc .feat h3{font-size:.97rem;margin-bottom:.15rem}
.partner-uklad__tresc .feat p{font-size:.78rem;line-height:1.45}
.partner-uklad__tresc .mt-l{margin-top:clamp(.9rem,1.5vw,1.25rem)}
/* Rownanie wysokosci wlacza sie dopiero na szerokich ekranach. Ponizej
   1200 pikseli kolumna z tekstem robi sie waska i wysoka, a kadr musialby
   przyjac bardzo waskie, nienaturalne przyciecie. */
@media (min-width:75em){
  /* Kolumna z trescia ma zadana wysokosc, wiec kadr obok jest wyzszy,
     a tekst dostaje wiecej powietrza: odstepy miedzy akapitem, punktami
     i odnosnikiem rozkladaja sie na cala te wysokosc. */
  .partner-uklad__tresc{
    display:flex;flex-direction:column;justify-content:space-between;
    min-height:clamp(34rem,48.5rem,48.5rem);
  }
  .partner-uklad__tresc .feats{
    flex:1;display:flex;flex-direction:column;justify-content:space-evenly;
    gap:clamp(.9rem,1.6vw,1.4rem);
  }
  /* Kadr ma konczyc sie tam, gdzie tekst obok. Wysokosc zero wyjmuje go
     z liczenia wysokosci wiersza, a minimalna wysokosc kaze mu wypelnic
     ten wiersz, wiec o wysokosci decyduje kolumna z trescia. */
  .partner-uklad__kadr{align-self:stretch;display:block;height:0;min-height:100%}
  .partner-uklad__kadr picture,
  .partner-uklad__kadr img{height:100%;object-fit:cover}
  .partner-uklad{row-gap:clamp(.9rem,1.5vw,1.35rem)}
}

/* ---- Naroza ramki takze przy szerokim tekscie obok naglowka ----------
   Naroza rysowaly sie tylko przy akapicie z klasa lead, wiec w sekcjach,
   gdzie obok naglowka stoi szerszy blok tekstu, znikaly. Odstep jest ten
   sam co dotad: poltorej firety od krawedzi pola tekstu. */
.sec-head__aside .sec-head__szeroki{
  --luz-ramki:clamp(.95rem,1.35vw,1.3rem);
  position:relative;
}
.sec-head__aside .sec-head__szeroki::before,
.sec-head__aside .sec-head__szeroki::after{
  content:"";position:absolute;pointer-events:none;
  width:clamp(1.35rem,2vw,1.85rem);height:clamp(1.35rem,2vw,1.85rem);
  border:1px solid rgba(168,132,60,.6);
}
.sec-head__aside .sec-head__szeroki::before{
  top:calc(var(--luz-ramki) * -1);left:calc(var(--luz-ramki) * -1);
  border-right:0;border-bottom:0;
}
.sec-head__aside .sec-head__szeroki::after{
  bottom:calc(var(--luz-ramki) * -1);right:calc(var(--luz-ramki) * -1);
  border-left:0;border-top:0;
}
.on-dark .sec-head__aside .sec-head__szeroki::before,
.on-dark .sec-head__aside .sec-head__szeroki::after{border-color:rgba(168,132,60,.5)}
.sec-head--center .sec-head__aside .sec-head__szeroki::before,
.sec-head--center .sec-head__aside .sec-head__szeroki::after{display:none}

/* W trzecim kadrze "Dla kogo pracujemy" schody stoja przy prawej
   krawedzi zdjecia, wiec przy kwadratowym przycieciu kadr trzyma sie
   prawej strony, zamiast srodka. */
.sektory-kadry--kwadrat .sektory-kadr:nth-child(3) img,
.sektory-kadry--kwadrat .sektory-kadr:nth-child(3) picture{
  object-position:right center;
}

/* Puste pole nad kreska w stopce bylo za duze: schodzi o polowe. */
@media (min-width:48rem){
  .ftr__top{padding-bottom:clamp(1.75rem,1rem + 2.4vw,3rem)}
}

/* Podpis wykonawcy stoi w prawym dolnym rogu, pod danymi rejestrowymi. */
.ftr__autor{
  margin:.75rem 0 1.25rem;text-align:right;
  font-size:.6875rem;letter-spacing:.06em;
  /* jasniejszy niz dane rejestrowe, zeby podpis byl czytelny */
  color:rgba(243,238,228,.66);
}
@media (max-width:40em){
  .ftr__autor{text-align:left}
}

/* ---- Sektory: wieksze kadry i czytelniejszy spis obszarow ------------
   Kolumna ze zdjeciem dostaje wiecej miejsca, a kadr troche wiecej
   wysokosci. Spis obszarow pod opisem szedl najdrobniejszym pismem
   w calej sekcji, wiec podnosimy go blisko tekstu ciaglego. */
@media (min-width:56.3125em){
  .sector{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
  /* W co drugim wierszu kadr przechodzi do prawej kolumny, wiec szersza
     kolumna musi zamienic sie miejscami razem z nim. Bez tego zdjecie
     w srodkowym wierszu bylo wyraznie mniejsze od pozostalych. */
  .sector:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
  .sector__media{align-self:center}
  .sector__media img{width:100%;height:auto;display:block}
}
/* Spis obszarow pod opisem szedl najjasniejszym z trzech odcieni tekstu.
   Schodzi na ton tekstu drugoplanowego, czyli ten sam co opisy. */
.sector__punkty{font-size:.94rem;margin-bottom:1.6rem;color:var(--tx-muted)}
.sector__punkty li{margin-bottom:.45rem;padding-left:1.25rem;color:var(--tx-muted)}

/* Kafle wspolpracy: rowna wysokosc i cichszy rant. Swiatlo obiegajace
   ramke bylo za mocne, wiec schodzi z krycia i zwalnia. */
.element--ramka{height:100%}

/* ---- Kariera: cztery kroki jako spis, jeden pod drugim ---------------
   Klientka prosi o tekst zamiast kafli w ramkach. Zostaje sam podzial:
   zlota liczba, nazwa i zdanie, a pozycje rozdziela wloskowa kreska.
   Spis rozklada sie na cala wysokosc kolumny, wiec konczy sie rowno
   z tekstem po lewej. */
/* Kolumna z krokami jest pudelkiem elastycznym, wiec spis wypelnia to,
   co zostaje pod nadkresleniem. Wysokosc sto procent liczylaby sie od
   calej kolumny i spis wychodzilby pod nia o wysokosc nadkreslenia. */
.kariera-jak__prawa{display:flex;flex-direction:column;min-width:0}
.elementy--rzad{
  grid-template-columns:minmax(0,1fr);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:0;flex:1;height:auto;margin-top:clamp(1rem,1.8vw,1.5rem);
}
.element--ramka{
  height:auto;overflow:visible;isolation:auto;background:transparent;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.25rem clamp(.7rem,1.1vw,1rem);
  /* ciasniej, zeby spis krokow konczyl sie rowno z tekstem po lewej */
  padding:clamp(.45rem,.8vw,.7rem) 0;
  border-top:1px solid var(--line);
}
/* Spis ma wloskowa kreske u gory (regula .elementy), wiec pierwsza
   pozycja potrzebuje takiego samego odstepu od niej jak pozostale od
   swoich kresek. Wczesniej tekst stal tuz pod linia. */
.element--ramka:first-child{border-top:0;padding-top:clamp(.45rem,.8vw,.7rem)}
.element--ramka:last-child{padding-bottom:0}
/* swiatlo obiegajace ramke nie jest juz potrzebne */
.element--ramka::before,
.element--ramka::after{content:none;display:none}
.element--ramka .element__nr{
  grid-row:1 / span 2;align-self:start;
  font-family:var(--f-display);font-variant-numeric:tabular-nums;
  color:var(--gold);font-size:clamp(.95rem,.85rem + .35vw,1.15rem);
  line-height:1.35;
}
.element--ramka > div{grid-column:2}
.element--ramka .element__tytul{
  margin:0 0 .3rem;max-width:22ch;
  font-size:clamp(1rem,.9rem + .45vw,1.25rem);line-height:1.25;
}
.element--ramka .element__opis{
  margin:0;max-width:none;
  /* stopien dobrany tak, zeby kazdy opis miescil sie w dwoch wierszach */
  font-size:.8rem;line-height:1.5;color:var(--tx-muted);
}
@media (max-width:64em){
  .elementy--rzad{grid-template-columns:minmax(0,1fr)}
}


/* ---- Naroza ramki: jedna zasada we wszystkich sekcjach ---------------
   Przy akapicie z klasa lead naroza doklejaly sie do pierwszego
   i ostatniego wiersza, a przy szerokim bloku stały w rogach pola
   tekstu. Przez to raz obejmowaly cale zdanie, raz tylko jego koncowke.
   Wszedzie obowiazuje teraz ta druga zasada: naroza stoja w rogach pola
   tekstu, czyli obejmuja najdluzszy wiersz. */
.sec-head__aside .lead::before{
  top:calc(var(--luz-ramki) * -1);
  left:calc(var(--luz-ramki) * -1);
}
.sec-head__aside .lead::after{
  bottom:calc(var(--luz-ramki) * -1);
  right:calc(var(--luz-ramki) * -1);
}

/* Naglowek sekcji z case studies o stopien wyzej, na prosbe klientki. */
.dowody-sekcja .sec-head__title{font-size:clamp(2rem,1.15rem + 3vw,3.6rem)}

/* ---- "Dla kogo pracujemy": kadr i opis w jednym kaflu ----------------
   Zdjecie jest teraz pierwszym wierszem kafla, wiec na telefonie kolejnosc
   to kadr, opis, kadr, opis, a na szerokim ekranie rzad zdjec nadal stoi
   nad rzedem opisow, bo wiersze siatki sa wspolne. */
.sektory-siatka .sektory-kadr{
  display:block;overflow:hidden;line-height:0;
  aspect-ratio:1/1;background:var(--paper-deep);
  margin-bottom:clamp(1.1rem,1.8vw,1.5rem);
}
.sektory-siatka .sektory-kadr img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out);
}
.sektory-siatka .svc:hover .sektory-kadr img{transform:scale(1.03)}
/* w trzecim kadrze schody stoja przy prawej krawedzi */
.sektory-siatka .svc:nth-child(3) .sektory-kadr img{object-position:right center}
@media (prefers-reduced-motion:reduce){
  .sektory-siatka .svc:hover .sektory-kadr img{transform:none}
}


/* Nadkreslenie sekcji o kulturze stoi we wlasnym wierszu siatki, wiec
   spis czterech elementow po prawej zaczyna sie dokladnie na wysokosci
   naglowka, a nie nad nim. */
@media (min-width:64rem){
  .kultura{grid-template-rows:auto auto 1fr}
  .kultura__nad{grid-column:1;grid-row:1}
  .kultura__tytul-blok{grid-column:1;grid-row:2}
  .kultura__opis{grid-column:1;grid-row:3}
  /* spis zaczyna sie na wysokosci pierwszego akapitu */
  .kultura__elementy{grid-column:2;grid-row:3}
}
.kultura__nad .eyebrow{margin-bottom:0}
.kultura__opis .kultura__naglowek{margin-top:.75rem}
@media (min-width:64rem){
  .kultura__opis .kultura__naglowek{margin-top:0}
  .kultura{row-gap:clamp(.5rem,.9vw,.75rem)}
}

/* ---- Kariera: ciasniejszy tekst, kroki w stalym ukladzie -------------
   Nazwa kroku miesci sie w jednym wierszu, opis w dwoch. */
.kariera-jak__tekst p{margin-bottom:.75rem}
.kariera-jak__tekst p:last-child{margin-bottom:0}
.element--ramka .element__tytul{max-width:none}
.element--ramka .element__opis{max-width:none}

/* ---- Zespol: cztery elementy rownej wielkosci ------------------------
   Wiersze siatki dopasowywaly sie do dlugosci opisow, wiec gorny rzad
   byl o siedemdziesiat pikseli nizszy od dolnego. Teraz oba sa rowne,
   a pismo opisow jest takie samo jak w tekscie po lewej. */
.kultura__elementy{grid-auto-rows:1fr}
.kultura__element{align-content:start}
.kultura__opis-el{font-size:.9rem;line-height:1.6}

/* ---- Kariera: sekcja "Aplikuj do Verity" w calosci kremowa ----------
   Ciemne pole po lewej znika, wiec napisy wracaja na ciemne pismo,
   a oba pola rozdziela wloskowa kreska zamiast roznicy tla. */
.aplikacja{background:var(--paper-warm,var(--paper))}
.aplikacja__panel{
  background:transparent;color:var(--tx);
}
.aplikacja__panel .eyebrow{color:var(--gold)}
/* Napis w kolorze marki, na prosbe klientki. */
.aplikacja__naglowek{color:var(--burgundy)}
.aplikacja__zdanie{color:var(--tx-muted)}
@media (min-width:62rem){
  .aplikacja__formularz{border-left:1px solid var(--line)}
}
@media (max-width:61.99rem){
  .aplikacja__formularz{border-top:1px solid var(--line)}
}

/* ---- Kontakt: karta z danymi wedlug szkicu klientki ------------------
   Dwie grupy rozdzielone wloskowa kreska: telefon z adresem poczty pod
   nadkresleniem "Kontakt" i adres biura pod "Biuro". Pod nimi przycisk
   z obwodka. */
.kontakt-uklad__dane{display:block}
.kontakt-uklad__dane .contact-block{
  padding-bottom:clamp(1.35rem,2.4vw,1.9rem);
  margin-bottom:clamp(1.35rem,2.4vw,1.9rem);
  border-bottom:1px solid var(--line);
}
.kontakt-uklad__dane .contact-block h2{margin-bottom:.9rem}
.kontakt-uklad__dane .contact-block .big{
  display:block;font-size:clamp(1.15rem,.95rem + .55vw,1.5rem);
  line-height:1.5;color:var(--tx);
}
.kontakt-uklad__dane .contact-block .big:hover{color:var(--gold)}
.kontakt-uklad__dane .contact-block address{line-height:1.75}
.kontakt-uklad__cta .btn{
  width:100%;justify-content:space-between;
  /* obwodka i pismo w zlocie marki, tak jak na szkicu */
  border-color:rgba(168,132,60,.55);color:var(--gold);
}
.kontakt-uklad__cta .btn:hover{border-color:var(--gold);background:rgba(168,132,60,.08)}

/* Zdanie zamykajace sekcje o kulturze w bordzie marki, tak jak naglowek
   sekcji z formularzem na Karierze. */
.kultura__haslo{color:var(--burgundy)}

/* ---- Telefon: tekst pod naglowkiem sekcji stoi w osi kolumny ---------
   Gdy blok z narozami schodzi pod naglowek, jest wezszy od kolumny, wiec
   ustawiamy go na srodku i skladamy do osi. Naroza trzymaja sie wtedy
   tekstu, a nie krawedzi pustego pola. */
@media (max-width:56.25em){
  .sec-head__aside .lead,
  .sec-head__aside .sec-head__szeroki{
    width:fit-content;max-width:100%;margin-inline:auto;text-align:center;
  }
  /* wyjatek: sekcja "O nas", gdzie kafelek stoi obok naglowka */
  #o-nas .sec-head__aside .lead{margin-inline:0;text-align:left;width:auto}
}

/* ---- Naglowek artykulu: dane po prawej sieegaja do ostatniego wiersza
   tekstu po lewej. Blok konczyl sie w polowie wysokosci tytulu, przez co
   prawa kolumna wygladala na urwana. Wiersze rozkladaja sie teraz na cala
   wysokosc naglowka. */
@media (min-width:56.3125em){
  /* Wiersze tej siatki sa domniemane, wiec zamiast linii -1 podajemy
     wprost, ile wierszy blok ma objac: tytul, odstep i akapit. */
  .phero__grid:not(.phero__grid--pod) .phero__aside{
    grid-row:2 / span 3;align-self:stretch;
  }
  /* Blok zjezdza w dol w calosci, z wlasnymi odstepami miedzy wierszami.
     Rozkladanie ich na cala wysokosc rozciagalo odstepy, a mialo tylko
     obnizyc caly blok. */
  .phero__grid:not(.phero__grid--pod) .phero__aside .facts{
    flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  }
  /* Kreska u gory nalezala do calego pola, wiec po obnizeniu wierszy
     zostawala wysoko nad nimi. Przenosimy ja na pierwszy wiersz, a wszystkie
     cztery kreski maja ten sam odcien co te miedzy wierszami. */
  .phero__grid:not(.phero__grid--pod) .phero__aside .facts{border-top:0}
  .phero__grid:not(.phero__grid--pod) .phero__aside .facts__row:first-child{
    border-top:1px solid rgba(243,238,228,.09);
  }
  .phero__grid:not(.phero__grid--pod) .phero__aside .facts__row:last-child{
    border-bottom:1px solid rgba(243,238,228,.09);
  }
}

/* Kafel case study klika sie w calosci: odnosnik rozciaga sie na cale
   pole, a napis "Zobacz realizacje" stoi pod opisem. */
.dowod{position:relative}
.dowod__link{
  display:inline-flex;align-items:center;margin-top:auto;padding-top:1.1rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);transition:color .3s var(--ease);
}
.dowod__link::after{content:"";position:absolute;inset:0;z-index:1}
.dowod__wiecej{display:inline-flex;align-items:center;gap:.5rem}
.dowod__wiecej .ico{width:1rem;height:1rem;transition:transform .4s var(--ease-out)}
.dowod:hover .dowod__wiecej .ico{transform:translateX(.3rem)}
.dowod:hover .dowod__link{color:var(--gold-deep,#8C6C2E)}
.dowod__tresc{display:flex;flex-direction:column;flex:1}
@media (prefers-reduced-motion:reduce){
  .dowod:hover .dowod__wiecej .ico{transform:none}
}

/* Akapit obok naglowka skladany do lewej krawedzi, a nie w osi ramki.
   Klientka poprosila o to przy sekcji "Obszary" na podstronie Uslugi. */
.sec-head--do-lewej .sec-head__aside .lead{
  text-align:left;margin-inline:0;width:auto;max-width:none;
}
.sec-head--do-lewej .sec-head__aside .lead::before{left:calc(var(--luz-ramki) * -1)}
.sec-head--do-lewej .sec-head__aside .lead::after{right:calc(var(--luz-ramki) * -1)}

/* ---- Uslugi: blok "Obszary" w naglowku podstrony ---------------------
   Uklad taki jak w naglowku Zespolu: tytul przez cala szerokosc, pod nim
   zdanie wprowadzajace po lewej, a po prawej nadkreslenie, zdanie
   i akapit, wszystko zlozone do lewej. */
.phero__obszary{display:block}
.phero__obszary .eyebrow{margin-bottom:.9rem;color:var(--gold)}
.phero__obszary-tytul{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.28;
  color:var(--chalk);margin:0 0 .9rem;max-width:22ch;
}
.phero__obszary-tekst{
  margin:0;font-size:var(--t-sm);line-height:1.7;
  color:var(--tx-on-dark-muted);max-width:44ch;
}

/* Zdanie wprowadzajace na Uslugach lamalo sie w schodki: siedem wierszy
   o dlugosciach od 282 do 480 pikseli. Szerszy lam daje mniej wierszy
   i rowniejsza prawa krawedz. */
.page-template-page-uslugi .phero__lead{max-width:56ch;text-wrap:balance}
@media (max-width:56.25em){
  .page-template-page-uslugi .phero__lead{max-width:none}
}

/* Na Uslugach nie ma zdania zlotego, wiec wiersz zarezerwowany na nie
   zostawal pusty i odsuwal tekst od naglowka o blisko osiemdziesiat
   pikseli. Tresc wchodzi w ten wiersz. */
@media (min-width:56.3125em){
  /* Naglowek schodzi na dol swojego wiersza, tuz nad zdanie po lewej,
     a caly blok po prawej jest dosuniety do dolu, wiec konczy sie rowno
     z ostatnim wierszem tekstu po lewej. */
  .page-template-page-uslugi .phero__title{
    grid-row:2 / span 2;grid-column:1;align-self:end;margin-bottom:1.1rem;
  }
  .page-template-page-uslugi .phero__grid--pod .phero__aside{
    grid-row:3 / span 2;align-self:end;
  }
}

/* ---- Case study: podstrona jednej realizacji -------------------------
   Porzadek ze szkicu klientki: punkt wyjscia, zakres wspolpracy,
   wdrozone rozwiazania, rezultaty. Nazwa czesci z numerem stoi po lewej,
   opis po prawej, tak jak w pozostalych sekcjach serwisu. */
.case-czesc{
  display:grid;gap:clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);
}
.case-czesc:first-child{border-top:0;padding-top:0}
@media (min-width:56.3125em){
  .case-czesc{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .case-czesc--sam{grid-template-columns:minmax(0,1fr)}
}
.case-czesc__lewa{display:flex;flex-direction:column;gap:.55rem}
.case-czesc__nr{
  font-family:var(--f-display);line-height:1;color:var(--gold);
  font-size:clamp(1.1rem,.9rem + .6vw,1.5rem);
}
.case-czesc__tytul{margin:0;max-width:16ch;text-wrap:balance}
.case-czesc__tresc{max-width:62ch}
.case-czesc__tresc > :last-child{margin-bottom:0}

/* Liczby do wyroznienia nad opisem. Wchodza tylko wtedy, gdy klientka
   wpisze je przy danym case study. */
.case-liczby{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.25rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.case-liczba{display:flex;flex-direction:column;gap:.4rem}
.case-liczba__w{
  font-family:var(--f-display);font-weight:500;line-height:1;color:var(--gold);
  font-size:clamp(2rem,1.4rem + 2vw,3rem);
}
.case-liczba__o{font-size:var(--t-sm);line-height:1.5;color:var(--tx-muted);max-width:26ch}

/* ---- Kariera: sekcja "Aplikuj do Verity" w ramie strony --------------
   Sekcja szla przez cala szerokosc okna, wiec naglowek zaczynal sie
   przed marginesem reszty strony i cale pole bylo za duze. Teraz stoi
   w zwyklej ramie: naglowek po lewej rowno z pozostalymi sekcjami,
   formularz po prawej, oba pola rozdzielone wloskowa kreska. */
.aplikacja-sekcja{padding-block:clamp(1.75rem,1rem + 1.6vw,2.5rem)}
.aplikacja{
  background:transparent;align-items:center;
  gap:clamp(1.5rem,3vw,2.75rem);
}
@media (min-width:62rem){
  .aplikacja{grid-template-columns:minmax(0,.4fr) minmax(0,1fr)}
}
.aplikacja__panel{
  background:transparent;color:var(--tx);
  display:block;padding:0;
}
.aplikacja__naglowek{
  margin:.6rem 0 .8rem;max-width:12ch;text-wrap:balance;
  font-size:clamp(2.4rem,1.7rem + 2vw,3.5rem);line-height:1.08;
}
/* Formularz ciasniej, zeby cala sekcja byla nizsza. */
.aplikacja__formularz .form__body{gap:1.25rem}
.aplikacja__formularz .field textarea{min-height:4.5rem}
.aplikacja__formularz .form__body > .field{margin-bottom:0}
.aplikacja__zdanie{max-width:38ch}
.aplikacja__formularz{background:transparent;padding:0}
@media (min-width:62rem){
  .aplikacja__formularz{
    border-left:1px solid var(--line);border-top:0;
    padding-left:clamp(1.75rem,3vw,3rem);
  }
}
@media (max-width:61.99rem){
  .aplikacja__formularz{
    border-top:1px solid var(--line);border-left:0;
    padding-top:clamp(1.5rem,4vw,2rem);
  }
}

/* Tresc ogloszenia o prace w tej samej mierze co pozostale teksty. */
.oferta-tresc > :last-child{margin-bottom:0}

/* Nazwy case studies to cale zdania, wiec pismo naglowka podstrony jest
   dla nich za duze: cztery wiersze po siedemdziesiat dwa piksele. Tutaj
   naglowek jest o stopien mniejszy niz na pozostalych podstronach. */
.single-realizacja .phero__title{
  font-size:clamp(1.9rem,1.25rem + 2.2vw,3rem);line-height:1.14;
}

/* ---- Kariera: spis stanowisk przez cala szerokosc sekcji -------------
   Naglowek stoi na gorze, w jednej linii, wysrodkowany nad calym spisem.
   Same stanowiska schodza pod niego: nazwa przy lewym marginesie strony,
   strzalka przy prawym, a kreski rozdzielajace ida od marginesu do
   marginesu, przez cala sekcje. */
.rekrutacje{display:block}
@media (min-width:56rem){
  .rekrutacje{grid-template-columns:none}
}
.rekrutacje__naglowek{
  max-width:none;text-align:center;
  margin:0 0 clamp(1.5rem,1rem + 1.6vw,2.5rem);
  text-wrap:nowrap;
}
@media (max-width:34rem){
  .rekrutacje__naglowek{text-wrap:balance}
}

/* ---- Formularz aplikacyjny: kreski pod polami w jednej wysokosci -----
   Pole pliku bylo o dziewiec pikseli wyzsze od listy rozwijanej obok,
   przez co kreski w tym samym wierszu nie schodzily sie ze soba. Teraz
   wszystkie kontrolki maja te sama wysokosc. */
.aplikacja__formularz .field > input,
.aplikacja__formularz .field > select{
  height:3.3125rem;min-height:0;
}
.aplikacja__formularz .field > input[type="file"]{
  height:3.3125rem;padding-block:0;line-height:3.3125rem;
}
.aplikacja__formularz .field > input[type="file"]::file-selector-button{
  padding-block:.4rem;
}
.aplikacja__formularz .field > textarea{height:auto}

/* Zgoda pod formularzem szla za wloskowa kreska, ktora biegla rownolegle
   do kreski pod polem wiadomosci, czterdziesci pikseli nizej. Kreska
   znika, a zgoda staje w tym samym odstepie co pozostale pola. */
.aplikacja__formularz .consent{border-top:0;margin-top:0;padding-top:0}

/* Wprowadzenie i uwaga nad spisem stanowisk. Naglowek wraca do lewej,
   bo pod nim stoi teraz krotki tekst, a nie od razu lista. */
.rekrutacje__naglowek{text-align:left;max-width:20ch}
.rekrutacje__wstep{max-width:62ch;margin-bottom:.75rem;color:var(--tx-on-dark-muted)}
.rekrutacje__wstep > :last-child{margin-bottom:0}
.rekrutacje__uwaga{
  margin:0 0 clamp(1.25rem,2.5vw,2rem);
  font-size:var(--t-xs);color:var(--tx-on-dark-muted);opacity:.85;
}
.rekrutacje__wstep:last-of-type{margin-bottom:clamp(1.25rem,2.5vw,2rem)}

/* ---- "Twoj partner biznesowy w Polsce": czytelna skala pisma --------
   Tekst byl scisniety do wysokosci kadru: akapity mialy niecale
   czternascie pikseli, a opisy punktow ponizej trzynastu. Teraz to kadr
   rownia sie do tekstu, a nie odwrotnie, wiec pismo wraca do normalnej
   skali, odstepy sa rowne, a pod naglowkiem jest powietrze. */
.partner-uklad__naglowek{margin-bottom:clamp(.4rem,1vw,1rem)}
.partner-uklad__tresc .prose.measure{
  font-size:1rem;line-height:1.65;
  margin-bottom:clamp(1.5rem,2.4vw,2.1rem)!important;
}
.partner-uklad__tresc .prose.measure p{margin-bottom:.9rem}
.partner-uklad__tresc .prose.measure p:last-child{margin-bottom:0}
.partner-uklad__tresc .feat h3{font-size:1.06rem;margin-bottom:.3rem;line-height:1.3}
.partner-uklad__tresc .feat p{font-size:.92rem;line-height:1.6}
@media (min-width:75em){
  /* Bez narzuconej wysokosci kolumny: o wysokosci decyduje tresc,
     a kadr obok rozciaga sie do niej. */
  .partner-uklad__tresc{min-height:0;justify-content:flex-start}
  .partner-uklad__tresc .feats{
    flex:0 1 auto;justify-content:flex-start;
    gap:clamp(1.15rem,2vw,1.7rem);
  }
}

/* ---- Kariera: cztery zasady pod tekstem, w poziomej siatce ----------
   Wczesniej stały w waskiej kolumnie po prawej, jedna pod druga. Teraz
   naglowek ze zdaniem zajmuje gore sekcji, a zasady leza pod nimi
   w czterech kolumnach, oddzielone jedna wloskowa kreska u gory. */
@media (min-width:56.3125em){
  .kariera-jak .kariera-jak__uklad{grid-template-columns:minmax(0,1fr)}
  .kariera-jak .kariera-jak__lewa{display:block}
  .kariera-jak .kariera-jak__lewa .kariera-jak__tekst{max-width:74ch}
  .kariera-jak .kariera-jak__naglowek{font-size:clamp(1.9rem,1.1rem + 2.2vw,3rem);max-width:24ch}
  .kariera-jak .kariera-jak__prawa{display:block}
  .kariera-jak .elementy--rzad{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 clamp(1.25rem,2.4vw,2.5rem);
    flex:none;height:auto;
    margin-top:clamp(1.25rem,2.2vw,1.9rem);
  }
  .kariera-jak .element--ramka{
    border-top:0;align-content:start;
    padding:clamp(1.1rem,2vw,1.6rem) 0 0;
  }
  .kariera-jak .element--ramka:first-child{padding-top:clamp(1.1rem,2vw,1.6rem)}
  .kariera-jak .element--ramka:last-child{padding-bottom:0}
  .kariera-jak .element--ramka .element__tytul{max-width:none}
  .kariera-jak .element--ramka .element__opis{font-size:.88rem;line-height:1.55}
}
@media (min-width:56.3125em) and (max-width:75em){
  /* Przy weszym ekranie cztery kolumny robia sie za ciasne. */
  .kariera-jak .elementy--rzad{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(.5rem,1.2vw,1rem);
  }
}

/* Naglowek ze zdaniem wprowadzajacym stoi posrodku sekcji, nad pasem
   czterech zasad. Tekst trzyma miare, zeby wiersze nie robily sie za
   dlugie przy pelnej szerokosci. */
@media (min-width:56.3125em){
  .kariera-jak .kariera-jak__lewa{text-align:center}
  /* Naglowek ma stac w jednej linii, posrodku sekcji. Stopien skaluje
     sie z szerokoscia okna, zeby dluzsze zdanie polskie miescilo sie
     takze na weszych ekranach biurkowych. */
  .kariera-jak .kariera-jak__naglowek{
    margin-inline:auto;max-width:none;
    /* Wczesniejsza regula ustawiala naglowek do lewej, wiec mimo
       wysrodkowanej kolumny napis stal przy krawedzi. */
    text-align:center;
    text-wrap:nowrap;
    font-size:clamp(1.25rem,-0.3rem + 3.6vw,2.95rem);
  }
  .kariera-jak .kariera-jak__lewa .kariera-jak__tekst{
    max-width:68ch;margin-inline:auto;
  }
  /* Same wiersze tez ida srodkiem, zeby caly blok czytal sie jako
     jedno wprowadzenie nad pasem czterech zasad. */
  .kariera-jak .kariera-jak__lewa .kariera-jak__tekst p{
    text-align:center;text-wrap:pretty;
  }
}

/* Sekcja byla za wysoka: same marginesy sekcji zabieraly trzysta
   dwadziescia osiem pikseli, a miedzy zdaniem a pasem zasad robila sie
   dziura na osiemdziesiat osiem. Odstepy schodza do rownego rytmu. */
.kariera-jak{padding-block:clamp(2.25rem,1.2rem + 2.6vw,4rem)}
@media (min-width:56.3125em){
  .kariera-jak .kariera-jak__uklad{row-gap:clamp(1.1rem,1.8vw,1.6rem)}
  .kariera-jak .kariera-jak__lewa .kariera-jak__tekst{margin-top:clamp(.85rem,1.5vw,1.3rem)}
  .kariera-jak .elementy--rzad{margin-top:clamp(.85rem,1.5vw,1.3rem)}
  .kariera-jak .element--ramka{padding-top:clamp(.9rem,1.6vw,1.3rem)}
  .kariera-jak .element--ramka:first-child{padding-top:clamp(.9rem,1.6vw,1.3rem)}
}

/* ---- Profil osoby z zespolu ------------------------------------------
   Portret po lewej, doswiadczenie po prawej, a pod nim dwa spisy:
   obszary specjalizacji i sektory. */
.osoba{display:grid;gap:clamp(1.75rem,3.5vw,3rem)}
@media (min-width:56.3125em){
  .osoba{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:start}
}
.osoba__kadr{position:relative}
.osoba__kadr img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.osoba__linkedin{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.osoba__linkedin:hover{color:var(--tx)}
.osoba__linkedin .ico{width:1.1rem;height:1.1rem}
.osoba__naglowek{margin:0 0 .9rem}
.osoba__opis{max-width:62ch}
.osoba__opis > :last-child{margin-bottom:0}
.osoba__spisy{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(1.75rem,3vw,2.5rem);
  padding-top:clamp(1.5rem,2.6vw,2rem);border-top:1px solid var(--line);
}
@media (min-width:40em){
  .osoba__spisy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.osoba__spis .eyebrow{margin-bottom:.9rem}
.osoba__spis li{margin-bottom:.4rem}
.osoba__spis li:last-child{margin-bottom:0}

/* Karta osoby na Zespole prowadzi na jej profil. */
.partner--klik{position:relative}
.partner--klik .partner__link{color:inherit}
.partner--klik .partner__link::after{content:"";position:absolute;inset:0;z-index:1}
.partner__wiecej{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.partner__wiecej .ico{width:1rem;height:1rem;transition:transform .4s var(--ease-out)}
.partner--klik:hover .partner__wiecej .ico{transform:translateX(.3rem)}
.partner--klik:hover .partner__nazwa{color:var(--gold)}

/* Odnosnik obejmuje caly kafel, takze zdjecie. Kadr ma wlasny kontekst
   nakladania sie, wiec bez tego przykrywal niewidzialna warstwe
   odnosnika i klikniecie w zdjecie nic nie robilo. */
.partner--klik .partner__kadr{position:relative;z-index:0}
.partner--klik .partner__link::after{z-index:2}
.partner--klik{cursor:pointer}

/* ---- Profil osoby w oknie -------------------------------------------
   Klientka poprosila, zeby karta zespolu otwierala okno, a nie kolejna
   podstrone: kadr po lewej, tresc po prawej, krzyzyk w rogu. Podstrona
   zostaje jako pelny profil i jako zapas dla przegladarek bez skryptu. */
.profil{
  border:0;padding:0;background:transparent;
  width:min(58rem,92vw);max-width:none;max-height:92vh;
  color:var(--tx);
}
.profil::backdrop{background:rgba(28,7,12,.62);backdrop-filter:blur(2px)}
.profil__plansza{
  position:relative;display:grid;background:var(--paper);overflow:hidden;
}
@media (min-width:48em){
  /* Kolumna ze zdjeciem trzyma proporcje portretu, wiec kadr widac
     w calosci, a nie w powiekszeniu. Wysokosc okna idzie za zdjeciem. */
  .profil__plansza{grid-template-columns:minmax(0,.68fr) minmax(0,1fr);align-items:stretch}
  .profil__kadr{aspect-ratio:3/4}
}
.profil__kadr{background:var(--paper-deep);overflow:hidden}
.profil__kadr img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
@media (min-width:48em){
  .profil__kadr img{aspect-ratio:3/4}
}
/* Tresc nie przewija sie wewnatrz okna: ma sie miescic w calosci. */
.profil__tresc{
  padding:clamp(1.5rem,3vw,2.6rem);
  display:flex;flex-direction:column;justify-content:center;
}
.profil__nazwa{margin:.5rem 0 .75rem}
.profil__nota{margin:0 0 1rem;color:var(--tx-muted)}
.profil__opis{max-width:none;font-size:var(--t-sm);line-height:1.7}
.profil__opis > :last-child{margin-bottom:0}
.profil__spisy{
  display:grid;gap:clamp(1rem,2.4vw,1.75rem);
  margin-top:clamp(1.25rem,2.4vw,1.75rem);
  padding-top:clamp(1rem,2vw,1.5rem);border-top:1px solid var(--line);
}
@media (min-width:34em){
  .profil__spisy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.profil__spis .eyebrow{margin-bottom:.7rem}
.profil__spis li{margin-bottom:.35rem;font-size:var(--t-sm)}
.profil__spis li:last-child{margin-bottom:0}
.profil__stopka{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;
  margin-top:clamp(1.25rem,2.4vw,1.75rem);
  padding-top:clamp(1rem,2vw,1.5rem);border-top:1px solid var(--line);
}
.profil__li{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
}
.profil__li:hover{color:var(--tx)}
.profil__li .ico{width:1.05rem;height:1.05rem}
.profil__zamknij{
  position:absolute;top:.75rem;right:.75rem;z-index:3;
  width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;color:var(--tx);
  background:var(--paper);border:1px solid var(--line);cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.profil__zamknij:hover{color:var(--gold);border-color:var(--gold)}
html.okno-otwarte{overflow:hidden}
@media (max-width:47.99em){
  .profil__kadr img{aspect-ratio:16/10}
}

/* ---- Okno profilu: tekst nie wchodzi na zdjecie ----------------------
   Kolumna zdjecia byla liczona jako ulamek szerokosci okna, a samo
   zdjecie bralo szerokosc z wysokosci wiersza i proporcji 3:4. Wychodzilo
   wiec szersze niz jego kolumna i chowalo sie pod tekstem. Teraz zdjecie
   ma stala wysokosc, szerokosc wynika z proporcji portretu, a kolumna
   dopasowuje sie do zdjecia. Cala reszta okna przypada tekstowi. */
@media (min-width:48em){
  .profil{width:min(80rem,95vw)}
  .profil__plansza{grid-template-columns:auto minmax(0,1fr);align-items:stretch}
  .profil__kadr{
    height:min(40rem,84vh);width:auto;aspect-ratio:3/4;
    align-self:start;
  }
  .profil__kadr img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
  .profil__tresc{padding:clamp(1.75rem,3vw,2.75rem) clamp(1.75rem,3.2vw,3rem)}
}

/* ---- Projekty specjalne: tekst zawsze na kremowym tle ----------------
   Zdjecie zaczynalo sie na 34% szerokosci kafla i bylo w pelni widoczne
   od okolo 62%, a opis siegal do 50-57%. Koniec wierszy lezal wiec na
   zdjeciu widocznym w 70-80% i ginal, najmocniej w Transfer Pricing,
   gdzie pod pierwszym wierszem stoi ciemny krazek. Kolumna tekstu jest
   teraz wezsza, a zdjecie zaczyna sie dalej i wchodzi dluzszym,
   lagodnym przejsciem, wiec pod tekstem zostaje sam krem. */
@media (min-width:75em){
  .projekt:not(.projekt--tlo) .projekt__tresc{max-width:min(47%,23rem)}
  .projekt:not(.projekt--tlo) .projekt__kadr{
    width:60%;
    -webkit-mask:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%);
    mask:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%);
  }
}

/* ---- Projekty specjalne: prostokaty roznej wielkosci ------------------
   Wedlug projektu klientki z 10 wrzesnia 2026. Lewa kolumna: wysoki
   ciemny kafel 01 i niski 03. Prawa: 02 odrobine nizszy od 01 i 04
   odrobine wyzszy od 03. Proporcje wierszy 57 : 5 : 38 sa odczytane
   z projektu. Gdy tekst potrzebuje wiecej miejsca, wiersze rosna razem
   i proporcje zostaja.

   Grafika wypelnia caly kafel. Pliki kafli (verity-projekt-*-kafel) to
   grafiki klientki z folderu nowerzeczyv2, pomniejszone i ustawione tak
   jak na projekcie, z przedluzona sciana i podloga, zeby tlo siegalo
   krawedzi kafla. Obiekty sa nietkniete. Szerokosc i przesuniecie pliku
   sa w procentach szerokosci kadru (margines w procentach tez liczy sie
   od szerokosci), wiec kompozycja nie wchodzi na tekst przy zadnej
   szerokosci ekranu. Plotno jest wyzsze niz kafel, zeby starczylo go
   takze po polsku i przy 1200 pikselach, gdzie kafle sa najwyzsze.
   Kolejnosc projektow w panelu musi zostac, bo ustawienia ida po
   pozycji kafla.
   Na telefonie i tablecie kadr 16:10 nad tekstem pokazuje sama
   kompozycje, jak dotad (--ms, --mx, --mg).
   Wersje odrzucone: schodki 60/40 (9 wrzesnia), grafika w rogu
   z odcieciem, grafika na calym polu z przygaszonymi obiektami
   i grafika pomniejszona na tle w dopasowanym kolorze (10 wrzesnia). */
.projekty > .projekt:nth-child(1){--s:100%;--g:0%;--ms:134.4%;--mx:-31.05%;--mg:0%;--tlo:rgb(23,5,5)}
.projekty > .projekt:nth-child(2){--s:108%;--g:-1.7%;--ms:142.1%;--mx:-39.87%;--mg:0%;--tlo:rgb(187,164,142)}
.projekty > .projekt:nth-child(3){--s:114%;--g:0%;--ms:157.2%;--mx:-55.86%;--mg:-23.28%;--tlo:rgb(201,179,155)}
.projekty > .projekt:nth-child(4){--s:106%;--g:0%;--ms:147.2%;--mx:-44.44%;--mg:0%;--tlo:rgb(216,198,180)}

@media (max-width:74.99em){
  .projekty .projekt .projekt__kadr{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tlo,transparent)}
  .projekty .projekt .projekt__kadr picture{display:contents}
  .projekty .projekt .projekt__kadr img{
    position:absolute;left:var(--mx,0%);top:0;margin:var(--mg,0%) 0 0 0;
    width:var(--ms,100%);height:auto;max-width:none;max-height:none;object-fit:fill;
  }
}

@media (min-width:75em){
  .projekty{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:57fr 5fr 38fr;
    grid-auto-rows:minmax(15rem,auto);
    min-height:clamp(32rem,41vw,37rem);
  }
  .projekty > .projekt{min-height:0}
  .projekty > .projekt:nth-child(1){grid-column:1;grid-row:1 / span 2}
  .projekty > .projekt:nth-child(2){grid-column:2;grid-row:1}
  .projekty > .projekt:nth-child(3){grid-column:1;grid-row:3}
  .projekty > .projekt:nth-child(4){grid-column:2;grid-row:2 / span 2}

  .projekty .projekt .projekt__kadr{
    inset:0;width:auto;-webkit-mask:none;mask:none;background:var(--tlo,transparent);
  }
  .projekty .projekt .projekt__kadr picture{display:contents}
  .projekty .projekt .projekt__kadr img{
    position:absolute;left:0;right:auto;top:0;bottom:auto;margin:var(--g,0%) 0 0 0;
    width:var(--s,100%);height:auto;max-width:none;max-height:none;object-fit:fill;
    -webkit-mask:none;mask:none;
  }
  /* 03 stoi na dole kafla, tak jak na projekcie */
  .projekty > .projekt:nth-child(3) .projekt__kadr img{top:auto;bottom:0;margin:0 0 -2.5% 0}

  /* Pod tekstem jest samo tlo grafiki, bez rozjasnienia, zeby lewa
     strona kafla wygladala tak jak grafika (prosba z 10 wrzesnia).
     Jasne pole pod tekstem mialo inny kolor niz grafika i przy lewej
     krawedzi obiektow bylo widac granice. */
  .projekty .projekt:not(.projekt--tlo) .projekt__kadr::after{content:none}
  /* Na ciemnym kaflu tekst lezy na ciemnej podlodze, wystarczy lekkie
     przyciemnienie od dolu. */
  .projekty .projekt--tlo .projekt__kadr::after{
    background:linear-gradient(0deg,rgba(20,4,5,.5) 0%,rgba(20,4,5,0) 42%);
  }

  /* Tekst bez zmian wzgledem wersji zaakceptowanej 10 wrzesnia. */
  .projekty .projekt:not(.projekt--tlo) .projekt__tresc{max-width:min(46%,22rem)}
  .projekty > .projekt{padding:clamp(1.35rem,2vw,1.85rem)}
  .projekty .projekt__opis{font-size:.9rem;line-height:1.6}
  .projekty .projekt:not(.projekt--tlo) .projekt__opis{color:rgba(45,30,26,.84)}
}

/* ---- Centrum wiedzy: napis "Przewin, aby zobaczyc wiecej" -------------
   Klientka chce go widziec takze na komputerze (10 wrzesnia 2026), a nie
   tylko na telefonie. Pokazuje sie zawsze, gdy rzad publikacji wychodzi
   poza ekran. Gdy wszystkie kafle sie mieszcza, verity.js dodaje klase
   publikacje-blok--pelny i napis znika, zeby nie wprowadzal w blad. */
.publikacje__wskazowka{display:flex}
.publikacje-blok--pelny .publikacje__wskazowka{display:none}

/* === V3: przebudowa okna profilu zespolu (lewa kolumna: zdjecie + imie/rola) === */
.profil__osoba{padding:1.15rem 1.5rem 1.5rem}
.profil__osoba .profil__nazwa{margin:.2rem 0 .55rem}
@media (min-width:56.3125em){
.profil .profil__plansza{grid-template-columns:minmax(0,21rem) minmax(0,1fr)}
.profil .profil__lewa{display:flex;flex-direction:column;min-width:0}
.profil .profil__kadr{aspect-ratio:3/4;flex:0 0 auto}
.profil .profil__kadr img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.profil .profil__osoba .profil__nazwa{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.1}
}

/* === V3 fix: kadr w oknie profilu liczy rozmiar z SZEROKOSCI, nie z wysokosci === */
.profil .profil__lewa{min-width:0}
.profil .profil__lewa .profil__kadr{width:100%;max-width:100%;height:auto;aspect-ratio:3/4;flex:0 0 auto}
.profil .profil__lewa .profil__kadr img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;aspect-ratio:3/4}
.profil .profil__osoba{max-width:100%}

/* === V4: karta profilu wypelnia widok i miesci sie bez przewijania === */
@media (min-width:56.3125em){
.profil{width:min(96rem,96vw);max-height:92vh}
.profil .profil__plansza{grid-template-columns:minmax(0,30%) minmax(0,1fr);max-height:92vh;overflow:hidden}
.profil .profil__lewa{min-width:0;display:flex;flex-direction:column}
.profil .profil__lewa .profil__kadr{width:100%;max-width:100%;height:auto;flex:1 1 auto;min-height:0;aspect-ratio:auto;overflow:hidden}
.profil .profil__lewa .profil__kadr img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;aspect-ratio:auto}
.profil .profil__osoba{flex:0 0 auto}
.profil .profil__tresc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.5rem,2.6vw,3rem);row-gap:clamp(.8rem,1.5vh,1.5rem);align-content:start;overflow:hidden;min-height:0}
.profil .profil__tresc>.kicker{grid-column:1/-1;margin:0}
.profil .profil__nota{grid-column:1;grid-row:2;margin:0}
.profil .profil__poza{grid-column:2;grid-row:2;margin:0}
.profil .profil__spisy{grid-column:1/-1;grid-row:3;margin:0}
.profil .profil__stopka{grid-column:1/-1;grid-row:4;margin:0}
.profil .profil__nota p{font-size:clamp(.86rem,1.02vw,1rem);line-height:1.55;margin:0 0 .6em}
.profil .profil__poza p{font-size:clamp(.82rem,.95vw,.95rem);line-height:1.55;margin:0 0 .5em}
.profil .profil__nota p:last-child,.profil .profil__poza p:last-child{margin-bottom:0}
}

/* === V4.1: lewa kolumna o okreslonej wysokosci — zdjecie wypelnia, nazwisko widoczne === */
@media (min-width:56.3125em){
.profil .profil__plansza{height:92vh;max-height:92vh}
.profil .profil__lewa{height:100%;min-height:0;overflow:hidden}
.profil .profil__lewa .profil__kadr{flex:1 1 auto;min-height:0;height:auto}
.profil .profil__lewa .profil__kadr img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.profil .profil__tresc{max-height:100%;overflow:hidden}
}

/* === V4.2: zbilansowane kolumny bio | (poza + listy); wysokosc = max, nie suma === */
@media (min-width:56.3125em){
.profil{max-height:94vh}
.profil .profil__plansza{height:94vh;max-height:94vh;grid-template-columns:minmax(0,27%) minmax(0,1fr)}
.profil .profil__tresc{row-gap:clamp(.55rem,1.1vh,1rem)}
.profil .profil__nota{grid-column:1;grid-row:2/span 2;margin:0}
.profil .profil__poza{grid-column:2;grid-row:2;margin:0}
.profil .profil__spisy{grid-column:2;grid-row:3;margin:0;grid-template-columns:minmax(0,1fr);row-gap:clamp(.5rem,1vh,.9rem)}
.profil .profil__stopka{grid-column:1/-1;grid-row:4;margin:0}
.profil .profil__nota p{font-size:clamp(.8rem,1.5vh,.98rem);line-height:1.5;margin:0 0 .55em}
.profil .profil__poza p{font-size:clamp(.78rem,1.4vh,.92rem);line-height:1.5;margin:0 0 .45em}
.profil .profil__spisy li{font-size:clamp(.78rem,1.4vh,.92rem);line-height:1.45}
.profil .profil__nota p:last-child,.profil .profil__poza p:last-child{margin-bottom:0}
}

/* === V4.3: karta dopasowuje wysokosc do tresci; 94vh tylko jako limit === */
@media (min-width:56.3125em){
.profil{width:min(88rem,94vw);max-height:94vh}
.profil .profil__plansza{height:auto;max-height:94vh;grid-template-columns:minmax(0,24%) minmax(0,1fr)}
.profil .profil__lewa{height:auto;min-height:0;overflow:hidden}
.profil .profil__lewa .profil__kadr{flex:0 0 auto;width:100%;height:auto;aspect-ratio:3/4;min-height:0}
.profil .profil__lewa .profil__kadr img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.profil .profil__tresc{align-content:start}
}

/* === V4.4: bez nadkreslenia "Zespol zarzadzajacy"; wiekszy tekst glowny === */
@media (min-width:56.3125em){
.profil .profil__nota{grid-column:1;grid-row:1/span 2;margin:0}
.profil .profil__poza{grid-column:2;grid-row:1;margin:0}
.profil .profil__spisy{grid-column:2;grid-row:2;margin:0}
.profil .profil__stopka{grid-column:1/-1;grid-row:3;margin:0}
.profil .profil__nota p{font-size:clamp(.88rem,1.72vh,1.15rem);line-height:1.62;margin:0 0 .7em}
.profil .profil__nota p:last-child{margin-bottom:0}
}

/* === V5: powrot do ukladu jednokolumnowego (jak w pierwszej wersji) + troche szersze okno === */
@media (min-width:56.3125em){
.profil{width:min(92rem,94vw)}
.profil .profil__tresc{display:block;overflow:hidden}
.profil .profil__nota{margin:0 0 clamp(1rem,2.2vh,1.9rem)}
.profil .profil__spisy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,2.6vw,3rem);row-gap:clamp(.5rem,1vh,.9rem);margin:0 0 clamp(1rem,2.2vh,1.9rem)}
.profil .profil__poza{margin:0}
}

/* === V5.1: wezsza karta (84rem) — miedzy pierwotnymi 80rem a 92rem === */
@media (min-width:56.3125em){
.profil{width:min(84rem,94vw)}
}

/* === V5.2: wezsza karta (78rem), wyzsze zdjecie (28%), wiecej powietrza w pionie === */
@media (min-width:56.3125em){
.profil{width:min(78rem,94vw)}
.profil .profil__plansza{grid-template-columns:minmax(0,28%) minmax(0,1fr)}
.profil .profil__nota{margin:0 0 clamp(1.2rem,2.6vh,2.4rem)}
.profil .profil__spisy{margin:0 0 clamp(1.2rem,2.6vh,2.4rem)}
}

/* === V5.3: jeszcze wezsza karta (74rem) + wieksza kolumna ze zdjeciem (32%) === */
@media (min-width:56.3125em){
.profil{width:min(74rem,94vw)}
.profil .profil__plansza{grid-template-columns:minmax(0,32%) minmax(0,1fr)}
}

/* === V5.4: wezsza karta (71rem), wyzsza kolumna zdjecia (34%), sufit 96vh === */
@media (min-width:56.3125em){
.profil{width:min(71rem,94vw);max-height:96vh}
.profil .profil__plansza{max-height:96vh;grid-template-columns:minmax(0,34%) minmax(0,1fr)}
}

/* === V5.5: ratunek dla niskich okien — na <=820px wysokosci wezsza kolumna zdjecia i ciasniejsze odstepy === */
@media (min-width:56.3125em) and (max-height:820px){
.profil .profil__plansza{grid-template-columns:minmax(0,31%) minmax(0,1fr)}
.profil .profil__nota{margin:0 0 clamp(.8rem,1.6vh,1.2rem)}
.profil .profil__spisy{margin:0 0 clamp(.8rem,1.6vh,1.2rem)}
}

/* === Feedback V3 (21 wrzesnia 2026) ===================================== */

/* Zdjecia zespolu: zamiast szarosci ciepla sepia z domieszka zlota i bezu
   (wytyczna klientki). Kolor nadal wraca przy wskazaniu. Stan wskazania ma
   te same funkcje filtra z wartosciami neutralnymi, zeby przejscie zostalo
   plynne. */
.partner__kadr img{filter:sepia(.55) saturate(1.2) brightness(.9) contrast(1.05)}
.partner:hover .partner__kadr img,
.partner:focus-within .partner__kadr img{filter:sepia(0) saturate(1) brightness(1) contrast(1)}

/* Okno profilu: ikonka LinkedIn pod imieniem i rola, w kwadratowej ramce,
   jak na szkicu klientki. Na komputerze stoi u dolu lewej kolumny, na
   wysokosci konca tekstu. */
.profil__linkedin{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;margin:0 1.5rem 1.5rem;
  border:1px solid var(--burgundy);color:var(--burgundy);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.profil__linkedin:hover{color:var(--gold);border-color:var(--gold)}
.profil__linkedin .ico{width:1.25rem;height:1.25rem}
@media (min-width:56.3125em){
  .profil .profil__linkedin{align-self:flex-start;margin-top:auto;margin-bottom:clamp(1.75rem,3vw,2.75rem)}
}
/* Na niskich ekranach to lewa kolumna wyznacza wysokosc karty, wiec
   odstep pod ikonka jest mniejszy, zeby karta nie siegala sufitu 96vh. */
@media (min-width:56.3125em) and (max-height:820px){
  .profil .profil__linkedin{margin-bottom:1.5rem}
}

/* Centrum wiedzy: bez bloku newslettera panel ma dwie kolumny, publikacje
   i jej kadr, bez pustego pola po prawej. */
@media (min-width:64rem){
  .panel-wiedzy:not(:has(.panel-wiedzy__news)){grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

/* ---- Kontakt: przycisk "Book a meeting" w karcie kontaktowej ----------
   Zlota warstwa wypelnienia przycisku (.btn::after) po najechaniu zakrywala
   caly przycisk, a napis w tej karcie zostaje zloty, wiec robil sie
   jednolity zloty pasek bez napisu. Na telefonie stan najechania zostaje
   po stuknieciu, bo przycisk prowadzi do formularza na tej samej stronie,
   i pasek zostawal zloty (zgloszenie klientki z 25 wrzesnia 2026).
   Wypelnienie jest tu wylaczone: po najechaniu zostaje delikatne zlote
   tlo i pelna zlota ramka, jak w regule wyzej. Na ekranach dotykowych
   przycisk po stuknieciu wraca do zwyklego wygladu. */
.kontakt-uklad__cta .btn::after{content:none}
@media (hover:none){
  .kontakt-uklad__cta .btn:hover{background:transparent;border-color:rgba(168,132,60,.55)}
  .kontakt-uklad__cta .btn:hover .ico{transform:none}
}

/* === Plynne przejscie miedzy podstronami (25 wrzesnia 2026) =============
   Zamiast bialego blysku przy kliknieciu w link przegladarka przenika
   stara strone w nowa. Dziala w Chrome i Edge, pozostale przegladarki
   po prostu ignoruja te regule i zachowuja sie tak jak wczesniej. */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.26s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
/* Kto ma wylaczone animacje w systemie, ten nie dostaje zadnego przejscia. */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* === Okienko informacyjne (28 wrzesnia 2026) ============================
   Uzywane przy przycisku "Umow spotkanie" na stronie kontaktu, dopoki
   klientka nie poda adresu kalendarza spotkan. */
.okno-info{border:0;padding:0;background:transparent;max-width:none;width:min(30rem,92vw);color:var(--tx)}
.okno-info::backdrop{background:rgba(28,7,12,.62);backdrop-filter:blur(2px)}
.okno-info__plansza{position:relative;background:var(--paper);border:1px solid var(--line);padding:clamp(1.75rem,4vw,2.5rem)}
.okno-info__zamknij{
  position:absolute;top:.6rem;right:.6rem;width:2.25rem;height:2.25rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;line-height:1;color:var(--tx);
  background:var(--paper);border:1px solid var(--line);cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.okno-info__zamknij:hover{color:var(--gold);border-color:var(--gold)}
.okno-info__tytul{margin:0 0 .9rem;padding-right:2.5rem}
.okno-info__tekst{margin:0 0 .7rem;color:var(--tx-muted);line-height:1.65}
.okno-info__tekst:last-child{margin-bottom:0}
.okno-info__tel{
  display:inline-block;font-family:var(--f-display);font-size:1.3rem;
  color:var(--tx);white-space:nowrap;box-shadow:inset 0 -1px 0 var(--gold);
  transition:color .3s var(--ease);
}
.okno-info__tel:hover{color:var(--rust)}

/* ---- Zespol: cztery portrety w jednym rzedzie -------------------------
   Od 1 pazdziernika 2026 w zespole sa cztery osoby. Na prosbe klientki
   portrety sa mniejsze i stoja obok siebie w jednym rzedzie na
   komputerze. Na tablecie zostaja dwa w rzedzie, na telefonie jeden. */
@media (min-width:64rem){
  .partnerzy{
    grid-template-columns:repeat(4,minmax(0,1fr));
    justify-content:stretch;
    gap:clamp(1.5rem,2.4vw,2.5rem);
  }
}

/* ---- Strony prawne: mniejsze odstepy i zwykle numery (06.10.2026) ----
   Prosba klientki do polityki prywatnosci i obslugi cookies: rozdzialy
   stoja blizej siebie. Punkty list w polityce maja ten sam kroj, stopien
   i kolor co akapity nad nimi i pod nimi, a numer "1." jak w dokumencie
   od prawniczki, bez zlotych znakow. */
.legal .article__body h2{margin-top:1.1em}
.legal .article__body h2:first-child{margin-top:0}
.legal .article__body ol li{font-size:inherit}
.legal .article__body ol li::before{
  content:counter(ol) ".";font-family:inherit;font-size:inherit;color:inherit;
}

/* ---- Punktor zamiast znaku V (06.10.2026) ---------------------------
   Punkty w "Dlaczego Verity", "Technologii" i "Dlaczego warto do nas
   dolaczyc" maja taki punktor jak listy uslug: zloty romb, tylko
   w wielkosci pogrubionego naglowka obok. Naglowki tych punktow sa
   pogrubione (600, najgrubsza odmiana EB Garamond na stronie). Romb ma
   kreske 2 px: ulamkowa grubosc ekran o zwyklej gestosci rysuje jako
   1 px, a wtedy romb wyglada na cienszy od pogrubionego pisma. Znak
   dostaje kroj, stopien i interlinie naglowka, wiec romb stoi na srodku
   pierwszego wiersza tytulu, takze gdy tytul lamie sie na dwa wiersze. */
.feat h3{font-weight:600}
.feat__znak{
  width:auto;height:auto;margin-top:0;
  font-family:var(--f-display);font-size:var(--t-h4);line-height:1.34;
}
.feat__znak svg{display:none}
.feat__znak::before{
  content:"";display:inline-block;vertical-align:middle;
  width:.46em;height:.46em;margin:0 .1em;
  border:2px solid var(--gold);transform:rotate(45deg);
}
.partner-uklad__tresc .feat__znak{font-size:1.06rem;line-height:1.3}

/* ---- Filmy z YouTube we wpisach (15.10.2026) ------------------------
   Zaslepka zamiast odtwarzacza (inc/wideo.php): ciemne pole w barwach
   marki ze znakiem V w tle i zlotym przyciskiem odtwarzania. Film
   wczytuje sie z YouTube dopiero po kliknieciu. */
.wideo{background:var(--dark-tlo);border-color:var(--dark-tlo)}
.wp-block-embed__wrapper > .wideo{margin:0}
/* Edytor dopisuje do filmu klasy proporcji, a biblioteka blokow robi
   wtedy odstep na gorze opakowania. Zaslepka ma wlasna proporcje. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .wideo)::before,
.wp-block-embed__wrapper:has(> .wideo)::before{content:none;display:none;padding:0}
.wideo__start{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  padding:1.5rem;border:0;cursor:pointer;font:inherit;text-align:center;
  color:var(--tx-on-dark);
  background:radial-gradient(ellipse at 50% 45%,rgba(168,132,60,.16),transparent 62%);
}
.wideo__znak{
  position:absolute;left:50%;top:50%;width:min(46%,15rem);
  transform:translate(-50%,-50%);color:var(--gold);opacity:.07;pointer-events:none;
}
.wideo__znak svg{width:100%;height:auto;display:block}
.wideo__play{
  position:relative;display:grid;place-items:center;
  width:clamp(3.75rem,8vw,5rem);height:clamp(3.75rem,8vw,5rem);border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--ease);
}
/* Trojkat odtwarzania z obramowania, w kolorze napisu: zloty, a po
   najechaniu ciemny na zlotym kole. */
.wideo__play::before{
  content:"";margin-left:.3rem;
  border-style:solid;border-width:.6rem 0 .6rem 1rem;
  border-color:transparent transparent transparent currentColor;
}
.wideo__napis{position:relative;font-family:var(--f-display);font-size:var(--t-h4);font-weight:500}
.wideo__uwaga{position:relative;font-size:var(--t-xs);letter-spacing:.06em;color:var(--tx-on-dark-muted)}
.wideo__start:hover .wideo__play,.wideo__start:focus-visible .wideo__play{
  background:var(--gold);color:var(--dark-tlo);transform:scale(1.05);
}
.wideo__start:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.wideo.is-loaded .wideo__start{display:none}
@media (prefers-reduced-motion:reduce){
  .wideo__play{transition:none}
  .wideo__start:hover .wideo__play,.wideo__start:focus-visible .wideo__play{transform:none}
}

/* ---- Menu z pozycja "Centrum wiedzy" (15.10.2026) ------------------
   Siedem pozycji, zloty przycisk i przelacznik jezyka mieszcza sie
   w jednym pasku dopiero od okolo 1220 pikseli. Wezej pozycje wjezdzaly
   pod przycisk "Panel klienta", wiec menu wczesniej przechodzi w przycisk
   z trzema kreskami (do tej pory dzialo sie to od 1024 pikseli). */
@media (max-width:76.25em){
  .nav{display:none}
  .burger{display:inline-flex}
}
@media (min-width:64.0625em) and (max-width:76.25em){
  .mnav{display:flex}
}

/* ---- Wpis z filmem: film na cala szerokosc tresci (15.10.2026) ------
   W zwyklym ukladzie wpisu film stal w waskiej kolumnie tekstu, a obok
   zostawala pusta kolumna z samym "Udostepnij". Wpis z filmem ma jedna
   kolumne: film zaczyna sie przy krawedzi tekstu w naglowku i konczy przy
   prawej krawedzi tresci, a "Udostepnij" stoi pod nim. */
.article--wideo{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,3vw,2.75rem)}
.article--wideo .article__body{max-width:none}
.article--wideo .article__body > :not(.wp-block-embed){max-width:var(--maxw-text)}
.article--wideo .wp-block-embed{margin:0 0 2rem}
.article--wideo .wp-block-embed:last-child{margin-bottom:0}
.article--wideo aside{max-width:17rem}

/* ---- Film z kadrem (15.10.2026) -------------------------------------
   Gdy wpis ma obrazek wyrozniajacy, zaslepka filmu pokazuje go jak kadr
   na YouTube: obrazek na calym polu, na srodku ciemne kolo ze zlotym
   trojkatem, a w rogu drobna informacja, ze film przyjdzie z YouTube.
   Kadr Verity jest jasny i ma wlasny napis, wiec bez przyciemniania
   i bez drugiego tytulu na wierzchu. */
.wideo--kadr picture,.wideo--kadr .wideo__kadr{position:absolute;inset:0;width:100%;height:100%}
.wideo--kadr .wideo__kadr{object-fit:cover;display:block}
.wideo--kadr .wideo__start{background:linear-gradient(180deg,transparent 60%,rgba(34,9,13,.28))}
.wideo--kadr .wideo__znak,.wideo--kadr .wideo__napis{display:none}
.wideo--kadr .wideo__play{
  background:rgba(34,9,13,.82);border-color:rgba(168,132,60,.9);
  box-shadow:0 .75rem 2rem rgba(34,9,13,.28);
}
.wideo--kadr .wideo__start:hover .wideo__play,
.wideo--kadr .wideo__start:focus-visible .wideo__play{background:var(--gold);color:var(--dark-tlo)}
.wideo--kadr .wideo__uwaga{
  position:absolute;left:1rem;bottom:1rem;
  padding:.35rem .75rem;background:rgba(34,9,13,.78);color:var(--tx-on-dark);
}
.wideo.is-loaded picture,.wideo.is-loaded .wideo__kadr{display:none}
/* Na duzym kadrze przycisk odtwarzania jest wiekszy, jak na YouTube. */
.wideo--kadr .wideo__play{width:clamp(4rem,6.5vw,6rem);height:clamp(4rem,6.5vw,6rem)}
.wideo--kadr .wideo__play::before{border-width:.75rem 0 .75rem 1.25rem;margin-left:.35rem}