/* ==========================================================================
   Kancelaria Prawna Trzebinski & Partnerzy

   MOTYW: czern - butelkowa zielen - zloto, za materialami identyfikacyjnymi
   Kancelarii (godlo - tarcza z waga, krokwiami i kluczem w zlotym kregu -
   wordmark szeryfowy, zlote wlosowe
   linie). Pelny opis decyzji: design/brand.md.

   DWIE ZASADY, KTORE TRZYMAJA TEN ARKUSZ W RYZACH:

   1. Kolor znaczy "tutaj mozna kliknac". Na powierzchniach jasnych robi to
      butelkowa zielen (--act), na ciemnych zloto (--gold). Nie ma trzeciego
      koloru interakcji i nie ma koloru dekoracyjnego o tym samym nasyceniu.

   2. Zloto nasycone (--gold) zyje WYLACZNIE na ciemnym tle. Na papierze ma
      4.2-4.7:1, wiec nie uniesie ani tekstu drobnego, ani tla przycisku
      z jasnym napisem. Zlota obecnosc na jasnych sekcjach niesie wlosowa
      linia --gold-line i godlo logo - nie tekst.

   Podzial dekoracyjny od interaktywnego jest odwzorowany w parach tokenow:
   --rule / --act na jasnym, --gold-line / --gold na ciemnym. Wlosowa linia
   nigdy nie jest jedyna granica elementu, ktory mozna kliknac.

   Wszystkie pary tekst/tlo policzone wg WCAG 2.1, minimum AA (4.5:1),
   obrys focus minimum 3:1. Wartosci w komentarzach przy tokenach.

   Typografia: Cormorant Garamond (naglowki, wordmark) + IBM Plex Sans
   (tekst) + IBM Plex Mono (liczby i metadane).
   Wersaliki: przycisk, wordmark i nadtytul sekcji - nigdzie indziej.
   ========================================================================== */

/* Fonty: patrz assets/css/fonts.css (ladowany osobno w obu layoutach). */

/* ==========================================================================
   TOKENY
   ========================================================================== */
:root{
  /* powierzchnie jasne - ciepla kosc sloniowa z materialow, nie bialy papier */
  --paper:#faf7f0;          /* tlo strony */
  --sunk:#f1ebdd;           /* sekcja wyrozniona (piaskowa) */

  /* powierzchnie ciemne - dwie, nie jedna.
     --ink to czern naglowka i stopki, --forest butelkowa zielen pasow
     tresciowych (hero, CTA, tor odwrocony). Rozroznienie jest czescia
     rytmu strony: czern oprawia, zielen niesie komunikat. */
  --ink:#111314;            /* czern */
  --forest:#123527;         /* butelkowa zielen */

  /* tekst na papierze */
  --ink-2:#3d4248;          /* tekst ciagly            9.48:1 na paper */
  --ink-3:#5f6469;          /* metadane, podpisy       5.59:1 na paper (5.03 na sunk) */

  /* struktura na jasnym */
  --rule:#ddd4c2;           /* 1.34:1 - WYLACZNIE podzial strukturalny.
                               Granica elementu interaktywnego nigdy nie moze
                               opierac sie na tym tokenie. */

  /* akcent interakcji na jasnym */
  --act:#14532d;            /* link, CTA, focus        8.52:1 na paper, 7.67 na sunk */
  --act-hover:#0e3b21;      /*                        11.78:1 na paper */
  --act-tint:#e8efe6;       /* tlo podswietlenia wiersza */

  /* zloto - identyfikacja. Trzy odcienie o trzech rozlacznych rolach.  */
  --gold:#d6b56a;           /* INTERAKCJA na ciemnym   9.47:1 na ink, 6.83 na forest */
  --gold-hi:#e6cd90;        /* stan hover na ciemnym  11.98:1 na ink, 8.63 na forest */
  --gold-deep:#8a6a1f;      /* jedyne zloto dopuszczone na jasnym: 4.72:1 na paper,
                               4.24:1 na sunk - wiec tylko tekst >=19 px albo
                               element nietekstowy, nigdy metadane */
  --gold-line:rgba(214,181,106,.34);  /* wlosowa linia na ciemnym - odpowiednik
                                         --rule. 2.3-2.8:1, czyli swiadomie
                                         ponizej progu interakcji */
  --gold-line-lt:rgba(138,106,31,.38);/* wlosowa linia na jasnym */

  /* tekst na powierzchniach ciemnych (wspolny dla ink i forest) */
  --on-ink:#ece7dc;         /* tekst        15.11:1 na ink, 10.89:1 na forest */
  --on-ink-2:#b3aea3;       /* metadane      8.43:1 na ink,  6.21:1 na forest */

  --maxw:1140px;
  /* Siatka: jeden zestaw 12 kolumn dla calego serwisu - patrz sekcja SIATKA. */
  --col12:repeat(12,minmax(0,1fr));
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  /* Krój szeryfowy niesie tylko naglowki i wordmark - uzasadnienie
     w fonts.css i design/brand.md pkt 4. */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --btn-track:.04em;
  --track-caps:.16em;       /* rozstrzelenie wersalikow wordmarku i nadtytulu */
}

/* ==========================================================================
   PODSTAWY
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Serwis ma jeden motyw - jasny. Bez tej deklaracji kontrolki natywne
     (select, pole daty, paski przewijania) renderuja sie ciemne u kazdego,
     kto ma ciemny motyw systemowy, na jasnym tle formularza. */
  color-scheme:light;
}

/* Naglowek jest sticky (74 px), wiec cel kotwicy musi sie o niego odsunac -
   inaczej #zespol albo #main-content laduje pod paskiem nawigacji. */
main[id],section[id],article[id],h1[id],h2[id],h3[id],h4[id]{scroll-margin-top:90px}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* touch-action wycina 300 ms opoznienia klikniecia na mobile.
   Podswietlenie dotyku wylaczone celowo: elementy maja wlasny stan :active
   i :focus-visible, a szary prostokat Androida rysuje sie po nich. */
a,button,summary,label,input,select,textarea{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Podzial krojow miedzy poziomami naglowka nie jest ozdoba, tylko
   konsekwencja rysunku Cormoranta: przy duzym stopniu jego kontrast grubosci
   robi caly efekt materialow Kancelarii, przy 16-17 px wloskowate szeryfy
   znikaja na ekranie. Dlatego h1 i h2 sa szeryfowe, a h3 i h4 - czyli
   naglowki wierszy list, kart i kroków - zostaja przy IBM Plex Sans. */
h1,h2,h3,h4{
  color:var(--ink);
  line-height:1.18;
  margin:0 0 .55em;
  text-wrap:balance;
}
h1,h2{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-.008em;   /* szeryfowy krój nie znosi ujemnego trackingu
                               tak jak grotesk - stad -.008 zamiast -.018 */
  line-height:1.14;
}
/* Cormorant ma male oczko pisma, wiec przy tej samej wartosci rem czyta sie
   o okolo jeden stopien mniejszy niz Plex. Skala jest o to podniesiona. */
h1{font-size:clamp(2.3rem,4.2vw,3.15rem)}
h2{font-size:clamp(1.75rem,2.9vw,2.35rem);font-weight:600}
h3,h4{font-family:var(--font);font-weight:600;letter-spacing:-.012em}
h3{font-size:1.08rem;letter-spacing:-.008em}
h4{font-size:.95rem}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}

/* Tekst ciagly nigdy szerszy niz 68ch. */
.section p,.prose p,.split p{max-width:68ch}

/* Liczby i metadane - cyfry tabelaryczne, zeby kolumny sie zgadzaly. */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section--alt{background:var(--sunk)}
.section--tight{padding:52px 0}

/* --- naglowek sekcji ----------------------------------------------------- */
.section-head{max-width:64ch;margin:0 auto 44px;text-align:center}
.section-head--left{margin-left:0;text-align:left}
.section-head p:last-child{margin-bottom:0}
/* Nadtytul sekcji - drugie po przycisku miejsce z wersalikami. Rozstrzelone
   wersaliki sa w materialach Kancelarii sygnalem hierarchii ("PARTNER
   WSPIERAJACY", "PRAWO | DORADZTWO | ZAANGAZOWANIE"), wiec serwis ten sygnal
   przejmuje - ale tylko tutaj i tylko w --gold-deep, ktore na papierze ma
   4.72:1. Ponizej 19 px ta wartosc wymaga wagi 600, i taka jest ustawiona. */
