/* ============================================================
   SEWTEAM strona glowna. Motyw jasny: gradient jasna zielen -> biel,
   napisy i przyciski w butelkowej zieleni. Podglad lokalny.
   Sciezki obrazow wzgledne; przed wdrozeniem:
     sed -i 's|"wp-content/|"/wp-content/|g' hero-butelkowa.html
   ============================================================ */
:root{
  --green:#085008;        /* butelkowa zielen: naglowki, przyciski, sekcje ciemne */
  --green-deep:#063c06;
  --acc:#80ba27;          /* jasna zielen: wypelnienia, podkreslenia, NIE tekst na bieli */
  --warm:#963f06;        /* cieply rdzawy akcent, przelamuje zielen naglowkow.
                             Wybrany tak, zeby przechodzil AA wszedzie, takze na
                             najjasniejszym punkcie gradientu hero (3.68:1). */
  --acc-text:#9bd23f;     /* limonka do tekstu na ciemnej zieleni (5.41:1) */
  --ink:#162012;          /* tekst podstawowy na jasnym tle */
  --mut:#4c5a46;          /* tekst drugorzedny na jasnym tle (7:1 na bieli) */
  --paper:#f6f8f4;
  --white:#fff;
  --line:#dde5d4;
  --tint:#f1f7e6;         /* delikatna podkladka sekcji naprzemiennych */
  --display:'Poppins',system-ui,sans-serif;  /* czcionka z oryginalnej strony sewteam.pl */
  --body:'Poppins',system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
     /* clip, nie hidden: hidden robi z body kontener przewijania, a to potrafi
        zepsuc position:sticky w srodku, czyli mechanike ekranu wprowadzajacego.
        clip tak samo ucina wystajaca tresc, ale scrollportu nie tworzy. */
     overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:var(--acc);color:var(--green-deep)}

