/*
 * Motyw PUWU: style (czysty CSS, bez procesu budowania).
 * Kierunek: łódzka agencja kreatywna. Korporacyjny porządek (siatka treści, powtarzalne moduły, czerń i czerwień
 * PUWU na jasnym papierze) + ręka grafika: markerowe kreski, falki, mazaje, strzałki i buźki uwu z assets/img/brand.
 * Rysunki są maskami CSS (liczy się kanał alfa WebP), więc ten sam plik bywa czarny, biały albo czerwony.
 * Czarno-białe zdjęcia łódzkich fabryk z czerwonym obrysem. Tylko tryb jasny (ciemne są pojedyncze pasy i stopka).
 * Kolejność: fonty → tokeny → baza → komponenty → dopasowanie do znaczników WordPressa (na końcu pliku).
 */

/* Fonty hostowane lokalnie (RODO: bez Google Fonts). font-display: block + preload w <head> = brak podmiany fontów. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: block;
  font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: block;
  font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: block;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: block;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Kursywa szeryfowa do cytatów i wyróżnień (głos „człowieka” obok korporacyjnego groteska). */
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/source-serif-4-latin-ext-600-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/source-serif-4-latin-600-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Tokeny */
:root {
  --ink: #232323;          /* szary PUWU z brandbooka (tekst, przyciski) */
  --paper: #fcfcfc;        /* biel PUWU (brandbook) */
  --card: #ffffff;
  --soft: #f2f2f2;
  --line: #e3e3e3;
  --muted: #5c5c5c;
  --accent: #ff3e30;       /* czerwień PUWU (brandbook) */
  --accent-ink: #c4231a;   /* czerwony tekst na jasnym tle (5,6:1) */
  --accent-strong: #d42d1f;/* tło z białym tekstem (5:1, WCAG AA) */
  --void: #232323;         /* tło ciemnych pasów = szary PUWU (brandbook) */
  --black: #000000;        /* czerń PUWU (brandbook) */
  --on-ink: #ffffff;

  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-hand: var(--font-serif);

  /* Rysunki od grafika (maski). */
  --b-kreska: url("../img/brand/kreska.webp");
  --b-kreski: url("../img/brand/kreski-2.webp");
  --b-kreski-1: url("../img/brand/kreski-1.webp");
  --b-kreski-4: url("../img/brand/kreski-4.webp");
  --b-falka: url("../img/brand/falka-1.webp");
  --b-falka-2: url("../img/brand/falka-2.webp");
  --b-mazaj: url("../img/brand/mazaj-1.webp");
  --b-mazaj-2: url("../img/brand/mazaj-2.webp");
  --b-mazaj-3: url("../img/brand/mazaj-3.webp");
  --b-strzalka: url("../img/brand/strzalka-1.webp");
  --b-strzalka-2: url("../img/brand/strzalka-2.webp");
  --b-strzalka-3: url("../img/brand/strzalka-3.webp");
  --b-strzalka-mala: url("../img/brand/strzalka-3-gruba.webp"); /* pogrubiona do małych rozmiarów */
  --b-strzalka-srednia: url("../img/brand/strzalka-3-srednia.webp"); /* średnia grubość do strzałki w hero */
  --b-uwu: url("../img/brand/uwu-sprite.webp");
  --b-sign: url("../img/brand/lodzka-agencja-kreatywna.svg");

  --radius: 1.25rem;
  --radius-sm: .65rem;
  --container: 74rem;
  --narrow: 46rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 8.5rem);
  --header-h: 4.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgb(35 35 35 / .04), 0 12px 32px -18px rgb(35 35 35 / .22);
  color-scheme: light;
}

/* 2. Reset i baza */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: clamp(1rem, .94rem + .14vw, 1.2rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: .1em; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4, .display, .h1, .h2, .h3 { margin: 0; font-family: var(--font-display); font-weight: 750; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; font-variation-settings: "wdth" 100; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-strong); color: #fff; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; font-weight: 700; border-radius: 999px; }
.skip-link:focus { top: 1rem; color: var(--paper); }

/* Rysunek jako maska: kolor z currentColor albo --mark. Używane przez pseudo-elementy w całym motywie. */
.mark, .uwu-face {
  display: block; background-color: var(--mark, currentColor);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}

/* 3. Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .55); }
.section--soft { background-color: var(--soft); }
.section--ink { background-color: var(--void); color: var(--paper); }
/* Sekcja ze zdjęciem w tle pod białą nakładką (pole „Zdjęcie w tle”); przezroczyste niebo zdjęcia pokazuje papier. */
.section--photo { padding-block: clamp(7rem, 17vw, 15rem) clamp(6rem, 14vw, 12rem); background: linear-gradient(rgb(252 252 252 / .7), rgb(252 252 252 / .7)), var(--section-photo) center 30% / cover no-repeat, var(--paper); }
/* Ciemna sekcja ze zdjęciem w tle (kontakt pod wpisem, blok kontaktu z „Zdjęciem w tle”): nakładka #232323. */
.section.section--photo-dark { background: linear-gradient(rgb(35 35 35 / .8), rgb(35 35 35 / .8)), var(--section-photo) center 40% / cover no-repeat, var(--void); }
/* Hero ze zdjęciem w tle (pole „Zdjęcie w tle nagłówka”): ciemna nakładka #232323, więcej budynku, napisy białe. */
.hero.hero--photo { padding-block: clamp(4rem, 9vw, 7.5rem) clamp(8rem, 18vw, 15rem); color: #fff; background: linear-gradient(rgb(35 35 35 / .66), rgb(35 35 35 / .66)), var(--section-photo) center 35% / cover no-repeat, var(--void); }
.hero--photo:not(.hero--poster)::before { display: none; }
.hero--photo :is(.hero__title, .kicker) { color: #fff; }
.hero--photo .lead, .hero--photo .breadcrumbs ol, .hero--photo .breadcrumbs a { color: rgb(255 255 255 / .82); }
.hero--photo .btn { border-color: rgb(255 255 255 / .7); color: #fff; }
.hero--photo .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero--photo .btn--primary { background: #fff; border-color: #fff; color: var(--ink); }
.hero--photo .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.section--ink a { color: var(--paper); }
/* Falka grafika na styku sekcji (powtarzalny akcent zamiast linii). */
.section--soft::before, .section--ink::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); width: clamp(6rem, 18vw, 11rem); aspect-ratio: 900 / 120; translate: 0 -50%;
  background: var(--accent); -webkit-mask: var(--b-falka) center / contain no-repeat; mask: var(--b-falka) center / contain no-repeat; pointer-events: none;
}
@media (min-width: 80em) { .section--soft::before, .section--ink::before { left: calc((100vw - var(--container)) / 2 + var(--gutter)); } }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.75rem); max-width: 48rem; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60em) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4. Typografia */
.display { font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem); line-height: .98; letter-spacing: -.035em; }
.h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.9rem); line-height: 1; letter-spacing: -.03em; }
.h2 { font-size: clamp(1.9rem, 1.2rem + 2.1vw, 3.1rem); line-height: 1.02; }
.h3 { font-size: clamp(1.25rem, 1.12rem + .5vw, 1.55rem); line-height: 1.15; letter-spacing: -.015em; }
.lead { font-size: clamp(1.12rem, 1.04rem + .35vw, 1.35rem); line-height: 1.5; color: var(--muted); max-width: 38em; }
.section--ink .lead { color: rgb(255 255 255 / .72); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.hand { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accent-ink); }
/* Wyróżnione słowo w nagłówkach sekcji kontaktu: ten sam krój i grubość co reszta nagłówka, tylko czerwone. */
.contact-block__title .hand { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent); }
/* Nadtytuł: trzy markerowe kreski grafika i tekst wersalikami. */
.kicker { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; width: fit-content; font-family: var(--font-sans); font-weight: 700; font-size: .8rem; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.kicker::before { content: ""; width: 1.45em; height: 1.45em; flex-shrink: 0; background: var(--accent); -webkit-mask: var(--b-kreski) center / contain no-repeat; mask: var(--b-kreski) center / contain no-repeat; transform: scaleX(-1); }
.section-head--center .kicker { justify-self: center; }
.section--ink .kicker { color: var(--paper); }
.dot { color: var(--accent); }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Wyróżnienie we frazie: czerwone pociągnięcie markera pod słowami (rysuje się przy wejściu na ekran). */
.underline-hand { position: relative; z-index: 0; white-space: nowrap; }
.underline-hand::after {
  content: ""; position: absolute; z-index: -1; left: -.12em; right: -.12em; bottom: -.02em; height: .42em;
  background: var(--accent); -webkit-mask: var(--b-kreska) center / 100% 100% no-repeat; mask: var(--b-kreska) center / 100% 100% no-repeat;
  transform-origin: 0 50%; rotate: -1.5deg; opacity: .95;
}
.hero .underline-hand::after { animation: swipe .7s var(--ease) .35s both; }
@keyframes swipe { from { transform: scaleX(0); } to { transform: none; } }

/* Rysowanie przy przewijaniu (bez JS; przeglądarki bez scroll-driven animations pokazują od razu całość). */
@supports (animation-timeline: view()) {
  .section-head .underline-hand::after, .section-head .kicker::before, .section--soft::before, .section--ink::before {
    animation: swipe linear both; animation-timeline: view(); animation-range: entry 10% cover 35%;
  }
  .section-head .kicker::before { animation-name: pop; }
}
@keyframes pop { from { transform: scaleX(-1) scale(.2) rotate(-30deg); opacity: 0; } to { transform: scaleX(-1); opacity: 1; } }

/* 5. Przyciski: pigułki jak CTA na puwu.pl. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3.1rem; padding: .75rem 1.5rem; border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: 1rem; letter-spacing: .01em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:is(.btn--primary, .btn--accent):focus-visible { outline-offset: 3px; border-radius: 999px; }
.section--ink .btn { border-color: rgb(255 255 255 / .6); color: var(--paper); }
.section--ink .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.section--ink .btn--accent { border-color: var(--accent); }
.btn--sm { min-height: 2.6rem; padding: .45rem 1.15rem; font-size: .92rem; }
/* Odręczny link zamiast drugiego przycisku: tekst z czerwonym pociągnięciem markera po najechaniu,
   minka uwu zmieniająca miny i odręczna strzałka grafika. */
.btn--hand, .btn--hand:hover { min-height: auto; padding: .4rem .25rem; border: 0; border-radius: 0; gap: .6rem; font-weight: 700; color: var(--ink); background: linear-gradient(var(--accent), var(--accent)) 3rem 100% / 0 2px no-repeat; transform: none; }
.btn--hand { transition: background-size .35s var(--ease); }
.btn--hand:hover { background-size: calc(100% - 3rem - 3.2em) 2px; }
.btn--hand__face { flex-shrink: 0; width: 2.4rem; aspect-ratio: 320 / 200; background: var(--accent); -webkit-mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; rotate: -8deg; }
.btn--hand:hover .btn--hand__face { animation: uwu-moods 2.4s steps(1) infinite; }
.btn--hand__arrow { flex-shrink: 0; width: 2.6em; height: 1.25em; background: var(--accent); -webkit-mask: var(--b-strzalka-mala) center / contain no-repeat; mask: var(--b-strzalka-mala) center / contain no-repeat; transition: transform .3s var(--ease); }
.btn--hand:hover .btn--hand__arrow { transform: translateX(5px) rotate(-4deg); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* Strzałka z ręki grafika w linkach „więcej”. */
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; gap: .55em; align-items: center; }
.link-arrow::after { content: ""; width: 2.6em; height: 1.25em; background: var(--accent); -webkit-mask: var(--b-strzalka-mala) center / contain no-repeat; mask: var(--b-strzalka-mala) center / contain no-repeat; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px) rotate(-4deg); }