.eyebrow{
  display:block;
  font-family:var(--font);
  font-size:.78rem;font-weight:600;color:var(--gold-deep);
  text-transform:uppercase;letter-spacing:var(--track-caps);
  margin-bottom:14px;
}
/* Zlota wlosowa linia pod naglowkiem sekcji. Wraca po tym, jak poprzednia
   wersja motywu ja usunela - ale wraca jako element identyfikacji, nie jako
   kolor interakcji: --gold-line-lt ma 1.5:1, czyli jest wyraznie ponizej
   progu, ktory w tym serwisie oznacza "klikalne". */
.rule{
  height:1px;margin:20px 0 0;
  background:linear-gradient(90deg,var(--gold-line-lt),rgba(138,106,31,.06));
}
.section-head .rule{max-width:none}
/* Krotka zlota sztaba pod naglowkiem sekcji - sygnatura z materialow.
   Naglowek, pod ktorym szablon i tak stawia pelnej szerokosci `.rule`,
   jej nie dostaje: dwie zlote linie jedna nad druga to juz ornament,
   a nie sygnatura. */
.section-head--left h2::after{
  content:"";display:block;width:76px;height:2px;margin-top:18px;
  background:linear-gradient(90deg,var(--gold-deep),rgba(138,106,31,.15));
}
.section-head:has(.rule) h2::after{display:none}
.lead{font-size:1.1rem;color:var(--ink-3)}

/* ==========================================================================
   PRZYCISKI
   Jedyne miejsce z wersalikami na calej stronie.
   Kontrast: paper na act = 8.73:1 (bylo bialy na zlocie = 1.99:1).
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 26px;
  font-size:.82rem;font-weight:600;letter-spacing:var(--btn-track);
  text-transform:uppercase;
  border:2px solid var(--act);
  background:var(--act);color:var(--paper);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  cursor:pointer;text-align:center;
}
.btn:hover{background:var(--act-hover);border-color:var(--act-hover)}
.btn:active{transform:translateY(1px)}

.btn--ghost{background:transparent;color:var(--act);border-color:var(--act)}
.btn--ghost:hover{background:var(--act);color:var(--paper)}

/* Wariant na ciemnym tle (tor odwrocony, pas CTA, stopka).
   Zloto jako tlo z czarnym napisem daje 9.47:1 - odwrotnie niz zloto pod
   jasnym napisem, ktore w poprzedniej identyfikacji dawalo 1.99:1.
   Kierunek kontrastu jest tu cala roznica i nie wolno go odwrocic. */
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}

/* Drugi przycisk na ciemnym: sam obrys, zeby nie konkurowal ze zlotym. */
.btn--light{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn--light:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* Przycisk podstawowy na ciemnej powierzchni przelacza sie na zloto
   automatycznie. Zielen --act na --forest daje 1.1:1, wiec przycisk
   zniknalby - a szablony pasa CTA i hero wstawiaja zwykle `.btn`.
   Regula kontekstowa jest tu pewniejsza niz klasa dopisywana recznie
   w osmiu plikach: nowa ciemna sekcja dostaje poprawny przycisk sama,
   o ile tylko doda sie ja do tej listy selektorow. */
.hero .btn:not(.btn--light):not(.btn--ghost),
.cta .btn:not(.btn--light):not(.btn--ghost),
.track--ink .btn:not(.btn--light):not(.btn--ghost),
.pagehead .btn:not(.btn--light):not(.btn--ghost){
  background:var(--gold);border-color:var(--gold);color:var(--ink);
}
.hero .btn:not(.btn--light):not(.btn--ghost):hover,
.cta .btn:not(.btn--light):not(.btn--ghost):hover,
.track--ink .btn:not(.btn--light):not(.btn--ghost):hover,
.pagehead .btn:not(.btn--light):not(.btn--ghost):hover{
  background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink);
}

/* Wariant obrysowany na ciemnym - zielony obrys byby tam niewidoczny. */
.hero .btn--ghost,.cta .btn--ghost,.track--ink .btn--ghost,.pagehead .btn--ghost{
  color:var(--gold);border-color:var(--gold);background:transparent;
}
.hero .btn--ghost:hover,.cta .btn--ghost:hover,
.track--ink .btn--ghost:hover,.pagehead .btn--ghost:hover{
  background:var(--gold);color:var(--ink);
}

.btn--sm{min-height:40px;padding:9px 18px;font-size:.75rem}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Telefon jako CTA - droga tansza poznawczo niz formularz. */
.btn .btn__num{font-family:var(--mono);letter-spacing:0;text-transform:none;font-size:.95rem}

/* ==========================================================================
   DOSTEPNOSC
   ========================================================================== */
.skip-link{
  position:fixed;left:-9999px;top:.5rem;z-index:10001;
  padding:.7rem 1.1rem;background:var(--ink);color:var(--paper);
  font-size:.9rem;font-weight:600;
}
.skip-link:focus{left:.5rem}
:focus-visible{outline:2px solid var(--act);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
/* Na ciemnych powierzchniach obrys musi zmienic kolor, inaczej znika.
   Zloto ma 9.47:1 na --ink i 6.83:1 na --forest, wiec obsluguje obie ciemne
   powierzchnie jednym tokenem. .hero jest tu z powrotem, bo po zmianie
   identyfikacji stoi na zieleni, nie na --sunk. */
.topbar :focus-visible,.cta :focus-visible,
.footer :focus-visible,.pagehead :focus-visible,.track--ink :focus-visible,
.hero :focus-visible,#cookie-banner :focus-visible,
.lightbox :focus-visible{outline-color:var(--gold)}

/* ==========================================================================
   PASEK KONTAKTOWY
   ========================================================================== */
.topbar{
  background:var(--ink);color:var(--on-ink-2);font-size:.86rem;
  /* Zlota wlosowa linia pod paskiem - identyfikacja, nie granica interakcji. */
  border-bottom:1px solid var(--gold-line);
}
.topbar .container{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;justify-content:flex-end;min-height:44px}
.topbar a{display:inline-flex;align-items:center;gap:8px;transition:color .18s}
.topbar a:hover{color:var(--gold)}
.topbar svg{width:15px;height:15px;stroke:currentColor;fill:none;flex:none}
.topbar .num{font-family:var(--mono)}

/* ==========================================================================
   NAWIGACJA
   Musi miescic sie w jednej linii na desktopie - 7 pozycji + CTA.

   Budzet jest scisly i wyczerpany. Gdy doszla pozycja "Referencje", z menu
   zeszla "Strona glowna": logo i okruszki prowadza na gora serwisu, wiec
   byla to jedyna pozycja redundantna. Dokladajac osma, trzeba znowu cos
   zabrac - inaczej pasek lamie sie na dwie linie albo wypycha CTA.
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--gold-line-lt);
  transition:box-shadow .25s var(--ease);
}
.header.is-stuck{box-shadow:0 4px 18px rgba(17,19,20,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:20px}

/* --------------------------------------------------------------------------
   LOGO - godlo + wordmark

   Znak jest obrysem oryginalnego logotypu Kancelarii (design/zrodla/logo.jpg):
   tarcza z waga, krokwiami i kluczem w zlotym kregu. Rysunek siedzi
   w SEAL_PATH / seal_logo() w Views/layouts/main.php, zeby naglowek i stopka
   nie rozjechaly sie przy poprawce.

   Gradient w godle jest jedynym gradientem w calym serwisie. Powod jest
   waski i nierozszerzalny: znak ma wygladac na tloczony w zlocie, tak jak
   w materialach drukowanych. Nic innego gradientu nie dostaje.

   Wersaliki wordmarku sa trzecim i ostatnim dopuszczonym uzyciem wersalikow
   (obok przycisku i nadtytulu sekcji) - to logotyp, nie tekst.
   -------------------------------------------------------------------------- */
.logo{display:flex;align-items:center;gap:14px;flex:none}
.logo__mark{width:44px;height:44px;flex:none;display:block}
.logo__text{line-height:1.25}
.logo__name{
  display:block;font-family:var(--serif);font-weight:600;
  color:var(--ink);font-size:1.16rem;line-height:1.1;
  text-transform:uppercase;letter-spacing:.07em;
}
.logo__sub{
  display:block;margin-top:3px;
  font-family:var(--font);font-size:.62rem;font-weight:600;color:var(--gold-deep);
  text-transform:uppercase;letter-spacing:var(--track-caps);
}

.menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.menu a{
  position:relative;display:block;
  font-size:.94rem;font-weight:500;color:var(--ink);
  padding:6px 0;transition:color .18s;white-space:nowrap;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--act);
  transition:width .22s var(--ease);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--act)}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}