/* pojawianie sie przy scrollu */
[data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- naglowek ---------- */
/* Naglowek jest PRZYKLEJONY i polprzezroczysty na kazdej stronie
   (zgloszenie Iwony 08.09). Do tej pory tak zachowywala sie wylacznie strona
   glowna, a na podstronach pasek byl przyklejony do gory dokumentu i odjezdzal
   przy pierwszym przewinieciu: z dlugiego wpisu nie dalo sie wrocic do menu
   inaczej niz przewijajac na sam gorny koniec.

   position:fixed, a nie sticky: naglowek lezy poza <main>, wiec sticky nie
   mialby wzgledem czego sie kleic. Fixed nie zajmuje miejsca w ukladzie,
   dokladnie tak samo jak wczesniejsze absolute, wiec nic sie nie przesuwa. */
.hdr{position:fixed;inset:0 0 auto;z-index:30;--hdr-pad:14px;
     padding:var(--hdr-pad) var(--gut);
     display:flex;align-items:center;gap:28px}

/* Pigulka jest TLEM paska, a nie samym paskiem: polprzezroczysta biel
   z rozmyciem czyta sie i na ciemnym ekranie wprowadzajacym, i na jasnym hero
   podstrony, wiec nie trzeba przelaczac kolorow skryptem przy przewijaniu. */
.hdr::before{content:"";position:absolute;inset:8px var(--gut);
  border-radius:999px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 34px -16px rgba(2,23,2,.55);z-index:-1}
.hero-logo{display:inline-block;margin-bottom:26px}
.hero-logo img{height:clamp(58px,9vw,96px);width:auto;
  filter:drop-shadow(0 10px 24px rgba(8,80,8,.25))}
/* Logo w naglowku. Do 26.08 naglowek stron uslugowych nie mial ZADNEGO
   logo ani linku do strony glownej: lewy gorny rog, czyli miejsce,
   w ktorym kazdy uzytkownik szuka powrotu na start, byl pusty przez
   637 px. Jedynym wyjsciem byl drobny okruszek nizej.
   Na stronie glownej to logo jest ukryte, bo hero ma juz swoje, duze. */
.hdr-logo{display:inline-flex;align-items:center;margin-right:auto}
.hdr-logo img{height:clamp(30px,3.4vw,42px);width:auto}
/* Do 08.09.2026 stalo tu .glowna .hdr-logo{display:none}: logo w pasku bylo
   na stronie glownej ukryte, bo hero ma wlasne, duze, i dwa naraz bylo nadmiarem.
   Iwona poprosila o logo w pasku takze tutaj, wiec wraca. Dostaje odstep
   od lewej krawedzi pigulki, zeby nie dotykalo jej brzegu: pigulka zaczyna sie
   dokladnie tam, gdzie tresc naglowka, wiec bez tego logo siedzialoby na kancie. */
.glowna .hdr-logo{margin-left:18px}
/* Na stronie glownej logo jest ukryte, wiec znika element, ktory dopychal
   reszte naglowka w prawo. Bez tego menu i telefon zbijaly sie do lewej
   krawedzi i polowa paska zostawala pusta. */
/* nawigacja nie potrzebuje juz margin-left:auto, odstep robi logo */

/* Menu bez JavaScriptu, na ukrytym polu wyboru.
   Probowane najpierw na <details> i odrzucone: zamkniety <details>
   zeruje szerokosc swojej zawartosci na poziomie przegladarki i nie da
   sie tego pewnie nadpisac stylem, wiec na szerokim ekranie lista
   linkow miala 0 px szerokosci. Pole wyboru jest w pelni sterowalne. */
/* Kanoniczny sposob ukrycia pola tak, zeby zostalo w drzewie dostepnosci:
   czytnik ekranu je oglasza i da sie je zogniskowac tabulatorem.
   Nie uzywamy display:none ani visibility:hidden, bo te odbieraja fokus. */
.hdr-check{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hdr-burger{display:none}
/* gap zwezony z 26 na clamp po dolozeniu szostej pozycji (O nas, 08.09):
   przy 1000 px pasek zaczynal sie zawijac na dwie linie. */
.hdr-nav{display:flex;gap:clamp(16px,1.7vw,26px);font-size:.82rem;font-weight:600;
         letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.hdr-nav a{opacity:.85;transition:opacity .25s}
.hdr-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px;text-decoration-color:var(--acc)}
.hdr-tel{font-weight:700;font-size:.95rem;white-space:nowrap;color:var(--green)}

/* ---------- hero: gradient jasna zielen -> biel ---------- */
.hero{position:relative;min-height:94svh;display:flex;align-items:center;
      justify-content:center;overflow:hidden;isolation:isolate;
      background:linear-gradient(180deg,#9ccb55 0%,#cfe6a4 48%,var(--white) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(8,80,8,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(8,80,8,.07) 1px,transparent 1px);
  background-size:clamp(60px,7vw,104px) clamp(60px,7vw,104px);
  mask-image:linear-gradient(#000 55%,transparent)}
.hero-core{position:relative;z-index:20;width:100%;max-width:780px;
           padding:96px var(--gut) 100px;text-align:center}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
         color:var(--green);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:2px;background:var(--warm)}
h1{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.02em;
   margin-bottom:26px;text-wrap:balance;color:var(--green)}
.h1-lead{display:block;font-size:clamp(1.05rem,2.4vw,1.6rem);font-weight:700;
         letter-spacing:.01em;margin-bottom:14px}
.h1-big{display:block;font-size:clamp(2.3rem,7.2vw,5.1rem)}
/* jedyny glosny blok: butelkowa zielen, bialy tekst (odwrocone) */
.h1-block{display:inline-block;background:var(--warm);color:var(--white);
          padding:.06em .26em .12em;margin-top:.1em;border-radius:3px;
          box-shadow:0 18px 44px -14px rgba(150,63,6,.5)}
.lead{font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.62;color:var(--ink);
      max-width:600px;margin:0 auto 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:3px;
     font-weight:600;font-size:.96rem;transition:all .3s var(--ease);border:1px solid transparent}
.btn-main{background:var(--green);color:var(--white);
          box-shadow:0 12px 34px -12px rgba(8,80,8,.6)}
.btn-main:hover{background:var(--green-deep);transform:translateY(-2px);
                box-shadow:0 18px 44px -12px rgba(8,80,8,.55)}
.btn-ghost{border-color:rgba(8,80,8,.4);color:var(--green)}
.btn-ghost:hover{border-color:var(--green);background:rgba(8,80,8,.06);transform:translateY(-2px)}
.microcopy{margin-top:20px;font-size:.83rem;color:var(--mut);max-width:470px;margin-inline:auto}

/* rozsypane zdjecia: biala ramka jak odbitki, przy scrollu zjezdzaja za napis */
.tiles{position:absolute;inset:0;z-index:10;pointer-events:none;--pas:350px}
.tile{position:absolute;pointer-events:auto;display:block;border-radius:3px;overflow:hidden;
      background:var(--white);padding:6px;
      box-shadow:0 16px 40px -14px rgba(8,40,8,.4);
      transition:box-shadow .4s var(--ease);will-change:transform,opacity}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:2px;
          transition:transform .45s var(--ease)}
.tile:hover{box-shadow:0 24px 54px -16px rgba(8,40,8,.5);z-index:15}
.tile:hover img{transform:scale(1.06)}
.tile .cap{position:absolute;inset:auto 6px 6px;padding:14px 8px 6px;font-size:.66rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(transparent,rgba(6,40,6,.85));border-radius:0 0 2px 2px;
  opacity:0;transition:opacity .3s}
.tile:hover .cap{opacity:1}
/* Wzorzec: okaydev.co. Dwie geste kolumny odbitek, DOCIAZONE KU GORZE,
   na wysokosci naglowka. Poprzedni uklad rozkladal je rownomiernie do samego
   dolu hero, przez co dolne wychodzily poza pierwszy ekran i pojawialy sie
   dopiero w momencie, gdy scroll juz wciagal je za napis: nikt ich nie widzial
   w spoczynku. Teraz wszystkie 10 miesci sie nad linia zgiecia.

   Odbitki celowo NACHODZA na siebie jak kolaz: t2, t4, t8 i t10 leza na
   sasiadach i maja z-index 11, zeby uklad mial glebie. Tekst ma z-index 20,
   wiec i tak jest zawsze na wierzchu, a hover podnosi kafelek na 15. */
.t1{top:3%;left:1.5%;width:clamp(150px,17vw,330px);--rot:-3.5deg;--bd:6.5s}
.t2{top:17%;left:11.5%;width:clamp(122px,13vw,252px);--rot:2.5deg;--bd:7.8s;--bdel:-2.1s}
.t3{top:33%;left:2%;width:clamp(150px,17.5vw,340px);--rot:-1.5deg;--bd:7.1s;--bdel:-4.4s}
.t4{top:52%;left:10%;width:clamp(112px,11.5vw,224px);--rot:5deg;--bd:5.9s;--bdel:-1.2s}
.t9{top:66%;left:2.5%;width:clamp(108px,11vw,214px);--rot:3.5deg;--bd:7.6s;--bdel:-3.8s}
.t5{top:3%;right:1.5%;width:clamp(144px,16vw,312px);--rot:3deg;--bd:7.4s;--bdel:-3.3s}
.t8{top:16%;right:12%;width:clamp(116px,12vw,232px);--rot:-5.5deg;--bd:6.8s;--bdel:-2.9s}
.t6{top:32%;right:2%;width:clamp(150px,17.5vw,340px);--rot:-2.5deg;--bd:6.2s;--bdel:-5.1s}
.t7{top:52%;right:10%;width:clamp(126px,13vw,252px);--rot:4deg;--bd:8.1s;--bdel:-0.7s}
.t10{top:66%;right:2.5%;width:clamp(112px,11.5vw,222px);--rot:-3deg;--bd:6s;--bdel:-1.6s}
.t2,.t4,.t8,.t10{z-index:11}
.tile{transform:rotate(var(--rot))}

/* Delikatne unoszenie w miejscu, zeby odbitki zyly takze bez scrollowania.
   Animowana jest osobna wlasciwosc translate, nie transform, wiec sklada sie
   i z obrotem z CSS, i z przesunieciem, ktore skrypt scrolla wpisuje inline.
   Kazda odbitka ma inny czas i faze (--bd, --bdel), zeby nie falowaly chorem. */
@keyframes tile-bob{
  0%{translate:0 0}
  50%{translate:0 -11px}
  100%{translate:0 0}
}
.tile{animation:tile-bob var(--bd,7s) ease-in-out var(--bdel,0s) infinite}
@media (prefers-reduced-motion:reduce){
  .tile{animation:none}
}

/* ---------- zdjecia w tresci: figura, duet, trio ----------
   Sciana tekstu czyta sie dobrze wyszukiwarce, ale czlowiek po niej
   przewija. Te trzy komponenty sluza do przetykania sekcji zdjeciami
   realizacji, zeby dowod byl widoczny w trakcie czytania, a nie dopiero
   w galerii na dole strony.

   figura: jedno zdjecie na pelna szerokosc kolumny tresci
   duet:   dwa obok siebie
   trio:   trzy obok siebie, na mobile przewijane w poziomie          */
.figura, .duet, .trio{margin:34px auto 0;max-width:var(--w,1180px)}
.figura figcaption, .duet figcaption, .trio figcaption{
  margin-top:10px;font-size:.82rem;color:var(--mut);line-height:1.45}
.figura img, .duet img, .trio img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;
  background:#e9ece7;box-shadow:0 14px 34px -18px rgba(8,40,8,.45)}
.figura img{aspect-ratio:21/9}
.duet{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.duet img{aspect-ratio:4/3}
.trio img{aspect-ratio:1/1}
.duet figure, .trio figure{margin:0}

/* Zdjecie wtopione w akapit, oplywane tekstem. Uzywane tam, gdzie sekcja
   jest krotka i pelna szerokosc bylaby przesada. */
.obok{float:right;width:clamp(220px,34%,360px);margin:6px 0 22px 28px}
.obok img{width:100%;border-radius:10px;display:block;
  box-shadow:0 14px 34px -18px rgba(8,40,8,.45)}
.obok figcaption{margin-top:8px;font-size:.8rem;color:var(--mut);line-height:1.4}

@media (max-width:820px){
  .duet{grid-template-columns:1fr;gap:16px}
  .trio{grid-template-columns:repeat(3,1fr);gap:10px}
  .figura img{aspect-ratio:16/9}
  .obok{float:none;width:auto;margin:18px 0}
}

/* Katalog: przyklady produktow z oferty (packshot na bialym tle, opis,
   technika znakowania). Osobny komponent, bo .card to link do realizacji,
   a .trio na telefonie zostaje w trzech kolumnach po 105 px, w ktorych
   opis produktu mialby po szesc linijek. Dodany 17.09.2026 do stron
   o gadzetach. To NIE sa realizacje, wiec pod siatka zawsze stoi .katalog-nota. */
.katalog{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  margin:34px auto 0;max-width:var(--w,1180px)}
.katalog figure{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.katalog img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;background:#fff}
.katalog figcaption{padding:14px 16px 16px;border-top:1px solid var(--line);
  font-size:.84rem;line-height:1.5;color:var(--mut);flex:1}
.katalog figcaption b{display:block;font-family:var(--display);font-weight:700;
  font-size:.95rem;line-height:1.3;color:var(--green);margin-bottom:6px}
.katalog .znak{display:block;margin-top:9px;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
.katalog-nota{margin:16px auto 0;max-width:var(--w,1180px);font-size:.8rem;color:var(--mut)}
@media (max-width:700px){
  .katalog{grid-template-columns:1fr 1fr;gap:11px}
  .katalog figcaption{padding:10px 11px 12px;font-size:.78rem}
  .katalog figcaption b{font-size:.86rem}
  .katalog .znak{font-size:.64rem;letter-spacing:.03em}
}

/* ---------- pas produktow: butelkowa zielen ---------- */
.marquee{background:var(--green);color:var(--paper);overflow:hidden;position:relative;z-index:5}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq-track span{font-family:var(--display);font-weight:700;font-size:clamp(.95rem,2vw,1.5rem);
  letter-spacing:-.01em;text-transform:uppercase;padding:16px 26px;display:inline-flex;
  align-items:center;gap:26px;white-space:nowrap}
.mq-track span::after{content:"";width:7px;height:7px;background:var(--warm);
  transform:rotate(45deg);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sekcje wspolne ---------- */
.sec{padding:clamp(60px,8vw,108px) var(--gut);max-width:var(--wrap);margin:0 auto}
.sec-tint{background:var(--tint);border-block:1px solid var(--line)}
.sec-tint>.sec{background:none}
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.08;color:var(--green)}
.sec-head p{margin-top:16px;color:var(--mut)}
.kicker{font-size:.76rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.kicker::before{content:"";width:26px;height:2px;background:var(--warm)}

/* ---------- realizacje (kafelki zostaja TYLKO tutaj) ---------- */
.prod-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{position:relative;border-radius:4px;overflow:hidden;background:var(--white);
      border:1px solid var(--line);transition:border-color .3s var(--ease),
      transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{border-color:var(--green);transform:translateY(-4px);
  box-shadow:0 20px 44px -18px rgba(8,80,8,.3)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;
          transition:transform .5s var(--ease)}
.card:hover img{transform:scale(1.04)}
.card-body{padding:18px 20px 22px}
.card h3{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
         color:var(--green);margin-bottom:7px}
.card p{font-size:.86rem;color:var(--mut);line-height:1.5}
.card .go{font-style:normal;margin-top:12px;font-size:.78rem;font-weight:700;letter-spacing:.05em;
          text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:7px;
          transition:gap .3s var(--ease)}
.card:hover .go{gap:12px}

/* pozostale uslugi pod kafelkami */
.more-title{margin:34px 0 14px;font-size:.82rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.more-links{display:flex;flex-wrap:wrap;gap:10px}
.more-links a{padding:10px 18px;border-radius:22px;border:1px solid var(--line);
  font-size:.86rem;font-weight:600;color:var(--green);transition:all .3s var(--ease)}
.more-links a:hover{border-color:var(--green);background:var(--tint);transform:translateY(-2px)}

/* ---------- wideo ---------- */
.vid-wrap{position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 26px 60px -24px rgba(8,80,8,.35)}
.vid-wrap video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  color:var(--ink);padding:18px;font-size:.95rem}
.vid-wrap video a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.vid-note{margin-top:14px;font-size:.83rem;color:var(--mut)}

/* ---------- proces: pionowa os czasu, nie kafelki ---------- */
.tl{position:relative;max-width:820px;margin-left:8px}
.tl::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;
  background:var(--line)}
.tl-fill{position:absolute;left:19px;top:6px;width:2px;background:var(--warm);
  height:0;transition:height 1.6s var(--ease)}
.tl.in .tl-fill{height:calc(100% - 12px)}
.tl-step{position:relative;padding:0 0 40px 66px}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:8px;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--white);border:2px solid var(--green);display:grid;place-items:center}
.tl-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--warm);
  transform:scale(0);transition:transform .5s var(--ease)}
.tl-step.in .tl-dot::after{transform:scale(1)}
.tl-num{font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--mut);
  letter-spacing:.14em;margin-bottom:4px}
.tl-step h3{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--green);
  margin-bottom:6px;letter-spacing:-.01em}
.tl-step p{font-size:.92rem;color:var(--mut);max-width:56ch}

/* zdjecia przy krokach procesu */
.tl-step{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.tl-body{min-width:0}
.tl-photo{width:clamp(96px,13vw,150px);border-radius:4px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 10px 26px -14px rgba(8,80,8,.3);display:block}
.tl-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.tl-photo:hover img{transform:scale(1.06)}

/* ---------- mozaika z placu montazu ---------- */
.mosaic{display:grid;gap:10px;grid-template-columns:repeat(6,1fr);grid-auto-rows:118px;
  grid-auto-flow:dense}
.mosaic a{position:relative;overflow:hidden;border-radius:4px;display:block;
  border:1px solid var(--line)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic .w2{grid-column:span 2}
.mosaic .h2{grid-row:span 2}
.mosaic .cap{position:absolute;inset:auto 0 0;padding:16px 12px 8px;font-size:.68rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(transparent,rgba(6,40,6,.85));opacity:0;transition:opacity .3s}
.mosaic a:hover .cap{opacity:1}
.mosaic-more{margin-top:22px}

/* ---------- widelki: cennik redakcyjny z paskami zakresow ---------- */
.pricelist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(0,1.6fr) minmax(130px,.9fr);
  gap:clamp(14px,3vw,36px);align-items:center;padding:20px 4px;
  border-bottom:1px solid var(--line);transition:background .25s}
.prow:hover{background:var(--tint)}
.prow h3{font-size:.98rem;font-weight:600;color:var(--ink)}
.prow h3 small{display:block;font-size:.78rem;font-weight:400;color:var(--mut);margin-top:2px}
.pbar{position:relative;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.pbar i{position:absolute;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,var(--warm),var(--green));
  left:var(--lo);width:0;transition:width 1.1s var(--ease) .15s}
.pricelist.in .pbar i{width:calc(var(--hi) - var(--lo))}
.pbar-scale{display:flex;justify-content:space-between;font-size:.68rem;color:var(--mut);
  margin-top:6px;letter-spacing:.04em}
.prow .val{font-family:var(--display);font-weight:700;font-size:clamp(.98rem,1.6vw,1.18rem);
  color:var(--green);text-align:right;letter-spacing:-.01em;line-height:1.25}
.price-foot{margin-top:26px;padding:18px 22px;border-left:3px solid var(--warm);
  background:var(--tint);border-radius:0 4px 4px 0;font-size:.9rem;color:var(--ink)}
.price-foot a{color:var(--green);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}

/* ---------- dlaczego: chaos kontra porzadek + lista redakcyjna ---------- */
.versus{display:grid;gap:22px;grid-template-columns:1fr auto 1fr;align-items:stretch;
  margin-bottom:56px}
.vs-panel{border:1px dashed #c3cdb8;border-radius:6px;padding:26px 22px;min-height:250px;
  position:relative;background:var(--white)}
.vs-panel.order{border:1px solid var(--green);box-shadow:0 20px 48px -22px rgba(8,80,8,.35)}
.vs-panel h3{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--mut);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.vs-panel.order h3{color:var(--green)}
/* Panel porownania bywa uzywany takze z samym tekstem, nie tylko z chipami
   i lista (tak jest na stronie glownej). Bez tej reguly akapity sklejaly sie
   ze soba i panel czytalo sie jak jeden blok. */
.vs-panel p{font-size:.9rem;line-height:1.72;color:var(--ink)}
.vs-panel p+p{margin-top:14px}
.vs-panel p b{color:var(--green)}
.chip{display:inline-block;padding:8px 14px;border-radius:20px;font-size:.82rem;font-weight:600;
  background:var(--paper);border:1px solid var(--line);color:var(--mut);margin:0 6px 10px 0}
.chaos .chip{animation:wobble 4.6s ease-in-out infinite}
.chaos .chip:nth-child(odd){animation-delay:-1.2s}
.chaos .chip:nth-child(3n){animation-delay:-2.4s}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(-4px)}}
.chaos .meta{font-size:.78rem;color:var(--mut);margin-top:12px;line-height:1.6}
.vs-mid{display:grid;place-items:center;font-family:var(--display);font-weight:800;
  color:var(--green);font-size:1rem}