/* 6. Topbar i nagłówek */
.topbar { background: var(--void); color: var(--paper); font-size: .8rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.4rem; }
.topbar a { color: var(--paper); text-decoration: none; }
.topbar a:focus-visible { outline-offset: -2px; }
.topbar__links { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar__links::-webkit-scrollbar { display: none; }
/* Pasek nad logo: nazwy jak nadtytuły (wersaliki z rozstrzeleniem), opisy zwykłym krojem tekstu. */
.topbar__link { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; padding-block: .2rem; }
.topbar__link strong { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.topbar__desc { display: none; font-size: .82rem; color: rgb(255 255 255 / .55); transition: color .2s; }
.topbar__link:hover .topbar__desc { color: var(--paper); }
@media (min-width: 64em) { .topbar__desc { display: inline; } }
.topbar__tools { display: flex; gap: 1rem; align-items: center; }

.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.logo { display: inline-flex; flex-shrink: 0; }
.logo img { width: 6.5rem; height: auto; }
.nav { margin-left: auto; }
.nav__list { list-style: none; display: flex; gap: .15rem; align-items: center; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .6rem .85rem; font-family: var(--font-display); font-weight: 650; letter-spacing: -.01em; font-size: 1rem; text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--accent-ink); }
/* Aktywna pozycja: markerowa kreska pod spodem. */
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: .4rem; background: var(--accent); -webkit-mask: var(--b-kreska) center / 100% 100% no-repeat; mask: var(--b-kreska) center / 100% 100% no-repeat; }
.nav__chev { width: .7em; transition: transform .2s; }
[aria-expanded="true"] > .nav__chev { transform: rotate(180deg); }
.header-cta { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--card); cursor: pointer; }
.icon-btn:hover { background: var(--ink); color: var(--paper); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.nav-toggle { margin-left: auto; }

/* mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgb(0 0 0 / .25); }
.mega[hidden] { display: none; }
.mega__inner { display: grid; gap: 1.5rem; padding-block: 1.75rem 2.25rem; grid-template-columns: minmax(0, 1fr); }
.mega__grid { list-style: none; display: grid; gap: .25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.mega__item { display: grid; gap: .25rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); text-decoration: none; transition: background .2s; }
.mega__item:hover { background: var(--soft); color: var(--ink); }
/* Komputer: karty w menu z cienką czerwoną ramką pojawiającą się powoli po najechaniu. */
@media (min-width: 64em) {
  .mega__item { border: 1px solid transparent; transition: background .6s ease, border-color .6s ease; }
  .mega__item:hover, .mega__item:focus-visible { border-color: var(--accent); }
}
.mega__item strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.mega__item span { font-size: .92rem; color: var(--muted); line-height: 1.45; }
.mega__item .mega__num { font-weight: 700; color: var(--accent); font-size: .78rem; letter-spacing: .08em; line-height: 1; }
.mega__feature { position: relative; overflow: hidden; display: grid; gap: .75rem; align-content: start; padding: 1.75rem; border-radius: var(--radius); background: var(--void); color: var(--paper); text-decoration: none; transition: background-color .2s; }
.mega__feature::after { content: ""; position: absolute; right: -1.5rem; bottom: -1.5rem; width: 8rem; aspect-ratio: 1; background: rgb(255 255 255 / .1); -webkit-mask: var(--b-mazaj) center / contain no-repeat; mask: var(--b-mazaj) center / contain no-repeat; }
.mega__feature:hover { color: #fff; background-color: var(--accent); }
.mega__feature .kicker { color: var(--paper); }
.mega__feature:hover .kicker::before { background: #fff; }
.mega__feature:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .header-cta { display: inline-flex; white-space: nowrap; }
  .nav__link { white-space: nowrap; }
  /* „Kontakt” w menu: stała odręczna kreska w kolorze marki pod spodem (jak aktywna pozycja). */
  .nav__link[href$="/kontakt/"]::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: .4rem; background: var(--accent); -webkit-mask: var(--b-kreska) center / 100% 100% no-repeat; mask: var(--b-kreska) center / 100% 100% no-repeat; }
  .mega__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .mega__grid > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .site-header__inner { gap: 1rem; }
  .nav__list { gap: 0; }
  .nav__link { padding-inline: .55rem; font-size: .95rem; }
  .header-cta { padding-inline: 1rem; }
}
@media (max-width: 63.99em) {
  .nav { position: fixed; inset: var(--header-h) 0 0 0; height: calc(100dvh - var(--header-h)); z-index: 99; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); display: none; margin: 0; flex-direction: column; }
  .nav.is-open { display: flex; animation: nav-in .2s var(--ease); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 1.5rem; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { width: 100%; justify-content: flex-start; padding: 1.05rem 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
  .nav__link[aria-current="page"]::after { left: 0; right: auto; width: 4rem; bottom: .55rem; }
  .nav__chev { margin-left: auto; }
  .mega { position: static; border: 0; box-shadow: none; background: transparent; }
  .mega__inner { padding: 0 0 1rem; }
  .mega__grid { grid-template-columns: minmax(0, 1fr); }
  .mega__item { padding: .7rem 0; }
  .nav__mobile-cta { display: flex; margin-top: auto; min-height: 3.5rem; justify-content: center; }
  body.nav-open { overflow: hidden; }
  /* backdrop-filter tworzył kontener dla position:fixed – menu byłoby przycięte do nagłówka. */
  body.nav-open .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; backdrop-filter: none; background: var(--paper); border-bottom-color: var(--line); }
  @keyframes nav-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
}
@media (min-width: 64em) { .nav__mobile-cta { display: none; } }

/* 7. Breadcrumbs */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--accent); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }

/* 8. Hero (zwykły) */
.hero { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2rem, 4vw, 4rem); overflow: hidden; }
.hero__inner { display: grid; gap: 1.35rem; position: relative; z-index: 1; }
/* Hero tuż nad ciemną sekcją (np. /kontakt): więcej powietrza przed zmianą tła. */
.hero:not(.hero--poster):has(+ .section--ink) { padding-bottom: clamp(4rem, 8vw, 7rem); }
.hero__title { max-width: 17ch; }
.hero__title--wide { max-width: 24ch; }
.hero__actions { margin-top: .5rem; }
.hero__byline { display: flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--muted); }
/* Mazaj grafika w tle zwykłego hero (podstrony): bardzo jasny, przy prawej krawędzi. */
.hero:not(.hero--poster)::before { content: ""; position: absolute; z-index: -1; top: 1.5rem; right: max(-4rem, calc((100vw - var(--container)) / 2 - 4rem)); width: clamp(12rem, 32vw, 26rem); aspect-ratio: 1; background: color-mix(in oklab, var(--accent) 12%, var(--paper)); -webkit-mask: var(--b-mazaj-2) center / contain no-repeat; mask: var(--b-mazaj-2) center / contain no-repeat; rotate: 8deg; pointer-events: none; }
.hero__media { position: relative; isolation: isolate; margin-top: clamp(2rem, 4vw, 3.5rem); }
.hero__media img { width: 100%; height: clamp(14rem, 34vw, 44rem); object-fit: cover; object-position: center 85%; }
.hero__media--container, .hero__media--narrow { margin-inline: auto; width: min(100% - 2 * var(--gutter), var(--container) - 2 * var(--gutter)); }
.hero__media--container img, .hero__media--narrow img { border-radius: var(--radius); }
.hero__media--narrow { width: min(100% - 2 * var(--gutter), 48rem); }
.hero__media--container img { height: clamp(12rem, 28vw, 30rem); }
.hero__media--narrow img { height: clamp(10rem, 24vw, 22rem); }
@media (min-width: 160em) { .hero__media { max-width: 200rem; margin-inline: auto; } }
/* Zdjęcia sekcji w tonacji grafika: czarno-białe, mocny kontrast.
   Okładki wpisów i obrazki w treści zostają w kolorze (czerwone okładki w stylu marki). */