.nav__cta{flex:none}
.burger{
  display:none;width:48px;height:48px;border:1px solid var(--ink-3);background:transparent;
  cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:.22s var(--ease)}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:.22s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ==========================================================================
   HERO

   Po zmianie identyfikacji hero stoi na butelkowej zieleni, nie na papierze:
   pierwszy ekran ma powtorzyc kadr z materialow Kancelarii - ciemne tlo,
   zloty naglowek, zlota linia. Reszta serwisu zostaje jasna, wiec ciemny
   hero jest kontrastem wejscia, nie motywem.

   To nadal JEDYNE miejsce w serwisie z zaokragleniem i geometria
   dekoracyjna; zakres odstepstwa opisuje design/brand.md pkt 6.

   Ozdobniki rysuje --gold-line (2.4:1 na zieleni), nigdy --gold. Nasycone
   zloto na ciemnym znaczy w tym serwisie "tutaj mozna kliknac" - uzyte
   ozdobnie zniszczyloby ten sygnal na pasie CTA i w stopce.

   Kontrasty na --forest (#123527):
   on-ink 10.89:1 · on-ink-2 6.21:1 · gold 6.83:1 · gold-hi 8.63:1
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  background:var(--forest);color:var(--on-ink);
  border-bottom:1px solid var(--gold-line);
  overflow:hidden;
}
.hero .container{position:relative;z-index:2;padding-top:76px;padding-bottom:76px}
.hero__grid{display:grid;grid-template-columns:var(--col12);gap:56px;align-items:center}
.hero__text{grid-column:span 7}
/* Bez portretu tekst dostaje wiecej miejsca zamiast zostawiac pusta kolumne. */
.hero__text--wide{grid-column:span 9}
.hero__media{grid-column:span 5;position:relative}

/* Nadtytul hero powtarza rozstrzelone wersaliki z materialow. */
.hero__kicker{
  display:block;font-family:var(--font);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-caps);
  color:var(--gold);margin-bottom:22px;
}
/* Hero jest jedynym miejscem, gdzie naglowek idzie wyzej niz skala z brand.md
   pkt 4 - to najwiekszy element strony i nosi caly komunikat. */
.hero h1{font-size:clamp(2.05rem,6.4vw,3.8rem);color:var(--paper);margin-bottom:.3em}
/* Druga linia naglowka zlotem - tak jak w grafice tytulowej. 6.83:1. */
.hero h1 em{font-style:normal;display:block;color:var(--gold)}
.hero__lead{font-size:1.08rem;color:var(--on-ink);max-width:36rem;margin-bottom:34px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

/* Telefon: druga droga kontaktu, tansza poznawczo niz formularz. Nie jest
   przyciskiem, zeby nie konkurowal z CTA o te sama uwage. */
.hero__tel{
  display:inline-flex;align-items:center;gap:12px;min-height:48px;
  color:var(--gold);font-weight:600;
}
.hero__tel .num{font-family:var(--mono);font-size:1.02rem;letter-spacing:-.01em}
.hero__tel-icon{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:50%;border:1px solid var(--gold-line);
  background:rgba(214,181,106,.09);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.hero__tel-icon svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.5}
.hero__tel:hover{color:var(--gold-hi)}
.hero__tel:hover .hero__tel-icon{background:rgba(214,181,106,.18);border-color:var(--gold)}

/* --- kadr ---------------------------------------------------------------
   Luk u gory zamiast prostokata, obwiedziony zlota wlosowa linia. Kadr
   siedzi w kontenerze z aspect-ratio, wiec obraz nie przeskakuje przed
   zaladowaniem (brand.md pkt 6). */
.hero__frame{
  position:relative;z-index:2;
  aspect-ratio:4/5;overflow:hidden;background:var(--ink);
  border-radius:240px 240px 12px 12px;
  box-shadow:0 0 0 1px var(--gold-line);
}
.hero__frame img{width:100%;height:100%;object-fit:cover;display:block}
/* Przesuwajaca sie po kadrze smuga swiatla - jedyny ruch, ktory dotyka
   samego zdjecia. Trzyma sie w --gold-line, wiec nie rozjasnia twarzy
   i nie zmienia kontrastu inskrypcji w kadrze. */
.hero__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%,
    rgba(230,205,144,.13) 48%,
    rgba(230,205,144,.20) 51%,
    rgba(230,205,144,.13) 54%,
    transparent 64%);
  transform:translate3d(-130%,0,0);
}

/* --- geometria w tle ----------------------------------------------------
   Dwa ksztalty, oba w --gold-line. Sa poza kolejnoscia czytania (aria-hidden
   w HTML) i nie lapia myszy, wiec nie da sie w nie kliknac ani ich
   sfokusowac. */
.hero__deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__deco::before{
  content:"";position:absolute;
  top:6%;right:-14%;width:86%;aspect-ratio:1;
  border:1px solid var(--gold-line);border-radius:50%;
}
.hero__deco::after{
  content:"";position:absolute;
  left:-8%;bottom:8%;width:104px;height:76px;
  background-image:radial-gradient(rgba(214,181,106,.45) 1.6px,transparent 1.7px);
  background-size:19px 19px;
}

/* --- warstwa ruchu ciaglego ---------------------------------------------
   Klient poprosil o pierwszy ekran, ktory zyje po zakonczeniu wejscia,
   a nie zastyga. Warstwa daje trzy niezalezne, dlugie cykle: poswiate,
   obracajace sie pierscienie i smuge po kadrze. Cykle maja czasy pierwsze
   wzgledem siebie (19/26/31/47/61 s), wiec uklad nigdy nie wpada
   w widoczna petle - oko lapie ruch, ale nie lapie wzoru.

   Zakres jest ten sam, co reszty dekoracji hero: --gold-line i slabsze.
   Nasycone zloto zostaje sygnalem klikalnosci (patrz naglowek sekcji),
   wiec nic tutaj go nie uzywa.

   Wszystkie klatki to transform i opacity - kompozytor, zero layoutu.
   Warstwa stoi pod trescia i ma pointer-events:none, wiec nie da sie
   w nia trafic myszka ani tabem. */
.hero__ambient{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;
  /* Na waskim ekranie poswiata i pierscienie wchodzilyby pod tekst - tam
     ruch niesie juz sam kadr, wiec warstwa sie chowa. */
  display:none;
}
@media (min-width:860px){.hero__ambient{display:block}}
.hero__ambient>i{position:absolute;display:block;border-radius:50%}

/* Poswiata: dwa miekkie zrodla przesuwajace sie po przeciwnych torach.
   .30 alpha na butelkowej zieleni to okolo 3 procent roznicy jasnosci -
   widac ruch, nie widac plamy. */
.hero__glow{filter:blur(2px)}
.hero__glow--a{
  top:-28%;right:-6%;width:62%;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(214,181,106,.16),transparent 62%);
}
.hero__glow--b{
  bottom:-34%;left:-10%;width:54%;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(122,190,150,.11),transparent 64%);
}

/* Pierscienie: kreskowana obwiednia w powolnym obrocie. Kreska sprawia,
   ze obrot w ogole widac - pelne kolo krecace sie wokol srodka byloby
   nieruchome. Oba stoja za kadrem i wychodza poza krawedz sekcji. */
.hero__ring{
  border:1px dashed rgba(214,181,106,.22);
}
.hero__ring--a{
  top:50%;right:4%;width:520px;aspect-ratio:1;margin:-260px 0 0;
}
.hero__ring--b{
  top:50%;right:14%;width:330px;aspect-ratio:1;margin:-165px 0 0;
  border-style:solid;border-color:rgba(214,181,106,.12);
}

/* Smuga swiatla przez cala sekcje: waski, mocno rozmyty pas przechodzacy
   raz na cykl. Poza przejsciem jest przezroczysty, wiec wiekszosc czasu
   sekcja stoi spokojnie - to jest ten jeden akcent, ktory lapie oko. */