.order .one{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.order .one b{font-family:var(--display);font-size:2.4rem;font-weight:800;color:var(--green);
  line-height:1}
.order .one span{font-size:.9rem;color:var(--ink);font-weight:600}
.order ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.88rem;
  color:var(--ink)}
.order li{padding-left:22px;position:relative}
.order li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--warm);border-bottom:2px solid var(--warm);transform:rotate(-45deg)}
.why-list{border-top:1px solid var(--line)}
.why-row{display:grid;grid-template-columns:auto minmax(160px,.7fr) 1.6fr;gap:clamp(14px,3vw,40px);
  padding:26px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.why-row b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);
  color:transparent;-webkit-text-stroke:1.5px var(--warm);letter-spacing:.02em;line-height:1}
.why-row h3{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--green);
  letter-spacing:-.01em}
.why-row p{font-size:.92rem;color:var(--mut);max-width:62ch}

/* ---------- dla kogo: przelacznik rol ---------- */
.roles{max-width:900px}
.role-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.role-tab{padding:11px 22px;border-radius:24px;border:1px solid var(--line);
  background:var(--white);color:var(--ink);font-weight:600;font-size:.88rem;cursor:pointer;
  font-family:var(--body);transition:all .3s var(--ease)}
.role-tab:hover{border-color:var(--green)}
.role-tab[aria-selected="true"]{background:var(--green);color:var(--white);
  border-color:var(--green);box-shadow:0 10px 26px -12px rgba(8,80,8,.55)}