:is(.hero__photo, .section-head ~ img, .feature-card__media, .stage img, .contact-video video) { filter: grayscale(1) contrast(1.12); }
/* Obrys: automatyczny (SVG) albo gotowy od grafika – ten sam kadr co zdjęcie. */
.hero__outline, .hero__drawn { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__media .hero__drawn { width: 100%; height: 100%; object-fit: cover; object-position: center 85%; filter: none; }
.hero__drawn { animation: draw 1.8s var(--ease) .5s both; }
.is-waiting .hero__drawn { animation-play-state: paused; }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__media--tint::before { content: none; }

/* Buźki uwu na zdjęciu hero: naklejki, które lekko się kołyszą. */
.hero-floaters { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hero-floater {
  --drop: 22%;
  position: absolute; left: var(--x-m, var(--x)); top: min(calc(var(--y) + var(--drop)), 72%);
  width: calc(clamp(4.5rem, 8vw, 7.5rem) * var(--scale-m, var(--scale)));
  translate: -50% -50%; rotate: var(--r);
  animation: wobble 3.2s ease-in-out var(--delay) infinite alternate;
}
.hero-floater__face { display: block; width: 100%; aspect-ratio: var(--ratio); background: var(--accent); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.hero-floater--desktop { display: none; }
@media (min-width: 48em) { .hero-floater { --drop: 18%; left: var(--x); width: calc(clamp(4.5rem, 8vw, 7.5rem) * var(--scale)); } .hero-floater--desktop { display: block; } }
@keyframes wobble { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-.5rem) rotate(4deg); } }

/* 8a. Hero „plakat marki” (strona główna): ciemny pas jak na puwu.pl – białe logo, odręczny podpis
   grafika pisany linijka po linijce, czerwone pociągnięcia, wieża z obrysem; H1 pod spodem na jasnym tle. */
.hero--poster { padding-top: 0; }
.poster { position: relative; isolation: isolate; overflow: hidden; background: var(--void); color: #fff; min-height: clamp(30rem, 118vw, 40rem); display: grid; grid-template-rows: auto 1fr; }
/* Dół plakatu: czerwona falka rysowana od lewej (jak obrys) i dopisek. */
.poster__bottom { position: relative; z-index: 3; align-self: end; padding-block: 3rem 1.25rem; background: linear-gradient(transparent, rgb(35 35 35 / .9)); }
.poster__note { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .85); text-shadow: 0 1px .75rem rgb(0 0 0 / .6); }
.poster__squiggle { flex-shrink: 0; width: clamp(5.5rem, 12vw, 8.5rem); aspect-ratio: 900 / 77; background: var(--accent); -webkit-mask: var(--b-falka) center / contain no-repeat; mask: var(--b-falka) center / contain no-repeat; animation: draw 1.2s var(--ease) 1.6s both; }
.poster__inner { position: relative; z-index: 3; padding-block: clamp(2rem, 7vw, 5rem) 0; }
.poster__brand { --sign-w: clamp(12rem, 58vw, 19rem); position: relative; display: grid; gap: clamp(.75rem, 2vw, 1.5rem); width: min(100%, 22rem); justify-items: center; margin-inline: auto; }
.poster__name { font-family: var(--font-display); font-size: 3rem; font-weight: 800; }
.poster__tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; }
.poster__media { position: absolute; inset: auto 0 0 0; height: 56%; z-index: 1; }
.poster__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 100%; }
.poster__photo { filter: none; }
.poster__media::before { content: ""; position: absolute; inset: 0 0 auto; height: 30%; z-index: 1; background: linear-gradient(var(--void), transparent); pointer-events: none; }
/* Odręczny podpis grafika (SVG jako maska): pojawia się spokojnie, bez efektu „pisania”. */
.sign { position: relative; width: var(--sign-w); aspect-ratio: 1974.78 / 1500; margin: 0; rotate: -3deg; animation: sign-in .8s var(--ease) .15s both; }
.sign__line { position: absolute; inset: 0; background: #fff; -webkit-mask: var(--b-sign) center / contain no-repeat; mask: var(--b-sign) center / contain no-repeat; }
/* Tooltip na podpisie (komputer z myszką): karteczka „autograf” – kto się podpisał, z buźką uwu zamiast „:)”.
   Przechylona jak naklejka, wyskakuje ze sprężynką nad podpisem. */
.sign__tip { display: none; }
@media (min-width: 48em) and (hover: hover) {
  .sign { cursor: help; }
  .sign__tip {
    display: grid; gap: .2rem; position: absolute; z-index: 5; left: 40%; bottom: calc(100% + .35rem);
    padding: .7rem 1rem .75rem; border-radius: .9rem; background: var(--paper); color: var(--ink);
    box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 .9rem 2.2rem -.4rem rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .06);
    white-space: nowrap; pointer-events: none; transform-origin: 1.4rem 120%;
    opacity: 0; transform: translateY(.4rem) rotate(0deg) scale(.85);
    transition: opacity .18s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
  }
  .sign__tip::after { content: ""; position: absolute; left: 1.1rem; top: calc(100% - .35rem); width: .8rem; height: .8rem; background: var(--paper); rotate: 45deg; border-radius: 0 0 .2rem 0; }
  .sign__tip-kicker { font-family: var(--font-sans); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); }
  .sign__tip-text { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.05rem; line-height: 1.15; }
  .sign__tip-face { width: 1.7rem; aspect-ratio: 480 / 189; background: var(--accent); -webkit-mask: url("../img/brand/uwu.webp") center / contain no-repeat; mask: url("../img/brand/uwu.webp") center / contain no-repeat; }
  .sign:hover .sign__tip { opacity: 1; transform: translateY(0) rotate(5deg) scale(1); }
}
@keyframes sign-in { from { opacity: 0; transform: translateY(.5rem) rotate(-2deg); } to { opacity: 1; transform: none; } }
/* Buźka uwu zmieniająca miny (sprite 10 klatek, animacja poklatkowa jak rysunek). */
.uwu-face { --m: var(--b-uwu); width: 7rem; aspect-ratio: 320 / 200; -webkit-mask-size: 1000% 100%; mask-size: 1000% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; animation: uwu-moods 9s steps(1) infinite; }
@keyframes uwu-moods {
  0% { -webkit-mask-position: 0 0; mask-position: 0 0; }
  12% { -webkit-mask-position: 11.111% 0; mask-position: 11.111% 0; }
  14% { -webkit-mask-position: 22.222% 0; mask-position: 22.222% 0; }
  16% { -webkit-mask-position: 11.111% 0; mask-position: 11.111% 0; }
  26% { -webkit-mask-position: 33.333% 0; mask-position: 33.333% 0; }
  38% { -webkit-mask-position: 44.444% 0; mask-position: 44.444% 0; }
  50% { -webkit-mask-position: 55.555% 0; mask-position: 55.555% 0; }
  62% { -webkit-mask-position: 66.666% 0; mask-position: 66.666% 0; }
  72% { -webkit-mask-position: 77.777% 0; mask-position: 77.777% 0; }
  82% { -webkit-mask-position: 88.888% 0; mask-position: 88.888% 0; }
  90% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
.poster__face { position: absolute; z-index: 4; right: -1rem; bottom: -5.5rem; width: clamp(4rem, 13vw, 6.5rem); --mark: var(--accent); rotate: 10deg; }
/* Sekcja pod plakatem: tytuł obok opisu i przycisków; w tle jasny mazaj grafika. */
.hero--poster { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.hero--poster::after { content: ""; position: absolute; z-index: -1; right: max(1rem, calc((100vw - var(--container)) / 2 - 4rem)); bottom: clamp(1rem, 3vw, 2.5rem); width: clamp(9rem, 19vw, 16rem); aspect-ratio: 1; background: color-mix(in oklab, var(--accent) 9%, var(--paper)); -webkit-mask: var(--b-mazaj-2) center / contain no-repeat; mask: var(--b-mazaj-2) center / contain no-repeat; rotate: -12deg; pointer-events: none; }
.hero--poster .hero__inner { padding-top: clamp(2.75rem, 7vw, 5.5rem); row-gap: 1.5rem; }
.hero--poster .hero__title { max-width: 14ch; }
.hero--poster .hero__inner > .lead { color: color-mix(in oklab, var(--ink) 78%, var(--paper)); }
.hero--poster .hero__actions { margin-top: .25rem; }
.hero--poster .hero__actions .btn { white-space: nowrap; }
.hero__side { margin: 0; width: min(100%, 22rem); justify-self: end; }
.hero__side-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; border-radius: var(--radius); }
/* Mała odręczna strzałka (pętelka grafika obrócona w dół) na prawo od podpisu – do kafli oferty. */
.poster__to-offer { position: absolute; z-index: 4; top: 50%; left: calc(50% + var(--sign-w) / 2 - 1.25rem); width: 2.6rem; height: 4.8rem; color: var(--accent); border-radius: .5rem; }
.poster__to-offer-arrow { position: absolute; left: 50%; top: 50%; width: 4.8rem; aspect-ratio: 320 / 170; translate: -50% -50%; rotate: 96deg; background: currentColor; -webkit-mask: var(--b-strzalka-srednia) center / contain no-repeat; mask: var(--b-strzalka-srednia) center / contain no-repeat; animation: draw .9s var(--ease) 1s both, to-offer 1.8s ease-in-out 2s infinite; }
.poster__to-offer:hover { color: #fff; }
@keyframes to-offer { 0%, 100% { transform: translateX(0) scale(1); opacity: 1; } 50% { transform: translateX(.35rem) scale(1.14); opacity: .65; } }
@media (min-width: 48em) {
  .poster { min-height: clamp(34rem, 60vw, 46rem); }
  .poster__brand { justify-items: start; margin-inline: clamp(1.5rem, 6vw, 6rem) 0; width: min(42%, 24rem); }
  .poster__bottom { padding-block: 1.5rem clamp(1.25rem, 3vw, 2rem); background: none; }
  .poster__note { flex-direction: row; align-items: center; gap: 1rem; }
  .poster__media { inset: 0 0 0 30%; height: auto; }
  .poster__media img { object-position: right bottom; }
  .poster__media::before { inset: 0 auto 0 0; width: 25%; height: auto; background: linear-gradient(90deg, var(--void), transparent); }
  .poster__face { right: auto; left: 2rem; bottom: -9rem; rotate: -8deg; }
  .poster__to-offer { top: 56%; left: calc(var(--sign-w) + .5rem); width: 3rem; height: 5.6rem; }
  .poster__to-offer-arrow { width: 5.6rem; }
}
/* Szerokie / panoramiczne ekrany: ramka zdjęcia trzyma proporcje obrazu (2400×1490), żeby wieża
   nie była ucinana od góry; brakująca szerokość z lewej to ciemne tło plakatu z miękkim przejściem. */
@media (min-width: 106em) {
  .poster { min-height: max(46rem, min(34vw, 82svh)); }
  /* Zdjęcie dosunięte do kontenera treści, a nie do krawędzi ekranu: bez pustej dziury między podpisem a wieżą. */
  .poster__media { inset: 0 max(0px, calc((100vw - var(--container)) / 2 - 16rem)) 0 auto; width: auto; height: 100%; aspect-ratio: 2400 / 1490; max-width: 70%; }
  .poster__media::before { width: 30%; }
  .poster__media::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 18%; z-index: 1; background: linear-gradient(270deg, var(--void), transparent); pointer-events: none; }
}
@media (min-width: 64em) {
  .hero--poster .hero__inner { grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  /* Cała treść w lewej kolumnie, prawa wolna na zdjęcie (pole „Zdjęcie obok nagłówka”). */
  .hero--poster .hero__inner > :is(.kicker, .hero__title, .lead, .hero__actions) { grid-column: 1; }
  .hero--poster .hero__inner > .hero__side { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}

/* 9. Doodle (rysunek z bloku): ukryty – motyw rysuje własne elementy marki. */
.doodle { display: none !important; }

/* 10. Placeholder obrazu */
.ph { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--ratio, 16 / 10); background-color: var(--soft); color: var(--muted); font-size: .8rem; letter-spacing: .04em; text-align: center; padding: 1rem; overflow: hidden; border-radius: var(--radius-sm); }
.ph::before { content: attr(data-label); max-width: 24ch; position: relative; z-index: 1; }
/* Brak obrazu bez opisu (okładka, zdjęcie autora): mazaj grafika zamiast pustego pola. */
.ph:is(:not([data-label]), [data-label=""]):not(.avatar)::before { content: ""; width: 42%; aspect-ratio: 1; background: color-mix(in oklab, var(--accent) 22%, var(--soft)); -webkit-mask: var(--b-mazaj-3) center / contain no-repeat; mask: var(--b-mazaj-3) center / contain no-repeat; }
.ph--round { aspect-ratio: 1; border-radius: 50%; }

/* 11. Usługi: karty z dużym numerem i markerową kreską na hover. */
.services { list-style: none; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.service-card { position: relative; display: grid; gap: .9rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); counter-increment: puwu-srv; }
.services { counter-reset: puwu-srv; }
.service-card:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.service-card::after { content: ""; position: absolute; left: clamp(1.5rem, 3vw, 2.25rem); bottom: 1.1rem; width: 4.5rem; height: .45rem; background: var(--accent); -webkit-mask: var(--b-kreska) center / 100% 100% no-repeat; mask: var(--b-kreska) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.service-card:hover::after { transform: none; }
.service-card:has(:focus-visible), .post-card:has(.post-card__title a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
:is(.service-card__title, .post-card__title) a:focus-visible { outline: none; }
.service-card__num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: -.04em; color: var(--accent); }
.service-card__title a { text-decoration: none; }
.service-card__title a::after { content: ""; position: absolute; inset: 0; }
.service-card__text { color: var(--muted); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { display: inline-flex; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; background: var(--paper); }
a.tag:hover { border-color: var(--ink); color: var(--ink); }

/* 12. Karty ekosystemu / feature */
.cards { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.feature-card { position: relative; overflow: hidden; display: grid; gap: .9rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); height: 100%; transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
/* Mazaj w rogu karty (powtarzalny znak). */
.feature-card::after { content: ""; position: absolute; right: -1.75rem; top: -1.75rem; width: 6.5rem; aspect-ratio: 1; background: color-mix(in oklab, var(--accent) 16%, transparent); -webkit-mask: var(--b-mazaj) center / contain no-repeat; mask: var(--b-mazaj) center / contain no-repeat; transition: rotate .4s var(--ease), background-color .2s; pointer-events: none; }
.cards > li:nth-child(3n+2) .feature-card::after { -webkit-mask-image: var(--b-mazaj-2); mask-image: var(--b-mazaj-2); }
.cards > li:nth-child(3n+3) .feature-card::after { -webkit-mask-image: var(--b-mazaj-3); mask-image: var(--b-mazaj-3); }
.section--ink .feature-card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .14); }
.feature-card p { color: var(--muted); }
.section--ink .feature-card p { color: rgb(255 255 255 / .7); }
.feature-card .link-arrow { margin-top: auto; }
a.feature-card { text-decoration: none; }
a.feature-card:hover { color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
a.feature-card:hover::after { rotate: 25deg; background-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.feature-card__media { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }

/* 13. Kroki procesu: duża cyfra w kroju nagłówków + falka łącząca kroki. */
.steps { list-style: none; counter-reset: step; display: grid; gap: 1.75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.step { counter-increment: step; display: grid; gap: .55rem; align-content: start; position: relative; }
.step::before { content: counter(step); font-family: var(--font-display); font-weight: 800; font-size: 3.25rem; line-height: 1; letter-spacing: -.05em; color: var(--accent); }
.step::after { content: ""; position: absolute; top: .9rem; left: 3rem; right: 1rem; height: 1.1rem; background: var(--line); -webkit-mask: var(--b-falka) left center / auto 100% repeat-x; mask: var(--b-falka) left center / auto 100% repeat-x; }
.section--ink .step::after { background: rgb(255 255 255 / .18); }
.step p { color: var(--muted); }
.section--ink .step p { color: rgb(255 255 255 / .7); }

/* 14. Statystyki: liczba z mazajem pod spodem. */
.stats { list-style: none; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.stat { position: relative; display: grid; gap: .5rem; padding-top: .5rem; }
.stat__value { position: relative; z-index: 0; justify-self: start; font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 4.8rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.stat__value::before { content: ""; position: absolute; z-index: -1; left: -8%; bottom: -10%; width: 70%; height: 70%; background: color-mix(in oklab, var(--accent) 30%, transparent); -webkit-mask: var(--b-mazaj) center / contain no-repeat; mask: var(--b-mazaj) center / contain no-repeat; rotate: -8deg; }
.stat__value .dot { font-size: .6em; }
.stat p { color: var(--muted); font-size: 1rem; }
.section--ink .stat p { color: rgb(255 255 255 / .7); }

/* 15. Cytaty / opinie */
.quotes { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.quote { margin: 0; position: relative; display: grid; gap: 1.5rem; align-content: space-between; padding: clamp(1.5rem, 3vw, 2.25rem); padding-top: clamp(3.25rem, 5vw, 3.75rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); height: 100%; }
/* Górny cudzysłów ” (dolny „ przy tej wielkości wchodził na pierwszy wiersz tekstu). */
.quote::before { content: "”"; position: absolute; top: 1rem; left: clamp(1.25rem, 3vw, 2rem); height: 2rem; overflow: hidden; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 4rem; line-height: .9; color: var(--accent); }
.quote__text { margin: 0; font-size: 1.05rem; line-height: 1.65; color: color-mix(in oklab, var(--ink) 82%, var(--paper)); }
.quote__text strong { display: block; margin-bottom: .6rem; font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; font-weight: 600; color: var(--ink); }
.quote__author { display: flex; align-items: center; gap: .85rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote__avatar { display: grid; place-items: center; flex-shrink: 0; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: .85rem; }
.quote__name { display: block; font-style: normal; font-weight: 700; font-size: 1rem; }
.quote__role { display: block; font-size: .85rem; color: var(--muted); }
.pull-quote { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.15; letter-spacing: -.01em; max-width: 26ch; }
.pull-quote cite { display: block; margin-top: 1rem; font-family: var(--font-sans); font-style: normal; font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* 16. FAQ */
.faq { display: grid; border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.3rem 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); letter-spacing: -.015em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex-shrink: 0; margin-left: auto; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-sans); font-weight: 600; font-size: 1.25rem; line-height: 1; transition: transform .25s var(--ease), background .2s; }
.faq__item summary:hover { color: var(--accent-ink); }
.faq__item[open] summary::after { transform: rotate(45deg); background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.faq__q { font: inherit; letter-spacing: inherit; margin-right: auto; }
.faq__answer { padding: 0 3.5rem 1.5rem 0; color: var(--muted); }

/* 17. Tabela cenowa */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); -webkit-overflow-scrolling: touch; }
.table-hint { font-size: .85rem; color: var(--muted); margin-bottom: .75rem; }
@media (min-width: 60em) { .table-hint { display: none; } }
.pricing { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .95rem; }
.pricing th, .pricing td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.pricing thead th { position: sticky; top: 0; background: var(--card); font-family: var(--font-display); font-size: 1.15rem; vertical-align: bottom; border-bottom: 2px solid var(--ink); }
.pricing td:not(:first-child), .pricing th:not(:first-child) { text-align: center; }
.pricing .is-featured { background: color-mix(in oklab, var(--accent) 6%, var(--card)); }
.pricing .group th { background: var(--soft); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; }
.pricing .price td, .pricing .price th { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.yes { color: var(--ink); font-weight: 800; }
.no { color: var(--muted); }
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: var(--accent-strong); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .35rem; }

/* 18. Check-list: odręczny „ptaszek” w czerwonym kółku. */
.checklist { list-style: none; display: grid; gap: .9rem; }
.checklist li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .75rem; }
.checklist li::before { content: "✓"; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-strong); color: #fff; font-size: .8rem; font-weight: 800; margin-top: .05rem; }

/* 19. Etapy (landing prawnicy) */
.stages { list-style: none; display: grid; gap: 1rem; }
.stage { position: relative; display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .stage { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.stage__label { display: grid; gap: .75rem; align-content: start; }
.stage img { border-radius: var(--radius-sm); }

/* 20. Karty wpisów i archiwa */
.post-grid { list-style: none; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.post-card { position: relative; display: grid; gap: .85rem; align-content: start; }
.post-card__media { position: relative; overflow: hidden; border-radius: var(--radius); }
.post-card__media img, .post-card__media .ph { transition: transform .5s var(--ease); border-radius: 0; }
.post-card:hover .post-card__media img, .post-card:hover .post-card__media .ph { transform: scale(1.03); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; font-size: .85rem; color: var(--muted); }
.post-card__cat { font-weight: 700; color: var(--accent-ink); text-decoration: none; position: relative; z-index: 1; }
.post-card__cat:hover { color: var(--ink); text-decoration: underline; }
.post-header > .post-card__cat { justify-self: start; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.post-card__title { font-size: clamp(1.25rem, 1.12rem + .45vw, 1.55rem); line-height: 1.15; letter-spacing: -.02em; }
.post-card__title a { text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.post-card__excerpt { color: var(--muted); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card--featured { gap: 1.25rem; }
@media (min-width: 60em) { .post-card--featured { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 3rem; } .post-card--featured .post-card__title { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.8rem); } .post-card--featured .post-card__excerpt { -webkit-line-clamp: 5; font-size: 1.1rem; } }
.post-list { list-style: none; display: grid; border-top: 2px solid var(--ink); }
.post-list .post-card { grid-template-columns: minmax(0, 1fr); padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
@media (min-width: 48em) { .post-list .post-card { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; align-items: center; } }

.archive-head { position: relative; display: grid; gap: 1.25rem; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.archive-head__count { font-size: .9rem; color: var(--muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .45rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; font-weight: 650; text-decoration: none; background: var(--card); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip__count { font-size: .8rem; color: var(--muted); }
.chip[aria-current="page"] .chip__count { color: inherit; opacity: .7; }
.archive-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.pagination { margin-top: clamp(3rem, 6vw, 5rem); }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
/* Tylko elementy listy – strzałka w „Następna →” to zwykły span w środku linku, nie osobne kółko. */
.pagination li > :is(a, span) { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.pagination a:hover { border-color: var(--ink); }
.pagination [aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .is-gap { border: 0; }

/* Opis i FAQ kategorii pod listą wpisów. */
.term-about { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.term-about__faq { display: grid; gap: 1.5rem; max-width: var(--narrow); }

.search-form { display: flex; gap: .5rem; max-width: 36rem; }
.search-form input { flex: 1; min-width: 0; min-height: 3.25rem; padding: .75rem 1.25rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); }
mark { background: color-mix(in oklab, var(--accent) 22%, transparent); color: inherit; padding: 0 .1em; }

/* autor */
.author-hero { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .author-hero { grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; } }
.social-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }

/* 21. Insights Library A-Z */
.az-nav { position: sticky; top: var(--header-h); z-index: 5; background: var(--paper); padding-block: .75rem; border-bottom: 1px solid var(--line); }
.az-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; }
.az-nav a, .az-nav span { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.az-nav a:hover { background: var(--ink); color: var(--paper); }
.az-nav span { color: var(--line); }
.az-group { display: grid; gap: 1.5rem; padding-block: 2.5rem; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .az-group { grid-template-columns: 6rem minmax(0, 1fr); } }
.az-group__letter { font-family: var(--font-display); font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.az-group__letter .dot { font-size: .8em; }
.term-list { list-style: none; display: grid; gap: 1.25rem 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.term { display: grid; gap: .35rem; }
.term a { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; text-decoration: none; }
.term a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.term p { font-size: .95rem; color: var(--muted); }
.definition { position: relative; overflow: hidden; margin: 0; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--void); color: var(--paper); display: grid; gap: .75rem; }
.definition::after { content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 9rem; aspect-ratio: 1; background: rgb(255 255 255 / .08); -webkit-mask: var(--b-mazaj-3) center / contain no-repeat; mask: var(--b-mazaj-3) center / contain no-repeat; }
.definition dt { font-family: var(--font-display); font-size: .85rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); line-height: 1.2; }
.definition dd { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.2rem, 1.08rem + .45vw, 1.55rem); line-height: 1.45; letter-spacing: -.01em; }

/* 22. Wpis */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.reading-progress__bar { height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }
.post-header { display: grid; gap: 1.5rem; padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .9rem; color: var(--muted); }
.post-meta__author { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 700; text-decoration: none; }
.avatar { width: 2.5rem; height: 2.5rem; flex-shrink: 0; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.05); }
.post-hero { margin-bottom: clamp(2rem, 5vw, 4rem); }
.post-hero img { border-radius: var(--radius); }
.post-hero figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.post-layout { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 64em) { .post-layout { grid-template-columns: 15rem minmax(0, var(--narrow)); justify-content: center; gap: clamp(3rem, 5vw, 6rem); } .post-layout__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; max-height: calc(100vh - var(--header-h) - 4rem); overflow-y: auto; } }
.toc { font-size: .95rem; }
.toc__title { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.toc ol { list-style: none; display: grid; gap: .1rem; border-left: 1px solid var(--line); }
.toc a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--accent); font-weight: 700; }
.toc .toc__sub a { padding-left: 1.75rem; font-size: .9rem; }
@media (max-width: 63.99em) { .toc { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.25rem; background: var(--card); } .toc details summary { cursor: pointer; font-weight: 700; } }
.share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 2rem; }
.share__label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .5rem; }
.post-footer { display: grid; gap: 3rem; margin-top: 3.5rem; }

.cta-inline { position: relative; overflow: hidden; display: grid; gap: 1rem; margin-block: 2.5rem; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--void); color: var(--paper); }
.cta-inline::after { content: ""; position: absolute; right: 1.25rem; top: 1.25rem; width: 4.5rem; aspect-ratio: 320 / 200; background: var(--accent); -webkit-mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; }
.cta-inline p { color: rgb(255 255 255 / .74); }
.cta-inline .h3 { color: var(--paper); max-width: calc(100% - 5rem); }
.cta-inline .btn { justify-self: start; }

.author-box { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
@media (min-width: 40em) { .author-box { grid-template-columns: 5.5rem minmax(0, 1fr); } }
.author-box .avatar { width: 5.5rem; height: 5.5rem; }
.author-box__name { font-size: 1.25rem; }
.author-box__role { font-size: .9rem; color: var(--muted); }
.author-box p { font-size: 1rem; color: var(--muted); }

.comments { display: grid; gap: 2rem; }
.comment-list { list-style: none; display: grid; gap: 1.5rem; }
.comment { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; }
.comment__body { display: grid; gap: .4rem; }
.comment__head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; font-size: .9rem; color: var(--muted); }
.comment__head strong { color: var(--ink); font-size: 1rem; }
.comment__reply { font-size: .85rem; font-weight: 700; }
.comment .comment-list { margin-top: 1.25rem; }

/* 23. Prose: odpowiednik @tailwindcss/typography (klasa .prose) */
.prose { font-size: clamp(1.08rem, 1.02rem + .22vw, 1.2rem); line-height: 1.72; color: var(--ink); max-width: var(--narrow); }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: 1.85em; line-height: 1.1; margin-top: 2.1em; scroll-margin-top: calc(var(--header-h) + 2rem); }
.prose h3 { font-size: 1.35em; line-height: 1.2; margin-top: 1.8em; }
.prose h4 { font-size: 1.1em; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; }
.prose p, .prose li { color: color-mix(in oklab, var(--ink) 88%, var(--paper)); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose ul > li::marker { content: "●  "; font-size: .7em; color: var(--accent); }
.prose ol > li::marker { font-family: var(--font-display); font-weight: 700; color: var(--accent-ink); }
.prose .chips { padding-left: 0; margin-top: 1rem; }
.prose .chips > li { margin-top: 0; }
.prose .chips > li::marker { content: none; }
.prose blockquote { margin-inline: 0; padding: .25em 0 .25em 1.25em; border-left: 3px solid var(--accent); font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.15em; line-height: 1.5; }
.prose hr { border: 0; height: 1.2rem; width: 9rem; background: var(--accent); -webkit-mask: var(--b-falka) center / contain no-repeat; mask: var(--b-falka) center / contain no-repeat; margin-block: 3em; }
.prose img, .prose picture, .prose video, .prose figure { margin-block: 2em; }
.prose img { border-radius: var(--radius-sm); }
.prose figure img { margin: 0; }
.prose figcaption { font-size: .8em; color: var(--muted); margin-top: .6em; }
.prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; padding: .15em .4em; border-radius: .3em; background: var(--soft); }
.prose pre { overflow-x: auto; padding: 1.25em; border-radius: var(--radius-sm); background: var(--void); color: var(--soft); font-size: .85em; line-height: 1.6; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92em; display: block; overflow-x: auto; }
.prose th, .prose td { padding: .65em .8em; border-bottom: 1px solid var(--line); text-align: left; }
.prose thead th { border-bottom: 2px solid var(--ink); font-size: .85em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prose > :first-child { margin-top: 0; }
.prose--lg { font-size: clamp(1.12rem, 1.04rem + .3vw, 1.3rem); }

/* 24. Formularz */
.form-card { position: relative; background: var(--card); color: var(--ink); padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius); box-shadow: var(--shadow); }
.form-card--line { border: 1px solid var(--line); }
/* Formularz na stronie kontaktu: zwarty na komputerze, żeby cała karta mieściła się na ekranie bez przewijania. */
@media (min-width: 60em) {
  .form-card--line { padding: clamp(1.5rem, 2.2vw, 2rem); align-self: start; position: sticky; top: calc(var(--header-h, 4.5rem) + 1.5rem); }
  .form-card--line .form, .form-card--line .form__row { gap: .8rem; }
  .form-card--line .form__row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .form-card--line .field { gap: .3rem; }
  .form-card--line .field__input { min-height: 2.85rem; padding: .6rem .9rem; font-size: 1rem; }
  .form-card--line textarea.field__input { min-height: 6.25rem; }
  .form-card--line .checkbox { font-size: .85rem; line-height: 1.4; }
  .form-card--line .form__foot .btn { min-height: 3.1rem; }
}
.section--ink .form-card a { color: var(--ink); }
.form { display: grid; gap: 1.2rem; }
.form__row { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: grid; gap: .4rem; }
.field__label { font-size: .9rem; font-weight: 700; color: var(--ink); }
.field__label .req, .checkbox .req { color: var(--accent-ink); }
.field__input { width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: 1.05rem; transition: border-color .2s, background .2s, box-shadow .2s; }
.field__input::placeholder { color: #6e6c67; }
.field__input:hover { border-color: color-mix(in oklab, var(--ink) 40%, var(--line)); }
.field__input:focus { outline: none; background: var(--card); border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
.field__input:user-invalid { border-color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 5%, var(--card)); }
select.field__input { appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23232323' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: .75rem; cursor: pointer; }
textarea.field__input { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.field__error { font-size: .85rem; color: var(--accent-ink); }
.checkbox { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .8rem; font-size: .9rem; line-height: 1.5; color: var(--muted); align-items: start; cursor: pointer; }
.checkbox input { appearance: none; width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; border: 1.5px solid var(--ink); border-radius: .35rem; background: var(--card); cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.checkbox input::after { content: ""; width: .65rem; height: .65rem; background: #fff; transform: scale(0); transition: transform .15s var(--ease); }
.checkbox input:checked { background: var(--accent-strong); border-color: var(--accent-strong); }
.checkbox input:checked::after { transform: scale(1); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
.checkbox input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form__foot { display: grid; gap: .9rem; margin-top: .25rem; }
.form__foot .btn { width: 100%; min-height: 3.5rem; font-size: 1.05rem; }
@media (min-width: 40em) { .form__foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.25rem; } .form__foot .btn { width: auto; padding-inline: 2.25rem; } }
.form__legal { font-size: .8rem; line-height: 1.5; color: var(--muted); padding-top: 1rem; border-top: 1px solid var(--line); }
.form__legal a { color: var(--muted); }
.form__status { font-size: .95rem; font-weight: 700; }
.form__status:empty { display: none; }
.form__status[data-state="ok"] { color: #1d7a3e; }
.form__status[data-state="error"] { color: var(--accent-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.grecaptcha-badge { visibility: hidden; }
.section--ink .eyebrow { color: rgb(255 255 255 / .6); }

/* 25. Sekcja kontakt: ciemny pas, biała buźka i strzałka grafika wskazująca formularz. */
.contact-block { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 60em) { .contact-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .contact-block > .form-card { align-self: start; } }
.contact-block__intro { position: relative; display: grid; gap: 1.25rem; align-content: start; }
.contact-block__title { font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
.contact-block__mail { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + .9vw, 1.85rem); font-weight: 700; }
/* Rysunek z bloku zastępuje animowana buźka (pseudo-element), obraz zostaje dla czytników jako pusty alt. */
.contact-block__face { display: none; }
.section--ink .contact-block__intro::after { content: ""; display: block; width: clamp(5rem, 12vw, 7.5rem); aspect-ratio: 320 / 200; background: var(--paper); -webkit-mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; animation: uwu-moods 9s steps(1) infinite; rotate: -6deg; }
@media (min-width: 60em) {
  .section--ink .contact-block::after { content: ""; position: absolute; left: 39%; top: 1rem; width: 7rem; aspect-ratio: 1; background: var(--accent); -webkit-mask: var(--b-strzalka-3) center / contain no-repeat; mask: var(--b-strzalka-3) center / contain no-repeat; rotate: 12deg; pointer-events: none; }
}
.contact-list { list-style: none; display: grid; gap: 1.1rem; }
.contact-list li { position: relative; display: grid; gap: .15rem; padding-left: 1.15rem; }
.contact-list li::before { content: ""; position: absolute; left: 0; top: .32rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }
/* Grafika przy formularzu w sekcji kontaktu (np. adres na stronie głównej): powolne, ledwo widoczne przybliżanie
   i oddalanie, po najechaniu lekkie uniesienie. */
.contact-graphic { margin: .75rem 0 0; width: min(100%, 26rem); overflow: hidden; border-radius: var(--radius); background: var(--void); box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 0 2.75rem .25rem rgb(0 0 0 / .65); transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
.contact-graphic:hover { translate: 0 -.35rem; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 0 3.5rem .5rem rgb(0 0 0 / .75); }
.contact-graphic__img { display: block; width: 100%; height: auto; filter: none; transform-origin: 65% 40%; animation: graphic-breathe 18s ease-in-out infinite alternate; }
@keyframes graphic-breathe { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, .5%); } }
/* Komputer: grafika wypełnia kolumnę do dołu karty formularza (kolumny równej wysokości). */
@media (min-width: 60em) {
  .contact-block__intro:has(> .contact-graphic) { display: flex; flex-direction: column; gap: 1.25rem; }
  .contact-graphic { position: relative; flex: 1 1 auto; min-height: 18rem; }
  .contact-graphic__img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 45%; }
  .contact-block:has(.contact-graphic) > .form-card { align-self: stretch; }
  .section--ink .contact-block__intro:has(> .contact-graphic)::after { display: none; }
}
.contact-list .eyebrow { font-size: .75rem; }
.contact-list a, .contact-list span { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.contact-video { overflow: hidden; background: var(--void); aspect-ratio: 1; border-radius: var(--radius); }
.contact-video video { width: 100%; height: 100%; object-fit: cover; filter: none; }
/* Zdjęcie w bloku kontaktu (zamiast wideo) w czerwonej ramce: kreska rysuje się dookoła, potem po obwodzie
   krąży jaśniejszy błysk. Kwadrat, żeby zaokrąglenia ramki (SVG rozciągany do pola) się nie zniekształcały. */
.contact-photo { margin: 0; }
.contact-photo__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 58%; border-radius: var(--radius); filter: none; }
.has-snake-frame { position: relative; padding: .65rem; }
.snake-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.snake-frame rect { fill: none; stroke: var(--accent); stroke-linecap: round; }
.snake-frame__line { stroke-width: .55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: frame-draw 3.2s cubic-bezier(.45, .05, .3, 1) .4s forwards; }
.snake-frame__beam { stroke-width: 1.3; stroke-dasharray: .1 .9; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 .35rem rgb(255 62 48 / .7)); animation: frame-beam 11s linear 3.6s infinite; }
@keyframes frame-draw { to { stroke-dashoffset: 0; } }
@keyframes frame-beam { 0% { stroke-dashoffset: 0; opacity: 0; } 8%, 92% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.is-waiting > .snake-frame rect { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .snake-frame__line { stroke-dashoffset: 0; } .snake-frame__beam { display: none; } }
.map-ph { --ratio: 21 / 9; }

/* 26. Stopka: ciemna (#232323 jak tło zdjęć), białe logo, odręczny podpis i falka. */
.site-footer { position: relative; overflow: hidden; background-color: var(--void); color: rgb(255 255 255 / .82); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; font-size: 1rem; }
.site-footer { border-top: 1px solid rgb(255 255 255 / .1); }
.site-footer::before { content: ""; position: absolute; top: 0; left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); width: clamp(6rem, 18vw, 11rem); aspect-ratio: 900 / 120; translate: 0 -50%; background: var(--accent); -webkit-mask: var(--b-falka) center / contain no-repeat; mask: var(--b-falka) center / contain no-repeat; }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--accent); }
.site-footer .logo img { filter: invert(1) hue-rotate(180deg); }
.site-footer .tag { background: transparent; border-color: rgb(255 255 255 / .25); color: var(--paper); }
.site-footer .tag:hover { border-color: var(--accent); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer-brand { display: grid; gap: 1rem; align-content: start; max-width: 22rem; }
.footer-brand .logo img { width: 8rem; }
.footer-col h2 { display: flex; align-items: center; gap: .55rem; font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .6); margin-bottom: 1rem; }
.footer-col h2::before { content: ""; width: 1.2em; height: 1.2em; background: var(--accent); -webkit-mask: var(--b-kreski) center / contain no-repeat; mask: var(--b-kreski) center / contain no-repeat; transform: scaleX(-1); }
.footer-col ul { list-style: none; display: grid; gap: .5rem; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .14); font-size: .85rem; color: rgb(255 255 255 / .55); }
.footer-bottom a { color: rgb(255 255 255 / .7); }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-wordmark { margin-top: 3rem; width: 100%; opacity: .95; }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; letter-spacing: inherit; text-transform: inherit; }

/* 27. Cookies */
.cookie-banner { position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: 1rem; max-width: 34rem; margin-left: auto; display: grid; gap: 1rem; padding: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 50px -20px rgb(35 35 35 / .35); font-size: .95rem; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__title { font-size: 1.2rem; }
.cookie-banner p { color: var(--muted); }
.cookie-dialog { width: min(36rem, calc(100% - 2rem)); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; background: var(--card); color: var(--ink); }
.cookie-dialog::backdrop { background: rgb(0 0 0 / .55); }
.cookie-dialog form { display: grid; gap: 1.25rem; padding: 1.75rem; }
.consent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-block: 1rem; border-top: 1px solid var(--line); font-size: .95rem; }
.consent-row p { color: var(--muted); font-size: .9rem; }
.switch { appearance: none; width: 2.9rem; height: 1.6rem; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.switch:checked { background: var(--accent-strong); }
.switch:checked::after { transform: translateX(1.3rem); }
.switch:disabled { cursor: not-allowed; }
.switch:disabled:checked { background: var(--muted); }

/* 28. 404: duża buźka zmieniająca miny. */
.error-page { display: grid; gap: 1.5rem; justify-items: center; text-align: center; padding-block: clamp(4rem, 12vw, 10rem); }
.error-page__face { display: none; }
.error-page::before { content: ""; width: clamp(10rem, 30vw, 16rem); aspect-ratio: 320 / 200; background: var(--ink); -webkit-mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; animation: uwu-moods 6s steps(1) infinite; }
.error-page__code { font-family: var(--font-display); font-size: clamp(4.5rem, 3rem + 7vw, 9rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--accent); }

/* 29. Druk */
@media print {
  .topbar, .site-header, .site-footer, .cookie-banner, .cookie-dialog, .reading-progress, .share, .post-layout__aside, .cta-inline, .comments, form,
  .hero__media, .poster, .btn-row, .btn, .table-hint, .contact-video, .contact-photo, .snake-frame, .map-ph, [data-map-embed] { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .section, .section--soft, .section--ink, .definition { background: none !important; color: #000 !important; }
  .section--soft::before, .section--ink::before, .hero::before, .contact-block::after, .contact-block__intro::after { display: none !important; }
  .section--ink a, .section--ink .lead, .section--ink p, .section--ink .kicker, .definition dd { color: #000 !important; }
  .section { padding-block: 1.5rem; }
  .underline-hand::after { display: none; }
  .underline-hand { text-decoration: underline; }
  details > :not(summary) { display: block !important; }
  h2, h3 { break-after: avoid; }
  .service-card, .feature-card, .step, .stage, .quote, .faq__item { break-inside: avoid; }
  .prose a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

[x-cloak] { display: none !important; }
.map-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* Siatka usług: stała liczba kolumn zamiast auto-fit; ostatni kafelek wypełnia niepełny wiersz. */
@media (min-width: 40rem) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .services > .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .services { grid-template-columns: repeat(var(--services-cols, 3), 1fr); }
  .services > .service-card:last-child:nth-child(odd) { grid-column: auto; }
  .services[style*="--services-cols:3"] > .service-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .services[style*="--services-cols:3"] > .service-card:last-child:nth-child(3n+2) { grid-column: span 2; }
}

/* Wstawka CTA w treści: kolory wstawki mają pierwszeństwo przed regułami .prose. */
.cta-inline .kicker, .prose .cta-inline .kicker { color: var(--paper); }
.prose .cta-inline p:not(.kicker):not(.h3) { color: rgb(255 255 255 / .74); }
.prose .cta-inline .h3 { color: var(--paper); }

/* Listy w treściach z edytora poza .prose (FAQ, opinie, biogram). */
:where(.faq__answer, .quote__text, .author-box, .hero__lead) :is(ul, ol) { display: grid; gap: .4rem; margin-top: .75rem; padding-left: 1.25em; }
:where(.faq__answer, .quote__text, .author-box) ul > li::marker { color: var(--accent); }
:where(.faq__answer, .quote__text, .author-box) ol > li::marker { font-weight: 700; }
:where(.faq__answer, .quote__text, .author-box) p + p { margin-top: .75rem; }

/* Manifest: duże zdanie; ze zdjęciem (np. mockup marki) – układ obok siebie, zdjęcie w kolorze. */
.statement { position: relative; display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.statement__title { max-width: 22ch; margin-top: 1rem; }
.statement__lead { margin-top: 1.5rem; }
.statement__media { position: relative; margin: 0; }
.statement__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
/* Strzałka grafika od zdania do zdjęcia. */
.statement__media::before { content: ""; position: absolute; z-index: 1; left: -1.5rem; top: -2.5rem; width: 7rem; aspect-ratio: 1; background: var(--accent); -webkit-mask: var(--b-strzalka-2) center / contain no-repeat; mask: var(--b-strzalka-2) center / contain no-repeat; rotate: -20deg; }
@media (min-width: 60em) {
  .statement--media { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .statement--media .statement__title { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.3rem); }
  .statement__media::before { left: -4.5rem; top: 1rem; rotate: 0deg; }
}

/* Lokalizacja: zdjęcie od grafika (nocna fabryka z czerwonym obrysem) w karcie, w kolorze oryginału. */
.section-head ~ .location__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 60%; border-radius: var(--radius); filter: none; }
@media (min-width: 48em) { .section-head ~ .location__img { aspect-ratio: 2 / 1; } }
.location__map { margin-top: 2rem; }

/* Skaner zabudowy (blok Lokalizacja, opcja „Skaner”) – 1:1 z hero motywu „Arasaka”, na całą szerokość: czerwona linia skanu
   po budynkach, raster jak na ekranie z linijką u dołu, obrys zabudowy i buźki uwu namierzone celownikiem.
   Kolory w tonacji obecnego motywu: zdjęcie czarno-białe, czerwień i czerń PUWU. Ruch wyłącza prefers-reduced-motion. */
.scan { position: relative; isolation: isolate; overflow: hidden; counter-reset: puwu-uwu; }
.scan { margin-top: clamp(2rem, 4vw, 3.5rem); }
.section:has(> .scan) { padding-bottom: 0; }
.scan img { display: block; width: 100%; height: clamp(12rem, 30vw, 44rem); object-fit: cover; object-position: center 85%; }
.scan__photo { filter: grayscale(1) contrast(1.15) brightness(.97); }
.scan::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 46%, rgb(255 62 48 / .5) 49.5%, rgb(255 62 48 / .85) 50%, transparent 50.5%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: var(--photo-mask) center 85% / cover no-repeat; mask: var(--photo-mask) center 85% / cover no-repeat;
  mix-blend-mode: multiply; animation: scan-line 9s linear infinite;
}
.scan::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 4.5rem 3px no-repeat, repeating-linear-gradient(90deg, rgb(35 35 35 / .4) 0 1px, transparent 1px 1.75rem) 0 100% / 100% 9px no-repeat, repeating-linear-gradient(0deg, rgb(35 35 35 / .04) 0 1px, transparent 1px 4px); }
.scan .scan__outline { position: absolute; inset: 0; z-index: 2; height: 100%; pointer-events: none; }
.scan-floaters { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scan-floater { --drop: 26%; position: absolute; left: var(--x-m, var(--x)); top: min(calc(var(--y) + var(--drop)), 72%); width: calc(clamp(4.5rem, 8vw, 7.5rem) * var(--scale)); translate: -50% -50%; counter-increment: puwu-uwu; }
.scan-floater::before {
  content: ""; position: absolute; inset: -.6rem; --c: var(--accent); --l: .7rem; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--l);
  background-repeat: no-repeat; animation: scan-lock 4s var(--ease) var(--delay) infinite;
}
.scan-floater::after { content: "UWU—" counter(puwu-uwu, decimal-leading-zero); position: absolute; left: -.6rem; top: calc(100% + .75rem); padding: .15rem .35rem; background: var(--accent-strong); color: #fff; font-family: var(--font-sans); font-size: .62rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .12em; line-height: 1.3; white-space: nowrap; }
.scan-floater__face { display: block; width: 100%; aspect-ratio: var(--ratio); background: var(--accent); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; filter: drop-shadow(0 0 .1rem var(--paper)) drop-shadow(0 0 .25rem var(--paper)); }
.scan-floater--desktop { display: none; }
@media (min-width: 48em) { .scan-floater { --drop: 20%; left: var(--x); } .scan-floater--desktop { display: block; } }
@media (min-width: 75em) { .scan-floater { --drop: 14%; } }
@keyframes scan-lock { 0%, 100% { inset: -.6rem; opacity: 1; } 12% { inset: -1.1rem; opacity: .35; } 24% { inset: -.6rem; opacity: 1; } }
@keyframes scan-line { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Telefon i tablet: zdjęcie manifestu nie zajmuje całej szerokości (4:5 na 768 px = prawie ekran wysokości). */
@media (max-width: 59.99em) {
  .statement__media { width: min(100%, 24rem); justify-self: end; }
  .statement__img { aspect-ratio: 1; }
}
/* Karty: na tablecie dwie kolumny, ostatnia nieparzysta karta na całą szerokość (bez pustego pola). */
@media (min-width: 40em) and (max-width: 63.99em) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 29. Hero z wideo w ramce (pole „Wideo” bloku): tekst po lewej, animacja po prawej w białej ramce
   jak odbitka – lekko przechylona, z twardym czarnym cieniem i buźką uwu na rogu. */
.hero__video { position: relative; margin: 3.25rem 0 1rem; justify-self: center; width: min(86%, 22rem); padding: .55rem; border-radius: 1.4rem; background: #fff; box-shadow: .7rem .7rem 0 var(--black); rotate: 2.5deg; transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1), translate .4s cubic-bezier(.34, 1.56, .64, 1); }
.hero__video:hover { rotate: -1deg; translate: 0 -.25rem; }
.hero__video video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .95rem; background: var(--void); filter: none; }
.hero__video::after { content: ""; position: absolute; left: .25rem; top: -2.9rem; width: clamp(4.5rem, 9vw, 6.5rem); aspect-ratio: 320 / 200; background: #fff; -webkit-mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; mask: var(--b-uwu) 0 0 / 1000% 100% no-repeat; animation: uwu-moods 9s steps(1) infinite; rotate: -10deg; }
.hero__video:has(.hero__video-caption) { padding-bottom: 0; }
.hero__video-caption { padding: .75rem .5rem .85rem; text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 64em) {
  .hero--video .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .hero--video .hero__inner > * { grid-column: 1; }
  .hero--video .hero__inner > .hero__video { grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: end; width: min(100%, 24rem); margin: 0; }
  .hero__video::after { top: auto; left: -8.5rem; bottom: 1.5rem; width: 5.5rem; }
}

/* 30. Strona kontaktu: pierwsza sekcja (hero) na czerwieni PUWU – oczojebnie, z humorem. Napisy, minki i mazaj
   białe; podkreślenie „uwu”, kropka i ukośnik okruszków czarne (białe pod białym tekstem byłyby nieczytelne). */
.puwu-page--kontakt .hero { overflow: hidden; background: var(--accent); color: #fff; }
.puwu-page--kontakt .hero:not(.hero--poster)::before { background: #fff; width: clamp(14rem, 36vw, 30rem); top: .5rem; animation: wobble 6s ease-in-out infinite alternate; }
.puwu-page--kontakt .hero :is(.hero__title, .kicker, .lead, .breadcrumbs ol, .breadcrumbs a) { color: #fff; }
.puwu-page--kontakt .hero .kicker::before { background: #fff; }
.puwu-page--kontakt .breadcrumbs li + li::before, .puwu-page--kontakt .hero .dot { color: var(--black); }
.puwu-page--kontakt .hero .underline-hand::after { background: var(--black); opacity: 1; }
/* Telefon: mazaj za ramką z animacją, nie za tytułem. */
@media (max-width: 63.99em) { .puwu-page--kontakt .hero:not(.hero--poster)::before { top: auto; bottom: 6rem; right: -5rem; width: 16rem; } }