.hero__sweep{
  top:-20%;left:0;width:34%;height:140%;border-radius:0;
  background:linear-gradient(100deg,transparent,rgba(230,205,144,.10),transparent);
  transform:translate3d(-60%,0,0) skewX(-12deg);
  opacity:0;
}

/* --- naglowek strony wewnetrznej ---------------------------------------- */
/* Naglowek podstrony: czern jako oprawa, zlota linia u dolu jako podpis
   identyfikacji. Zielen zostaje zarezerwowana dla hero i pasa CTA, zeby
   ciemne powierzchnie nie zlaly sie w jedna. */
.pagehead{
  background:var(--ink);color:var(--on-ink);padding:66px 0 58px;
  border-bottom:2px solid var(--gold-deep);
}
.pagehead .container{position:relative;z-index:2}
.pagehead h1{color:var(--paper);margin-bottom:.3em}
.pagehead p{color:var(--on-ink);max-width:62ch;margin:0}
.breadcrumbs{font-size:.86rem;color:var(--on-ink-2);margin-bottom:16px}
.breadcrumbs a{color:var(--on-ink-2);text-decoration:underline;text-underline-offset:3px}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs span{margin:0 8px;opacity:.6}

/* ==========================================================================
   IKONY
   Ikona nie jest klikalna, wiec nie dostaje akcentu.
   ========================================================================== */
.icon-44,.icon-40,.icon-22,.icon-hero,.card__icon svg{
  stroke:var(--ink-3);fill:none;stroke-width:1.4;
}
.icon-44{width:34px;height:34px}
.icon-40{width:32px;height:32px}
.icon-22{width:22px;height:22px}
.icon-hero{width:34%;height:auto;stroke-width:.9;stroke:currentColor}
.card__icon{display:block;margin-bottom:16px}

/* ==========================================================================
   PASEK LICZB
   Fakt przed przymiotnikiem - liczby dostaja najwiekszy stopien pisma.
   ========================================================================== */
.stats{border-bottom:1px solid var(--rule);background:var(--paper)}
.stats .container{border-top:1px solid var(--gold-line-lt)}
.stats .container{display:grid;grid-template-columns:var(--col12)}
.stats__item{grid-column:span 3;padding:30px 26px;border-left:1px solid var(--rule)}
.stats__item:first-child{border-left:0;padding-left:0}
.stats__item strong{
  display:block;font-family:var(--mono);font-size:2.15rem;font-weight:500;
  color:var(--ink);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.stats__item span{display:block;margin-top:10px;font-size:.88rem;color:var(--ink-3);line-height:1.45}

/* ==========================================================================
   SIATKA 12-KOLUMNOWA

   Wszystkie uklady wielokolumnowe na stronie stoja na jednym zestawie
   12 kolumn (--col12) i roznia sie wylacznie rozpietoscia elementu.
   Powod jest jeden: sekcje o roznej liczbie kolumn maja wtedy wspolne
   linie pionowe. Trojka z sekcji "Ile to kosztuje" i czworka z paska
   liczb konczy sie na tej samej linii, mimo ze dziela wiersz inaczej.

   rozpietosc | uklad          | uzycie
   -----------|----------------|------------------------------------------
   span 3     | cztery rowne   | .stats__item, .steps__item
   span 4     | trzy rowne     | .price__item
   span 5 / 7 | asymetryczny   | .split, .case, .contact-grid
   span 6     | dwa rowne      | .track, .values__item, .voices__item

   Odstep miedzykolumnowy nalezy do sekcji, nie do siatki - kazdy blok
   ustawia wlasny column-gap.

   Rozpietosci obowiazuja tylko dopoki siatka ma 12 kolumn. Ponizej
   breakpointow uklady spadaja do jednej lub dwoch kolumn i wtedy w
   sekcji RESPONSYWNOSC rozpietosci wracaja do grid-column:auto.
   Zmiana szablonu bez zdjecia rozpietosci utworzylaby kolumny niejawne.
   ========================================================================== */

/* ==========================================================================
   UKLAD DZIELONY
   ========================================================================== */
/* 5/7, nie 6/6. Kadr jest wezszy od tekstu, ktory mu towarzyszy - to
   jedyny powod, dla ktorego czytelnik wie, ktore z dwojga jest trescia.
   Rozpietosci ida za kolejnoscia w HTML, wiec ten sam zapis obsluguje
   strone glowna (kadr pierwszy) i /o-kancelarii (tekst pierwszy). */
.split{display:grid;grid-template-columns:var(--col12);gap:56px;align-items:center}
.split__media{position:relative;grid-column:span 5}
.split>:not(.split__media){grid-column:span 7}
.frame{aspect-ratio:4/3;background:var(--ink);position:relative;overflow:hidden}
.frame__scales{position:absolute;inset:0;display:grid;place-items:center;z-index:2;color:var(--gold)}
.frame__scales svg{width:40%;stroke:currentColor;fill:none;stroke-width:1.1}
.frame--photo{aspect-ratio:4/3}
.frame--photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
/* Kadr na pelnej szerokosci kontenera (podstrona Kontakt, pas nad mapa).
   Proporcje 4/3 sa policzone pod waska kolumne .split__media - rozciagniete
   na caly kontener daja kadr wysoki na pol ekranu, wiec pas dostaje wlasne. */
.frame--wide{aspect-ratio:21/9;margin-bottom:28px}
.frame-badge{
  position:absolute;right:0;bottom:-1px;z-index:3;
  background:var(--ink);color:var(--gold);padding:18px 22px;text-align:left;
  border-top:2px solid var(--gold);
}
.frame-badge strong{
  display:block;font-family:var(--mono);font-size:1.7rem;line-height:1;
  font-weight:500;letter-spacing:-.035em;
}
.frame-badge span{font-size:.8rem;color:var(--on-ink-2)}


/* ==========================================================================
   LICENCJE - lista atrybucji (/licencje)
   Miniatura + metadane w dwoch kolumnach. Zadnego koloru poza --rule
   (podzial strukturalny) i --ink-3 (metadane) - link do licencji jest tu
   jedynym elementem, ktory wolno kliknac, wiec akcent nalezy tylko do niego.
   ========================================================================== */
.licence-item{
  display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:start;
  padding:26px 0;border-top:1px solid var(--rule);
}
.licence-item:last-child{border-bottom:1px solid var(--rule)}
.licence-item h3{font-size:1.05rem;margin:0 0 12px}
.licence-item__thumb{aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.licence-item__thumb img{width:100%;height:100%;object-fit:cover}
.licence-meta{list-style:none;margin:0;padding:0;font-size:.92rem;color:var(--ink-2)}
.licence-meta li{margin-bottom:5px}
.licence-meta span{
  display:inline-block;min-width:130px;color:var(--ink-3);
  font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;
}

.checklist{list-style:none;margin:0 0 26px;padding:0}
.checklist li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-2)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.58em;width:12px;height:6px;
  border-left:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);
}

/* ==========================================================================
   DWA TORY - firma / osoba prywatna
   Rozroznienie powierzchnia, nie drugim kolorem. Jeden blok kontrastowy
   na cala strone.
   ========================================================================== */
.tracks{display:grid;grid-template-columns:var(--col12);gap:0}
.track{grid-column:span 6;padding:44px 40px;display:flex;flex-direction:column}
.track--paper{background:var(--sunk);color:var(--ink-2);border-top:2px solid var(--gold-deep)}
.track--ink{background:var(--forest);color:var(--on-ink);border-top:2px solid var(--gold)}
.track--ink h2,.track--ink h3{color:var(--paper)}
.track--ink .track__who{color:var(--gold)}
.track--ink .track__list li{color:var(--on-ink)}
.track--ink .track__list li::before{border-color:var(--gold)}
.track__who{
  font-family:var(--font);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-caps);
  color:var(--gold-deep);margin-bottom:14px;
}
.track__list{list-style:none;margin:0 0 26px;padding:0}
.track__list li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.96rem}
.track__list li::before{
  content:"";position:absolute;left:0;top:.58em;width:12px;height:6px;
  border-left:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);
}
.track__cta{margin-top:auto;padding-top:8px}

/* ==========================================================================
   SPRAWY
   Uklad: stan faktyczny -> dzialanie -> WYNIK. Wynik dostaje najwiekszy
   stopien pisma w calym bloku, bo po niego przyszedl czytelnik.
   ========================================================================== */