.role-panel{display:none;border-left:3px solid var(--warm);padding:6px 0 6px 26px;
  animation:fadein .45s var(--ease);grid-template-columns:1fr minmax(200px,260px);
  gap:26px;align-items:start}
.role-panel.on{display:grid}
.role-img{border-radius:5px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 34px -18px rgba(8,80,8,.35)}
.role-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.role-panel h3{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--green);
  margin-bottom:10px;letter-spacing:-.01em}
.role-panel p{color:var(--ink);max-width:64ch;margin-bottom:12px}
.role-panel .ex{font-size:.86rem;color:var(--mut)}
.role-panel .ex b{color:var(--green);font-weight:700}

/* ---------- opinie: wolno plynacy pas cytatow ---------- */
.rev-band{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rev-track{display:flex;gap:22px;width:max-content;animation:mq 60s linear infinite;
  padding:8px 0 14px}
.rev-band:hover .rev-track{animation-play-state:paused}
.rev{flex:none;width:min(360px,78vw);padding:26px 24px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:6px;position:relative;
  box-shadow:0 14px 34px -20px rgba(8,80,8,.25)}
.rev::before{content:"\201D";position:absolute;top:2px;right:16px;
  font-family:var(--display);font-size:3.6rem;line-height:1;color:var(--warm);opacity:.5}
.rev .stars{color:var(--warm);letter-spacing:.15em;font-size:.9rem;margin-bottom:12px}
.rev blockquote{font-size:.9rem;color:var(--ink);line-height:1.6;margin-bottom:14px}
.rev cite{font-style:normal;font-size:.82rem;font-weight:700;color:var(--green);display:block}
.rev .src{font-size:.76rem;color:var(--mut)}

/* ---------- FAQ ---------- */
.faq-list{max-width:840px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-weight:600;font-size:1rem;color:var(--ink);transition:color .25s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--green)}
.faq-list summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq-list details[open] summary{color:var(--green)}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list .ans{padding:0 0 22px;font-size:.92rem;color:var(--mut);line-height:1.62;
  max-width:74ch}
.faq-list .ans a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* ---------- wycena: ciemne domkniecie strony ---------- */
.quote-sec{background:linear-gradient(180deg,var(--green) 0%,var(--green-deep) 100%);
  color:var(--paper)}
.quote{display:grid;gap:38px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;max-width:var(--wrap);margin:0 auto;
  padding:clamp(60px,8vw,108px) var(--gut)}
.quote-copy .kicker{color:var(--acc-text)}
.quote-copy h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.08;color:var(--white);margin-bottom:18px}
.quote-copy p{color:rgba(246,248,244,.85);margin-bottom:22px}
.quote-copy .direct{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.quote-copy .direct a{font-family:var(--display);font-weight:700;font-size:1.24rem;
  color:var(--white)}
.quote-copy .direct a:hover{color:var(--acc-text)}
.quote-copy .direct span{font-size:.83rem;color:rgba(246,248,244,.66)}
form.quote-form{background:var(--white);border-radius:6px;padding:28px 26px;color:var(--ink);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;color:var(--ink);font:inherit;font-size:.92rem;
  transition:border-color .25s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--green);outline:none}
.fld textarea{min-height:92px;resize:vertical}
.fld-2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--mut);
  line-height:1.5;margin:18px 0 20px}
.consent a{color:var(--green);text-decoration:underline}
.consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--green)}
form.quote-form .btn-main{width:100%;justify-content:center}
.form-note{margin-top:14px;font-size:.78rem;color:var(--mut);text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- stopka ---------- */
.ftr{background:var(--green-deep);color:var(--paper)}
.ftr-in{max-width:var(--wrap);margin:0 auto;padding:52px var(--gut) 34px;
  display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ftr h4{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-text);margin-bottom:15px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ftr a{font-size:.88rem;color:rgba(246,248,244,.78)}
.ftr a:hover{color:var(--acc-text)}
.ftr address{font-style:normal;font-size:.88rem;color:rgba(246,248,244,.78);line-height:1.7}
.ftr-logo{display:inline-block;margin-bottom:18px}
.ftr-logo img{height:60px;width:auto}
.soc{display:flex;gap:12px}
.soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(246,248,244,.28);color:rgba(246,248,244,.85);
  transition:all .3s var(--ease)}
.soc a:hover{background:var(--acc);border-color:var(--acc);color:var(--green-deep);
  transform:translateY(-3px)}
.soc svg{width:20px;height:20px}
.ftr-bot{border-top:1px solid rgba(246,248,244,.14);padding:20px var(--gut);text-align:center;
  font-size:.78rem;color:rgba(246,248,244,.62)}
.ftr-bot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- mobile ---------- */
@media (max-width:900px){
  /* Do 26.08 bylo tu po prostu .hdr-nav{display:none} i NIC w zamian:
     ponizej 900 px nowe strony nie mialy zadnej nawigacji poza okruszkiem.
     Teraz menu chowa sie za przyciskiem, a nie znika. */
  .hdr{padding:14px var(--gut);gap:12px}
  /* Trzy poziome kreski. Srodkowa to <span>, gorna i dolna to jego
     ::before i ::after. Po otwarciu srodkowa gasnie, a skrajne skladaja
     sie w krzyzyk, wiec ten sam przycisk zamyka panel. */
  .hdr-burger{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    width:44px;height:44px;border:1px solid rgba(8,80,8,.35);border-radius:3px;
    background:rgba(255,255,255,.72);-webkit-tap-highlight-color:transparent}
  .hdr-burger span{position:relative;display:block}
  .hdr-burger span,.hdr-burger span::before,.hdr-burger span::after{
    width:22px;height:2px;border-radius:2px;background:var(--green);
    transition:transform .25s var(--ease),background-color .2s var(--ease)}
  .hdr-burger span::before,.hdr-burger span::after{content:"";position:absolute;left:0}
  .hdr-burger span::before{top:-7px}
  .hdr-burger span::after{top:7px}
  .hdr-check:checked~.hdr-burger span{background:transparent}
  .hdr-check:checked~.hdr-burger span::before{transform:translateY(7px) rotate(45deg)}
  .hdr-check:checked~.hdr-burger span::after{transform:translateY(-7px) rotate(-45deg)}
  .hdr-check:focus-visible~.hdr-burger{outline:2px solid var(--green);outline-offset:3px}
  .hdr-nav{display:none;position:absolute;right:var(--gut);top:calc(100% - 4px);z-index:40;
    flex-direction:column;gap:0;padding:8px;
    /* Panel trzyma teraz 24 nazwy uslug, a nie piec pozycji menu.
       214 px lamalo dluzsze nazwy na dwie linie, wiec bierze tyle
       szerokosci, ile jest, do lewego marginesu strony. */
    min-width:min(300px, calc(100vw - 2*var(--gut)));
    background:var(--white);border:1px solid var(--line);border-radius:4px;
    box-shadow:0 22px 48px -18px rgba(8,40,8,.45)}
  .hdr-check:checked~.hdr-nav{display:flex}
  .hdr-nav a{padding:12px 14px;border-radius:3px;opacity:1}
  .hdr-nav a:hover{background:var(--tint);text-decoration:none}
  .hdr-tel{font-size:.88rem}
  .hero{min-height:auto}
  .hero-core{padding:104px var(--gut) 84px}
  .t3,.t4,.t7,.t8,.t9,.t10{display:none}
  /* Na telefonie zostaja cztery odbitki i sa tylko nieco wieksze niz byly.
     Podwojenie z desktopu zasloniloby tu napis, a to on ma byc pierwszy. */
  .t1{top:4%;left:-10%;width:clamp(132px,22vw,196px)}
  .t2{top:auto;bottom:17%;left:-13%;width:clamp(112px,18vw,162px)}
  .t5{top:3%;right:-10%;width:clamp(128px,21vw,188px)}
  .t6{top:auto;bottom:14%;right:-13%;width:clamp(132px,22vw,196px)}
  .versus{grid-template-columns:1fr}
  .vs-mid{padding:4px 0}
  .why-row{grid-template-columns:auto 1fr;grid-template-areas:"n t" "n p"}
  .why-row b{grid-area:n}.why-row h3{grid-area:t}.why-row p{grid-area:p}
  .quote{grid-template-columns:1fr;gap:30px}
}
@media (max-width:700px){
  .prod-grid{grid-template-columns:1fr 1fr;gap:11px}
  .card p{display:none}
  .card-body{padding:13px 13px 16px}
  .card h3{font-size:.88rem;line-height:1.25;margin-bottom:8px}
  .card .go{margin-top:0;font-size:.68rem;letter-spacing:.04em}
  .card img{aspect-ratio:4/3}
  .prow{grid-template-columns:1fr auto;grid-template-areas:"t v" "b b"}
  .prow h3{grid-area:t}.prow .val{grid-area:v}.prow .pwrap{grid-area:b}
}
@media (max-width:700px){
  .tl-photo{width:86px}
  .role-panel{grid-template-columns:1fr}
  .role-img{max-width:300px}
  .mosaic{grid-template-columns:repeat(3,1fr);grid-auto-rows:96px}
}
@media (max-width:560px){
  .tiles{display:none}
  .hero-core{padding:100px var(--gut) 64px}
  .fld-2{grid-template-columns:1fr}
  .tl-step{grid-template-columns:1fr}
  .tl-photo{width:100%;max-width:220px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .mq-track,.rev-track{animation:none}
  [data-rv]{opacity:1;transform:none}
  .tl-fill{height:calc(100% - 12px)}
  .pricelist .pbar i{width:calc(var(--hi) - var(--lo))}
}

/* ============================================================
   STRONY USLUGOWE: komponenty uzywane poza strona glowna
   ============================================================ */
.hero-svc{position:relative;padding:120px var(--gut) clamp(48px,6vw,76px);
  background:linear-gradient(180deg,#9ccb55 0%,#cfe6a4 55%,var(--white) 100%);overflow:hidden}
.hero-svc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(8,80,8,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(8,80,8,.07) 1px,transparent 1px);
  background-size:clamp(60px,7vw,104px) clamp(60px,7vw,104px);
  mask-image:linear-gradient(#000 55%,transparent)}
.hero-svc-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center}
.hero-svc h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.04;margin-bottom:20px}
.hero-svc .lead{margin:0 0 26px;max-width:60ch;text-align:left}
.hero-svc .cta-row{justify-content:flex-start}
.hero-svc-img{border-radius:6px;overflow:hidden;border:3px solid var(--white);
  box-shadow:0 26px 60px -24px rgba(8,40,8,.5)}
.hero-svc-img img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* pasek liczb */
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  margin-top:clamp(30px,4vw,44px);padding-top:26px;border-top:1px solid rgba(8,80,8,.22)}
.stats div b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--green);line-height:1;margin-bottom:6px}
.stats div span{font-size:.83rem;color:var(--ink);line-height:1.45;display:block}

