:root {
    
    --tlo: #f7f3ec; --karta: #fcfaf5; --linia: #e0d8cc; --tusz: #1b1918; --tusz-2: #6b645d; --ciemny: #5b3e34;
    --terakota: #f0946f; --turkus: #86c7c1; --musztarda: #f7d07e; --zolty: var(--musztarda); --na-ciemnym: #d2c7ba;   
    --sek: clamp(96px, 10vw, 128px); --pas: clamp(112px, 12vw, 160px);
    --pad: clamp(20px, 2.4vw, 32px);
  }
  html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; }
  body { background: var(--tlo); color: var(--tusz); font-size: 17px; letter-spacing: -0.005em; }
  h1, h2, h3 { font-weight: 400; letter-spacing: -0.035em; line-height: .96; word-spacing: 0; }
  .mono { font: 400 13px/1.3 var(--f-mono); letter-spacing: 0; color: var(--tusz-2); }
  a { text-decoration: none; }
  .siatka { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--linia); }
  .siatka > * { background: var(--tlo); }

  .top { position: sticky; top: 0; z-index: 30; grid-template-columns: auto 1fr auto auto; height: 64px; border-bottom: 1px solid var(--linia); background: var(--tlo); display: grid; }
  .top > * { display: flex; align-items: center; padding: 0 var(--pad); }
  .top [data-logo] { width: 92px; display: block; color: var(--tusz); }
  .top nav { gap: 24px; justify-content: flex-end; }
  .top nav a { font-size: 15px; } .top nav a:hover { color: var(--tusz-2); }
  .top .cta { background: var(--terakota); color: var(--tusz); font-size: 15px; min-width: 200px; justify-content: space-between; gap: 16px; }
  .menu-btn { display: none; }
  @media (max-width: 760px) {
    .top .miasto { display: none !important; }
    .top { grid-template-columns: 1fr auto auto; }
    .top .cta { min-width: 0; }
    .menu-btn { display: flex; align-items: center; gap: 8px; margin-right: 8px; font: 400 14px/1 var(--f-mono); background: var(--karta); color: var(--tusz); border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
    .top nav { display: none; position: fixed; inset: 64px 0 0 0; background: var(--tlo); flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding: 8px 0 24px; z-index: 40; }
    .top.otwarte nav { display: flex; }
    .top nav a { font-size: 32px; letter-spacing: -0.03em; padding: 18px var(--pad); border-bottom: 1px solid var(--linia); }
    .top.otwarte { transform: none !important; }
  }

  .hero-h { grid-column: 1 / span 7; padding: clamp(40px, 6vw, 88px) var(--pad) var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: min(62vh, 620px); }
  .hero h1 { font-size: clamp(56px, 10.5vw, 176px); }
  .hero-foto { grid-column: 8 / span 5; grid-row: 1 / span 2; overflow: hidden; position: relative; min-height: 420px; }
  .hero-foto img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 30%; }
  .hero-lead { grid-column: 1 / span 4; background: var(--ciemny) !important; color: #efece6; padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 260px; }
  .hero-lead p { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
  .hero-lead a { font: 400 13px/1 var(--f-mono); color: #efece6; display: flex; justify-content: space-between; }
  .hero-72 { grid-column: 5 / span 3; background: var(--turkus) !important; padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
  .hero-72 strong { font-weight: 400; font-size: clamp(64px, 7vw, 112px); letter-spacing: -0.05em; line-height: .9; }
  .hero-72 p { margin: 0; font-size: 17px; line-height: 1.3; max-width: 22ch; }
  @media (max-width: 900px) { .siatka > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .hero-h { min-height: 0; } .hero-foto { min-height: 360px; } }

  .dowod { display: flex; gap: clamp(20px, 3vw, 48px); align-items: center; padding: 22px var(--pad); border-bottom: 1px solid var(--linia); overflow-x: auto; }
  .dowod span { white-space: nowrap; }
  .dowod .kreska { flex: 1; min-width: 24px; height: 1px; background: var(--linia); }

  .kawy { padding: var(--sek) 0 0; }
  .glowa { display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 var(--pad) clamp(48px, 6vw, 80px); align-items: end; gap: 24px; }
  .glowa h2 { grid-column: 1 / span 8; font-size: clamp(44px, 6vw, 96px); }
  .glowa .mono { grid-column: 1 / -1; margin-bottom: -8px; }
  .glowa .bok { grid-column: 10 / span 3; }
  .filtry { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .filtry button { font: 400 13px/1 var(--f-mono); padding: 9px 13px; border-radius: 999px; border: 0; background: var(--karta); color: var(--tusz-2); cursor: pointer; transition: background .2s, color .2s; }
  .filtry button[aria-pressed="true"] { background: var(--tusz); color: var(--tlo); }
  .wiersze { border-top: 1px solid var(--linia); }
  .kawa { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; padding: clamp(20px, 2.4vw, 32px) var(--pad); border-bottom: 1px solid var(--linia); position: relative; overflow: hidden; transition: opacity .35s; isolation: isolate; }
  .kawa::before { content: ''; position: absolute; inset: 0; background: var(--kolor); transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.22,1,.36,1); z-index: -1; }
  .kawa:hover::before { transform: scaleY(1); }
  .kawa .znak { grid-column: 1 / span 1; width: 18px; height: 18px; border-radius: 50%; background: var(--kolor); }
  .kawa h3 { grid-column: 2 / span 5; font-size: clamp(44px, 6.4vw, 104px); }
  .kawa .sklad { grid-column: 7 / span 3; }
  .kawa .smak { grid-column: 10 / span 2; font-size: 15px; line-height: 1.35; }
  .kawa .moc { grid-column: 12 / span 1; justify-self: end; display: flex; gap: 4px; }
  .kawa .moc i { width: 8px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--tusz); }
  .kawa .moc i.on { background: var(--tusz); }
  .kawa.wygaszona { opacity: .2; }
  .kawa:hover .mono { color: var(--tusz); }
  @media (max-width: 900px) { .kawa { grid-template-columns: 1fr auto; gap: 8px 16px; } .kawa > * { grid-column: auto !important; } .kawa h3 { grid-column: 1 / -1 !important; } .kawa .znak { display: none; } .glowa { grid-template-columns: 1fr; } .glowa > * { grid-column: 1 / -1 !important; } .filtry { justify-content: flex-start; } }


  .packshoty { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linia); }
  .packshot { position: relative; aspect-ratio: 1; overflow: hidden; display: block; transition: opacity .35s; }
  .packshot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .packshot:hover img { transform: scale(1.04); }
  .packshot .mono { position: absolute; left: var(--pad); top: var(--pad); color: var(--tusz); }
  .packshot .nazwa { position: absolute; left: var(--pad); bottom: var(--pad); font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -0.03em; }
  .packshot.wygaszona { opacity: .25; }
  @media (max-width: 900px) { .siatka.packshoty { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1px; } .packshoty .packshot { flex: 0 0 78vw; scroll-snap-align: start; } }
  .haslo { background: var(--ciemny); color: #efece6; padding: var(--pas) var(--pad); margin-top: var(--sek); }
  .haslo .mono { color: var(--na-ciemnym); display: block; margin-bottom: 40px; }
  .haslo p { font-size: clamp(34px, 4.8vw, 76px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; max-width: 20ch; }
  .haslo .slowo { color: var(--na-ciemnym); }  

  
  .abonament { padding-top: var(--sek); }
  .kroki { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
  .krok { padding: var(--pad); min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: background .3s; }
  .krok h3 { font-size: clamp(28px, 2.8vw, 44px); margin-bottom: 12px; }
  .krok p { margin: 0; color: var(--tusz-2); max-width: 32ch; }
  .krok:hover { background: var(--karta); }

  .obraz { height: clamp(380px, 72vh, 760px); overflow: hidden; position: relative; margin-top: var(--sek); }
  .obraz img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
  .obraz .mono { position: absolute; left: var(--pad); bottom: var(--pad); color: #fff; }

  .etykiety { background: var(--musztarda); }
  .etykiety .siatka { background: rgba(27,25,24,.18); }
  .etykiety .siatka > * { background: var(--musztarda); padding: var(--pad); }
  .et-h { grid-column: 1 / span 7; padding-block: var(--sek) !important; }
  .et-h h2 { font-size: clamp(44px, 6vw, 96px); margin-top: 24px; }
  .et-l { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 !important; }
  .et-l div { display: flex; justify-content: space-between; gap: 16px; padding: 22px var(--pad); border-top: 1px solid rgba(27,25,24,.18); font-size: 20px; letter-spacing: -0.02em; }
  .et-l .mono { color: rgba(27,25,24,.78); }

  .kontakt { background: var(--ciemny); color: #efece6; }
  .kontakt .siatka { background: #34302d; }
  .kontakt .siatka > * { background: var(--ciemny); padding: var(--pad); }
  .k-h { grid-column: 1 / span 8; padding-block: var(--sek) !important; }
  /* poniżej 400 px „Porozmawiajmy” w 56 px wystawało 10,5 px poza kolumnę (słowo = 6,17 × rozmiar), więc rozmiar schodzi z szerokością ekranu */
  .k-h h2 { font-size: clamp(min(56px, calc(15.8vw - 7px)), 9vw, 152px); }
  .k-b { grid-column: 9 / span 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
  .k-b p { margin: 0; color: var(--na-ciemnym); }
  .k-b .tel { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.03em; color: #fff; }
  .k-b .btn { background: var(--terakota); color: var(--tusz); justify-content: space-between; border-radius: 0; }
  .stopka { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
  .stopka [data-logo] { width: 110px; color: #efece6; --kubek: #000; margin-right: auto; display: block; }
  .stopka a, .stopka span { color: var(--na-ciemnym); } .stopka a:hover { color: #efece6; }
  @media (max-width: 900px) { .kroki { grid-template-columns: 1fr; } }

  
  
  .top { transition: transform .6s cubic-bezier(.76,0,.24,1); }
  .top.schowany { transform: translateY(-100%); }
  main { overflow-x: clip; }
  .kroki-wrap { position: relative; }
  .kroki-linia { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--tusz); transform: scaleX(0); transform-origin: left; z-index: 2; }
  .kawa h3 { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; line-height: 1.05; }
  .kawa h3 .znak-h { text-shadow: 0 1.2em currentColor; }
  .hero-foto { clip-path: inset(0 0 0 0); }
  .obraz { clip-path: inset(0 0 0 0); }
  .k-b .btn { will-change: transform; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

  
  
  .okruszki { display: flex; gap: 8px; flex-wrap: wrap; }
  .okruszki a { color: var(--tusz-2); } .okruszki a:hover { color: var(--tusz); }
  .ph-h { grid-column: 1 / span 8; padding: clamp(40px, 6vw, 88px) var(--pad) var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: min(48vh, 480px); }
  .ph-h h1 { font-size: clamp(48px, 8vw, 132px); }
  .ph-b { grid-column: 9 / span 4; padding: var(--pad); display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; }
  .ph-b p { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -0.015em; }
  .ph-b .cta-wiersz { display: flex; justify-content: space-between; align-items: center; background: var(--tusz); color: var(--tlo); padding: 18px 20px; font-size: 15px; }
  .ph-b .cta-wiersz:hover { background: #000; }
  .ph-foto { grid-column: 1 / -1; height: clamp(280px, 46vh, 520px); overflow: hidden; position: relative; }
  .ph-foto img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }

  .sek { padding-top: var(--sek); }
  .wiersz { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: baseline; padding: clamp(20px, 2.4vw, 32px) var(--pad); border-bottom: 1px solid var(--linia); }
  .wiersz .nr { grid-column: 1 / span 1; }
  .wiersz h3 { grid-column: 2 / span 5; font-size: clamp(24px, 2.6vw, 40px); }
  .wiersz p { grid-column: 8 / span 5; margin: 0; color: var(--tusz-2); }
  a.wiersz:hover { background: var(--karta); }
  @media (max-width: 900px) { .wiersz { grid-template-columns: 1fr; gap: 8px; } .wiersz > * { grid-column: auto !important; } }

  .dwie { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
  .dwie > a { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: var(--pad); min-height: 520px; position: relative; overflow: hidden; }
  .dwie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .dwie a:hover img { transform: scale(1.03); }
  .dwie h2 { font-size: clamp(36px, 4.4vw, 72px); }
  .dwie p { margin: 0; color: var(--tusz-2); max-width: 44ch; }
  .dwie .dol { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
  @media (max-width: 900px) { .dwie { grid-template-columns: 1fr; } .dwie > a { min-height: 0; } }

  .karty3 { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
  .karty3 > * { padding: var(--pad); display: flex; flex-direction: column; gap: 20px; transition: opacity .35s; }
  .karty3 h3 { font-size: clamp(24px, 2.2vw, 34px); }
  .karty3 p, .karty3 li { color: var(--tusz-2); font-size: 15px; }
  .karty3 ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
  .karty3 .duza { font-size: clamp(48px, 5vw, 80px); letter-spacing: -0.05em; line-height: .9; }
  .karty3 img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
  .karty3 .link-mono { margin-top: auto; font: 400 13px/1 var(--f-mono); display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--linia); }
  .karty3 .wygaszona { opacity: .25; }
  @media (max-width: 900px) { .karty3 { grid-template-columns: 1fr; } }

  .wpisy .wiersz { align-items: center; }
  .wpisy .wiersz .data { grid-column: 1 / span 2; }
  .wpisy .wiersz h3 { grid-column: 3 / span 6; font-size: clamp(22px, 2.2vw, 34px); }
  .wpisy .wiersz .kat { grid-column: 9 / span 2; }
  .wpisy .wiersz .czas { grid-column: 11 / span 2; justify-self: end; }
  .wpisy .wiersz { transition: opacity .35s, background .3s; }
  .wpisy .wygaszona { display: none; }

  .artykul { display: grid; grid-template-columns: repeat(12, 1fr); padding: var(--sek) var(--pad) 0; gap: 24px; }
  .artykul .meta { grid-column: 1 / span 3; position: sticky; top: 88px; align-self: start; display: grid; gap: 10px; }
  .artykul .tresc { grid-column: 4 / span 7; font-size: 19px; line-height: 1.65; letter-spacing: -0.005em; }
  .artykul .tresc h2 { font-size: clamp(28px, 2.8vw, 40px); margin: 1.6em 0 .5em; }
  .artykul .tresc h3 { font-size: clamp(22px, 2vw, 28px); margin: 1.4em 0 .4em; }
  .artykul .tresc p { margin: 0 0 1em; }
  .artykul .tresc ul, .artykul .tresc ol { padding-left: 22px; margin: 0 0 1em; }
  .artykul .tresc li { margin-bottom: .4em; }
  .artykul .tresc a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .artykul .tresc img { width: 100%; height: auto; margin: 1.2em 0; }
  .artykul .tresc strong { font-weight: 400; color: var(--tusz); }
  .wstawka { background: var(--musztarda); padding: var(--pad); margin: 2em 0; display: grid; gap: 12px; }
  .wstawka p { margin: 0 !important; }
  .wstawka .mono { color: #4a443e; }   
  .wstawka a { text-decoration: none !important; font: 400 13px/1 var(--f-mono); display: flex; justify-content: space-between; }
  @media (max-width: 900px) { .artykul { grid-template-columns: 1fr; } .artykul > * { grid-column: auto !important; position: static !important; } }

  .formularz { grid-template-columns: 7fr 5fr; border-top: 1px solid var(--linia); }
  .formularz > * { padding: var(--pad); }
  .formularz form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .formularz label { display: grid; gap: 8px; font: 400 13px/1.2 var(--f-mono); color: var(--tusz-2); }
  .formularz .cala { grid-column: 1 / -1; }
  .formularz input[type=text], .formularz input[type=email], .formularz input[type=tel], .formularz textarea { font: 400 18px/1.3 var(--f-tekst); color: var(--tusz); background: var(--karta); border: 0; border-bottom: 2px solid var(--linia); padding: 14px 12px; border-radius: 0; }
  .formularz input:focus, .formularz textarea:focus { outline: none; border-bottom-color: var(--tusz); }
  .formularz textarea { min-height: 140px; resize: vertical; }
  .formularz fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .formularz legend { font: 400 13px/1.2 var(--f-mono); color: var(--tusz-2); margin-bottom: 10px; }
  .formularz .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .formularz .chip span { display: inline-block; font: 400 14px/1 var(--f-mono); padding: 11px 15px; border-radius: 999px; background: var(--karta); color: var(--tusz-2); cursor: pointer; }
  .formularz .chip input:checked + span { background: var(--tusz); color: var(--tlo); }
  .formularz .chip input:focus-visible + span { outline: 2px solid var(--tusz); outline-offset: 2px; }
  .formularz .zgoda { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.4 var(--f-tekst); color: var(--tusz-2); }
  .formularz .zgoda input { margin-top: 3px; accent-color: var(--tusz); }
  .formularz button { grid-column: 1 / -1; justify-self: start; font: 400 16px/1 var(--f-tekst); background: var(--terakota); color: var(--tusz); border: 0; padding: 18px 24px; display: flex; gap: 40px; cursor: pointer; }
  .formularz button:hover { background: var(--tusz); color: var(--tlo); }
  .formularz .dane { background: var(--ciemny) !important; color: #efece6; display: flex; flex-direction: column; gap: 28px; }
  .formularz .dane a.tel { font-size: clamp(32px, 3vw, 48px); letter-spacing: -0.03em; color: #fff; }
  .formularz .dane .mono { color: var(--na-ciemnym); }
  .formularz .info { font-size: 14px; color: var(--tusz-2); grid-column: 1 / -1; margin: 0; }
  /* formularz Better Workplace w ramce: ma własny margines 24 px, więc kolumna oddaje tylko resztę; wysokość ustawia komunikat bwp:resize */
  .formularz .ramka-bw { padding: max(0px, calc(var(--pad) - 24px)); }
  .ramka-bw iframe { display: block; width: 100%; height: 1180px; border: 0; background: var(--tlo); }
  @media (max-width: 900px) { .ramka-bw iframe { height: 1500px; } }
  /* strona główna: formularz w bloku kontaktu; nagłówek na całą szerokość, pod nim formularz na papierze (8 kolumn) i dane (4 kolumny) */
  .kontakt.z-formularzem .k-h { grid-column: 1 / -1; }
  .kontakt.z-formularzem .ramka-bw { grid-column: 1 / span 8; background: var(--tlo); padding: max(0px, calc(var(--pad) - 24px)); }
  .kontakt.z-formularzem .k-b { justify-content: flex-start; }
  @media (max-width: 900px) { .formularz { grid-template-columns: 1fr; } .formularz form { grid-template-columns: 1fr; } }
  .prosty { padding: var(--sek) var(--pad); max-width: 860px; }
  .prosty h1 { font-size: clamp(44px, 6vw, 88px); margin: 24px 0 40px; }
  @media (max-width: 900px) {
    .ph-h { min-height: 0; gap: 24px; padding-top: 32px; }
    .kawa { grid-template-columns: 1fr auto; }
    .kawa h3 { grid-column: 1 / 2 !important; }
    .kawa .moc { grid-column: 2 / 3 !important; grid-row: 1; align-self: center; }
    .kawa .sklad, .kawa .smak { grid-column: 1 / -1 !important; }
  }

  @media (max-width: 1100px) { .karty3[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } }
  @media (max-width: 600px) { .karty3[style*="repeat(4"] { grid-template-columns: 1fr !important; } }

  
  
  .opinia { padding: var(--sek) var(--pad) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .opinia > .mono { grid-column: 1 / span 3; }
  .opinia blockquote { grid-column: 4 / span 8; margin: 0; }
  .opinia blockquote p { font-size: clamp(26px, 3vw, 44px); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 24px; }
  @media (max-width: 900px) { .opinia { grid-template-columns: 1fr; } .opinia > * { grid-column: auto !important; } }
  .hero-linki { display: grid; gap: 14px; }
  .hero-lead .hero-linki a + a { padding-top: 14px; border-top: 1px solid rgba(239,236,230,.18); }
  @media (max-width: 760px) {
    .top > .menu-btn { align-self: center; padding: 10px 14px; min-width: 76px; justify-content: center; }
    .top .cta { white-space: nowrap; padding: 0 16px; font-size: 14px; }
    .top .cta span:last-child { display: none; }
    .top [data-logo] { width: 84px; }
  }

  
  
  
  
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  ::view-transition-old(root) { animation-name: mp-wyjscie; }
  ::view-transition-new(root) { animation-name: mp-wejscie; }
  @keyframes mp-wyjscie { to { opacity: 0; transform: translateY(-12px); } }
  @keyframes mp-wejscie { from { opacity: 0; transform: translateY(16px); } }
  .top { view-transition-name: naglowek; }
  ::view-transition-group(naglowek), ::view-transition-old(naglowek), ::view-transition-new(naglowek) { animation: none; }

  
  
  .js img[loading="lazy"] { opacity: 0; transition: opacity .9s cubic-bezier(.16,1,.3,1); }
  .js img[loading="lazy"].widoczny { opacity: 1; }

  
  
  a, button { -webkit-tap-highlight-color: transparent; }
  .top nav a { position: relative; transition: color .3s; }
  .top nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.22,1,.36,1); }
  .top nav a:hover::after, .top nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
  .top .cta, .ph-b .cta-wiersz, .k-b .btn, .formularz button, .filtry button { transition: background .3s, color .3s; }
  .top .cta span:last-child, .cta-wiersz span:last-child, .k-b .btn span:last-child, .hero-linki a span:last-child,
  .link-mono span:last-child, .dwie .dol span:last-child, .formularz button span:last-child, .wstawka a span:last-child { display: inline-block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
  a:hover > span:last-child, button:hover > span:last-child, .dwie a:hover .dol span:last-child { transform: translateX(6px); }
  .wiersz, .kawa, .packshot { transition: background .35s, opacity .35s; }
  .krok { transition: background .35s; }  
  
  :focus-visible { outline: 2px solid var(--tusz); outline-offset: 3px; }

  
  
  .b2b { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; padding: 0; list-style: none; font: 400 13px/1.4 var(--f-mono); color: var(--tusz-2); }
  .b2b li::before { content: '·'; margin-right: 8px; color: var(--pomarancz); }

  
  
  @keyframes mp-wiersz { from { opacity: 0; transform: translateY(10px); } }
  .wpisy .wiersz.pojaw { animation: mp-wiersz .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 40ms); }

  
  
  @media (max-width: 760px) {
    .top nav { display: flex; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.76,0,.24,1), visibility 0s linear .55s; }
    .top.otwarte nav { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .55s cubic-bezier(.76,0,.24,1); }
    .top nav a::after { display: none; }
    .top nav a { opacity: 0; transform: translateY(18px); transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1); }
    .top.otwarte nav a { opacity: 1; transform: none; }
    .top.otwarte nav a:nth-child(1) { transition-delay: .12s; } .top.otwarte nav a:nth-child(2) { transition-delay: .17s; }
    .top.otwarte nav a:nth-child(3) { transition-delay: .22s; } .top.otwarte nav a:nth-child(4) { transition-delay: .27s; }
    .top.otwarte nav a:nth-child(5) { transition-delay: .32s; }
  }
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .js img[loading="lazy"] { opacity: 1; }
    .top nav a { opacity: 1 !important; transform: none !important; }
  }
  .top nav a, .top .miasto { white-space: nowrap; }
  @media (max-width: 1100px) { .top .miasto { display: none !important; } .top nav { gap: 20px; } }

  
  
  .top > .cta { border-radius: 999px; align-self: center; height: 44px; margin-right: var(--pad); padding: 0 22px; min-width: 0; }
  .ph-b .cta-wiersz { border-radius: 999px; padding: 16px 24px; }
  .k-b .btn { border-radius: 999px; padding: 16px 24px; }
  .formularz button { border-radius: 999px; padding: 18px 28px; }
  .top > a:first-child { gap: 12px; }
  .by { font: 400 11px/1.2 var(--f-mono); color: var(--tusz-2); white-space: nowrap; }
  
  
  .b2b { font: 400 14px/1.4 var(--f-tekst); color: var(--tusz); gap: 6px 22px; }
  .b2b li::before { content: '✓'; color: var(--tusz); margin-right: 8px; }
  @media (max-width: 760px) { .top > .cta { margin-right: 12px; height: 40px; padding: 0 16px; } .by { display: none; } }

  
  
  .faq-lista { border-top: 1px solid var(--linia); margin: 0 var(--pad); }
  .faq-lista details { border-bottom: 1px solid var(--linia); }
  .faq-lista summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.02em; }
  .faq-lista summary::-webkit-details-marker { display: none; }
  .faq-lista summary::after { content: '+'; font: 400 24px/1 var(--f-mono); color: var(--tusz-2); transition: transform .45s cubic-bezier(.22,1,.36,1); }
  .faq-lista details[open] summary::after { transform: rotate(45deg); }
  .faq-lista details p { margin: 0 0 24px; max-width: 64ch; color: var(--tusz-2); }



.dane .fakty { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.formularz .dane .fakty li { font-size: 18px; color: #c9c3ba; display: flex; align-items: baseline; gap: 10px; text-align: left; }
.formularz .dane .fakty strong { font-weight: 400; color: #fff; font-size: 28px; letter-spacing: -0.02em; min-width: 3.4em; opacity: 1; transform: none; }
.opinia-mala { margin: 0; padding-top: 8px; }
.opinia-mala p { font-size: 20px; line-height: 1.3; margin: 0 0 10px; }



@media (max-width: 760px) {
  .dowod { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; overflow: visible; align-items: start; }
  .dowod .kreska { display: none; }
  .dowod span { white-space: normal; line-height: 1.35; }
}



@media (max-width: 900px) { .krok { min-height: 0; gap: 20px; justify-content: flex-start; } }



.obraz img, .siatka.dwie a img { object-position: 50% 58%; }
@media (max-width: 760px) { .obraz { height: 330px; } .obraz img { object-position: 50% 62%; } .obraz .mono { display: none; } }
.obraz img { inset: -6% 0; height: 112%; }


.packshot .mono, .packshot .nazwa { color: #fff; }  
.kawa:hover h3, .kawa:hover .smak, .kawa:hover .mono, .kawa:hover .sklad { color: var(--na, #fff); }
.kawa:hover .moc i { box-shadow: inset 0 0 0 1.4px var(--na, #fff); } .kawa:hover .moc i.on { background: var(--na, #fff); }



@media (min-width: 761px) {
  .obraz { height: auto; aspect-ratio: 5504 / 3072; max-height: none; }
  .obraz img { inset: 0; height: 100%; object-position: 50% 50%; }
}

.obraz { margin: clamp(120px, 12vw, 176px) clamp(24px, 6.2vw, 89px); }
@media (min-width: 761px) { .obraz { aspect-ratio: 2048 / 1360; } }
@media (max-width: 760px) { .obraz { margin: var(--sek) var(--pad); height: auto; aspect-ratio: 2048 / 1360; } .obraz img { inset: 0; height: 100%; object-position: 50% 50%; } }


.top [data-logo].logo-tym { width: 56px; } .top [data-logo].logo-tym img { width: 56px; height: 56px; display: block; }
.stopka [data-logo].logo-tym { width: 220px; } .stopka [data-logo].logo-tym img { width: 220px; height: auto; display: block; }
@media (max-width: 760px) { .stopka [data-logo].logo-tym, .stopka [data-logo].logo-tym img { width: 180px; } }
@media (max-width: 760px) { .top [data-logo].logo-tym, .top [data-logo].logo-tym img { width: 48px; height: 48px; } }



.top { overflow: visible; }
.top > a:first-child { position: relative; z-index: 45; }
.top [data-logo].logo-tym { width: 223px; height: 64px; position: relative; }
.top [data-logo].logo-tym img { position: absolute; left: 0; top: 12px; width: 223px; height: 71.5px; max-width: none; }   
.top [data-logo].logo-tym + .by { margin-left: 16px; }
.top [data-logo].logo-tym img.znak-maly { display: none; }
@media (max-width: 1100px) { .top [data-logo].logo-tym + .by { display: none; } }   
@media (max-width: 760px) {   
  .top > a:first-child { padding-right: 8px; }
  .top > .menu-btn { min-width: 64px; padding: 10px; }
  .top > .cta { padding: 0 14px; margin-right: 10px; }
  .top > .cta span:last-child { display: none; }   
  .top [data-logo].logo-tym { width: min(150px, calc(100vw - 232px)); height: 64px; }
  .top [data-logo].logo-tym img.znak-pelny { top: 50%; transform: translateY(-50%); width: 100%; height: auto; }
}
@media (max-width: 340px) {   
  .top [data-logo].logo-tym { width: 46px; }
  .top [data-logo].logo-tym img.znak-pelny { display: none; }
  .top [data-logo].logo-tym img.znak-maly { display: block; position: absolute; left: 0; top: 9px; width: 46px; height: 46px; }
}

.top.schowany { transform: translateY(calc(-100% - 64px)); }


@font-face { font-family: 'Cinemate'; src: url('fonts/cinemate-nazwy.woff2?v=2') format('woff2'); font-display: swap; }
.kawa h3, .packshot .nazwa, .v2-swiat-opis h3, .kk-nazwa { font-family: 'Cinemate', var(--f-display); text-transform: uppercase; letter-spacing: .14em; font-weight: 400; }
.kawa h3 { font-size: clamp(30px, 4.2vw, 68px); }
.packshot .nazwa { font-size: clamp(16px, 1.5vw, 22px); }
.v2-swiat-opis h3 { font-size: clamp(22px, 2.3vw, 38px); }


.ph-h { min-height: 0; gap: 20px; padding: clamp(28px, 3.4vw, 48px) var(--pad) clamp(24px, 2.6vw, 36px); }
.ph-h h1 { font-size: clamp(40px, 5.2vw, 84px); }
.ph-b { justify-content: flex-end; gap: 18px; }
.ph-b p { font-size: clamp(16px, 1.3vw, 19px); }
.ph-foto { height: clamp(220px, 34vh, 380px); }
@media (max-width: 900px) { .ph-h { padding-top: 24px; } .ph-b { padding-top: 0; } .ph .b2b { display: none; } }

.kk-glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 0 var(--pad) 20px; }
.kk-glowa p { margin: 0; color: var(--tusz-2); font-size: 15px; max-width: 46ch; text-align: right; }
.karty-kaw { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.karta-kawy { display: flex; flex-direction: column; border-right: 1px solid var(--linia); scroll-margin-top: 96px; }
.karta-kawy:last-child { border-right: 0; }
.kk-foto { display: block; aspect-ratio: 1; overflow: hidden; background: #efe9df; }
.kk-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.karta-kawy:hover .kk-foto img { transform: scale(1.035); }
.kk-tresc { display: flex; flex-direction: column; gap: 16px; padding: 28px var(--pad) var(--pad); flex: 1; }
.kk-nazwa { font-size: clamp(26px, 2.4vw, 40px) !important; margin: 4px 0 0; }
.kk-tresc > p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--tusz); }
.kk-dane { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 32px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linia); }
.kk-dane dt { color: var(--tusz-2); margin-bottom: 6px; } .kk-dane dd { margin: 0; font-size: 15px; }
.kk-dane .moc { display: flex; gap: 4px; padding-top: 3px; } .kk-dane .moc i { width: 8px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--tusz); } .kk-dane .moc i.on { background: var(--tusz); }
.kk-cta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; background: var(--kolor); color: var(--na); border-radius: 999px; padding: 16px 24px; font-size: 15px; transition: filter .3s; }
.kk-cta:hover { filter: brightness(.94); }
@media (max-width: 900px) {
  .kk-glowa { flex-direction: column; gap: 8px; } .kk-glowa p { text-align: left; }
  .karty-kaw { grid-template-columns: 1fr; } .karta-kawy { border-right: 0; border-bottom: 1px solid var(--linia); }
  .kk-foto { aspect-ratio: 4 / 3; }
}

.ph + .sek, .ph + .dowod + .sek { padding-top: clamp(32px, 4vw, 56px); }

.v2-liczba strong { font-family: 'Cinemate', var(--f-display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; font-size: calc((61.8vw - 2 * var(--pad)) / 4.35); }  
@media (max-width: 900px) { .v2-liczba strong { font-size: calc((100vw - 2 * var(--pad)) / 4.35); } }


.top [data-logo].logo-4 { width: auto; height: 64px; display: flex; align-items: center; gap: 12px; }
.top [data-logo].logo-4 img { display: block; position: static; max-width: none; }
.top [data-logo].logo-4 .kolo { width: 76px; height: 76px; align-self: flex-start; margin-top: 6px; }   
.top [data-logo].logo-4 .napis { height: 30px; width: auto; }
.top [data-logo].logo-4 + .by { margin-left: 16px; }
@media (max-width: 1100px) { .top [data-logo].logo-4 + .by { display: none; } }
.stopka [data-logo].logo-4 { width: 180px; } .stopka [data-logo].logo-4 img { width: 180px; height: auto; display: block; }
@media (max-width: 760px) {
  .top [data-logo].logo-4 { gap: 6px; } .top [data-logo].logo-4 .kolo { width: 54px; height: 54px; margin-top: 8px; } .top [data-logo].logo-4 .napis { height: 20px; }
  .stopka [data-logo].logo-4, .stopka [data-logo].logo-4 img { width: 140px; }
}
@media (max-width: 340px) { .top [data-logo].logo-4 .napis { display: none; } }


.top [data-logo].logo-k { width: 84px; height: 64px; position: relative; display: block; }
.top [data-logo].logo-k img { position: absolute; left: 0; top: 6px; width: 84px; height: 84px; object-fit: contain; border-radius: 50%; background: var(--tlo); max-width: none; }
.top [data-logo].logo-k + .by { margin-left: 16px; }
.stopka [data-logo].logo-k { width: 150px; } .stopka [data-logo].logo-k img { width: 150px; height: auto; display: block; }
@media (max-width: 760px) { .top [data-logo].logo-k { width: 64px; } .top [data-logo].logo-k img { width: 64px; height: 64px; top: 8px; } .stopka [data-logo].logo-k, .stopka [data-logo].logo-k img { width: 120px; } }


.kropka.k1 { color: var(--terakota); } .kropka.k2 { color: var(--turkus); } .kropka.k3 { color: color-mix(in oklab, var(--terakota), var(--ciemny) 60%); }


.droga { position: relative; --dy: 7px; }
.droga > ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.droga-tusz, .droga-kolor { position: absolute; left: 0; right: 0; transform-origin: left center; pointer-events: none; }
.droga-tusz { top: var(--dy); height: 2px; background: var(--tusz); z-index: 2; }
.droga-kolor { top: calc(var(--dy) + 3px); left: 3px; right: -3px; height: 8px; z-index: 1;
  background: linear-gradient(90deg, var(--terakota) 0 12%, var(--turkus) 23% 40%, var(--musztarda) 50%, var(--terakota) 62%, color-mix(in oklab, var(--terakota), var(--ciemny) 60%) 74%);
  background: linear-gradient(90deg in oklab, var(--terakota) 0 12%, var(--turkus) 23% 40%, var(--musztarda) 50%, var(--terakota) 62%, color-mix(in oklab, var(--terakota), var(--ciemny) 60%) 74%); }
.droga-ziarno { position: absolute; top: calc(var(--dy) - 5px); left: 100%; width: 18px; height: 12px; margin-left: -9px; border-radius: 50%; z-index: 3;
  background: color-mix(in oklab, var(--terakota), var(--ciemny) 60%); box-shadow: inset 0 0 0 1.6px var(--tusz); }
.droga-ziarno::after { content: ""; position: absolute; left: 4px; right: 4px; top: 5px; height: 1.6px; border-radius: 2px; background: var(--tusz); transform: rotate(-14deg); }
.droga li { position: relative; padding-top: 36px; }
.droga li::before { content: ""; position: absolute; top: calc(var(--dy) - 6px); left: 0; width: 14px; height: 14px; border-radius: 50%; z-index: 4; box-sizing: border-box;
  background: var(--kolor, var(--tlo)); box-shadow: inset 0 0 0 2px var(--tusz); transition: background .5s; }
.droga li:nth-child(1) { --kolor: var(--terakota); } .droga li:nth-child(2) { --kolor: var(--turkus); }
.droga li:nth-child(3) { --kolor: var(--musztarda); } .droga li:nth-child(4) { --kolor: color-mix(in oklab, var(--terakota), var(--ciemny) 60%); }
.droga.czeka li:not(.on) { --kolor: var(--tlo); }
.droga-ramka { padding: 26px var(--pad) 28px; border-bottom: 1px solid var(--linia); }
.droga-pas li { padding-top: 30px; }
@media (max-width: 900px) {
  .droga > ol { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .droga li::before { display: none; }
  .droga-pas li { padding-top: 26px; }
}


.krok-p, .zamkniecie { --il-tusz: var(--tusz); --il-tusz-2: var(--tusz-2); --il-linia: var(--linia); }
.kroki-p { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.krok-p { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: clamp(40px, 5vw, 72px) var(--pad); border-bottom: 1px solid var(--linia); align-items: center; }
.krok-p .nr { grid-column: 1 / span 1; align-self: start; padding-top: .7em; }
.krok-t { grid-column: 2 / span 5; }
.krok-t h3 { margin: 0 0 20px; font-size: clamp(28px, 3vw, 48px); }
.krok-t p { margin: 0; color: var(--tusz-2); max-width: 46ch; line-height: 1.5; }
.krok-t .dla { margin-top: 20px; color: var(--tusz); padding-top: 16px; border-top: 1px dashed var(--linia); }
.krok-t .dla .mono { display: block; margin-bottom: 6px; }

.krok-link { display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; background: var(--terakota); color: var(--tusz); border-radius: 999px; padding: 14px 22px; font-size: 15px; transition: background .3s; }
.krok-link:hover { background: color-mix(in oklab, var(--terakota), var(--tusz) 12%); }
.krok-link span:last-child, .zamkniecie-linki a span:last-child { display: inline-block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.krok-il { grid-column: 8 / span 5; }
.krok-p:nth-child(even) .krok-t { grid-column: 8 / span 5; grid-row: 1; }
.krok-p:nth-child(even) .krok-il { grid-column: 2 / span 5; grid-row: 1; }

.krok-p.ciemny { background: var(--ciemny); color: var(--tlo); border-bottom-color: var(--ciemny); padding-top: clamp(72px, 9vw, 144px); padding-bottom: clamp(72px, 9vw, 144px);
  --il-tusz: var(--tlo); --il-tusz-2: var(--na-ciemnym); --il-linia: color-mix(in oklab, var(--tlo) 26%, transparent); }
.krok-p.ciemny .krok-t p, .krok-p.ciemny .mono { color: var(--na-ciemnym); }
.krok-p.ciemny .krok-t .dla { color: var(--tlo); border-top-color: color-mix(in oklab, var(--tlo) 26%, transparent); }
.krok-p.ciemny .krok-il { grid-column: 2 / span 6; }
.krok-p.ciemny .krok-t { grid-column: 9 / span 4; }


.il { width: 100%; height: auto; display: block; overflow: visible; }
.il .r { fill: none; stroke: var(--il-tusz); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il .trasa { fill: none; stroke: var(--il-tusz); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.il .przerywana { stroke: var(--il-tusz-2); stroke-dasharray: 5 7; }
.il .cienka { stroke-width: 1.2; }
.il .os { stroke: var(--il-linia); stroke-width: 1.5; }
.il .legenda { stroke-width: 2.4; }
.il .fala { stroke: var(--turkus); stroke-width: 2.5; }
.il .wsad { fill: var(--musztarda); }
.il .owoc { fill: var(--terakota); }
.il .punkt { fill: var(--il-tusz); }
.il .etykieta { fill: var(--musztarda); }
.il .ziarna .z1 { fill: color-mix(in oklab, var(--musztarda) 55%, var(--terakota)); }
.il .ziarna .z2 { fill: color-mix(in oklab, var(--terakota), var(--ciemny) 60%); }
.il .ziarna .z3 { fill: var(--ciemny); }
.il .ziarna .z4 { fill: color-mix(in oklab, var(--ciemny), var(--tusz) 55%); }
.il .ziarna .z5 { fill: var(--tusz); }
.il .ziarna .szew { fill: none; stroke: var(--tlo); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.il .t { font: 400 13px/1 var(--f-mono); fill: var(--il-tusz-2); }
.il .akcent-t { fill: var(--il-tusz); }
.il .ciemny-t { fill: var(--tusz); }
.il .tafla { fill: var(--ciemny); transform-box: fill-box; transform-origin: center; transition: opacity .9s ease, transform 1.4s cubic-bezier(.22,1,.36,1); }
.il .wskazowka { transform-box: view-box; transform-origin: 326px 96px; transform: rotate(calc(var(--u, 1) * 360deg)); }

.il .punkt.zdarzenie { fill: var(--tlo); stroke: var(--il-tusz); stroke-width: 2; transition: fill .4s; }
.jedna-kreska .il .punkt.zdarzenie:not(.on) { fill: var(--tlo); }
.il .punkt.zdarzenie, .il .punkt.zdarzenie.on { fill: var(--il-tusz); } .il .punkt.akcent.on, .il .punkt.akcent { fill: var(--terakota); }
.jedna-kreska .il .punkt.akcent:not(.on) { fill: var(--tlo); }
.jedna-kreska .il .t.zdarzenie { opacity: .3; transition: opacity .5s, fill .5s; }
.jedna-kreska .il .t.zdarzenie.on { opacity: 1; }
.jedna-kreska .il .data-dzis:not(.on) { opacity: 0; }
.il .pekniecie.on { stroke: var(--musztarda); stroke-width: 1.8; }
.krok-p.ciemny .il .t.zdarzenie.on { fill: var(--musztarda); }
.jedna-kreska .il .tafla:not(.on) { opacity: 0; transform: scale(.55); }
.jedna-kreska .il .trasa, .jedna-kreska .il .owoc.start { visibility: hidden; }


svg.kreska { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 6; will-change: transform; }   
.kreska path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kreska-pas path { stroke-width: var(--pas); }
.kreska-tusz path { stroke: var(--tusz); stroke-width: var(--tuszw); }
.kreska-tusz path.na-ciemnym { stroke: var(--tlo); }
.kreska-ziarno ellipse { stroke: var(--tusz); stroke-width: 1.7; }
.kreska-ziarno .szew { stroke: var(--tusz); stroke-width: 1.4; opacity: 0; transition: opacity .5s; }
.kreska-ziarno.ziarno .szew { opacity: 1; }
.kreska-ziarno.na-ciemnym ellipse, .kreska-ziarno.na-ciemnym .szew { stroke: var(--tlo); }
.kreska-wybuch path { stroke: var(--musztarda); stroke-width: 2.2; opacity: 0; }
.kreska-wybuch.pek path { animation: mp-pek .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes mp-pek { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
@media print { svg.kreska { display: none; } }


.porownanie-ramka { padding: 0 var(--pad); overflow-x: auto; }
.porownanie { width: 100%; border-collapse: collapse; font-size: 17px; }
.porownanie th, .porownanie td { text-align: left; vertical-align: top; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--linia); font-weight: 400; }
.porownanie thead th { padding-top: 0; color: var(--tusz-2); }
.porownanie thead th:last-child { color: var(--tusz); }
.porownanie tbody th { width: 18%; color: var(--tusz-2); padding-top: 26px; }
.porownanie .oni { width: 38%; color: var(--tusz-2); }
.porownanie .my { width: 44%; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -.015em; line-height: 1.25; transition: color .5s; }
.porownanie tbody tr:first-child > * { border-top: 1px solid var(--linia); }
.jedna-kreska .porownanie tbody tr:not(.on) .my { color: var(--tusz-2); }
@media (min-width: 901px) { .jedna-kreska .porownanie .my, .jedna-kreska .porownanie thead th:last-child { padding-left: 16px; } }
.il .data-dzis { font-size: 12px; }


.zamkniecie { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; padding: var(--pas) var(--pad); }
.zamkniecie-t { grid-column: 1 / span 6; grid-row: 1; }
.zamkniecie-il { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.zamkniecie-linki { grid-column: 1 / span 6; grid-row: 2; align-self: start; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.zamkniecie .mono { display: block; margin-bottom: 40px; }
.zamkniecie p { font-size: clamp(34px, 4.4vw, 72px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; max-width: 18ch; }
.zamkniecie-linki a { display: inline-flex; gap: 16px; align-items: center; color: var(--tusz); font-size: 16px; }
.zamkniecie-linki .btn { background: var(--terakota); color: var(--tusz); border-radius: 999px; padding: 16px 24px; }

.zamkniecie-tel { flex-basis: 100%; margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.zamkniecie .zamkniecie-tel .mono { display: inline; margin: 0; }
.zamkniecie-linki .zamkniecie-tel a { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.03em; }

@media (max-width: 900px) {
  .krok-p { grid-template-columns: 1fr; gap: 20px; }
  .krok-p > *, .krok-p:nth-child(even) > *, .krok-p.ciemny > * { grid-column: 1 !important; grid-row: auto !important; }
  .krok-il { order: 3; max-width: 420px; }
  .krok-p.ciemny { padding-top: 64px; padding-bottom: 64px; }
  
  .porownanie, .porownanie thead, .porownanie tbody { display: block; }
  .porownanie tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .porownanie th, .porownanie td, .porownanie tbody tr:first-child > * { border: 0; padding: 0; width: auto !important; }
  .porownanie thead th:first-child { display: none; }
  .porownanie thead th { padding-bottom: 12px; }
  .porownanie tbody tr { row-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--linia); }
  .porownanie tbody tr:first-child { border-top: 1px solid var(--linia); }
  .porownanie tbody th { grid-column: 1 / -1; padding: 0; }
  .porownanie td { font-size: 15px; line-height: 1.35; }
  .porownanie .my { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
  .zamkniecie { grid-template-columns: 1fr; gap: 32px; }
  .zamkniecie > * { grid-column: 1 !important; grid-row: auto !important; }
  .zamkniecie-il { max-width: 340px; }
  .il .t { font-size: 14px; }   
  .il .data-dzis { font-size: 12px; }
  
  .jedna-kreska .krok-p, .jedna-kreska .porownanie-ramka, .jedna-kreska .zamkniecie, .jedna-kreska .proces + .sek .glowa { padding-left: 36px; }
}

/* Proces na home (30.10.2026, korekta klienta: krótki zwiastun zamiast pełnych 7 kroków).
   Pas .droga z /nasz-proces/ w wariancie poziomym na 7 etapów: małe rysunki z ilustracji nad linią, podpisy pod nią.
   Linię z ziarnem rysuje przewijanie (proces.js, data-droga="przewijanie"); kolory etapów z data-kolory.
   Telefon: poziomy pasek, który przesuwa się za ziarnem, dopóki nie przewinie go ręka. */
.proces .glowa .bok { margin: 0; max-width: 34ch; color: var(--tusz-2); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; }
.proces-pas { padding: 0 var(--pad); }
.droga-mini { --ikona: clamp(50px, 4.6vw, 66px); --dy: calc(var(--ikona) + 18px); --il-tusz: var(--tusz); --il-tusz-2: var(--tusz-2); --il-linia: var(--linia); }
.droga-mini > ol { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; }
.droga-mini li { padding-top: 0; }
.droga-mini .il { height: var(--ikona); margin-bottom: 32px; overflow: visible; transition: opacity .6s; }
.droga-mini .il .r, .droga-mini .il .trasa { stroke-width: 4.4; }
.droga-mini .il .cienka { stroke-width: 2.6; }
.droga-mini .il .przerywana { stroke-dasharray: 10 12; }
.droga-mini .il .szew { stroke-width: 3; }
.droga-mini .mono { display: block; margin-bottom: 4px; }
.droga-mini .podpis { display: block; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.15; letter-spacing: -0.02em; }
.droga-mini.czeka li:not(.on) .il { opacity: .22; }
.droga-mini .droga-kolor {
  background: linear-gradient(90deg, var(--terakota) 0 7%, var(--turkus) 14.3%, color-mix(in oklab, var(--turkus), var(--musztarda) 35%) 28.6%, var(--musztarda) 42.9%, var(--terakota) 50%, color-mix(in oklab, var(--terakota), var(--ciemny) 60%) 57.1%);
  background: linear-gradient(90deg in oklab, var(--terakota) 0 7%, var(--turkus) 14.3%, color-mix(in oklab, var(--turkus), var(--musztarda) 35%) 28.6%, var(--musztarda) 42.9%, var(--terakota) 50%, color-mix(in oklab, var(--terakota), var(--ciemny) 60%) 57.1%); }
.droga-mini li:nth-child(1) { --kolor: var(--terakota); } .droga-mini li:nth-child(2) { --kolor: var(--turkus); }
.droga-mini li:nth-child(3) { --kolor: color-mix(in oklab, var(--turkus), var(--musztarda) 35%); } .droga-mini li:nth-child(4) { --kolor: var(--musztarda); }
.droga-mini li:nth-child(n+5) { --kolor: color-mix(in oklab, var(--terakota), var(--ciemny) 60%); }
.droga-mini.czeka li:not(.on) { --kolor: var(--tlo); }
.proces-cta { padding: var(--s5, 55px) var(--pad) 0; }
.proces-cta .btn { display: inline-flex; gap: 16px; align-items: center; background: var(--terakota); color: var(--tusz); border-radius: 999px; padding: 16px 24px; font-size: 16px; }
.proces-cta .btn span:last-child { display: inline-block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
@media (max-width: 900px) {
  .proces-pas { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .proces-pas::-webkit-scrollbar { display: none; }
  .droga-mini { --ikona: 46px; width: max-content; }
  .droga-mini > ol { grid-template-columns: repeat(7, 100px); gap: 14px; }
  .droga-mini li::before { display: block; }
  .droga-mini .il { margin-bottom: 30px; }
  .droga-mini .podpis { font-size: 17px; }
  .proces-cta { padding-top: var(--s4, 34px); }
}
@media (prefers-reduced-motion: reduce) { .droga-mini .il, .proces-cta .btn span:last-child { transition: none; } }

/* Referencje (02.11.2026): ciemny pas z przełącznikiem firm. Po lewej indeks nazw (38,2%), po prawej jeden cytat naraz (61,8%);
   kreska w terakocie pod aktywną nazwą odmierza czas czytania. */
.ref { --jasny: #efece6; --dzielnik: color-mix(in oklab, var(--jasny) 18%, transparent); background: var(--ciemny); color: var(--jasny); padding: var(--pas) 0; }
.ref .v2-glowa .mono, .ref .mono { color: var(--na-ciemnym); }
.ref-scena { display: grid; grid-template-columns: 38.2fr 61.8fr; gap: var(--s4, 34px); padding: 0 var(--pad); align-items: start; }
.ref-firmy { position: relative; display: grid; border-top: 1px solid var(--dzielnik); }
.ref-firmy button { position: relative; display: grid; grid-template-columns: 3.2em 1fr; align-items: baseline; text-align: left; width: 100%; padding: 20px 0 22px; border: 0; border-bottom: 1px solid var(--dzielnik); background: none; cursor: pointer;
  font: inherit; font-size: clamp(28px, 3vw, 48px); line-height: 1; letter-spacing: -.03em; color: color-mix(in oklab, var(--jasny) 40%, transparent); transition: color .35s; }
.ref-firmy button:hover { color: color-mix(in oklab, var(--jasny) 75%, transparent); }
.ref-firmy button[aria-selected="true"] { color: var(--jasny); }
.ref-firmy button:focus-visible { outline: 2px solid var(--musztarda); outline-offset: 4px; }
.ref-firmy .mono { font-size: 13px; }
.ref-kreska { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--terakota); transform: scaleX(0); transform-origin: left; }
.ref-js:not(.gra) [aria-selected="true"] .ref-kreska { transform: scaleX(1); transition: transform .5s; }
.ref-js.gra [aria-selected="true"] .ref-kreska { animation: ref-postep var(--czas, 8s) linear both paused; }
.ref-js.gra.w-oknie:not(:focus-within) [aria-selected="true"] .ref-kreska { animation-play-state: running; }
@keyframes ref-postep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ref-cytaty { display: grid; gap: var(--s6, 89px); }
.ref-cytat { margin: 0; }
.ref-cytat blockquote { margin: 0; }
.ref-cytat p { margin: 0; font-size: clamp(28px, 3.1vw, 50px); line-height: 1.1; letter-spacing: -.028em; text-wrap: pretty; text-indent: -.42em; }
.ref-cytat figcaption { display: grid; gap: 6px; margin-top: var(--s4, 34px); }
.ref-cytat figcaption span:first-child { color: var(--jasny); }
.ref-js .ref-cytaty { gap: 0; }
.ref-js .ref-cytat { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .6s; }
.ref-js .ref-cytat.on { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.ref:not(.ref-js) .ref-firmy { display: none; }
.ref:not(.ref-js) .ref-cytaty { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .ref-scena { grid-template-columns: 1fr; gap: var(--s4, 34px); }
  .ref-firmy { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); border-top: 0; border-bottom: 1px solid var(--dzielnik); }
  .ref-firmy::-webkit-scrollbar { display: none; }
  .ref-firmy button { flex: none; width: auto; grid-template-columns: auto auto; gap: 8px; padding: 12px 0 14px; border-bottom: 0; font-size: 24px; white-space: nowrap; scroll-snap-align: start; }
  .ref-cytat p { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.16; }
  .ref-cytat figcaption { margin-top: var(--s3, 21px); }
}
@media (prefers-reduced-motion: reduce) { .ref-js .ref-cytat { transform: none; transition: opacity .01s, visibility 0s; } }

/* Stopka: oznaczenie treści AI (02.11.2026) */
.stopka .ai-tag { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--na-ciemnym) 14%, transparent); color: var(--na-ciemnym); white-space: nowrap; }
@media (max-width: 760px) { .stopka .ai-tag { margin-left: 0; white-space: normal; } }

/* O nas (02.11.2026): kolaż czterech zdjęć pod nagłówkiem, od pieca do filiżanki; ziarna w dłoniach szersze (1,618).
   Każde zdjęcie we własnym okienku, więc paralaksa z ruch.js działa w każdym osobno. Na telefonie tylko ziarna. */
.ph-foto.kolaz { display: grid; grid-template-columns: 1fr 1.618fr 1fr 1fr; gap: 6px; }
.kolaz > div { position: relative; overflow: hidden; }
@media (max-width: 700px) { .ph-foto.kolaz { grid-template-columns: 1fr; } .kolaz > div:not(.kz-glowne) { display: none; } }

/* Wyróżniki w wierszach (02.11.2026): na desktopie każdy wiersz listy ma tę samą wysokość co najwyższy, więc odstępy między pozycjami
   są równe bez względu na to, czy tekst łamie się na dwie linie. Lista wpisów bloga zostaje bez zmian. Telefon: równe odstępy jak dotąd. */
@media (min-width: 901px) { .sek:not(.wpisy) .wiersze { display: grid; grid-auto-rows: 1fr; } }
/* O nas: zdjęcie torebek ma nad sobą i pod sobą ten sam odstęp co sekcje (var(--sek)); opinia nie dokłada drugiego. */
.obraz:has(+ .opinia) { margin-top: var(--sek); margin-bottom: var(--sek); }
.obraz + .opinia { padding-top: 0; }
.opinia:has(+ .kontakt) { padding-bottom: var(--sek); }

/* Karta 12:00 na home (02.11.2026): dwukropek miga jak w zegarku, a pod tekstem jest przycisk taki jak w prawym górnym rogu,
   bo linki w ciemnym bloku obok łatwo pominąć. 12:00, podpis i przycisk u góry karty, żeby przycisk był w pierwszym ekranie przy 1440×900.
   Przy ograniczonym ruchu dwukropek stoi. */
.hero-72 .dwukropek { animation: mp-dwukropek 1s steps(1, end) infinite; }
@keyframes mp-dwukropek { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-72 .dwukropek { animation: none; } }
.hero-72-dol { display: grid; gap: 21px; justify-items: start; }
.cta-72 { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--terakota); color: var(--tusz); font-size: 15px; white-space: nowrap; }
.cta-72 span:last-child { display: inline-block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.hero-72:has(.hero-72-dol) { justify-content: flex-start; gap: 21px; }
.hero-72-dol p { max-width: 30ch; }