.cases{border-top:1px solid var(--rule)}
.case{
  display:grid;grid-template-columns:var(--col12);gap:14px 48px;
  padding:30px 0;border-bottom:1px solid var(--rule);
}
.case__head{grid-column:span 5;min-width:0}
.case__meta{
  font-family:var(--mono);font-size:.8rem;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px;
}
.case__title{margin:0;font-size:1.05rem}
.case__body{grid-column:span 7;min-width:0;margin:0}
.case__step{margin:0 0 .8em}
.case__label{
  display:block;font-family:var(--mono);font-size:.76rem;
  color:var(--ink-3);margin-bottom:2px;
}
.case__step p{margin:0;font-size:.95rem}
/* Wynik: po niego przyszedl czytelnik, wiec dostaje najwiekszy stopien
   pisma w calym bloku. */
.case__outcome{
  font-size:1.12rem;line-height:1.45;color:var(--ink);font-weight:500;
  border-left:3px solid var(--gold-deep);padding-left:16px;margin:14px 0 0;
}
.case__outcome .case__label{margin-bottom:4px}
.cases__more{margin-top:34px}
.case__note{font-size:.84rem;color:var(--ink-3);margin-top:24px;max-width:68ch}
.cases__filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.cases__filter a{
  padding:9px 16px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--ink-3);font-size:.9rem;color:var(--ink);
  transition:border-color .16s,background .16s,color .16s;
}
.cases__filter a:hover{border-color:var(--act);color:var(--act)}
.cases__filter a[aria-current="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper)}

/* ==========================================================================
   SPECJALIZACJE
   Nie karta w ramce 1.31:1, tylko wpis oddzielony linia strukturalna.
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:34px 32px}
.card{
  background:transparent;border:0;border-top:2px solid var(--gold-deep);
  padding:22px 0 0;position:relative;display:flex;flex-direction:column;
}
.card h3{font-size:1.05rem;margin-bottom:.45em}
.card p{font-size:.94rem;color:var(--ink-3);margin:0 0 16px}
.card .checklist{margin-bottom:16px}
.card .checklist li{font-size:.9rem;margin-bottom:6px}
.card__more{
  margin-top:auto;font-size:.92rem;font-weight:600;
  color:var(--act);display:inline-flex;align-items:center;gap:8px;
  text-decoration:underline;text-underline-offset:3px;
}
.card__more:hover{color:var(--act-hover)}
.card__more::after{content:"\2192"}

/* Lista specjalizacji jako wiersze - wariant gestszy niz .cards */
.spec-list{border-top:1px solid var(--rule)}
.spec-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);transition:background .16s var(--ease);
}
.spec-row:hover{background:var(--act-tint)}
.spec-row__icon{display:flex;align-items:center}
.spec-row__text{min-width:0;display:block}
.spec-row h3{margin:0 0 2px;font-size:1rem}
.spec-row p{margin:0;font-size:.92rem;color:var(--ink-3);max-width:70ch}
.spec-row__go{color:var(--act);font-size:1.05rem}

/* Strona glowna: trzy grupy specjalizacji jako kolumny nazw */
.spec-groups{display:grid;grid-template-columns:var(--col12);gap:32px}
.spec-groups__col{grid-column:span 4;border-top:2px solid var(--gold-deep);padding:20px 0 0}
.spec-groups__col h3{font-size:1.05rem;margin-bottom:.35em}
.spec-groups__col h3 a{color:var(--act);text-decoration:underline;text-underline-offset:3px}
.spec-groups__col h3 a:hover{color:var(--act-hover)}
.spec-groups__col>p{font-size:.92rem;color:var(--ink-3);margin:0 0 14px}
.spec-groups__col ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.spec-groups__col li{border-bottom:1px solid var(--rule)}
.spec-groups__col li a{display:block;padding:9px 0;font-size:.95rem;color:var(--ink)}
.spec-groups__col li a:hover{color:var(--act);background:var(--act-tint)}

/* ==========================================================================
   PASEK CTA
   ========================================================================== */
/* Pas CTA - butelkowa zielen ze zlotym przyciskiem, dokladnie jak stopka
   materialow Kancelarii. */
.cta{
  background:var(--forest);color:var(--on-ink);padding:66px 0;
  border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);
}
.cta .container{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.cta h2{color:var(--paper);margin-bottom:.25em}
.cta p{color:var(--on-ink);margin:0;max-width:52ch}

/* ==========================================================================
   CENA I TRYB WSPOLPRACY
   ========================================================================== */
.price{display:grid;grid-template-columns:var(--col12);gap:32px}
.price__item{grid-column:span 4;border-top:2px solid var(--gold-deep);padding:20px 0 0}
.price__item strong{display:block;font-size:1.05rem;color:var(--ink);margin-bottom:.4em}
.price__item p{font-size:.94rem;color:var(--ink-3);margin:0}

/* --- przebieg wspolpracy ------------------------------------------------- */
.steps{display:grid;grid-template-columns:var(--col12);gap:0 32px}
.steps__item{grid-column:span 3;padding:20px 0 0;border-top:2px solid var(--gold-deep)}
.steps__num{
  display:block;font-family:var(--mono);font-size:.86rem;font-weight:500;
  color:var(--ink-3);margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.steps__item h3{margin-bottom:.4em}
.steps__item p{font-size:.94rem;color:var(--ink-3);margin:0}

/* --- zasady -------------------------------------------------------------- */
.values{display:grid;grid-template-columns:var(--col12);gap:0 56px}
.values__item{grid-column:span 6;padding:26px 0;border-top:1px solid var(--rule)}
.values__item h3{margin-bottom:.35em}
.values__item p{font-size:.95rem;color:var(--ink-3);margin:0}

/* ==========================================================================
   ZESPOL
   Zaprojektowane pod JEDEN portret: lider dostaje pelny blok,
   reszta zespolu jest lista tekstowa. Zadnych inicjalow w kolkach.
   ========================================================================== */
.lead-profile{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:44px;align-items:start}
.lead-profile__photo{aspect-ratio:4/5;background:var(--ink);overflow:hidden}
.lead-profile__photo img{width:100%;height:100%;object-fit:cover}
.lead-profile--nophoto{grid-template-columns:1fr}
.lead-profile__role{font-family:var(--mono);font-size:.86rem;color:var(--ink-3);margin-bottom:14px}
.lead-profile__contact{margin-top:20px;font-size:.94rem;display:flex;flex-wrap:wrap;gap:8px 22px}
.lead-profile__contact a{color:var(--act);text-decoration:underline;text-underline-offset:3px}
.lead-profile__contact a:hover{color:var(--act-hover)}

.team-list{border-top:1px solid var(--rule);margin-top:48px}
.team-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 40px;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.team-row h3{margin:0 0 .15em;font-size:1rem}
.team-row__role{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);margin:0}
.team-row p{margin:0;font-size:.94rem;color:var(--ink-3)}
.team-row__contact{margin-top:8px;font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 18px}
.team-row__contact a{color:var(--act);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   OPINIE
   ========================================================================== */
.voices{margin:0}
.voices__lead{
  max-width:60ch;font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.35;letter-spacing:0;
  color:var(--ink);margin:0 0 18px;
}
.voices__who{font-weight:600;color:var(--ink);margin:0}
.voices__case{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);margin:2px 0 0}
.voices__rest{display:grid;grid-template-columns:var(--col12);gap:0 48px;margin-top:44px}
.voices__item{grid-column:span 6;padding:24px 0;border-top:1px solid var(--rule);margin:0}
.voices__item p:first-child{color:var(--ink-2);margin-bottom:12px;font-size:.98rem}

/* ==========================================================================
   AKTUALNOSCI
   ========================================================================== */
.news-list{border-top:1px solid var(--rule)}
.news-row{
  display:grid;grid-template-columns:88px 1fr auto;gap:24px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--rule);transition:background .16s var(--ease);
}
.news-row:hover{background:var(--act-tint)}
.news-row--nothumb{grid-template-columns:1fr auto}
.news-row__thumb{width:88px;aspect-ratio:1;overflow:hidden;background:var(--sunk)}
.news-row__thumb img{width:100%;height:100%;object-fit:cover}
.news-row__date{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);margin:0 0 5px}
.news-row h3{margin:0 0 5px;font-size:1.02rem}
.news-row p{font-size:.93rem;color:var(--ink-3);margin:0;max-width:62ch}
.news-row__text{min-width:0}
.news-row__go{color:var(--act);font-size:1.05rem;padding-left:12px}
.news-more{margin-top:36px}