/* tabele merytoryczne */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px}
table.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem;background:var(--white)}
table.tbl th,table.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
table.tbl th{background:var(--tint);font-weight:600;color:var(--green);font-size:.84rem;
  letter-spacing:.02em}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
table.tbl td{color:var(--mut)}
/* wrap1: pierwsza kolumna to zdanie, a nie etykieta, wiec musi sie lamac.
   Bez tego tabela rozpycha sie na kilkaset px i wymusza przewijanie w bok. */
table.tbl.wrap1 td:first-child{white-space:normal}
/* linki w tabeli. Uzywa ich hub uslug, gdzie tabela JEST nawigacja */
table.tbl a{color:var(--green);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(8,80,8,.35);
  transition:text-decoration-color .25s var(--ease)}
table.tbl a:hover{text-decoration-color:var(--green)}

/* naglowek grupy uslug wewnatrz jednej sekcji */
h3.grp{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;
  color:var(--green);margin:34px 0 14px}
h3.grp:first-of-type{margin-top:8px}

/* karta: na telefonie wiersz rozklada sie w pionie zamiast przewijac w bok.
   Powod: w tabeli routujacej link siedzi w trzeciej kolumnie, czyli poza
   ekranem 375 px. Strona, ktorej cala robota to kierowanie ruchu, nie moze
   chowac linku za przewijaniem. Dotyczy wylacznie tabel z klasa .karta. */
@media(max-width:640px){
  table.tbl.karta{min-width:0}
  table.tbl.karta thead{display:none}
  table.tbl.karta,table.tbl.karta tbody,table.tbl.karta tr,table.tbl.karta td{
    display:block;width:100%}
  table.tbl.karta tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.tbl.karta tr:last-child{border-bottom:none}
  table.tbl.karta td{border-bottom:none;padding:4px 16px;white-space:normal}
  table.tbl.karta td:first-child{padding-top:10px;color:var(--green);font-size:.95rem}
  table.tbl.karta td:last-child{padding-bottom:10px}
}

/* klauzula informacyjna */
.nota{margin-top:24px;padding:18px 22px;border-left:3px solid var(--warm);background:var(--tint);
  border-radius:0 4px 4px 0;font-size:.88rem;color:var(--ink);line-height:1.6}
.nota b{color:var(--green)}
.nota a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* okruchy */
.bc{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut) 0;font-size:.8rem;
  color:var(--mut);position:relative;z-index:3}
.bc a{color:var(--green)}
.bc a:hover{text-decoration:underline;text-underline-offset:3px}
.bc span{opacity:.5;margin:0 7px}

@media (max-width:860px){
  .hero-svc-in{grid-template-columns:1fr}
  .hero-svc{padding-top:104px}
}

/* Okruszki i mikrokopia leza na jasnozielonym tle hero, a nie na bieli.
   Kolor --mut (#4c5a46) daje tam tylko 3.88:1, czyli ponizej progu WCAG AA.
   Ciemniejszy --ink daje 8.87:1. Dotyczy hero strony glownej i stron uslugowych. */
.hero-svc .bc,.hero-svc .bc a{color:var(--ink)}
.hero .microcopy,.hero-svc .microcopy{color:var(--ink)}

/* Filtr segmentu przy formularzu. SEWTEAM przyjmuje zlecenia
   wieloelementowe, nie pojedyncze drobiazgi. Ten akapit ma ten filtr
   wykonywac sam, bez odsylania kogokolwiek z kwitkiem. */
.quote-copy .zakres{font-size:.9rem;color:rgba(246,248,244,.72);
  border-left:2px solid var(--acc-text);padding-left:16px;margin:22px 0 0}

/* ============================================================
   PAS MARKI ZOIGO (tylko /strony-internetowe-www/)
   ------------------------------------------------------------
   Ta jedna strona mowi o czyms, czego SEWTEAM nie wykonuje, wiec
   podpisuje sie inna marka. Zamiast udawac, ze to ta sama firma,
   pas dostaje identyfikacje ZoiGO Creative Solutions: granatowa
   czern, limonke i techniczne etykiety w stylu rysunku
   architektonicznego, zgodnie z brand bookiem ZoiGO.
   Reszta strony zostaje w systemie SEWTEAM, wiec czytelnik widzi
   wyraznie, gdzie konczy sie jedna firma, a zaczyna druga.

   SWIADOMY KOMPROMIS: brand book ZoiGO przewiduje Cormorant
   Garamond i JetBrains Mono. NIE dociagamy ich z Google Fonts.
   Powod nie jest wydajnosciowy (9,4 s LCP dotyczylo starej strony
   glownej, nowa to inny plik), tylko proporcjonalny: dwie dodatkowe
   rodziny krojow obslugiwalyby jeden pas na jednej stronie.
   Sygnatura marki niesie sie kolorem, siatka i etykietami FIG.,
   a nie plikiem fontu. Mono bierzemy z zasobow systemowych.
   Gdyby Iwona chciala pelnej zgodnosci z brand bookiem, wystarczy
   dopisac <link> do JetBrains Mono w polu "uwagi" w _specs.py.
   ============================================================ */