.post-card{display:flex;flex-direction:column;background:transparent;border:0;border-top:2px solid var(--gold-deep)}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--sunk);margin-top:18px}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:18px 0 0;display:flex;flex-direction:column;flex:1}
.post-card__date{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);margin-bottom:8px}
.post-card h3{font-size:1.05rem;margin-bottom:.45em}
.post-card p{font-size:.93rem;color:var(--ink-3);margin:0 0 16px}

/* --- tresc wpisu / opisu specjalizacji ---------------------------------- */
.prose{max-width:68ch}
.prose h2{margin-top:1.5em;font-size:1.4rem}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.05em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.35em}
.prose a{color:var(--act);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--act-hover)}
.prose img{margin:1.5em 0}
.prose blockquote{
  margin:1.5em 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold-deep);
  color:var(--ink);
}

/* --- paginacja ----------------------------------------------------------- */
.pager{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:44px;min-height:44px;padding:10px 14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-3);font-size:.88rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:border-color .16s,background .16s,color .16s;
}
.pager a:hover{border-color:var(--act);color:var(--act)}
.pager .is-current{background:var(--forest);border-color:var(--forest);color:var(--paper);font-weight:600}

.empty-state{padding:48px 20px;color:var(--ink-3);border-top:2px solid var(--gold-deep)}

/* ==========================================================================
   KONTAKT I FORMULARZ
   ========================================================================== */
/* Formularz dostaje 7 kolumn, dane kontaktowe 5. Dane sa krotka lista,
   formularz jest praca do wykonania - szerokosc mowi, co jest wazniejsze. */
.contact-grid{display:grid;grid-template-columns:var(--col12);gap:52px;align-items:start}
.contact-grid>:first-child{grid-column:span 5}
.contact-grid>:last-child{grid-column:span 7}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.info-list li:first-child{padding-top:0}
.info-list svg{width:22px;height:22px;flex:none;margin-top:3px;stroke:var(--ink-3);fill:none;stroke-width:1.4}
.info-list strong{display:block;color:var(--ink-3);font-size:.84rem;font-weight:600;margin-bottom:3px}
.info-list a,.info-list span{color:var(--ink);font-size:1rem}
.info-list a{text-decoration:underline;text-underline-offset:3px;color:var(--act)}
.info-list a:hover{color:var(--act-hover)}

.form{background:var(--sunk);padding:34px 30px;border-top:2px solid var(--gold-deep)}
.form h3{margin-bottom:1em}
.field{margin-bottom:16px}
.field label{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--ink-3);background:var(--paper);
  font-family:inherit;font-size:1rem;color:var(--ink);transition:border-color .16s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--act)}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field ::placeholder{color:var(--ink-3);opacity:1}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--ink-2);margin-bottom:20px}
.consent input{width:auto;min-height:0;width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--act)}
.consent a{color:var(--act);text-decoration:underline;text-underline-offset:3px}
.form-note{font-size:.86rem;color:var(--ink-3);margin:14px 0 0}
.form-note a{color:var(--act);text-decoration:underline;text-underline-offset:3px}

.map{border-top:2px solid var(--gold-deep);overflow:hidden;min-height:320px}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

.alert{padding:14px 18px;margin-bottom:20px;font-size:.95rem;border-left:3px solid}
.alert--success{background:var(--act-tint);border-color:var(--act);color:#123f24}
.alert--error{background:#fbf0ef;border-color:#8f2d24;color:#6f231c}
.alert a{text-decoration:underline;text-underline-offset:3px}
.field-error{display:block;margin-top:5px;font-size:.85rem;color:#8f2d24;font-weight:500}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#8f2d24;border-width:2px}

/* ==========================================================================
   AKORDEON
   Panel zwiniety musi byc [hidden] - inaczej czytnik ekranu odczytuje
   wszystkie odpowiedzi, a tabulator wchodzi w niewidoczne linki.
   ========================================================================== */
.accordion{border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-btn{
  width:100%;background:none;border:0;padding:20px 44px 20px 0;text-align:left;cursor:pointer;
  font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--ink);position:relative;
  min-height:48px;
}
.acc-btn::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease);
}
.acc-btn[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.acc-btn:hover{color:var(--act)}
.acc-btn:hover::after{border-color:var(--act)}
.acc-panel__inner{padding:0 20px 22px 0;color:var(--ink-2)}
.acc-panel__inner p:last-child{margin-bottom:0}

/* ==========================================================================
   STOPKA
   ========================================================================== */
.footer{
  background:var(--ink);color:var(--on-ink-2);padding:60px 0 0;font-size:.94rem;
  border-top:2px solid var(--gold-deep);
}
.footer h4{
  color:var(--gold);margin-bottom:16px;
  font-family:var(--font);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-caps);
}
.footer a{color:var(--on-ink-2)}
.footer a:hover{color:var(--gold)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.footer__grid ul{list-style:none;margin:0;padding:0}
.footer__grid li{margin-bottom:9px}
/* W stopce znak stoi nad nazwa, a nie obok niej: kolumna ma tu okolo 250 px,
   wiec uklad poziomy lamal wordmark i rozcinal podpis w polowie frazy. */
.footer .logo{flex-direction:column;align-items:flex-start;gap:14px}
.footer .logo__mark{width:48px;height:48px}
.footer .logo__name{color:var(--paper);font-size:1.05rem}
.footer .logo__sub{color:var(--gold);font-size:.58rem;letter-spacing:.14em}
.footer__about{margin-top:18px;max-width:34ch;font-size:.92rem;line-height:1.6;color:var(--on-ink-2)}
.footer .num{font-family:var(--mono)}
/* Klamra identyfikacji - haslo ze stopki materialow Kancelarii. Nie jest
   linkiem i nie jest naglowkiem, wiec nie dostaje nasyconego zlota: stoi
   w --on-ink-2 miedzy dwiema zlotymi wlosowymi liniami. */
.footer__claim{
  margin-top:44px;padding:22px 0;text-align:center;
  border-top:1px solid var(--gold-line);
  font-family:var(--font);font-size:.72rem;font-weight:600;color:var(--on-ink-2);
  text-transform:uppercase;letter-spacing:var(--track-caps);
}
.footer__bottom{
  margin-top:0;border-top:1px solid var(--gold-line);
  padding:20px 0;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.86rem;color:var(--on-ink-2);
}
.footer__bottom a{text-decoration:underline;text-underline-offset:3px}
.footer__bottom .sep{opacity:.5;margin:0 8px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:44px;height:44px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;
  transition:border-color .18s,background .18s;
}
.socials a:hover{border-color:var(--gold);background:rgba(214,181,106,.14)}
.socials svg{width:17px;height:17px;fill:var(--on-ink-2)}
.socials a:hover svg{fill:var(--gold)}

/* ==========================================================================
   ELEMENTY PLYWAJACE
   ========================================================================== */
#scroll-top{
  position:fixed;right:20px;bottom:20px;z-index:50;
  width:48px;height:48px;display:none;place-items:center;
  background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  transition:background .18s var(--ease);
}
#scroll-top svg{width:20px;height:20px}
#scroll-top:hover{background:var(--forest)}
#scroll-top.is-visible{display:grid}

#cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);color:var(--on-ink);padding:16px 0;
}
#cookie-banner .cookie-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
#cookie-banner p{margin:0;font-size:.9rem}
#cookie-banner a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
#cookie-banner .btn{border-color:var(--on-ink);background:var(--on-ink);color:var(--ink)}
#cookie-banner .btn:hover{background:var(--paper);border-color:var(--paper)}

/* --- warianty pomocnicze (zastepuja style inline w szablonach) ---------- */
.container--narrow{max-width:760px}
/* height:auto - obraz ma atrybuty width/height z pliku, wiec bez tego
   przegladarka narzucilaby wysokosc oryginalu. Para atrybut + auto to
   jedyne miejsce na froncie, gdzie miejsce na obraz nie jest rezerwowane
   przez aspect-ratio kontenera. */
.post-cover{width:100%;height:auto;margin-bottom:34px}
.post-excerpt{font-size:1.12rem;color:var(--ink)}
.pager--wide{justify-content:space-between;margin-top:52px}


/* ==========================================================================
   REFERENCJE - skany listow referencyjnych i certyfikatow

   Dokument jest tu dowodem, a nie ilustracja: kadr stoi na --sunk i miesci
   caly arkusz (object-fit:contain), bo przyciecie do rownej siatki ucieloby
   naglowek firmy albo podpis - czyli to, po co czytelnik tu przyszedl.
   Proporcja 3/4 jest wspolna dla wszystkich kart mimo roznych proporcji
   skanow: bez niej rzad kart ma postrzepiona linie dolna.

   Kolor niesie wylacznie podpis "Powiekszy skan" - patrz komentarz w
   partials/reference_card.php.
   ========================================================================== */
.refs{display:grid;grid-template-columns:var(--col12);gap:40px 32px}
.ref{grid-column:span 4;min-width:0;display:flex;flex-direction:column}
.ref__link{display:block;margin-bottom:16px}
.ref__thumb{
  display:block;aspect-ratio:3/4;overflow:hidden;background:var(--sunk);
  transition:box-shadow .22s var(--ease);
}
.ref__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.ref__link:hover .ref__thumb{box-shadow:0 10px 28px rgba(17,19,20,.14)}
.ref__zoom{
  display:inline-block;margin-top:10px;
  font-size:.82rem;font-weight:600;color:var(--act);
}
.ref__link:hover .ref__zoom{color:var(--act-hover);text-decoration:underline}

.ref__company{font-size:1rem;margin:0 0 6px;line-height:1.35}
.ref__meta{
  font-family:var(--mono);font-size:.76rem;color:var(--ink-3);
  margin:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 10px;
}
.ref__meta span:not(:last-child)::after{content:" ·";margin-left:10px;color:var(--rule)}
.ref__scope{font-size:.9rem;color:var(--ink-2);margin:0 0 12px;max-width:none}
.ref__quote{
  margin:auto 0 0;padding:12px 0 0;border-top:1px solid var(--rule);
}
.ref__quote p{
  margin:0;font-family:var(--serif);font-size:1.06rem;line-height:1.5;
  color:var(--ink-2);max-width:none;
}
.ref__quote p::before{content:"„"}
.ref__quote p::after{content:"”"}
.ref__note{font-size:.84rem;color:var(--ink-3);margin-top:40px;max-width:68ch}

/* Zajawka wewnatrz sekcji opinii na stronie glownej: cztery kadry w rzedzie,
   karta bez cytatu (patrz $refCompact w partials/reference_card.php).
   Odkreslenie oddziela dowod od cytatow, nie zaczynajac nowej sekcji. */
.voices__proof{margin-top:52px;padding-top:36px;border-top:1px solid var(--rule)}
/* Bez opinii tekstowych nad zajawka nie ma czego odkreslac. */
.voices__proof--solo{margin-top:0;padding-top:0;border-top:0}
.voices__proof--solo .voices__proof-title{position:absolute;left:-9999px}
.voices__proof-title{font-size:1rem;margin:0 0 24px}
.refs--teaser .ref{grid-column:span 3}
.refs--teaser .ref__company{font-size:.94rem}

/* --------------------------------------------------------------------------
   PODGLAD SKANU

   Natywny <dialog>: pulapka fokusu, Esc i powrot fokusu do miniatury sa
   po stronie przegladarki. Tlo jest ciemne, wiec obrys focus przelaczamy
   na zloto (lista w sekcji DOSTEPNOSC).

   Skan czyta sie z bliska, wiec okno idzie do krawedzi widoku - to jedyne
   miejsce w serwisie, gdzie obraz nie siedzi w kolumnie tekstowej.
   -------------------------------------------------------------------------- */
.lightbox{
  border:0;padding:0;background:transparent;color:var(--on-ink);
  max-width:min(94vw,860px);max-height:94vh;
  width:100%;overflow:visible;
}
.lightbox::backdrop{background:rgba(17,19,20,.88)}
.lightbox__close-form{display:flex;justify-content:flex-end;margin:0 0 8px}
.lightbox__close{
  background:transparent;border:1px solid var(--gold);color:var(--gold);
  width:40px;height:40px;font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background .18s,color .18s;
}
.lightbox__close:hover{background:var(--gold);color:var(--ink)}
.lightbox__img{
  display:block;width:100%;max-height:78vh;object-fit:contain;background:var(--paper);
}
.lightbox__caption{
  margin:12px 0 0;font-size:.86rem;color:var(--on-ink-2);text-align:center;max-width:none;
}

/* ==========================================================================
   RESPONSYWNOSC
   ========================================================================== */