.zg{
  --zg-bg:#06080F;        /* baza z brand booka ZoiGO */
  --zg-bg2:#0D1628;       /* warstwa kart */
  --zg-lime:#B8FF00;      /* akcent: etykiety, liczby, linki */
  --zg-lime-2:#D4FF7A;
  --zg-txt:#EEEEF5;
  --zg-mut:#A9B0C4;       /* 7,2:1 na #06080F */
  --zg-line:rgba(184,255,0,.22);
  --zg-mono:ui-monospace,'JetBrains Mono','Cascadia Mono','Consolas',monospace;
  background:var(--zg-bg);color:var(--zg-txt);
  background-image:linear-gradient(rgba(184,255,0,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(184,255,0,.045) 1px,transparent 1px);
  background-size:56px 56px;
}
.zg .sec-head h2,.zg h3{color:var(--zg-txt)}
.zg .sec-head p,.zg p{color:var(--zg-mut)}
.zg a{color:var(--zg-lime)}
.zg a:hover{color:var(--zg-lime-2)}
/* kicker SEWTEAM jest butelkowo zielony z rdzawa kreska: na granacie
   znika. W tym pasie przejmuje kolory ZoiGO. */
.zg .kicker,.zg .sec-head .kicker{color:var(--zg-lime)}
.zg .kicker::before{background:var(--zg-lime)}

/* szyna techniczna: FIG. 01 / PARTNER / ...
   Selektory z .zg z przodu, bo .zg p jest bardziej szczegolowe
   niz samo .zg-rail i przejelo kolor calej szyny. */
.zg .zg-rail{font-family:var(--zg-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--zg-mut);display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;padding-bottom:14px;border-bottom:1px solid var(--zg-line);
  margin-bottom:clamp(34px,5vw,54px)}
.zg .zg-rail span{color:rgba(238,238,245,.3)}
.zg .zg-rail span:first-child{color:var(--zg-lime);letter-spacing:.2em}
.zg .zg-rail b{font-weight:400;color:var(--zg-txt)}
.zg .zg-rail .dot::before{content:"\25CF";color:var(--zg-lime);margin-right:6px}

/* wizytowka: portret plus kim jest */
.zg-kto{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);align-items:start}
.zg-kto>figure{margin:0;border:1px solid var(--zg-line);border-radius:4px;overflow:hidden;
  background:var(--zg-bg2)}
.zg-kto img{width:100%;height:auto;display:block}
.zg-kto figcaption{font-family:var(--zg-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zg-mut);padding:10px 12px;
  border-top:1px solid var(--zg-line)}
.zg-kto h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.15;margin-bottom:16px}
.zg-kto p{margin-bottom:14px;max-width:62ch}
.zg-logo{width:150px;height:auto;margin-bottom:18px;display:block}

/* liczby */
.zg-liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:18px;margin:26px 0 24px;padding-top:22px;border-top:1px solid var(--zg-line)}
.zg-liczby div b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--zg-lime);line-height:1;margin-bottom:7px}
.zg-liczby div span{font-family:var(--zg-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--zg-mut);line-height:1.5;display:block}

/* bezposredni kontakt do ZoiGO */
.zg-kontakt{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-size:.9rem;padding-top:20px;border-top:1px solid var(--zg-line)}
.zg-kontakt a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* karta case study */
.zg-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
  gap:clamp(26px,4vw,52px);align-items:center;margin-top:clamp(30px,4vw,44px)}
.zg-case img{width:100%;height:auto;border-radius:4px;display:block}
.zg-case h3{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.6rem);
  line-height:1.2;margin-bottom:16px}
.zg-meta{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.zg-meta li{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);gap:14px;
  font-size:.88rem;color:var(--zg-mut);padding-bottom:9px;
  border-bottom:1px solid rgba(238,238,245,.09)}
.zg-meta b{font-family:var(--zg-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--zg-lime);font-weight:400;padding-top:3px}
.zg-wynik{margin:0;padding:18px 20px;background:var(--zg-bg2);
  border-left:3px solid var(--zg-lime);border-radius:0 4px 4px 0;font-size:.92rem}
.zg-wynik b{color:var(--zg-txt)}

/* pozostale realizacje.
   Flex, nie grid, i to celowo: realizacji jest siedem, a kazda siatka
   o stalej liczbie kolumn zostawia przy tej liczbie wyrwe w ostatnim
   rzedzie (przy czterech kolumnach bylo to 283 px pustki w prawym dolnym
   rogu). Tu ostatni, niepelny rzad centruje sie sam, a karty w kazdym
   rzedzie maja te sama szerokosc, bo flex-grow jest wylaczony. */
.zg-inne{display:flex;flex-wrap:wrap;justify-content:center;
  gap:22px;margin-top:clamp(28px,4vw,40px)}
.zg-inne figure{flex:0 1 100%}
@media(min-width:560px){.zg-inne figure{flex-basis:calc(50% - 11px)}}
@media(min-width:900px){.zg-inne figure{flex-basis:calc(33.333% - 15px)}}
@media(min-width:1180px){.zg-inne figure{flex-basis:calc(25% - 17px)}}
.zg-inne figure{margin:0;background:var(--zg-bg2);border:1px solid var(--zg-line);
  border-radius:4px;overflow:hidden}
.zg-inne img{width:100%;height:auto;display:block}
.zg-inne figcaption{padding:15px 17px 18px;font-size:.85rem;color:var(--zg-mut);line-height:1.5}
.zg-inne figcaption b{display:block;font-family:var(--display);color:var(--zg-txt);
  font-size:.98rem;margin-bottom:6px}
.zg-inne figcaption i{font-style:normal;font-family:var(--zg-mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--zg-lime);
  display:block;margin-top:9px}

/* zastrzezenie pod pasem: kto wystawia fakture */
.zg-nota{margin-top:clamp(30px,4vw,44px);padding:18px 22px;
  border:1px dashed var(--zg-line);border-radius:4px;font-size:.87rem;line-height:1.62}
.zg-nota b{color:var(--zg-lime)}

@media(max-width:860px){
  .zg-kto{grid-template-columns:1fr}
  .zg-kto>figure{max-width:240px}
  .zg-case{grid-template-columns:1fr}
  .zg-case>div:last-child{order:-1}
}
@media(max-width:520px){
  .zg-meta li{grid-template-columns:1fr;gap:4px}
}

/* ============================================================
   EKRAN WPROWADZAJACY (tylko strona glowna)
   ------------------------------------------------------------
   Wzorzec: "light tunnel through void" z analogueagency.com.
   Tam jest granatowa czern i bialo-niebieski rozblysk; tutaj
   butelkowa zielen #085008, promienie w #80ba27 i biel.

   Calosc jest ZROBIONA GRADIENTAMI, bez ani jednego pliku
   graficznego. Powod: ten ekran staje sie pierwszym, co widzi
   uzytkownik, wiec nie moze dolozyc ani kilobajta do LCP.

   Jak dziala przewijanie: sekcja ma wybieg dwoch ekranow, a scena
   w srodku jest sticky. Skrypt liczy postep i podaje go w dwoch
   zmiennych: --zlaczenie (polowki zdania zjezdzaja do siebie
   i rosna) i --akapit (tekst pod spodem sie pojawia).

   WYJSCIE JEST ZWYKLYM PRZEWIJANIEM, bez zadnej animacji. Gdy zdanie
   i akapit sa gotowe, sticky puszcza scene i cala plansza odjezdza
   w gore, a hero wjezdza za nia. Wczesniej kadr zwijal sie w maly
   kwadrat i uciekal w gore; wygladalo to zle, wiec zostalo usuniete
   razem ze zmienna --wyjscie. Do tego kroku nie trzeba ani jednej
   linii skryptu: robi go przegladarka, wiec jest plynny zawsze,
   nawet gdy skrypt sie zatnie.

   Wartosci domyslne sa USTAWIONE NA STAN KONCOWY zdania, wiec
   bez JavaScriptu widac gotowe zdanie i akapit, a nie polowki
   rozrzucone po bokach. Wysokosc wybiegu dokłada dopiero skrypt.
   ============================================================ */
.intro{position:relative;height:100svh;--zlaczenie:1;--akapit:1;--zblizenie:1}
/* Tlo sceny to ta sama czern-zielen, co welon nad zdjeciami. Jest tu na wypadek,
   gdyby kadr nie pokryl calej sceny: pod spodem ma byc ciemna zielen, a nie biel body. */