@media (max-width:1080px){
  .menu{gap:16px}
  .menu a{font-size:.9rem}
}
@media (max-width:980px){
  .split,.contact-grid,.tracks,.lead-profile,.hero__grid,.spec-groups{grid-template-columns:1fr}
  /* Szablon przestaje miec 12 kolumn, wiec rozpietosci musza znikac razem
     z nim - inaczej "span 5" wymusilby kolumny niejawne. */
  .split>*,.contact-grid>*,.hero__grid>*,.track,.case__head,.case__body,
  .stats__item,.steps__item,.price__item,.spec-groups__col{grid-column:auto}
  .split,.contact-grid,.lead-profile{gap:40px}
  /* Kadr nad tekstem rozpychalby ekran w pionie, zanim czytelnik zobaczy
     naglowek - po zwinieciu idzie pod tekst i traci luk na pol wysokosci. */
  .hero__grid{gap:44px}
  .hero__media{order:2;max-width:26rem}
  .hero__frame{aspect-ratio:5/4;border-radius:150px 150px 12px 12px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .stats .container{grid-template-columns:1fr 1fr}
  .stats__item:nth-child(3){border-left:0;padding-left:0}
  .stats__item:nth-child(n+3){border-top:1px solid var(--rule)}
  .steps,.price{grid-template-columns:1fr 1fr;gap:0 32px}
  .steps__item:nth-child(n+3),.price__item:nth-child(n+3){margin-top:32px}
  .case{grid-template-columns:1fr;gap:12px}
  .team-row{grid-template-columns:1fr;gap:6px}
  /* Siatka traci 12 kolumn, wiec rozpietosc karty musi zniknac razem z nia. */
  .refs{grid-template-columns:1fr 1fr;gap:36px 28px}
  .ref,.refs--teaser .ref{grid-column:auto}
}
@media (max-width:860px){
  .burger{display:grid}
  .nav__cta{display:none}
  /* Wordmark szeryfowy z rozstrzeleniem jest szerszy od monogramu, ktory tu
     stal wczesniej - bez zwezenia i min-width:0 wypycha burgera poza ekran
     i cala strona zaczyna sie przewijac w poziomie. */
  .logo{flex:1;min-width:0;gap:12px}
  .logo__name{font-size:1.02rem;letter-spacing:.05em}
  /* display:none, a nie max-height:0 - zwiniete menu musi zniknac
     z kolejnosci tabulacji i z drzewa dostepnosci, nie tylko z widoku. */
  .menu{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 18px 34px rgba(17,19,20,.14);
  }
  .menu.is-open{display:flex}
  .menu li{border-top:1px solid var(--rule)}
  .menu a{display:block;padding:15px 24px;min-height:48px;font-size:1rem}
  .menu a::after{display:none}
  .menu a[aria-current="page"]{border-left:3px solid var(--act);padding-left:21px}
  .nav{position:relative}
  .topbar .container{justify-content:center;gap:4px 18px}
}
@media (max-width:640px){
  .logo__mark{width:38px;height:38px}
  .logo__name{font-size:.88rem;letter-spacing:.04em}
  /* Podpis "PRAWO - DORADZTWO - ZAANGAZOWANIE" lamie sie tu na dwie linie
     i rozpycha naglowek w pionie. W stopce zostaje, bo tam ma cala szerokosc. */
  .header .logo__sub{display:none}
  .licence-item{grid-template-columns:1fr;gap:16px}
  .refs{grid-template-columns:1fr;gap:32px}
  /* Na waskim ekranie pelna strona 3/4 zjada caly widok, zanim czytelnik
     dojdzie do nazwy firmy - kadr skraca sie do proporcji zajawki. */
  .ref__thumb{aspect-ratio:4/3}
  .licence-meta span{display:block;min-width:0}
  .frame--wide{aspect-ratio:16/10;margin-bottom:20px}
  body{font-size:16px}
  .section{padding:56px 0}
  .hero .container{padding-top:56px;padding-bottom:56px}
  .pagehead{padding:48px 0 42px}
  .stats .container{grid-template-columns:1fr}
  .stats__item{border-left:0;padding:20px 0;border-top:1px solid var(--rule)}
  .stats__item:first-child{border-top:0;padding-top:0}
  .steps,.price,.values,.voices__rest,.tracks{grid-template-columns:1fr;gap:0}
  .values__item,.voices__item{grid-column:auto}
  .steps__item:nth-child(n+2),.price__item:nth-child(n+2){margin-top:26px}
  .track{padding:34px 24px}
  .footer__grid{grid-template-columns:1fr}
  .form{padding:26px 20px}
  .cta .container{flex-direction:column;align-items:flex-start}
  .news-row{grid-template-columns:60px 1fr;gap:16px}
  .news-row__thumb{width:60px}
  .news-row__go,.spec-row__go{display:none}
  .btn{width:100%}
  .hero__actions .btn,.cta .btn,.track__cta .btn{width:100%}
}

/* ==========================================================================
   WEJSCIA SEKCJI

   Jedyny efekt zwiazany ze scrollem w calym serwisie. Sekcja pojawia sie
   raz, przesuwa sie o 12 px i wiecej nic - bez skalowania, bez opoznien
   kaskadowych, bez parallaxu.

   Klasy naklada JavaScript (assets/js/app.js) i tylko na sekcje, ktore
   przy wejsciu na strone byly ponizej krawedzi okna. Sekcja widoczna od
   razu nie jest uzbrajana, wiec nie mrugnie. Bez JS zaden z tych stanow
   nie powstaje i tresc jest po prostu widoczna - animacja jest warstwa,
   nie warunkiem czytelnosci.
   ========================================================================== */
.is-armed{opacity:0;transform:translateY(12px)}
.is-revealed{
  opacity:1;transform:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}

/* Kaskada wewnatrz kontenera oznaczonego data-stagger. Indeks --i nadaje
   JavaScript i scina go do 6, wiec najdluzsze opoznienie to 420 ms - bez
   tego dziesiec specjalizacji wchodziloby przez trzy czwarte sekundy. */
[data-stagger] > .is-revealed{transition-delay:calc(var(--i,0) * 70ms)}

/* ==========================================================================
   WEJSCIE HERO

   Hero stoi nad krawedzia okna, wiec zaden efekt scrollowy go nie dotyczy -
   i wlasnie dlatego bez tej kaskady wskakuje bez zapowiedzi.

   Element z opacity:0 nie liczy sie jako namalowany, wiec kazde opoznienie
   odsuwa LCP. Stad kaskada jest krotka: ostatni element rusza po 180 ms,
   calosc konczy sie ponizej 450 ms, a NAGLOWEK dostaje najkrotsze opoznienie
   w grupie, nie najdluzsze.

   Stan bazowy elementow zostaje widoczny - niewidzialnosc zyje wylacznie
   w klatkach animacji. Dzieki temu regula *{animation:none!important}
   z bloku prefers-reduced-motion wylacza efekt, zamiast zostawiac pusty hero.
   ========================================================================== */
@keyframes hero-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.hero__kicker,.hero h1,.hero__lead,.hero__actions,.hero__media{
  animation:hero-in .42s var(--ease) both;
}
.hero h1{animation-delay:.04s}
.hero__kicker{animation-delay:.10s}
.hero__lead{animation-delay:.13s}
.hero__actions{animation-delay:.18s}
/* Kadr wchodzi rownolegle z naglowkiem: to dwie polowy tej samej
   kompozycji, wiec rozjezdzanie ich w czasie rozbijaloby ja na dwa zdarzenia. */
.hero__media{animation-delay:.06s;animation-duration:.55s}

/* ==========================================================================
   RUCH CIAGLY HERO

   Wejscie (wyzej) konczy sie ponizej 450 ms i wtedy pierwszy ekran zastygal.
   Ten blok utrzymuje go w ruchu na stale: pieciu niezaleznych cykli
   o dlugosciach 19/26/31/47/61 s nie da sie zsynchronizowac wzrokiem,
   wiec powtorzenie nie rzuca sie w oczy.

   Zadna z tych animacji nie dotyczy tresci - rusza sie wylacznie dekoracja
   i kadr. Tekst po zakonczeniu wejscia stoi nieruchomo, bo naglowek, ktory
   plywa, czyta sie gorzej.

   Reguly wydajnosci: tylko transform i opacity, zero animowanych
   wlasciwosci layoutu, zaden cykl nie startuje przed zakonczeniem wejscia
   (opoznienia >= .6 s), zeby ruch ciagly nie konkurowal z LCP.
   ========================================================================== */
@keyframes hero-drift-a{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-7%,6%,0) scale(1.14)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes hero-drift-b{
  0%  {transform:translate3d(0,0,0) scale(1.06)}
  50% {transform:translate3d(9%,-7%,0) scale(1)}
  100%{transform:translate3d(0,0,0) scale(1.06)}
}
@keyframes hero-spin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}
@keyframes hero-spin-rev{
  from{transform:rotate(360deg)}
  to  {transform:rotate(0deg)}
}
/* Kadr oddycha: 8 px w pionie. Mniej nie byloby widac, wiecej zaczeloby
   rozjezdzac sie z kolumna tekstu obok. */
@keyframes hero-float{
  0%  {transform:translate3d(0,0,0)}
  50% {transform:translate3d(0,-8px,0)}
  100%{transform:translate3d(0,0,0)}
}
/* Smuga: przejscie zajmuje 18 procent cyklu, reszta to cisza. */
@keyframes hero-sheen{
  0%      {transform:translate3d(-130%,0,0);opacity:0}
  6%      {opacity:1}
  16%     {opacity:1}
  22%,100%{transform:translate3d(320%,0,0);opacity:0}
}
@keyframes hero-sweep{
  0%      {transform:translate3d(-60%,0,0) skewX(-12deg);opacity:0}
  10%     {opacity:1}
  30%     {opacity:1}
  42%,100%{transform:translate3d(360%,0,0) skewX(-12deg);opacity:0}
}

.hero__glow--a{animation:hero-drift-a 26s ease-in-out .6s infinite}
.hero__glow--b{animation:hero-drift-b 31s ease-in-out .6s infinite}
.hero__ring--a{animation:hero-spin 61s linear .6s infinite}
.hero__ring--b{animation:hero-spin-rev 47s linear .6s infinite}
.hero__sweep{animation:hero-sweep 19s var(--ease) 2.4s infinite}
.hero__frame{animation:hero-float 11s ease-in-out .8s infinite}
.hero__frame::after{animation:hero-sheen 17s var(--ease) 3.2s infinite}

/* Ozdobniki statyczne z sekcji HERO dostaja wlasny, najwolniejszy ruch:
   okrag pulsuje, siatka punktow przesuwa sie o jedno oczko. Oba sa na tyle
   powolne, ze dzialaja jako tlo, a nie jako animacja do ogladania.

   Siatka jest jedynym wyjatkiem od reguly "tylko transform i opacity":
   przesuniecie tla o jedno oczko odtwarza ruch w miejscu, czego transform
   nie zrobi (przesunalby caly placek razem z krawedziami). Element ma
   104x76 px, wiec przemalowanie jest bez znaczenia. */
@keyframes hero-breathe{
  0%  {transform:scale(1);opacity:1}
  50% {transform:scale(1.045);opacity:.62}
  100%{transform:scale(1);opacity:1}
}
@keyframes hero-dots{
  from{background-position:0 0}
  to  {background-position:19px 19px}
}
.hero__deco::before{
  transform-origin:50% 50%;
  animation:hero-breathe 23s ease-in-out .9s infinite;
}
.hero__deco::after{animation:hero-dots 14s linear infinite}

@media (prefers-reduced-motion:reduce){
  /* Pseudoelementy trzeba wymienic z nazwy - `*` ich nie obejmuje, a ruch
     ciagly hero siedzi miedzy innymi w .hero__frame::after i .hero__deco::after. */
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* Gdyby ustawienie systemowe zmienilo sie juz po uzbrojeniu sekcji,
     tresc nie moze zostac niewidoczna. */
  .is-armed{opacity:1;transform:none}
}