.intro-scena{position:sticky;top:0;height:100svh;background:#021702}
.intro-kadr{position:absolute;inset:0;overflow:hidden;background:#021702}

/* SCIANA REALIZACJI (zastapila wirujace promienie 08.09).
   Powod zmiany: promienie byly abstrakcja, ktora nie mowila nic o firmie
   i nie pasowala do reszty serwisu opartej na fotografii realizacji.
   Teraz pod zdaniem jedzie dwadziescia prawdziwych zdjec ulozonych
   w kolejnosci samego zdania: lewa kolumna to szyld na elewacji,
   prawa to koszulka i gadzety. Kolumny mijaja sie w pionie, a cala
   sciana przybliza sie do widza, wiec ruch bierze sie z przewijania,
   a nie z petli czasowej lecacej w kolko niezaleznie od uzytkownika.

   Animujemy WYLACZNIE transform i opacity, bez rozmyc liczonych co klatke,
   bo blur na warstwie tej wielkosci zjada budzet klatki na slabszym sprzecie. */
.intro-sciana{position:absolute;left:-2%;right:-2%;top:50%;height:190svh;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  transform:translateY(-50%) scale(calc(1.30 - .30 * var(--zblizenie)))}
.intro-sciana .kol{display:grid;grid-template-rows:repeat(5,1fr);gap:10px;
  transform:translateY(calc(var(--kier) * (17svh - 34svh * var(--zblizenie))))}
.intro-sciana img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:12px}

/* Welon. Na starcie niemal kryje zdjecia, przy zlozonym zdaniu przepuszcza je
   na tyle, zeby bylo widac, ze to prawdziwe realizacje, a nie tekstura.
   Srodek zostaje rozjasniony, bo tam siada zdanie i musi byc czytelne. */
.intro-welon{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.40) 0%,
      rgba(234,251,210,.17) 15%, rgba(2,23,2,0) 46%),
    radial-gradient(circle at 50% 45%, rgba(2,23,2,0) 24%,
      rgba(2,23,2,.62) 68%, #021702 100%),
    linear-gradient(180deg, rgba(2,23,2,.82) 0%, rgba(4,45,4,.46) 42%,
      rgba(2,23,2,.88) 100%);
  opacity:calc(1 - .42 * var(--zblizenie))}

/* Na telefonie cztery kolumny daja kafelki szerokie na 80 px i sciana czyta sie
   jak tekstura, a nie jak zdjecia realizacji. Znika kolumna TRZECIA, nie ostatnia:
   skrajne kolumny trzymaja koncowki zdania (szyld po lewej, koszulka po prawej),
   wiec to one musza zostac. */
@media (max-width:760px){
  .intro-sciana{grid-template-columns:repeat(3,1fr);height:210svh}
  .intro-sciana .kol:nth-child(3){display:none}
}

/* Poswiata pod samym zdaniem. Zostaje na pelnym kryciu przez cale przewijanie,
   bo welon sie przeciera i bez niej napis siadalby wprost na zdjeciach.
   To jedyne miejsce, gdzie czytelnosc tekstu wygrywa z widokiem realizacji. */
.intro-swiatlo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 64% 48% at 50% 50%,
    rgba(2,23,2,.72) 0%, rgba(2,23,2,.5) 42%, rgba(2,23,2,.16) 70%,
    rgba(2,23,2,0) 88%)}

.intro-tresc{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(20px,3vw,34px);
  padding:0 var(--gut);text-align:center}

/* Zdanie jest JEDNYM ciagiem tekstu rozsunietym na boki, a nie dwoma
   osobnymi napisami. Dzieki temu polowki zawsze zejda sie idealnie,
   bez dublowania tresci i bez ryzyka, ze przy innej szerokosci ekranu
   zlacza sie z przesunieciem. */
.intro-zdanie{display:flex;flex-wrap:wrap;justify-content:center;
  gap:0 .34em;max-width:22ch;
  font-family:var(--display);font-weight:800;color:var(--white);
  font-size:clamp(1.9rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.03em;
  text-shadow:0 4px 40px rgba(2,23,2,.55);
  /* Polowki zaczynaja MALE przy krawedziach i rosna, schodzac sie do srodka.
     Bez skalowania przy pelnym rozmiarze wyjezdzaly poza ekran (lewa do -189 px,
     prawa do 1462 px na oknie 1280), wiec pierwsze, co widzial uzytkownik,
     to byly dwa uciete napisy. Skala dziala tez na przesuniecie polowek,
     bo licza sie w ukladzie wspolrzednych rodzica. */
  transform:scale(calc(.46 + .54 * var(--zlaczenie)))}
.intro-zdanie span{display:block;
  transform:translateX(calc(var(--kier) * 34vw * (1 - var(--zlaczenie))));
  opacity:calc(.45 + .55 * var(--zlaczenie))}
.intro-l{--kier:-1}
.intro-p{--kier:1}

.intro-akapit{max-width:56ch;color:rgba(255,255,255,.94);
  font-size:clamp(.92rem,1.5vw,1.06rem);line-height:1.65;
  text-shadow:0 2px 18px rgba(2,23,2,.9),0 1px 3px rgba(2,23,2,.8);
  opacity:var(--akapit);
  transform:translateY(calc((1 - var(--akapit)) * 16px))}

/* Naglowek na stronie glownej musi byc PRZYPIETY, a nie odjezdzajacy.
   Powod: jest pozycjonowany absolutnie na gorze dokumentu, wiec po trzech
   ekranach wprowadzenia hero zostaloby bez menu i bez logo, czyli dokladnie
   z problemem, ktory naprawialismy wczesniej.

   Pigulka jest tlem, a nie sam pasek: to wzorzec z oryginalu (floating
   translucent pill). Polprzezroczysta biel z rozmyciem czyta sie i na
   ciemnym wprowadzeniu, i na jasnym hero, wiec nie trzeba przelaczac
   kolorow skryptem przy przewijaniu. */
/* Reguly paska strony glownej przeniesione do .hdr: sa juz wspolne. */
/* .hdr-nav CELOWO nie ma tu position:relative, choc mial do 08.09.
   Dwa powody, oba wyszly przy panelu uslug:

   1. Pozycjonowany .hdr-nav stawal sie blokiem odniesienia dla panelu,
      wiec na stronie glownej panel liczyl swoja szerokosc od menu (392 px),
      a nie od calego naglowka (1312 px). Wysuwal sie wtedy w prawo poza
      slowo "Uslugi", kursor zjezdzajacy w dol trafial obok niego i panel
      znikal. Na podstronach dzialalo, bo tam .hdr-nav zostaje statyczne.
   2. W widoku mobilnym ta regula (specyficznosc 0,2,0) nadpisywala
      position:absolute z zapytania medialnego (0,1,0), wiec rozwinieta
      lista na stronie glownej wchodzila w uklad paska zamiast wypasc
      pod nim. Nikt tego nie zglosil, ale bylo.

   Regula byla asekuracyjna wobec pigulki .hdr::before, ktora ma z-index -1.
   Jest zbedna: .hdr ma wlasny z-index i tworzy kontekst ukladania,
   wiec pseudoelement z ujemnym z-index i tak zostaje pod trescia. */
.glowna .hdr-tel,.glowna .hdr-burger{position:relative}
.glowna .hdr-nav{margin-right:8px}
.glowna .hdr-tel{margin-right:16px}
@media (max-width:900px){
  .glowna .hdr-nav{margin-right:0}
  .glowna .hdr-burger{margin-right:8px}
}

@media (prefers-reduced-motion:reduce){
  /* Skrypt i tak nie wystartuje, wiec zmienne zostaja na wartosciach
     domyslnych (wszystko rowne 1): zdanie zlozone, sciana nieruchoma. */
  .intro-zdanie span{transform:none}
}

/* Metryczka wpisu w bazie wiedzy: kto odpowiada za tresc i kiedy byla
   sprawdzona. Przy tekstach dotyczacych przepisow to nie ozdoba, tylko
   informacja, po ktorej czytelnik ocenia, czy dane sa jeszcze aktualne. */
.wpis-meta{margin-top:14px;font-size:.82rem;color:var(--mut);
  letter-spacing:.02em}

/* Mapa strony. Prosty spis w kolumnach: przy pieciudziesieciu adresach
   lista jednokolumnowa ciagnela sie przez trzy ekrany, a to strona,
   z ktorej korzysta sie wzrokiem, a nie czytaniem. */
.mapa{list-style:none;columns:2;column-gap:40px;margin:0 0 40px;max-width:900px}
.mapa li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line)}
.mapa a{color:var(--ink);font-size:.94rem;text-decoration:none}
.mapa a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){.mapa{columns:1}}

/* Ramka "Kluczowe wnioski" na poczatku wpisu. Odpowiada na pytanie czytelnika,
   zanim zdecyduje, czy czytac dalej, i jest tym fragmentem, ktory najczesciej
   trafia do odpowiedzi wyszukiwarki, wiec musi byc zrozumialy bez reszty tekstu. */
.wnioski{background:var(--paper);border-left:3px solid var(--green);
  border-radius:4px;padding:22px 24px;margin:26px 0}
.wnioski-tyt{font-family:var(--display);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:12px}
.wnioski ul{list-style:none;display:flex;flex-direction:column;gap:10px;
  font-size:.92rem;line-height:1.65}
.wnioski li{padding-left:20px;position:relative}
.wnioski li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--warm)}

/* ================= ROZWIJANE MENU USLUG (08.09.2026) =================
   ZGLOSZENIE IWONY: "wchodzac na jedna usluge nie moge bezposrednio dostac
   sie na inna, musze na okolo". Bylo tak naprawde: z podstrony uslugowej
   wyjscia do innej uslugi byly trzy i wszystkie na dole ekranu (sekcja
   "Mozemy wykonac takze", stopka) albo w gore (okruszek). Zeby przejsc
   z kasetonow na oklejanie aut trzeba bylo przewinac cala strone.

   ROZWIAZANIE: jeden panel pod "Uslugi" z KOMPLETEM 24 uslug. Swiadomie
   NIE wracamy do trzech pozycji w gornym pasku (produkcja, kreacja,
   przestrzen) ze starego serwisu: to bylo wyrazne ustalenie z Iwona.
   Naglowki kolumn wewnatrz panelu to nie ta sama rzecz co pozycje menu,
   sluza tylko do skanowania wzrokiem dwudziestu czterech linkow.

   BEZ JAVASCRIPTU, tak jak reszta naglowka. Panel otwiera hover ORAZ
   :focus-within, wiec dziala tez z klawiatury: tabulator wchodzi w link
   "Uslugi", panel sie otwiera i kolejne tabulatory ida po jego linkach.
   ==================================================================== */

/* .ma-menu zostaje STATYCZNE. Dzieki temu panel pozycjonuje sie wzgledem
   .hdr, ktory ma szerokosc calego naglowka, a nie wzgledem waskiego slowa
   "Uslugi". Przy pozycjonowaniu do slowa panel szeroki na 900 px wychodzil
   poza prawa krawedzie okna na ekranach ponizej 1100 px. */
/* .ma-menu zostaje STATYCZNE, zeby panel liczyl sie wzgledem calego .hdr.
   Ale MUSI siegac do dolnej krawedzi naglowka, inaczej miedzy slowem
   "Uslugi" a panelem zostaje kilkanascie pikseli pustki, kursor gubi tam
   hover i panel znika w polowie drogi. Dokladnie to zglosila Iwona 08.09.
   Pierwsza wersja probowala zalatac te szczeline przezroczystym paddingiem
   NA PANELU i to nie moglo zadzialac: panel znika razem z hoverem, wiec
   jego wlasny mostek gasnie w tej samej klatce, w ktorej jest potrzebny.
   Dlatego rozciaga sie SAM ELEMENT MENU: align-self na wysokosc naglowka
   plus padding rowny jego dolnemu marginesowi, sciagniety ujemnym
   marginesem, zeby nie zmienil ukladu paska. */
.hdr-nav{align-self:stretch;align-items:center}
.ma-menu{position:static;align-self:stretch;display:flex;align-items:center;
  padding-bottom:var(--hdr-pad);margin-bottom:calc(-1 * var(--hdr-pad))}

.ma-panel{
  position:absolute;left:var(--gut);right:var(--gut);
  /* top:100% to dolna krawedz .hdr, czyli dokladnie tam, gdzie konczy sie
     rozciagniete .ma-menu. Zero szczeliny. Padding-top daje odstep
     wizualny i jest czescia obszaru hover, wiec mysz go nie gubi. */
  top:100%;padding-top:10px;
  display:none;z-index:50}
.ma-menu:hover .ma-panel,
.ma-menu:focus-within .ma-panel{display:block}

.ma-panel-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px 30px;
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 30px 70px -30px rgba(8,80,8,.45);padding:26px 28px 20px}
.ma-kol{display:flex;flex-direction:column;gap:2px}
.ma-tyt{font-family:var(--display);font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--warm);
  margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* Linki w panelu musza zdjac z siebie style pozycji menu (wersaliki,
   rozstrzelenie, przezroczystosc). Bez tego dwadziescia cztery nazwy
   uslug pisane wersalikami byly nie do przeczytania. */
.ma-panel a{text-transform:none;letter-spacing:0;font-weight:500;
  font-size:.86rem;line-height:1.35;color:var(--ink);opacity:1;
  padding:6px 8px;margin-left:-8px;border-radius:4px;
  transition:background .18s,color .18s}
.ma-panel a:hover{background:var(--tint);color:var(--green);
  text-decoration:none}

.ma-stopka{display:flex;flex-wrap:wrap;gap:6px 22px;
  background:var(--white);border:1px solid var(--line);border-top:0;
  border-radius:0 0 6px 6px;margin-top:-6px;padding:12px 28px 14px;
  box-shadow:0 30px 70px -30px rgba(8,80,8,.45)}
.ma-stopka a{text-transform:none;letter-spacing:0;font-size:.82rem;
  font-weight:600;color:var(--green);opacity:1}
.ma-stopka a:hover{text-decoration:underline;text-underline-offset:3px}

/* Strzalka przy "Uslugi", zeby bylo widac, ze cos sie pod tym kryje.
   Bez niej uzytkownik nie ma powodu tam najechac i cala zmiana
   nie rozwiazuje problemu, tylko go chowa. */
.ma-menu>a::after{content:"";display:inline-block;width:5px;height:5px;
  margin-left:7px;vertical-align:2px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);
  transition:transform .2s}
.ma-menu:hover>a::after,.ma-menu:focus-within>a::after{
  transform:rotate(-135deg);vertical-align:-1px}

@media (max-width:900px){
  /* Na telefonie nie ma hover, wiec panel jest po prostu CZESCIA
     rozwinietego menu: lista uslug wcieta pod "Uslugi", bez drugiego
     poziomu do rozwijania. Dwa dotkniecia zamiast jednego to dokladnie
     ten sam problem, ktory ta zmiana ma usunac. */
  .ma-menu{display:flex;flex-direction:column}
  .ma-panel{position:static;display:block;padding:0;box-shadow:none}
  .ma-panel-in{grid-template-columns:1fr;gap:2px;border:0;box-shadow:none;
    padding:4px 0 0;background:transparent}
  .ma-kol{gap:0}
  .ma-tyt{margin:10px 0 4px;padding:0 0 0 14px;border:0;font-size:.62rem}
  .ma-panel a{font-size:.84rem;padding:9px 14px;margin:0}
  .ma-stopka{flex-direction:column;gap:0;border:0;box-shadow:none;
    margin:6px 0 0;padding:8px 0 0;border-top:1px solid var(--line)}
  .ma-stopka a{padding:9px 14px}
  .ma-menu>a::after{display:none}
  /* Rozwiniete menu z 24 uslugami jest wyzsze niz ekran telefonu,
     wiec musi miec wlasne przewijanie, inaczej ostatnie pozycje
     sa nieosiagalne. */
  .hdr-check:checked~.hdr-nav{max-height:calc(100svh - 90px);overflow-y:auto}
}

/* Kotwice w obrebie strony (#wycena, #faq) musza zatrzymac sie POD przyklejonym
   paskiem, inaczej naglowek sekcji chowa sie za nim i klikniecie "Wycen"
   przewija formularz tak, ze nie widac jego tytulu. */
:target,section[id],div[id]{scroll-margin-top:96px}