/* ===== fonts/fonts.css ===== */
/* Fonty C2 hostowane lokalnie (SIL Open Font License 1.1 — licencje w OFL-*.txt obok).
   Schibsted Grotesk: plik zmienny (oś wagi 400–600). Spectral: statyczny 500 (panel menu mobilnego Nav87).
   Podzbiory latin i latin-ext z Google Fonts; zero zewnętrznych żądań. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/schibsted-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/schibsted-grotesk-latin.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;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/spectral-500-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/spectral-500-latin.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;
}

/* ===== styles/tokens.css ===== */
/* Tokeny C2 — wzorzec Home Final (paleta P1, typografia T2, geometria R1, skala dużych ekranów B).
   Wartości 1:1 z prototypu; spis i źródła: c2/FUNDAMENT.md.

   Jednostki (jak w Nav87, wymóg powiększania tekstu):
   • rozmiary tekstu i szerokości bloków tekstu — rem (16 px = 1 rem, wartości identyczne z wzorcem);
   • progi — em: 1024 px = 64em, 1180 px = 73.75em, 1440 px = 90em, 1920 px = 120em;
   • odstępy — px, mnożone przez skalę dużych ekranów.

   Skala dużych ekranów (wariant B): od 1440 do 1920 px nagłówki ×1,14, tekst ×1,07, odstępy ×1,12,
   powyżej stałe. Prototyp liczy mnożniki w JS; tu w czystym CSS przez długość --fr-px (0–480 px przy
   16 px) i trzy współczynniki będące długościami: --kh = 0,14 px · ułamek skali, --kt = 0,07 px · …,
   --ks = 0,12 px · …. Wartość V × (1 + k · ułamek) = calc(V + V_liczba * var(--k…)), np. nagłówek 64 px:
   calc(4rem + 64 * var(--kh)). Poniżej 1440 px ułamek wynosi 0, więc mobile i desktop do 1440 px są bez zmian.
   Jednostka cqi odnosi się do ramki .c2-frame (container-type) — zmiennych z cqi używają wyłącznie
   elementy wewnątrz ramki i ramka nie może zawierać kolejnego kontenera, w którym byłyby użyte. */

:root {
  /* paleta P1 */
  --c-bg: #F1F2EF;
  --c-surface: #FFFFFF;
  --c-mint: #E6EEEB;
  --c-mint-hover: #D9E4E0;
  --c-ink: #141B1C;
  --c-body: #26302F;
  --c-muted: #4B5758;
  --c-field: #6E7E80;
  --c-line: #C5CCCA;
  --c-line-light: #DCE1DF;
  --c-petrol: #1E5650;
  --c-petrol-hover: #174640;
  --c-dark: #12282A;
  --c-dark-line: #2E4749;
  --c-axis: #5E9C93;
  --c-dark-num: #8FBFB6;
  --c-on-dark: #EEF3F1;
  --c-on-dark-body: #CBD8D5;
  --c-on-dark-meta: #B4C6C2;
  --c-on-hero: #F4F7F5;
  --c-error: #8A2D2D;

  /* typografia T2 */
  --f-serif: 'Spectral', serif;                /* stosy jak we wzorcu — także krój zastępczy dla „→” (poza podzbiorem fontu) */
  --f-sans: 'Schibsted Grotesk', sans-serif;

  /* geometria R1: jeden zaokrąglony narożnik (prawy górny) */
  --r-btn: 12px;
  --r-btn-m: 10px;

  /* ruch */
  --ease: cubic-bezier(.25, .6, .3, 1);
  --t-sheen: 1200ms;

  /* układ */
  --cap: 1800px;
}

.c2-frame {
  container-type: inline-size;
  /* margines boczny desktopu: 48 px przy 1024 → 76 px przy 1440 (wzorzec: tab=true), treść do 1800 px */
  --g: clamp(48px, calc(48px + (100cqi - 1024px) * .0673), 76px);
  --px: max(var(--g), calc((100cqi - var(--cap)) / 2 + var(--g)));
  /* skala dużych ekranów: ułamek 0–1 jako długość 0–480 px (30rem) */
  --fr-px: clamp(0px, 100cqi - 90rem, 30rem);
  --kh: calc(var(--fr-px) * .14 / 480);
  --kt: calc(var(--fr-px) * .07 / 480);
  --ks: min(calc(var(--fr-px) * .12 / 480), .12px);   /* odstępy w px: najwyżej ×1,12 także przy większym tekście */
}

/* ===== styles/base.css ===== */
/* Baza C2: reset, dokument, odnośniki, fokus, link „Przejdź do treści”, ograniczony ruch.
   Wzorzec: globalny CSS sekcji Home Final; fokus wyłącznie :focus-visible (wymóg 80D §5). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.c2 {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 400 1rem/1.6 var(--f-sans);
  overflow-wrap: break-word;
}
.c2 * { -webkit-tap-highlight-color: transparent; }
:where(.c2 img, .c2 svg) { display: block; max-width: 100%; }
:where(.c2 h1, .c2 h2, .c2 h3, .c2 h4, .c2 p, .c2 ul, .c2 ol, .c2 figure, .c2 blockquote) { margin: 0; }
:where(.c2 button) { font: inherit; color: inherit; }
/* Typografia łamania wierszy — wspólna reguła wszystkich prototypów Stage 145 (C2 145 01–15:
   h1,h2,h3{text-wrap:balance} p,li,blockquote{text-wrap:pretty}); zerowa specyficzność — reguły modułów mają pierwszeństwo. */
:where(.c2 h1, .c2 h2, .c2 h3) { text-wrap: balance; }
:where(.c2 p, .c2 li, .c2 blockquote) { text-wrap: pretty; }

/* Ramka treści: kontener dla jednostek cqi (siatka, skala dużych ekranów). Nav87 i warstwy
   position: fixed (zgoda cookies, okna) są poza ramką — zawieranie układu zmieniłoby ich odniesienie. */
.c2-frame { display: flex; flex-direction: column; min-height: 100vh; }
.c2-frame > main { flex: 1 0 auto; }
main:focus { outline: none; }

/* odnośniki — wzorzec: a { color: #1E5650 } a:hover { color: #141B1C } (hover tylko na urządzeniach ze wskaźnikiem).
   Resety i kolory domyślne mają zerową specyficzność (:where), żeby nie nadpisywały klas komponentów
   (np. przycisk Nav87 na Hero, przyciski <button class="c2-btn">, marginesy etykiet). */
:where(.c2 a) { color: var(--c-petrol); }
@media (hover: hover) { :where(.c2 a:hover) { color: var(--c-ink); } }

/* fokus — tylko z klawiatury; pierścień 2 px, na jasnym #1E5650, na ciemnym (.c2-dark) #F4F7F5 */
.c2 :focus { outline: none; }
.c2 :focus-visible { outline: 2px solid var(--c-petrol); outline-offset: 3px; }
.c2 .c2-dark :focus-visible { outline-color: var(--c-on-hero); }
.c2 input:focus, .c2 textarea:focus, .c2 select:focus { outline: 2px solid var(--c-petrol); outline-offset: 1px; }

/* „Przejdź do treści” — widoczny po fokusie, nad Nav87 */
.c2-skip {
  position: absolute;
  z-index: 100;
  left: 8px;
  top: 8px;
  padding: 12px 18px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: 600 1rem var(--f-sans);
  text-decoration: none;
  border-radius: 0 var(--r-btn-m) 0 0;
  transform: translateY(-200%);
}
.c2-skip:focus-visible, .c2-skip:focus { transform: none; outline: 2px solid var(--c-petrol); outline-offset: 2px; }

.c2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .c2 *, .c2 *::before, .c2 *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Akordeon (scripts/akordeon.js): stan początkowy ustawiany bez animacji — przejścia wyłączone na czas jednego
   przeliczenia układu po załadowaniu. */
[data-akordeon-init], [data-akordeon-init] *, [data-akordeon-init] *::before, [data-akordeon-init] *::after { transition: none !important; }

/* ===== styles/layout.css ===== */
/* Układ C2 — wzorzec Home Final.
   Desktop od 1024 px (64em): margines --px (48 → 76 px, treść do 1800 px), siatka 12 kolumn z odstępem 24 px.
   Mobile: margines 20 px, treść do 600 px (37.5rem) wyśrodkowana od 640 px. Tła sekcji na pełną szerokość. */

.c2-section {
  --pt: 56px;
  --pb: 56px;
  padding: var(--pt) max(20px, calc((100% - 37.5rem) / 2)) var(--pb);
}
@media (min-width: 64em) {
  .c2-section {
    --pt: calc(104px + 104 * var(--ks));
    --pb: calc(104px + 104 * var(--ks));
    padding: var(--pt) var(--px) var(--pb);
  }
}
.c2-section--rule { border-top: 1px solid var(--c-line); }
.c2-section--white { background: var(--c-surface); }
.c2-section--dark { background: var(--c-dark); color: var(--c-on-dark); }

/* siatki desktopu (wzorzec: repeat(12, minmax(0, 1fr)); column-gap: 24px · 5/7 gap 64 · 4/6 gap 72) */
.c2-grid { display: grid; gap: 24px; }
@media (min-width: 64em) {
  .c2-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .c2-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .c2-grid--4-6 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 72px; align-items: start; }
}

/* ===== styles/type.css ===== */
/* Typografia C2 — wzorzec Home Final (Spectral 500 nagłówki, Schibsted Grotesk 400/500/600 treść).
   Desktop: interpolacja 1024 → 1440 px przez cqi, od 1440 mnożnik nagłówków ×1,14 / tekstu ×1,07 (tokens.css).
   Mobile: formuły 320 → 390 px z prototypu. Wszystkie rozmiary w rem (16 px = 1rem). */

/* H2 — Obszary / FAQ: M 28 → 30 px, D 30 → 46 px (1024 → 1440), ×1,14 */
.c2-h2 {
  font: 500 1.875rem/1.1 var(--f-serif);
  font-size: clamp(1.75rem, calc(1.875rem - (390px - 100cqi) * .07), 1.875rem);
  letter-spacing: -.01em;
  color: var(--c-ink);
}
/* H2 duży — O mnie (nazwisko): M 32 → 34, D 34 → 54 */
.c2-h2--lg { line-height: 1.08; font-size: clamp(2rem, calc(2.125rem - (390px - 100cqi) * .13), 2.125rem); }
/* H2 średni — Jak pracuję / Kontakt: M 30 → 32, D 32 → 50 */
.c2-h2--md { line-height: 1.08; font-size: clamp(1.875rem, calc(2rem - (390px - 100cqi) * .13), 2rem); }
@media (min-width: 64em) {
  .c2-h2 { line-height: 1.08; font-size: calc(min(2.875rem, calc(1.875rem + (100cqi - 64rem) * 16 / 416)) + 46 * var(--kh)); }
  .c2-h2--lg { line-height: 1.06; font-size: calc(min(3.375rem, calc(2.125rem + (100cqi - 64rem) * 20 / 416)) + 54 * var(--kh)); }
  .c2-h2--md { line-height: 1.06; font-size: calc(min(3.125rem, calc(2rem + (100cqi - 64rem) * 18 / 416)) + 50 * var(--kh)); text-wrap: balance; }
}

/* H3 — obszary: M 27, D 27 → 36, ×1,14 */
.c2-h3 { font: 500 1.6875rem/1.12 var(--f-serif); letter-spacing: -.01em; color: inherit; }
@media (min-width: 64em) {
  .c2-h3 { font-size: calc(min(2.25rem, calc(1.6875rem + (100cqi - 64rem) * 9 / 416)) + 36 * var(--kh)); text-wrap: balance; }
}

/* etykieta nad nagłówkiem (eyebrow „Kontakt”): 600 13 px / M 12 px, .1em, wersaliki, petrol */
.c2-eyebrow { font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-petrol); }
@media (min-width: 64em) { .c2-eyebrow { font-size: .8125rem; } }

/* etykieta sekcji (PRAKTYKA / WYKSZTAŁCENIE): 600 12 px, .12em, wersaliki, petrol, ×1,07 */
.c2-label { font: 600 .75rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-petrol); }
@media (min-width: 64em) { .c2-label { font-size: calc(.75rem + 12 * var(--kt)); } }

/* lead — wprowadzenie sekcji: M 16 px/1.6, D 19 px/1.6 ×1,07, miara 680 px ×1,07 */
.c2-lead { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
@media (min-width: 64em) {
  .c2-lead { font-size: calc(1.1875rem + 19 * var(--kt)); max-width: calc(42.5rem + 680 * var(--kt)); text-wrap: pretty; }
}

/* tekst ciągły — akapity treści: M 16 px/1.65, D 18 px/1.65 ×1,07, miara 620 px ×1,07 (biografia) */
.c2-text { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
@media (min-width: 64em) {
  .c2-text { font-size: calc(1.125rem + 18 * var(--kt)); max-width: calc(38.75rem + 620 * var(--kt)); text-wrap: pretty; }
}

/* tekst pomocniczy / meta: 400 14 px/1.5, #4B5758 */
.c2-meta { font: 400 .875rem/1.5 var(--f-sans); color: var(--c-muted); }

/* ===== styles/controls.css ===== */
/* Przyciski i odnośniki C2 — wzorzec Home Final, wartości 1:1.
   Błysk przycisku: pasmo bieli przesuwane po najechaniu (1200 ms, cubic-bezier(.25,.6,.3,1)) — biel 75% na mint,
   16% na petrol; tylko urządzenia ze wskaźnikiem; przy ograniczonym ruchu bez przejazdu (base.css).
   Znaczniki: <a class="c2-btn c2-btn--mint|--petrol"><span class="c2-btn__sheen" aria-hidden="true"></span>
   <span class="c2-btn__tx">…</span></a>. */

.c2-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: 54px;
  padding: 8px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 var(--r-btn-m) 0 0;
  font: 600 1.0625rem var(--f-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 420ms var(--ease);
}
.c2-btn__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(var(--sheen-rgb, 255 255 255) / 0) 33.3%, rgb(var(--sheen-rgb, 255 255 255) / var(--sheen-a, .16)) 49.3%, rgb(var(--sheen-rgb, 255 255 255) / 0) 66.7%) 100% 0 / 300% 100% no-repeat;
  transition: background-position var(--t-sheen) var(--ease);
  pointer-events: none;
}
.c2-btn__tx { position: relative; pointer-events: none; }
.c2-btn:active { filter: brightness(.96); }
@media (hover: hover) { .c2-btn:hover .c2-btn__sheen { background-position: 0% 0; } }
/* CTA spoza klasy c2-btn (końcowe CTA 03–05, K3, strona 03, artykuł) — ten sam błysk co c2-btn: warstwa
   c2-btn__sheen w znacznikach (treść strony / generator), tu wyłącznie warunki jej wyświetlenia. Na jasnym tle
   (K3, artykuł) biel 75% jak na mint, na petrol 16%. Wymiary i wygląd spoczynkowy przycisków bez zmian. */
:where(.c2-sp-cta__btn, .c2-sp-k3__btn, .c2-sp6-btn, .c2-art-help__cta) { position: relative; isolation: isolate; }
/* bez overflow: hidden (przy powiększonym tekście napis może wyjść poza przycisk i nie może być obcięty) — tło
   błysku nie wychodzi poza własny obrys, a narożnik R przycisku przejmuje zaokrąglenie */
:where(.c2-sp-cta__btn, .c2-sp-k3__btn, .c2-sp6-btn, .c2-art-help__cta) > .c2-btn__sheen { border-radius: inherit; }
/* Jasne przyciski, których tło po najechaniu przechodzi w biel (K3 #F4F7F5 → #FFFFFF, artykuł mint → #FFFFFF):
   biały błysk na bieli jest niewidoczny (pomiar: ΔL* 0) — pasmo w odcieniu petrol 20%. Po rozjaśnieniu hoveru
   (brightness 1,07) kontrast szczytu pasma ΔL* ≈ 7,3 — jak zatwierdzony błysk na mint (biel 75%, ΔL* ≈ 7,7 bez
   rozjaśnienia). Kolory przycisków, szerokość pasma i czas bez zmian. */
:where(.c2-sp-k3__btn, .c2-sz-k3__btn, .c2-art-help__cta) { --sheen-rgb: 30 86 80; --sheen-a: .2; }
@media (hover: hover) { [data-c2-hov="cta"]:hover .c2-btn__sheen { background-position: 0% 0; } }
/* Stała warstwa kompozytora przycisków z hoverem Głębi (mysz, bez ograniczenia ruchu). Bez niej przycisk dostaje
   warstwę dopiero w chwili najechania, a tekst przerysowany w nowej warstwie przeskakuje o ok. 1 px (pomiar:
   środek napisu K3 14,09 → 15,08 px) — i wraca przy zejściu. Napis ma własną stałą warstwę z tego samego powodu
   (glebia.js skaluje go przeciwnie: przy ułamkowym położeniu napisu nowa warstwa przesuwała go o 0,3 px).
   Kolory, wymiary i układ spoczynkowy bez zmian. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-c2-hov="cta"], [data-c2-hov="ctanav"],
  :is([data-c2-hov="cta"], [data-c2-hov="ctanav"]) > :is(.c2-btn__tx, .n87__cta-tx),
  [data-c2-tel-cta] > [data-c2-tel-num] { will-change: transform; }
}
@media (min-width: 64em) {
  .c2-btn { width: auto; min-height: 58px; padding: 8px 34px; border-radius: 0 var(--r-btn) 0 0; }
}

/* mint — na zdjęciu i ciemnym tle (Hero, Jak pracuję): tekst #12282A, pierścień fokusu #F4F7F5 */
.c2 .c2-btn--mint, .c2 .c2-btn--mint:hover { background: var(--c-mint); color: var(--c-dark); --sheen-a: .75; }
@media (hover: hover) { .c2 .c2-btn--mint:hover { background: var(--c-mint-hover); } }
.c2 .c2-btn--mint:focus-visible { outline-color: var(--c-on-hero); }

/* petrol — na jasnym tle (formularz, strony): tekst biały, pierścień #141B1C */
.c2 .c2-btn--petrol, .c2 .c2-btn--petrol:hover { background: var(--c-petrol); color: #FFFFFF; }
@media (hover: hover) { .c2 .c2-btn--petrol:hover { background: var(--c-petrol-hover); } }
.c2 .c2-btn--petrol:focus-visible { outline-color: var(--c-ink); }

/* odnośnik ze strzałką („Więcej o mnie →”) — 600 17/16 px, petrol, podkreślenie z odstępem 5 px, cel 44 px */
.c2 .c2-arrow-link, .c2 .c2-arrow-link:hover {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--c-petrol);
  font: 600 1rem var(--f-sans);
  text-underline-offset: 5px;
}
@media (min-width: 64em) { .c2 .c2-arrow-link, .c2 .c2-arrow-link:hover { font-size: 1.0625rem; } }

/* odnośnik w tekście — petrol 600, podkreślenie z odstępem 4 px */
.c2-inline-link { color: var(--c-petrol); font-weight: 600; text-underline-offset: 4px; }

/* ===== components/nav87/nav87.css ===== */
/* Nav87 — nawigacja C2. Przeniesienie 1:1 komponentu Nav87F z wzorca Home Final:
   te same wymiary, kolory, stany (Hero / po przewinięciu / menu otwarte) i animacje.
   Logo v5.39 PISMA PREMIUM tight (wyjątek właściciela 20.10.2026):
     B2 (+15%) od 1024 px, B1 (odniesienie) poniżej 1024 px, a poniżej 375 px
     dopasowanie do miejsca — numer telefonu i przycisk menu bez zmian.
   Progi układu jak we wzorcu: telefon/tablet < 1180 px (pasek z przyciskiem menu),
   desktop ≥ 1180 px, duże ekrany — treść do 1800 px.

   Powiększony tekst (ustawienie przeglądarki, powiększenie samego tekstu, odstępy WCAG 1.4.12):
   • rozmiary fontów w rem, progi w em (16 px = 1 em) — przy domyślnym 16 px wartości są
     identyczne z px wzorca, a przy większym foncie układ przechodzi na wariant węższego ekranu;
   • wysokości jako minimum, więc tekst nie jest obcinany, a biały pasek rośnie razem z nagłówkiem;
   • jeżeli treść mimo to się nie mieści, nav87.js ustawia data-fit (patrz sekcja „dopasowanie”).
   Komponent zakłada, że strona nie zmienia rozmiaru fontu elementu html (1rem = ustawienie
   przeglądarki). Desktopowe reguły mają prefiks :where(.n87:not([data-fit~="compact"])) —
   :where() ma zerową specyficzność, więc kaskada w zwykłym układzie jest taka sama jak we wzorcu. */

.n87-frame { position: sticky; top: 0; height: 0; z-index: 30; }

/* Przewijanie do kotwic i fokus na polach pod przyklejonym paskiem (WCAG 2.4.11): wartość startowa
   = dół paska po przewinięciu + odstęp (8 + 50 + 20, 8 + 54 + 20, 12 + 74 + 24 px), działa już przy
   wejściu z adresem #kotwica; nav87.js uściśla ją według rzeczywistej wysokości paska (duży tekst). */
html:has(.n87-frame) { scroll-padding-top: 78px; }
@media (min-width: 23.4375em) { html:has(.n87-frame) { scroll-padding-top: 82px; } }
@media (min-width: 73.75em) { html:has(.n87-frame) { scroll-padding-top: 110px; } }

.n87 {
  --n87-ease: cubic-bezier(.25, .6, .3, 1);
  --n87-pad: 8px;
  --n87-plate-h: 50px;
  --n87-plate-px: 14px;
  /* B1 + dopasowanie: szerokość logo ≤ szerokość ekranu − 193 px (telefon, menu, marginesy, odstęp 12 px) */
  --n87-logo-w: min(142.9px, calc(100vw - 193px));
  --n87-bar-h: var(--n87-plate-h);
  --n87-bar-r: 12px;
  --n87-bar-top: 8px;
  --n87-head-y: 8px;
  position: relative;
  width: 100%;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.n87 * { -webkit-tap-highlight-color: transparent; }
.n87, .n87 *, .n87 *::before, .n87 *::after { box-sizing: border-box; }
@media (min-width: 23.4375em) { .n87 { --n87-plate-h: 54px; --n87-logo-w: 161.97px; } }      /* B1 */
@media (min-width: 37.5em) { .n87 { --n87-pad: 16px; } }
@media (min-width: 64em) { .n87 { --n87-logo-w: 186.23px; } }                           /* B2, układ tabletowy */
@media (min-width: 73.75em) {
  .n87:where(:not([data-fit~="compact"])) {
    --n87-pad: max(32px, calc((100% - 1800px) / 2 + 32px));
    --n87-plate-px: 22px;
    --n87-logo-w: 213.61px;                                                                  /* B2 */
    --n87-bar-h: 74px;
    --n87-bar-r: 16px;
    --n87-bar-top: 45px;
    --n87-head-y: 45px;
  }
  .n87[data-solid="1"]:where(:not([data-fit~="compact"])) { --n87-bar-top: 12px; --n87-head-y: 12px; }
  /* strony z białym paskiem: na górze strony ta sama geometria co na Hero (miejsce na pasek narzędzi PL | EN) */
  .n87[data-n87-solid="always"][data-top="1"]:where(:not([data-fit~="compact"])) { --n87-bar-top: 45px; --n87-head-y: 45px; }
  /* …a tekst pierwszej sekcji zaczyna się o tyle samo (45 − 12 = 33 px) niżej, żeby odstęp pod paskiem na górze
     strony pozostał taki jak w zatwierdzonym układzie. Tła i ilustracje sekcji zostają od górnej krawędzi (jak Hero
     na Home). Zmienną dodają do swoich górnych odstępów style stron (rezerwa --nav-space i odstępy stałe). */
  /* stałe 33 px — decyzja właściciela: priorytetem zatwierdzone odstępy, nie dopasowanie CTA do wysokości okna */
  body:has(.n87[data-n87-solid="always"]:not([data-fit~="compact"])) { --n87-top-extra: 33px; }
}
@media (min-width: 85.375em) { .n87:where(:not([data-fit~="compact"])) { --n87-logo-w: 230.05px; } }                           /* B2 */

/* ---------- pasek (biała tabliczka na Hero → pełny pasek po przewinięciu) ---------- */
.n87__bar {
  position: absolute;
  z-index: 1;
  left: var(--n87-pad);
  top: var(--n87-bar-top);
  height: 100%;                                      /* = wysokość nagłówka (min. --n87-bar-h) */
  width: calc(var(--n87-logo-fit, var(--n87-logo-w)) + 2 * var(--n87-plate-px));
  background: #FFFFFF;
  border-radius: 0 var(--n87-bar-r) 0 0;
  box-shadow: 0 0 0 0 rgba(18, 40, 42, 0), 0 0 0 rgba(18, 40, 42, 0), 0 0 0 0 rgba(18, 40, 42, 0);
  transition: width 360ms var(--n87-ease), top 360ms var(--n87-ease), box-shadow 320ms ease;
  pointer-events: none;
}
.n87[data-solid="1"] .n87__bar {
  width: calc(100% - 2 * var(--n87-pad));
  box-shadow: 0 0 0 1px rgba(18, 40, 42, .07), 0 1px 2px rgba(18, 40, 42, .05), 0 14px 30px -20px rgba(18, 40, 42, .26);
}

/* ---------- górny pasek narzędzi (desktop): Portal klienta · PL | EN ---------- */
.n87__tools { display: none; }
@media (min-width: 73.75em) {
  :where(.n87:not([data-fit~="compact"])) .n87__tools {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: var(--n87-pad);
    min-height: 28px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 20px;
    font: 500 .875rem 'Schibsted Grotesk', system-ui, sans-serif;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 240ms ease 120ms, transform 280ms var(--n87-ease) 120ms, visibility 0s;
  }
  .n87[data-solid="1"]:where(:not([data-fit~="compact"])) .n87__tools {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 240ms var(--n87-ease), visibility 0s linear 240ms;
  }
  /* strony z białym paskiem: pasek narzędzi widoczny na górze strony, znika po przewinięciu — jak na Hero */
  .n87[data-n87-solid="always"][data-top="1"]:where(:not([data-fit~="compact"])) .n87__tools {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 240ms ease 120ms, transform 280ms var(--n87-ease) 120ms, visibility 0s;
  }
}
/* jasne tło strony (biały pasek) — kolory paska narzędzi z palety stanu „po przewinięciu” */
.n87[data-n87-solid="always"] .n87__tool { color: #4B5758; }
.n87[data-n87-solid="always"] .n87__lang-cur { color: #141B1C; text-decoration-color: #1E5650; }
.n87[data-n87-solid="always"] .n87__lang-sep { color: rgba(20, 27, 28, .35); }
.n87__tool { color: #DCE7E4; text-decoration: none; white-space: nowrap; }
.n87__lang { display: flex; align-items: center; gap: 7px; }
.n87__lang[hidden], .n87__tool[hidden] { display: none; }
.n87__lang-cur { color: #F4F7F5; font-weight: 600; text-decoration: underline; text-decoration-color: #F4F7F5; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.n87__lang-sep { color: rgba(244, 247, 245, .55); }

/* ---------- nagłówek ---------- */
.n87__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  min-height: var(--n87-bar-h);
  padding: 0 var(--n87-pad);
  transform: translateY(var(--n87-head-y));
}
@media (min-width: 73.75em) { :where(.n87:not([data-fit~="compact"])) .n87__head { transition: transform 360ms var(--n87-ease); } }

.n87__plate { position: relative; display: flex; align-items: center; padding: 0 var(--n87-plate-px); -webkit-user-select: none; user-select: none; }
.n87__home { display: flex; align-items: center; min-height: 44px; }
/* Obszar klikalny logo = cała widoczna tabliczka (biały pasek w stanie Hero ma jej wymiary), nie tylko obraz:
   kliknięcie przy krawędzi tabliczki prowadzi do Home, a lekkie przesunięcie kursora nie zaznacza logo.
   Bez wpływu na wygląd i układ (warstwa przezroczysta, absolutna). */
.n87__home::before { content: ""; position: absolute; inset: 0; }
.n87__logo { display: block; width: var(--n87-logo-fit, var(--n87-logo-w)); height: auto; aspect-ratio: 1610.8836 / 294.0974; }

/* ---------- menu (desktop) ---------- */
.n87__nav { display: none; }
@media (min-width: 73.75em) {
  :where(.n87:not([data-fit~="compact"])) .n87__nav { position: relative; align-self: center; min-height: 44px; display: flex; margin-left: 36px; }
}
@media (min-width: 85.375em) { :where(.n87:not([data-fit~="compact"])) .n87__nav { margin-left: 56px; } }
.n87__hl {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--n87-hw, 0px);
  transform: translateX(var(--n87-hx, 0px));
  opacity: 0;
  background: rgba(255, 255, 255, .12);
  border-radius: 0 10px 0 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.n87__hl[data-on="1"] { opacity: 1; }
.n87__hl[data-move="1"] { transition: transform 240ms var(--n87-ease), width 240ms var(--n87-ease), opacity 160ms ease; }
.n87[data-solid="1"] .n87__hl { background: #E6EEEB; }

.n87__link {
  position: relative;
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-radius: 0 10px 0 0;
  color: #F4F7F5;
  text-decoration: none;
  font: 500 1rem 'Schibsted Grotesk', system-ui, sans-serif;
  white-space: nowrap;
  transition: color 200ms ease;
}
.n87[data-solid="1"] .n87__link { color: #141B1C; }
.n87[data-solid="1"] .n87__link[data-hov="1"] { color: #1E5650; }

/* Tekst „przecierany” granicą białego paska: gradient z ostrą krawędzią przesuwa się razem z paskiem.
   Pozycje z pomiaru (nav87.js); bez pomiaru — poprawne stany końcowe. */
.n87__tx {
  --n87-dark: #141B1C;
  --n87-light: #F4F7F5;
  position: relative;
  color: transparent;
  background-repeat: no-repeat;
  background-size: 4000px 100%;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, var(--n87-dark) 0 2000px, var(--n87-light) 2000px 4000px);
  background-position: var(--n87-gx-hero, -2000px) 0;
  text-decoration-color: #F4F7F5;
  transition: background-position 360ms var(--n87-ease), text-decoration-color 200ms ease;
}
.n87[data-solid="1"] .n87__tx { background-position: var(--n87-gx-solid, 0px) 0; text-decoration-color: #1E5650; }
.n87__link[data-hov="1"] .n87__tx { --n87-dark: #1E5650; }
.n87__link[aria-current] .n87__tx { text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }

/* Fala koloru podczas zmiany stanu: opóźnienie i czas z pomiaru pozycji (nav87.js, 460 ms). */
.n87[data-sweep="1"] .n87__link,
.n87[data-sweep="1"] .n87__link .n87__tx { transition: color var(--n87-ctr, 200ms ease), background-position 360ms var(--n87-ease), text-decoration-color var(--n87-ctr, 200ms ease); }

/* ---------- prawa grupa: telefon, CTA, przycisk menu ---------- */
.n87__right { margin-left: auto; display: flex; align-items: center; }
@media (min-width: 73.75em) { :where(.n87:not([data-fit~="compact"])) .n87__right { margin-right: 10px; gap: 22px; } }

.n87__phone {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: #F4F7F5;
  font: 600 .9375rem 'Schibsted Grotesk', system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--n87-ctr-ph, 320ms ease);
}
@media (min-width: 23.4375em) { .n87__phone { padding: 0 8px; } }
.n87[data-solid="1"] .n87__phone { color: #141B1C; }
.n87__phone .n87__tx { --n87-light: #F4F7F5; }
.n87__phone-ico { display: none; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; }
.n87__phone-ico svg { display: block; width: 18px; height: 18px; }
@media (min-width: 24.375em) { .n87__phone-ico { display: flex; } }
@media (min-width: 73.75em) {
  :where(.n87:not([data-fit~="compact"])) .n87__phone { gap: 8px; padding: 0; font-size: clamp(1.0625rem, calc(1.0625rem + (100vw - 73.75rem) / 100), 1.125rem); transition: color var(--n87-ctr-ph, 240ms ease); }
  :where(.n87:not([data-fit~="compact"])) .n87__phone-ico {
    width: 28px;
    height: 28px;
    border-radius: 0 8px 0 0;
    background: rgba(255, 255, 255, 0);
    color: currentColor;
    transition: background-color 240ms ease, color 240ms ease;
  }
  .n87[data-solid="1"]:where(:not([data-fit~="compact"])) .n87__phone-ico { background: rgba(230, 238, 235, 0); }
  :where(.n87:not([data-fit~="compact"])) .n87__phone-ico svg { width: 19px; height: 19px; }
  :where(.n87:not([data-fit~="compact"])) .n87__phone[data-hov="1"] { color: #D3E6E1; }
  :where(.n87:not([data-fit~="compact"])) .n87__phone[data-hov="1"] .n87__tx { --n87-light: #D3E6E1; --n87-dark: #1E5650; }
  :where(.n87:not([data-fit~="compact"])) .n87__phone[data-hov="1"] .n87__phone-ico { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
  .n87[data-solid="1"]:where(:not([data-fit~="compact"])) .n87__phone[data-hov="1"] { color: #1E5650; }
  .n87[data-solid="1"]:where(:not([data-fit~="compact"])) .n87__phone[data-hov="1"] .n87__phone-ico { background: #E6EEEB; color: #1E5650; }
}
@media (min-width: 80em) { :where(.n87:not([data-fit~="compact"])) .n87__phone-ico svg { width: 20px; height: 20px; } }

.n87__cta { display: none; }
@media (min-width: 73.75em) {
  :where(.n87:not([data-fit~="compact"])) .n87__cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 44px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    border: 1.5px solid rgba(244, 247, 245, .85);
    background: rgba(30, 86, 80, 0);
    color: #F4F7F5;
    font: 600 1rem 'Schibsted Grotesk', system-ui, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0 12px 0 0;
    transition: background-color var(--n87-ctr-cta, 240ms var(--n87-ease)), border-color var(--n87-ctr-cta, 240ms var(--n87-ease)), color var(--n87-ctr-cta, 240ms var(--n87-ease));
  }
  :where(.n87:not([data-fit~="compact"])) .n87__cta[data-hov="1"] { background: #1E5650; border-color: #1E5650; }
  .n87[data-solid="1"]:where(:not([data-fit~="compact"])) .n87__cta { background: #1E5650; border-color: #1E5650; color: #FFFFFF; }
  .n87[data-solid="1"]:where(:not([data-fit~="compact"])) .n87__cta[data-hov="1"] { background: #174640; border-color: #174640; }
}
.n87__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 33.3%, rgba(255, 255, 255, .2) 49.3%, rgba(255, 255, 255, 0) 66.7%) 100% 0 / 300% 100% no-repeat;
  pointer-events: none;
}
.n87__cta[data-hov="1"] .n87__sheen { background-position: 0% 0; transition: background-position 620ms var(--n87-ease) 100ms; }
.n87__cta-tx { position: relative; }

.n87__toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #F4F7F5;
  transition: color var(--n87-ctr-tog, 320ms ease);
}
.n87[data-solid="1"] .n87__toggle { color: #141B1C; }
.n87__burger { position: relative; width: 22px; height: 14px; display: block; }
.n87__burger > span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 220ms ease, top 220ms ease; }
.n87__burger > span:first-child { top: 2px; }
.n87__burger > span:last-child { top: 10px; }
.n87[data-open="1"] .n87__burger > span:first-child { top: 6px; transform: rotate(45deg); }
.n87[data-open="1"] .n87__burger > span:last-child { top: 6px; transform: rotate(-45deg); }
@media (min-width: 73.75em) { :where(.n87:not([data-fit~="compact"])) .n87__toggle { display: none; } }

/* ---------- menu mobilne ---------- */
.n87__backdrop {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  background: rgba(18, 40, 42, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.n87__panel {
  position: absolute;
  z-index: 2;
  left: var(--n87-pad);
  right: var(--n87-pad);
  top: calc(var(--n87-bar-top) + 100%);                       /* tuż pod nagłówkiem */
  max-height: calc(100vh - var(--n87-bar-top) - 100%);         /* niski ekran lub duży tekst: panel przewija się sam */
  max-height: calc(100dvh - var(--n87-bar-top) - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #FFFFFF;
  border-top: 1px solid #DCE1DF;
  padding: 4px 16px 20px;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms var(--n87-ease), visibility 0s linear 220ms;
  box-shadow: 0 1px 2px rgba(18, 40, 42, .05), 0 18px 36px -18px rgba(18, 40, 42, .32);
}
@media (min-width: 37.5em) { .n87__panel { padding: 4px max(16px, calc((100% - 600px) / 2)) 20px; } }
.n87[data-open="1"] .n87__backdrop { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s; }
.n87[data-open="1"] .n87__panel { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity 220ms ease, transform 220ms var(--n87-ease), visibility 0s; }
@media (min-width: 73.75em) { :where(.n87:not([data-fit~="compact"])) :is(.n87__backdrop, .n87__panel) { display: none; } }

.n87__pnav { display: flex; flex-direction: column; }
.n87__plink {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #DCE1DF;
  color: #141B1C;
  text-decoration: none;
  font: 500 1.5rem/1.2 'Spectral', Georgia, serif;
}
.n87__plabel { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.n87__plink[aria-current] .n87__plabel { text-decoration: underline; text-decoration-color: #1E5650; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.n87__arrow { flex: none; font: 400 1.125rem 'Schibsted Grotesk', system-ui, sans-serif; color: #1E5650; }
.n87__prow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 12px; }
.n87__prow[hidden] { display: none; }
.n87__prow[hidden] + .n87__pcta,
.n87__pnav + .n87__pcta { margin-top: 20px; }                  /* wiersz Portal/EN ukryty albo usunięty przez render.js */
.n87__pportal { min-height: 48px; display: flex; align-items: center; font: 500 .9375rem 'Schibsted Grotesk', system-ui, sans-serif; color: #26302F; text-decoration: none; }
.n87__plang { display: flex; align-items: center; font: 500 .875rem 'Schibsted Grotesk', system-ui, sans-serif; }
.n87__plang-cur, .n87__plang-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.n87__plang-cur { color: #141B1C; font-weight: 600; }
.n87__plang-cur > span { text-decoration: underline; text-decoration-color: #1E5650; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.n87__plang-sep { color: #9AA7A6; }
.n87__plang-link { color: #4B5758; text-decoration: none; }
.n87__pcta {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  text-align: center;
  background: #1E5650;
  color: #FFFFFF;
  font: 600 1rem 'Schibsted Grotesk', system-ui, sans-serif;
  text-decoration: none;
  border-radius: 0 10px 0 0;
}

/* ---------- dopasowanie przy powiększonym tekście (nav87.js ustawia data-fit) ----------
   Tylko gdy treść nie mieści się w jednym wierszu z odstępem 12 px; w zwykłych ustawieniach
   atrybutu nie ma i obowiązuje zatwierdzony układ. Kolejność kroków:
   compact     — desktop: układ tabletowy (logo, telefon, przycisk menu; pozycje menu w panelu);
   (logo)      — logo zmniejsza się proporcjonalnie, nie poniżej 110 px (--n87-logo-fit);
   phone-icon  — numer jako przycisk z ikoną 44 × 44 px; nazwa „Zadzwoń: 795 584 558” zostaje;
   phone-off   — tylko skrajnie wąski ekran (poniżej ok. 208 px CSS): telefon znika z paska.
   Ten sam mechanizm działa poniżej ok. 257 px CSS, gdzie reguła „ekran − 193 px” dałaby logo
   węższe niż 64 px (np. telefon przy powiększeniu strony 200%). */
.n87[data-fit~="phone-icon"] .n87__phone { min-width: 44px; justify-content: center; padding: 0; }
.n87[data-fit~="phone-icon"] .n87__phone-ico { display: flex; }
.n87[data-fit~="phone-icon"] .n87__phone-tx,
.n87[data-fit~="phone-off"] .n87__phone { display: none; }

/* ---------- fokus ---------- */
.n87 :focus { outline: none; }
.n87 :focus-visible { outline: 2px solid #F4F7F5; outline-offset: 2px; }
.n87[data-solid="1"] :focus-visible,
.n87__plate :focus-visible,
.n87__panel :focus-visible { outline-color: #1E5650; }

/* ---------- start: stan początkowy bez animacji (np. strona otwarta w połowie) ---------- */
.n87--init, .n87--init * { transition: none !important; }

/* ---------- tryb wysokiego kontrastu: zwykły kolor tekstu zamiast gradientu ---------- */
@media (forced-colors: active) {
  .n87__tx { color: inherit; background: none; }
}

/* ---------- ograniczony ruch: stany bez przejść ---------- */
@media (prefers-reduced-motion: reduce) {
  .n87, .n87 *, .n87-frame { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
}

/* ===== components/footer/footer.css ===== */
/* Stopka C2 — wzorzec Home Final (H80D Kontakt, slot 08), wartości 1:1.
   Desktop od 1024 px: siatka 12 kolumn — marka 1/5 · adres 5/8 · kontakt 8/11 · nawigacja 11/13 · pasek dolny.
   Mobile: jedna kolumna — logo · dane i adres · telefon/e-mail · nawigacja · polityki i ©.
   Bez efektów najechania (jak we wzorcu); fokus z klawiatury — pierścień #F4F7F5 (base.css, .c2-dark).
   Odstępstwo od prototypu: e-mail łamie się w wąskiej kolumnie (przy 1024 px kolumna ma 214 px, adres jest szerszy). */

.c2-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  padding: 40px max(20px, calc((100% - 37.5rem) / 2)) 28px;
  background: var(--c-dark);
  color: var(--c-on-dark-body);
  font: 400 .9375rem/1.6 var(--f-sans);
}
.c2-footer__brand { display: flex; flex-direction: column; gap: 24px; }
.c2-footer__logo { display: block; width: 159px; height: 34px; object-fit: contain; object-position: left; }
.c2-footer__id { display: flex; flex-direction: column; }
.c2-footer__name { color: var(--c-on-dark); }
/* mobile: adres w jednym wierszu dołączony do danych firmy (odstęp 8 px zamiast 24 px), budynek pod spodem */
.c2-footer__addr { display: block; margin-top: -16px; font-style: normal; }
.c2-footer__addr-building { display: block; }
.c2-footer__contact { display: flex; flex-direction: column; border-top: 1px solid var(--c-dark-line); }
.c2-footer .c2-footer__phone, .c2-footer .c2-footer__phone:hover {
  min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--c-dark-line);
  color: #FFFFFF; font: 600 1.125rem var(--f-sans); text-decoration: none;
}
.c2-footer .c2-footer__email, .c2-footer .c2-footer__email:hover {
  min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--c-dark-line);
  color: var(--c-on-dark); font: 500 .9375rem var(--f-sans); text-decoration: none; overflow-wrap: anywhere;
}
.c2-footer__nav { display: flex; flex-direction: column; }
.c2-footer__label { font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-on-dark-meta); padding-bottom: 2px; }
.c2-footer__nav a, .c2-footer__nav a:hover { min-height: 44px; display: flex; align-items: center; color: var(--c-on-dark-body); text-decoration: none; }
.c2-footer__bottom {
  display: flex; flex-direction: column; padding-top: 8px; border-top: 1px solid var(--c-dark-line);
  font: 400 .875rem var(--f-sans); color: var(--c-on-dark-meta);
}
.c2-footer__legal { order: -1; display: flex; flex-wrap: wrap; column-gap: 20px; }
.c2-footer__legal a, .c2-footer__legal a:hover, .c2-footer__consent {
  min-height: 44px; display: flex; align-items: center; color: var(--c-on-dark-body); text-underline-offset: 4px;
}
.c2-footer__consent { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.c2-footer__copy { padding-top: 4px; }

@media (min-width: 64em) {
  .c2-footer {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
    padding: calc(64px + 64 * var(--ks)) var(--px) calc(32px + 32 * var(--ks));
    font: 400 .9375rem/1.75 var(--f-sans);
  }
  .c2-footer__brand { grid-column: 1 / 5; gap: 20px; }
  .c2-footer__logo { width: 210px; height: 45px; }
  .c2-footer__col { display: flex; flex-direction: column; border-top: 1px solid var(--c-dark-line); padding-top: 12px; }
  .c2-footer__addr { grid-column: 5 / 8; margin-top: 0; }
  .c2-footer__addr-sep { display: none; }
  .c2-footer__contact { grid-column: 8 / 11; }
  .c2-footer__nav { grid-column: 11 / 13; }
  .c2-footer .c2-footer__phone, .c2-footer .c2-footer__phone:hover { min-height: 0; display: inline; border: 0; font: 600 .9375rem/1.75 var(--f-sans); }
  .c2-footer .c2-footer__email, .c2-footer .c2-footer__email:hover { min-height: 0; display: inline; border: 0; color: var(--c-on-dark-body); font: 400 .9375rem/1.75 var(--f-sans); }
  .c2-footer__label { font-size: .8125rem; padding-bottom: 4px; }
  .c2-footer__nav a, .c2-footer__nav a:hover { min-height: 0; display: inline; }
  .c2-footer__bottom {
    grid-column: 1 / 13; flex-direction: row; justify-content: space-between; gap: 24px;
    margin-top: 48px; padding-top: 16px;
  }
  .c2-footer__legal { order: 0; flex-wrap: nowrap; gap: 24px; }
  .c2-footer__legal a, .c2-footer__legal a:hover, .c2-footer__consent { min-height: 0; display: inline; }
  .c2-footer__copy { padding-top: 0; }
}

/* ===== styles/templates.css ===== */
/* Szablony podstron C2. Otwarcie i korpus strony tekstowej — wzorzec P69 Artykuł (otwarcie do czytania,
   miara 680 px), elementy wspólne z Home Final. P69 określa tylko 1440 px i telefony 375–390 px; zakres
   1024–1440 i skala od 1440 jak w Home Final: przy 1024 px nagłówek ma rozmiar mobilny, do 1440 px rośnie
   liniowo do wartości z P69, dalej ×1,14 (tekst ×1,07, odstępy ×1,12).
   Nav87 na podstronach: stały biały pasek (render.js, solid: 'always') — treść zaczyna się pod paskiem:
   rezerwa = dół paska (8 + 50 / 8 + 54 / 12 + 74 px) + odstęp otwarcia z P69. */

.c2-page {
  --nav-space: 58px;
}
@media (min-width: 23.4375em) { .c2-page { --nav-space: 62px; } }
@media (min-width: 73.75em) { .c2-page { --nav-space: calc(86px + var(--n87-top-extra, 0px)); } }   /* + pasek narzędzi PL | EN na górze strony (nav87.css) */

/* ---------- otwarcie strony tekstowej ---------- */
.c2-opening {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(var(--nav-space) + 12px) max(20px, calc((100% - 37.5rem) / 2)) 28px;
  border-bottom: 1px solid var(--c-line);
}
.c2-opening__aside { display: flex; flex-direction: column; gap: 8px; }
.c2-opening__main { display: flex; flex-direction: column; gap: 14px; }
.c2-opening__title {
  font: 500 1.875rem/1.12 var(--f-serif);
  font-size: clamp(1.75rem, calc(1.875rem - (390px - 100cqi) * .13), 1.875rem);
  letter-spacing: -.01em;
  color: var(--c-ink);
  text-wrap: balance;
}
.c2-opening__lead { font: 400 1.125rem/1.55 var(--f-sans); color: var(--c-body); }
@media (min-width: 64em) {
  .c2-opening {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: calc(96px + 96 * var(--ks));
    padding: calc(var(--nav-space) + 64px + 64 * var(--ks)) var(--px) calc(56px + 56 * var(--ks));
  }
  .c2-opening__aside { padding-top: 6px; }
  .c2-opening__main { gap: 24px; max-width: calc(56.25rem + 900 * var(--kt)); }
  .c2-opening__title { line-height: 1.1; font-size: calc(min(3.375rem, calc(1.875rem + (100cqi - 64rem) * 24 / 416)) + 54 * var(--kh)); }
  .c2-opening__lead { font-size: calc(1.3125rem + 21 * var(--kt)); max-width: calc(45rem + 720 * var(--kt)); text-wrap: pretty; }
}

/* ---------- korpus strony tekstowej (miara 680 px) ---------- */
.c2-body { padding: 24px max(20px, calc((100% - 37.5rem) / 2)) 44px; }
.c2-prose { display: flex; flex-direction: column; gap: 20px; font: 400 1.0625rem/1.7 var(--f-sans); color: var(--c-body); }
.c2-prose section { display: flex; flex-direction: column; gap: 20px; }
.c2-prose h2 { margin: 12px 0 0; font: 500 1.5625rem/1.2 var(--f-serif); color: var(--c-ink); }
.c2-prose h3 { margin: 4px 0 0; font: 600 1.125rem/1.35 var(--f-sans); color: var(--c-ink); }
.c2-prose ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.c2-prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.c2-prose strong { font-weight: 600; color: var(--c-ink); }
.c2-prose a { color: var(--c-petrol); font-weight: 600; text-underline-offset: 3px; }
.c2-prose__updated { font: 400 .875rem/1.55 var(--f-sans); color: var(--c-muted); }
@media (min-width: 64em) {
  .c2-body {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, calc(680px + 680 * var(--kt)));
    column-gap: calc(96px + 96 * var(--ks));
    padding: calc(56px + 56 * var(--ks)) var(--px) calc(80px + 80 * var(--ks));
  }
  .c2-body > .c2-prose { grid-column: 2; }
  .c2-prose, .c2-prose section { gap: 24px; }
  .c2-prose { font-size: calc(1.1875rem + 19 * var(--kt)); }
  .c2-prose h2 { margin-top: 16px; letter-spacing: -.01em; font-size: calc(min(2.125rem, calc(1.5625rem + (100cqi - 64rem) * 9 / 416)) + 34 * var(--kh)); line-height: 1.15; }
  .c2-prose h3 { margin-top: 8px; font-size: calc(1.3125rem + 21 * var(--kt)); }
  .c2-prose ul { padding-left: 20px; }
  .c2-prose ol { padding-left: 24px; gap: 8px; }
}

/* ---------- akcje (np. strona 404): przycisk + odnośnik ze strzałką ---------- */
.c2-actions { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 64em) { .c2-actions { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 12px; } }

/* ===== styles/error.css ===== */
/* Strona 404 — kompozycja 1:1 z obecnej produkcji (public/404.html): wyśrodkowany układ typograficzny
   na wysokość okna, te same proporcje, odstępy, progi (760 / 560 px) i kaskada wejścia (~1,75 s).
   Rama C2: Nav87 (stały biały pasek — rezerwa --nav-space jak na podstronach), stopka, Spectral 500
   zamiast Cormorant, Schibsted Grotesk zamiast Inter, kolory P1: akcent złoty → petrol #1E5650,
   kość słoniowa → tło #F1F2EF, tekst pomocniczy → #4B5758. Sygnet bez zmian (kolory znaku). */

.c2-error {
  --nav-space: 58px;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 50% 22%, rgba(30, 86, 80, .06), transparent 34%), var(--c-bg);
  padding: calc(var(--nav-space) + clamp(1.5rem, 4vh, 3.5rem)) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vh, 3.5rem);
}
@media (min-width: 23.4375em) { .c2-error { --nav-space: 62px; } }
@media (min-width: 73.75em) { .c2-error { --nav-space: calc(86px + var(--n87-top-extra, 0px)); } }   /* + pasek narzędzi PL | EN (nav87.css) */

.c2-error__inner { width: min(100%, 45rem); margin: 0 auto; text-align: center; }
.c2-error__mark { width: clamp(5.25rem, 7vw, 6.75rem); height: auto; margin: 0 auto clamp(1.4rem, 3vh, 2.2rem); }
.c2 .c2-error__kicker {
  font: 600 .8125rem var(--f-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-petrol);
  margin-bottom: clamp(1.1rem, 2.2vh, 1.7rem);
}
.c2 .c2-error__code {
  font: 500 clamp(5rem, 13vw, 9.5rem)/.9 var(--f-serif);
  letter-spacing: -.035em;
  color: rgba(30, 86, 80, .40);
  margin: 0 0 clamp(.7rem, 1.5vh, 1.1rem);
}
/* Nagłówek w jednym wierszu jak w produkcji (tam: nowrap od 760 px). Spectral jest szerszy od Cormoranta,
   więc wiersz bywa szerszy niż kolumna 720 px — nagłówek ma szerokość treści, jest wyśrodkowany względem
   kolumny i łamie się dopiero wtedy, gdy nie mieści się w oknie (duży tekst, wąski ekran). */
.c2-error__title {
  width: max-content;
  max-width: calc(100cqi - 2 * clamp(1.25rem, 4vw, 2.5rem));
  margin-left: 50%;
  translate: -50% 0;
  font: 500 clamp(2.8rem, 4.7vw, 4.25rem)/1.15 var(--f-serif);
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.c2-error__line {
  display: block;
  width: 88px;
  height: 1.5px;
  margin: clamp(1rem, 1.6vh, 1.4rem) auto;
  border: 0;
  background: var(--c-petrol);
  transform-origin: center;
}
.c2 .c2-error__lead {
  max-width: 36rem;
  margin: 0 auto;
  font: 400 clamp(1.05rem, 1.4vw, 1.1875rem)/1.7 var(--f-sans);
  color: var(--c-muted);
}
.c2-error__actions {
  margin-top: clamp(1.4rem, 2.4vh, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.c2 .c2-error__actions .c2-btn { width: auto; }
/* druga akcja — lekki odnośnik tekstowy, nie drugi równorzędny przycisk */
.c2 .c2-error__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 600 1rem var(--f-sans);
  color: var(--c-petrol);
  text-underline-offset: 5px;
}

@media (max-width: 35em) {
  .c2-error { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 2.75rem; }
  .c2-error__title { max-width: calc(100cqi - 2.5rem); }
  .c2-error__mark { width: clamp(4rem, 18vw, 4.75rem); margin-bottom: 2rem; }
  .c2 .c2-error__kicker { margin-bottom: 2.75rem; }
  /* kolumna bez rozciągania: przycisk na pełną szerokość, odnośnik pozostaje lekki */
  .c2-error__actions { flex-direction: column; align-items: center; gap: .85rem; }
  .c2 .c2-error__actions .c2-btn { width: 100%; }
}

/* Kaskadowe odsłonięcie wejścia (produkcja): sygnet → etykieta → 404 → nagłówek → linia → lead → akcje.
   Uzbrajane skryptem w <head> (content/404-head.html) — bez JS i przy ograniczonym ruchu treść od razu. */
.reveal-armed .c2-error__mark,
.reveal-armed .c2-error__kicker,
.reveal-armed .c2-error__code,
.reveal-armed .c2-error__title,
.reveal-armed .c2-error__lead,
.reveal-armed .c2-error__actions { opacity: 0; }
.reveal-armed .c2-error__line { transform: scaleX(0); }
.c2-error.is-revealing .c2-error__mark { animation: err-rise .70s cubic-bezier(.33, .1, .2, 1) .12s both; }
.c2-error.is-revealing .c2-error__kicker { animation: err-rise .68s cubic-bezier(.33, .1, .2, 1) .24s both; }
.c2-error.is-revealing .c2-error__code { animation: err-rise .68s cubic-bezier(.33, .1, .2, 1) .36s both; }
.c2-error.is-revealing .c2-error__title { animation: err-rise .68s cubic-bezier(.33, .1, .2, 1) .54s both; }
.c2-error.is-revealing .c2-error__line { animation: err-line .68s cubic-bezier(.33, .1, .2, 1) .70s both; }
.c2-error.is-revealing .c2-error__lead { animation: err-rise .68s cubic-bezier(.33, .1, .2, 1) .90s both; }
.c2-error.is-revealing .c2-error__actions { animation: err-rise .68s cubic-bezier(.33, .1, .2, 1) 1.06s both; }
@keyframes err-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes err-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .c2-error__mark, .c2-error__kicker, .c2-error__code, .c2-error__title, .c2-error__lead, .c2-error__actions, .c2-error__line {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}
@media print {
  .c2-error { min-height: 0; }
  .c2-error__mark, .c2-error__kicker, .c2-error__code, .c2-error__title, .c2-error__lead, .c2-error__actions, .c2-error__line {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* ===== styles/home.css ===== */
/* Home — wzorzec Home Final (H80D Top, H80H Mid, H80D Kontakt), wartości 1:1.
   Jednostki jak w fundamencie: tekst i miary tekstu w rem, odstępy w px; od 1440 px skala dużych ekranów
   (nagłówki + N·--kh, tekst + N·--kt, odstępy + N·--ks — tokens.css). Mobile < 1024 px (64em), desktop od 1024 px.
   Kolejność sekcji: 02 Hero · 03 Obszary · 04 O mnie (+ Z publikacji) · 05 Jak pracuję · 06 Pytania · 07 Kontakt.
   Formularz (Form Lift): form.css. Wejście P01: components/intro/intro.css. */

/* przejście do #kontakt z „Umów konsultację” — płynnie jak we wzorcu (scrollTo smooth); przy ograniczonym ruchu skok */
@media (prefers-reduced-motion: no-preference) { html:has(.c2-hero) { scroll-behavior: smooth; } }

/* ===================================================================== 02 HERO */
.c2-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  background: #22343A;
  color: var(--c-on-hero);
}
.c2-hero__pic, .c2-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c2-hero__img { max-width: none; object-fit: cover; object-position: center bottom; }
/* tekst w przepływie (nie absolutnie): przy powiększonym tekście Hero rośnie zamiast przycinać nagłówek */
.c2-hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(96px, calc(120px - (390px - 100cqi) * 1.6), 120px) max(20px, calc((100% - 37.5rem) / 2)) 44px;
}
.c2-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  column-gap: .3em;
  padding-bottom: 12px;
  font: 500 .9375rem/1.4 var(--f-sans);
  color: #DCE7E4;
}
.c2-hero__kicker span { white-space: normal; }   /* jak adres w Kontakcie: nowrap wzorca bez przepełnienia przy dużym tekście */
.c2-hero__h1 {
  font: 500 2.25rem/1.1 var(--f-serif);
  font-size: max(clamp(2.125rem, max(min(2.25rem, calc(2.25rem - (390px - 100cqi) * .13)), calc(2.25rem + (100cqi - 600px) * .028)), 3rem), min(4rem, calc(2.9919rem + (100cqi - 64rem) * 16.13 / 416)));
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--c-on-hero);
}
.c2-hero__line { display: none; }
.c2-hero__row { display: flex; flex-direction: column; }
.c2-hero__lead {
  max-width: 37.5rem;
  padding-top: 16px;
  font: 400 1rem/1.55 var(--f-sans);
  color: #E2EBE8;
}
.c2-hero__cta { margin-top: 22px; }
.c2-hero__cta .c2-btn { max-width: 380px; }

@media (min-width: 64em) {
  .c2-hero { min-height: max(640px, 100vh); min-height: max(640px, 100svh); }
  .c2-hero__img { object-position: center; }
  .c2-hero__text {
    padding: 120px var(--px) calc(88px + 88 * var(--ks)) calc(var(--px) + 36px);
  }
  .c2-hero__text > * { max-width: calc(55rem + 880 * var(--kh)); }
  .c2-hero__kicker {
    padding-bottom: 22px;
    font: 500 calc(1.0625rem + 17 * var(--kt)) var(--f-sans);
  }
  .c2-hero__h1 {
    max-width: calc(51.25rem + 820 * var(--kh));
    line-height: 1.08;
    font-size: calc(min(4rem, calc(2.9919rem + (100cqi - 64rem) * 16.13 / 416)) + 64 * var(--kh));
  }
  .c2-hero__line {
    display: block;
    height: 1px;
    margin: 36px 0 28px;
    background: rgba(238, 243, 241, .32);
    transform-origin: left center;
  }
  .c2-hero__row {
    display: grid;
    grid-template-columns: minmax(0, calc(37.5rem + 600 * var(--kt)));
    gap: 30px;
    align-items: start;
  }
  .c2-hero__lead {
    max-width: none;
    padding-top: 0;
    font: 400 calc(1.1875rem + 19 * var(--kt))/1.55 var(--f-sans);
    text-wrap: balance;
  }
  .c2-hero__cta { margin-top: 0; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
  .c2-hero__cta .c2-btn { max-width: none; }
}

/* ===================================================================== 02b ZAUFANIE (H144 Top)
   M: wiersz portretu 132 px z podpisem → odnośnik do obszarów → karta „Wyróżnik” → dwa wyróżniki → linia.
   D (≥ 64em): portret 9/24 | kolumna treści 15/24, linia na dole. Wartości 1:1 z prototypu (s/t/h → --ks/--kt/--kh). */
.c2-trust { padding: 40px max(20px, calc((100% - 37.5rem) / 2)) 0; background: var(--c-bg); }
.c2 .c2-trust__fig { margin: 0; display: flex; gap: 16px; align-items: flex-end; }
.c2-trust__photo {
  flex: 0 0 auto;
  width: 132px;
  aspect-ratio: 4 / 5;
  border-radius: 0 28px 0 0;
  overflow: hidden;
  background: #D3DAD8;
}
.c2-trust__photo picture { display: block; height: 100%; }
.c2-trust__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.c2 .c2-trust__fig { flex-wrap: wrap; }   /* bardzo wąskie okno lub duży tekst: podpis pod portretem, bez poziomego przewijania */
/* min-width: auto (= min-content) — gdy najdłuższe słowo podpisu nie mieści się obok portretu, cały podpis przechodzi
   pod portret (zamiast łamać słowo w środku albo wystawać poza ekran) */
.c2-trust__cap { flex: 1 1 7.5rem; display: flex; flex-direction: column; gap: 2px; }
.c2-trust__eyebrow {
  font: 600 .75rem/1.35 var(--f-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-petrol);
}
.c2 .c2-trust__eyebrow--m { margin: 0 0 8px; }
.c2-trust__eyebrow--d { display: none; }
.c2-trust__name { overflow-wrap: normal; font: 500 1.5rem/1.15 var(--f-serif); letter-spacing: -.005em; color: var(--c-ink); }   /* bez łamania w środku słowa (jak w prototypie) */
/* jak w prototypie przy 320 px: najdłuższe słowo („Włodzimierz”, 137 px wobec 132 px obok portretu) może wejść do 8 px
   w boczny margines; dopiero większe przepełnienie (powiększony tekst, odstępy WCAG) przenosi podpis pod portret */
.c2-trust__name { margin-right: -8px; }
.c2-trust__role-d { display: none; }
.c2-trust__role { font: 400 .9375rem/1.5 var(--f-sans); color: var(--c-muted); }
.c2 .c2-trust__more {
  align-self: flex-start;
  min-height: 44px;
  display: flex;
  align-items: center;
  font: 600 .9375rem var(--f-sans);
  color: var(--c-petrol);
  text-underline-offset: 5px;
}
.c2-trust__top { margin-top: 10px; }
.c2 .c2-trust__skip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 500 .9375rem var(--f-sans);
  color: var(--c-muted);
  text-decoration: underline 1px #A9B3B1;
  text-underline-offset: 5px;
}
@media (hover: hover) { .c2 .c2-trust__more:hover, .c2 .c2-trust__skip:hover { color: var(--c-ink); } }
.c2-trust__card {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
  border-radius: 0 32px 0 0;
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.c2-trust__kicker {
  font: 600 .75rem var(--f-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-dark-num);
}
.c2-trust__title { font: 500 1.6875rem/1.14 var(--f-serif); letter-spacing: -.01em; color: var(--c-on-hero); text-wrap: balance; }
.c2 .c2-trust__facts { margin: 0; display: flex; flex-direction: column; }
.c2-trust__fact {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--c-dark-line);
}
.c2-trust__fact:last-child { border-bottom: 1px solid var(--c-dark-line); }
.c2-trust__fact dt {
  overflow-wrap: normal;   /* „MATEMATYKA” bez łamania w środku słowa (jak w prototypie) */
  font: 600 .75rem var(--f-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-dark-num);
}
.c2 .c2-trust__fact dd { margin: 0; font: 400 .9375rem/1.45 var(--f-sans); color: #DCE6E3; }
.c2-trust__text { font: 400 1rem/1.6 var(--f-sans); color: #DCE6E3; }
.c2-trust__items { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.c2-trust__item { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--c-ink); }
.c2-trust__label { display: none; }
.c2-trust__h3 { font: 500 1.375rem/1.2 var(--f-serif); letter-spacing: -.005em; }
.c2-trust__p { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-trust__rule { height: 1px; margin-top: 32px; background: var(--c-line); }

@media (min-width: 64em) {
  .c2-trust { padding: calc(104px + 104 * var(--ks)) var(--px) 0; }
  .c2-trust__grid {
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 15fr);
    column-gap: calc(64px + 64 * var(--ks));
    align-items: start;
  }
  .c2 .c2-trust__fig { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 18px; }
  .c2-trust__cap { flex: none; }
  .c2-trust__photo { width: 100%; border-radius: 0 72px 0 0; }
  .c2-trust__img { object-position: 50% 22%; }
  .c2-trust__cap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 20px; }
  .c2 .c2-trust__eyebrow--m, .c2-trust__role { display: none; }
  .c2-trust__name {
    line-height: 1.25;
    font-size: calc(min(1.5rem, calc(1.25rem + (100cqi - 64rem) * 4 / 416)) + 24 * var(--kh));
  }
  .c2-trust__role-d { display: inline; }
  .c2-trust__name { margin-right: 0; }
  .c2 .c2-trust__more { font-size: 1rem; }
  .c2-trust__main { display: flex; flex-direction: column; }
  .c2-trust__top {
    margin: 0 0 20px;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 24px;
  }
  .c2-trust__eyebrow--d { display: block; font-size: .8125rem; line-height: normal; }
  .c2 .c2-trust__skip { display: flex; font-size: 1rem; }
  .c2-trust__card {
    margin-top: 0;
    gap: calc(24px + 24 * var(--ks));
    padding: calc(44px + 44 * var(--ks)) calc(48px + 48 * var(--ks)) calc(46px + 46 * var(--ks));
    border-radius: 0 56px 0 0;
  }
  .c2-trust__title {
    max-width: 40rem;
    line-height: 1.1;
    letter-spacing: -.012em;
    font-size: calc(min(2.625rem, calc(1.9375rem + (100cqi - 64rem) * 11 / 416)) + 42 * var(--kh));
  }
  .c2 .c2-trust__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .c2-trust__fact, .c2-trust__fact:last-child { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 0; border-bottom: 0; }
  .c2 .c2-trust__fact dd { font-size: 1rem; }
  .c2-trust__text {
    max-width: calc(40rem + 640 * var(--kt));
    font-size: calc(1.125rem + 18 * var(--kt));
    text-wrap: pretty;
  }
  .c2-trust__items {
    margin-top: calc(40px + 40 * var(--ks));
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: calc(40px + 40 * var(--ks));
  }
  .c2-trust__item { gap: 10px; padding-top: 18px; }
  .c2-trust__label {
    display: block;
    font: 600 .75rem var(--f-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-petrol);
  }
  .c2-trust__h3 {
    text-wrap: balance;
    font-size: calc(min(1.5rem, calc(1.3125rem + (100cqi - 64rem) * 3 / 416)) + 24 * var(--kh));
  }
  .c2-trust__p { font-size: calc(1.0625rem + 17 * var(--kt)); text-wrap: pretty; }
  .c2-trust__rule { margin-top: calc(104px + 104 * var(--ks)); }
}

/* ===================================================================== 03 GŁÓWNE OBSZARY PRAKTYKI */
.c2-areas { display: flex; flex-direction: column; }
.c2-areas__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 56px max(20px, calc((100% - 37.5rem) / 2)) 36px;
}
.c2-areas__intro { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }

.c2-area { display: flex; flex-direction: column; padding: 0 max(0px, calc((100% - 40rem) / 2)); }
.c2-area__tile { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; }
.c2-area--dark .c2-area__tile { background: var(--c-dark); color: var(--c-on-dark); }
.c2-area--light .c2-area__tile { background: var(--c-surface); border-top: 3px solid var(--c-petrol); padding-top: 21px; }
.c2-area__num {
  display: flex;
  line-height: normal;
  align-items: baseline;
  gap: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-dark-line);
  font-family: var(--f-serif);
  font-weight: 500;
}
.c2-area--light .c2-area__num { border-bottom-color: var(--c-line); }
.c2-area__n { font-size: 1.3125rem; color: var(--c-dark-num); }
.c2-area__of { font-size: .9375rem; color: var(--c-on-dark-meta); }
.c2-area--light .c2-area__n { color: var(--c-petrol); }
.c2-area--light .c2-area__of { color: var(--c-muted); }
.c2-area__title { font: 500 1.6875rem/1.12 var(--f-serif); letter-spacing: -.01em; }
.c2-area__body { display: flex; flex-direction: column; gap: 18px; padding: 22px 20px 40px; }
.c2-area__text { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2 .c2-area__links { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--c-ink); }
.c2 .c2-area__link {
  min-height: 52px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-petrol);
  text-decoration: none;
  font: 600 1rem/1.35 var(--f-sans);
  overflow-wrap: anywhere;   /* przy dużym tekście długie słowo nie wypycha strzałki poza ekran */
}
@media (hover: hover) { .c2 .c2-area__link:hover { color: var(--c-ink); } }

/* „Nie widzisz tu swojej sprawy?” — pozostałe specjalizacje w rozwijanym panelu */
.c2-areas__end { padding: 8px max(20px, calc((100% - 37.5rem) / 2)) 56px; }
.c2-areas__grp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--c-ink);
}
.c2-areas__q { font: 500 1.375rem/1.25 var(--f-serif); }
.c2-areas__side { display: flex; flex-direction: column; gap: 14px; }
.c2-more { display: flex; flex-direction: column; }
.c2 .c2-more__lead { margin: 0 0 12px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
.c2 .c2-more__btn {
  appearance: none;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  color: var(--c-petrol);
  font: 600 1rem/1.35 var(--f-sans);
  text-align: left;
  cursor: pointer;
}
.c2 .c2-more__btn:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .c2 .c2-more__btn:hover { color: var(--c-ink); } }
.c2-more__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-mint);
  color: var(--c-petrol);
  transition: background-color 200ms, color 200ms;
}
.c2-more__icon svg { display: block; transition: transform 320ms cubic-bezier(.25, .6, .3, 1); }
.c2-more__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 320ms cubic-bezier(.25, .6, .3, 1), visibility 0ms linear 320ms;
}
.c2-more__clip { min-height: 0; overflow: hidden; }
.c2 .c2-more__list { list-style: none; padding: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity 320ms linear; }
[data-more].is-open .c2-more__icon { background: var(--c-petrol); color: #FFFFFF; }
[data-more].is-open .c2-more__icon svg { transform: rotate(180deg); }
[data-more].is-open .c2-more__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0ms, 0ms; }
[data-more].is-open .c2-more__list { opacity: 1; }
.c2 .c2-more__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  text-decoration: none;
}
@media (hover: hover) { .c2 .c2-more__row:hover { color: var(--c-petrol); } }
.c2-more__thumb {
  display: block;
  width: 84px;
  aspect-ratio: 4 / 3;
  border-radius: 0 12px 0 0;
  overflow: hidden;
  background: #E6EAE7;
}
.c2-more__thumb picture { display: block; height: 100%; }
.c2-more__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c2-more__img--07 { object-position: 34% 56%; }
.c2-more__img--08 { object-position: 66% 58%; }
.c2-more__img--09 { object-position: 58% 56%; }
.c2-more__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.c2-more__t { font: 500 1.125rem/1.22 var(--f-serif); letter-spacing: -.005em; text-wrap: balance; }
.c2-more__d { font: 400 .9375rem/1.5 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
.c2-more__arr { font: 600 1.125rem var(--f-sans); color: var(--c-petrol); }
@media (prefers-reduced-motion: reduce) {
  .c2-more__icon svg, .c2-more__panel, .c2 .c2-more__list { transition-duration: 0ms; transition-delay: 0ms; }
}

@media (min-width: 64em) {
  .c2-areas__head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: end;
    padding: calc(104px + 104 * var(--ks)) var(--px) calc(64px + 64 * var(--ks));
  }
  .c2-areas__intro {
    padding-bottom: 4px;
    max-width: calc(42.5rem + 680 * var(--kt));
    font: 400 calc(1.1875rem + 19 * var(--kt))/1.6 var(--f-sans);
    text-wrap: pretty;
  }
  .c2-area {
    display: grid;
    grid-template-columns: calc(400px + 400 * var(--ks)) minmax(0, 1fr);
    padding: calc(56px + 56 * var(--ks)) var(--px) calc(64px + 64 * var(--ks));
    border-top: 1px solid var(--c-line);
  }
  .c2-area--light { grid-template-columns: minmax(0, 1fr) calc(400px + 400 * var(--ks)); }
  .c2-area__tile { align-self: start; min-height: 220px; gap: 22px; padding: 32px 36px 40px; }
  .c2-area--light .c2-area__tile { grid-column: 2; grid-row: 1; padding-top: 29px; }
  .c2-area__num { gap: 6px; padding-bottom: 14px; }
  .c2-area__n { font-size: 1.625rem; }
  .c2-area__of { font-size: 1.0625rem; }
  .c2-area__title {
    text-wrap: balance;
    font-size: calc(min(2.25rem, calc(1.6875rem + (100cqi - 64rem) * 9 / 416)) + 36 * var(--kh));
  }
  .c2-area__body { gap: 32px; padding: 6px 0 0 64px; }
  .c2-area--light .c2-area__body { grid-column: 1; grid-row: 1; padding: 6px 64px 0 0; align-items: flex-end; }
  .c2-area__text {
    max-width: calc(45rem + 720 * var(--kt));
    font: 400 calc(1.25rem + 20 * var(--kt))/1.6 var(--f-sans);
    text-wrap: pretty;
  }
  .c2-area--light .c2-area__text { width: 100%; }
  .c2 .c2-area__links { max-width: 45rem; }
  .c2 .c2-area--light .c2-area__links { width: 100%; }
  .c2 .c2-area__link { min-height: 56px; padding: 0; font-size: 1.0625rem; }

  .c2-areas__end { padding: 0 var(--px) calc(104px + 104 * var(--ks)); }
  .c2-areas__grp {
    display: grid;
    grid-template-columns: calc(400px + 400 * var(--ks)) minmax(0, 1fr);
    align-items: start;
    gap: 0;
    padding-top: 28px;
  }
  .c2-areas__q { padding-top: 10px; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.01em; }
  .c2-areas__side { gap: 20px; padding-left: 64px; }
  .c2-more { max-width: 45rem; }
  .c2 .c2-more__lead { margin-bottom: 16px; font-size: calc(1.0625rem + 17 * var(--kt)); }
  .c2 .c2-more__btn { min-height: 60px; font-size: 1.0625rem; }
  .c2-more__icon { width: 34px; height: 34px; }
  .c2 .c2-more__row { grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 24px; padding: 16px 0; }
  .c2-more__thumb { width: 112px; border-radius: 0 16px 0 0; }
  .c2-more__txt { gap: 4px; }
  .c2-more__t { font-size: 1.375rem; }
  .c2-more__d { font-size: 1rem; }
}

/* ===================================================================== 05 JAK PRACUJĘ */
.c2-method {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 56px max(20px, calc((100% - 37.5rem) / 2)) 48px;
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.c2 .c2-method__title { color: var(--c-on-dark); line-height: 1.1; }
.c2-method__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 52px;
  display: flex;
  flex-direction: column;
}
.c2-method__steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--c-axis);
}
.c2-method__step { position: relative; display: flex; flex-direction: column; padding-bottom: 30px; }
.c2-method__step:last-child { padding-bottom: 0; }
.c2-method__node {
  position: absolute;
  left: -52px;
  top: -4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-dark);
  border: 1px solid var(--c-axis);
  font: 500 .9375rem var(--f-serif);
  color: var(--c-dark-num);
}
.c2-method__body { display: flex; flex-direction: column; gap: 8px; }
.c2-method__name { font: 600 1.1875rem/1.3 var(--f-sans); }
.c2-method__text { font: 400 1rem/1.6 var(--f-sans); color: var(--c-on-dark-body); }
.c2-method__cta { padding-top: 24px; border-top: 1px solid var(--c-dark-line); }
.c2-method__cta .c2-btn { max-width: 380px; }

@media (min-width: 64em) {
  .c2-method {
    gap: 64px;
    padding: calc(104px + 104 * var(--ks)) var(--px) calc(96px + 96 * var(--ks));
  }
  .c2 .c2-method__title { max-width: calc(51.25rem + 820 * var(--kt)); line-height: 1.08; text-wrap: wrap; }
  .c2-method__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  /* oś metody: linia przez wysokość węzłów (44 px, linia na 21 px) */
  .c2-method__steps::before { left: 0; right: 0; top: 21px; bottom: auto; width: auto; height: 1px; }
  .c2-method__step { padding-bottom: 0; }
  .c2-method__node {
    position: relative;
    left: auto;
    top: auto;
    width: 44px;
    height: 44px;
    margin-bottom: 32px;
    font-size: 1.125rem;
  }
  .c2-method__step + .c2-method__step .c2-method__node { margin-left: 40px; }
  .c2-method__body { flex: 1 0 auto; gap: 14px; padding: 0 40px 0 0; }
  .c2-method__step + .c2-method__step .c2-method__body { padding-left: 40px; border-left: 1px solid var(--c-dark-line); }
  .c2-method__name { font: 600 calc(1.4375rem + 23 * var(--kt))/1.25 var(--f-sans); }
  .c2-method__text {
    max-width: calc(22.5rem + 360 * var(--kt));
    font: 400 calc(1.0625rem + 17 * var(--kt))/1.65 var(--f-sans);
    text-wrap: pretty;
  }
  .c2-method__cta { display: flex; padding-top: 36px; }
  .c2-method__cta .c2-btn { max-width: none; }
}

/* ===================================================================== 06 PYTANIA (FAQ)
   Akordeon: na start pytanie 01 otwarte, najwyżej jedna odpowiedź naraz (logika i przewijanie — home.js). Bez JS wszystkie odpowiedzi są widoczne (stan
   zamknięty działa tylko pod .c2-js — klasa ustawiana w <head>). Ilustracja „Kolumny Prawa SN”:
   D — pod nagłówkiem w lewej kolumnie; M — wariant B między nagłówkiem a pytaniami. */
.c2-faq {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 56px max(20px, calc((100% - 37.5rem) / 2)) 56px;
}
.c2-faq__left, .c2-faq__clip { display: contents; }
.c2-faq__ill {
  width: min(100%, 480px);
  height: clamp(140px, 42cqi, 180px);
  margin: 2px 0 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent), linear-gradient(to right, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 55%, transparent), linear-gradient(to right, #000 72%, transparent);
  mask-composite: intersect;
}
.c2-faq__ill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 30%;
  pointer-events: none;
  user-select: none;
}
.c2-faq__list { display: flex; flex-direction: column; gap: var(--c2-card-gap); }
/* karta pytania (tło, linia, R1, cienie, akcent otwartej odpowiedzi): glebia.css [data-c2-faq] — Stage 147 */
.c2-faq__item { --fx: 12px; display: flex; flex-direction: column; }
.c2-faq__h { font: inherit; }
.c2 .c2-faq__btn {
  width: 100%;
  min-height: 64px;
  padding: 14px var(--fx);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: start;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--c-ink);
  font-family: inherit;
  transition: color 180ms ease, padding 320ms var(--ease);
}
@media (hover: hover) { .c2 .c2-faq__btn:hover { color: var(--c-petrol); } }
.c2-faq__num { padding-top: 1px; font: 500 1.0625rem/1.45 var(--f-serif); color: var(--c-petrol); }
.c2-faq__q { padding-top: 1px; font: 600 1.125rem/1.4 var(--f-sans); }
.c2-faq__icon { width: 36px; height: 44px; display: flex; align-items: center; justify-content: center; }
.c2-faq__icon > span {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-petrol);
  transition: background-color 240ms ease;
}
.c2-faq__icon > span::before, .c2-faq__icon > span::after {
  content: "";
  position: absolute;
  background: #FFFFFF;
}
.c2-faq__icon > span::before { left: 11px; top: 17.25px; width: 14px; height: 1.5px; }
.c2-faq__icon > span::after { left: 17.25px; top: 11px; width: 1.5px; height: 14px; transform: scaleY(0); transition: transform 320ms var(--ease); }
.c2-faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease); }
.c2-faq__clipper { overflow: hidden; min-height: 0; }
.c2-faq__answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--fx) 22px calc(38px + var(--fx));
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease 80ms, visibility 0s linear 0ms;
}
.c2-faq__answer p { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
/* zamknięte (tylko z JS) */
.c2-js .c2-faq__item:not([data-open]) .c2-faq__q { font-weight: 500; }
.c2-js .c2-faq__item:not([data-open]) .c2-faq__icon > span { background: var(--c-mint); }
.c2-js .c2-faq__item:not([data-open]) .c2-faq__icon > span::before,
.c2-js .c2-faq__item:not([data-open]) .c2-faq__icon > span::after { background: var(--c-petrol); }
.c2-js .c2-faq__item:not([data-open]) .c2-faq__icon > span::after { transform: scaleY(1); }
.c2-js .c2-faq__item:not([data-open]) .c2-faq__panel { grid-template-rows: 0fr; }
.c2-js .c2-faq__item:not([data-open]) .c2-faq__answer { opacity: 0; visibility: hidden; transition: opacity 240ms ease 0ms, visibility 0s linear 320ms; }

@media (min-width: 64em) {
  .c2-faq {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
    padding: calc(104px + 104 * var(--ks)) var(--px) calc(104px + 104 * var(--ks));
  }
  .c2-faq__left {
    --fqh: calc(min(2.875rem, calc(1.875rem + (100cqi - 64rem) * 16 / 416)) + 46 * var(--kh));
    display: block;
    position: relative;
    align-self: stretch;
  }
  .c2-faq__clip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(-104px - 104 * var(--ks) + 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
  }
  .c2 .c2-faq__title { flex: none; max-width: calc(27.5rem + 440 * var(--kh)); font-size: var(--fqh); }
  .c2-faq__ill {
    flex: none;
    height: auto;
    width: min(100%, 510px, max(240px, calc(428px + (100cqi - 1440px) * .25)));
    margin: min(calc(var(--fqh) * 1.9), 90px) 0 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .c2-faq__ill img { height: auto; object-fit: fill; }
  .c2-faq__item { --fx: 20px; }
  .c2-faq__icon { width: 44px; }
  .c2 .c2-faq__btn { min-height: 72px; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 16px; align-items: center; }
  .c2-faq__num { padding-top: 0; font-size: 1.1875rem; line-height: normal; }
  .c2-faq__q { padding-top: 0; font-size: calc(1.3125rem + 21 * var(--kt)); text-wrap: pretty; }
  .c2-faq__answer { gap: 12px; padding: 0 var(--fx) 28px calc(60px + var(--fx)); }
  .c2-faq__answer p {
    max-width: calc(40rem + 640 * var(--kt));
    font: 400 calc(1.0625rem + 17 * var(--kt))/1.65 var(--f-sans);
    text-wrap: pretty;
  }
}

/* ===================================================================== 07 KONTAKT */
.c2-contact { padding: 0 max(16px, calc((100% - 38.5rem) / 2)) 56px; }
.c2-contact__in {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 56px;
  border-top: 1px solid var(--c-line);
}
.c2-contact__info { display: contents; }
.c2-contact__head { display: flex; flex-direction: column; gap: 14px; padding: 0 4px; }
.c2-contact__lead { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-contact__rows { display: flex; flex-direction: column; margin: 0 4px; }
.c2 .c2-contact__row { color: var(--c-ink); text-decoration: none; }
.c2-contact__row--tel {
  min-height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--c-ink);
}
.c2-contact__row--mail {
  min-height: 64px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.c2-contact__lbl { font: 500 .875rem var(--f-sans); color: var(--c-muted); }
.c2-contact__tel { font: 500 1.625rem var(--f-serif); }
.c2-contact__mail { font: 500 1rem var(--f-sans); overflow-wrap: anywhere; }
.c2-contact__addr--d, .c2-contact__hint { display: none; }
.c2-contact__addr--m { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 0; }
.c2-contact__adr { display: flex; flex-wrap: wrap; column-gap: .3em; font: 500 .9375rem/1.5 var(--f-sans); }
/* fragmenty adresu przechodzą do nowego wiersza w całości (jak nowrap we wzorcu); fragment łamie się tylko,
   gdy sam jest szerszy niż kolumna (powiększony tekst, wąski ekran) */
.c2-contact__adr span { white-space: normal; }
.c2-contact__online { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); }
.c2 .c2-contact__route, .c2 .c2-contact__route:hover { font-size: 1rem; }

@media (min-width: 64em) {
  .c2-contact { padding: 0 var(--px) 120px; }
  .c2-contact__in {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 72px;
    align-items: start;
    padding-top: 104px;
  }
  .c2-contact__info { display: flex; flex-direction: column; gap: 36px; }
  .c2-contact__head { gap: 18px; padding: 0; }
  .c2-contact__lead { font-size: calc(1.125rem + 18 * var(--kt)); text-wrap: pretty; }
  .c2-contact__rows { margin: 0; }
  .c2-contact__row--tel {
    min-height: 0;
    padding: 16px 0 18px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
  }
  .c2-contact__row--mail { min-height: 0; padding: 16px 0 18px; gap: 4px; justify-content: flex-start; border-bottom: 0; }
  @media (hover: hover) { .c2 .c2-contact__row--tel:hover, .c2 .c2-contact__row--mail:hover { color: var(--c-petrol); } }
  .c2-contact__tel { font-size: 2.125rem; line-height: 1.15; }
  .c2-contact__mail { font-size: 1.1875rem; overflow-wrap: normal; }
  .c2-contact__addr--d { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 6px; border-top: 1px solid var(--c-line); }
  .c2-contact__adr { font-size: 1rem; }
  .c2-contact__addr--m { display: none; }
  .c2-contact__hint { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 28px; background: var(--c-mint); }
  .c2-contact__hint-title { font: 500 calc(1.5rem + 24 * var(--kh))/1.2 var(--f-serif); }
  .c2-contact__hint-intro { font: 400 calc(.9375rem + 15 * var(--kt))/1.55 var(--f-sans); color: var(--c-body); }
  .c2-contact__hint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid #B9C7C3; }
  .c2-contact__hint-list li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #C9D5D1;
    font: 400 .9375rem/1.5 var(--f-sans);
    color: var(--c-body);
  }
  .c2-contact__hint-list li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; background: var(--c-petrol); }
  .c2-contact__in > .c2-form { justify-self: end; width: 100%; max-width: calc(760px + 760 * var(--ks)); }
}

/* Łamanie wierszy jak w prototypie Stage 145 (H144 Top/Mid, H145): te teksty stoją tam w zwykłych elementach, bez
   text-wrap: pretty / balance, które base.css nadaje elementom p, li i h1–h3 (korekty końcowe Etapu B — wierność
   łamania wierszy pytań FAQ, opisów kroków, noty o konsultacjach online i listy „Co warto opisać”). */
.c2-method__name, .c2-areas__q, .c2-trust__kicker, .c2-contact__online, .c2-contact__hint-list li { text-wrap: wrap; }
/* pytania FAQ i opisy kroków: na telefonie i tablecie zwykłe łamanie, od 1024 px — pretty (osobny układ komputera H144 Mid) */
@media (max-width: 63.99em) { .c2-faq__q, .c2-method__text { text-wrap: wrap; } }
@media (min-width: 64em) { .c2-faq__q { text-wrap: pretty; } }

/* ===== styles/form.css ===== */
/* Formularz Home — Form Lift (H80D Form), wartości 1:1. Karta #FFFFFF, ramka #C5CCCA, cień „lift”,
   R1 40 / 24 px. Desktop od 1024 px (64em): pola w dwóch kolumnach, przełącznik z kropkami.
   Pieczęć: sekwencja z produkcji (home.js: sealPlay / sealSuccess / sealDrawCheck / sealError), kolor C2 #1E5650.
   Lista wybranych plików i karta odrzuconego pliku nie mają projektu we wzorcu — styl tymczasowy z tokenów C2. */

.c2-form {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 0 24px 0 0;
  box-shadow: 0 1px 2px rgba(18, 40, 42, .05), 0 18px 40px -22px rgba(18, 40, 42, .22);
  color: var(--c-ink);
}
.c2-form__form { position: relative; display: flex; flex-direction: column; gap: 24px; margin: 0; }
.c2-form [hidden] { display: none !important; }
.c2-form__nojs { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); }

.c2-form__group { display: flex; flex-direction: column; gap: 10px; }
.c2-form__label { font: 600 1rem var(--f-sans); }

/* ---------- przełącznik „Umów konsultację | Wyślij wiadomość” ---------- */
.c2-seg {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1.5px solid var(--c-petrol);
  isolation: isolate;
}
.c2-seg__ind {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: var(--c-petrol);
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  z-index: 0;
}
.c2-seg[data-intent="konsultacja"] .c2-seg__ind { transform: translateX(0%); }
.c2 .c2-seg__opt {
  position: relative;
  z-index: 1;
  min-height: 52px;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--c-petrol);
  border: 0;
  cursor: pointer;
  font: 500 .9375rem/1.25 var(--f-sans);
  text-align: center;
  transition: color 240ms ease, background-color 180ms ease;
}
.c2 .c2-seg__opt[aria-checked="true"] { color: #FFFFFF; font-weight: 600; }
@media (hover: hover) { .c2 .c2-seg__opt[aria-checked="false"]:hover { background-color: rgba(230, 238, 235, .9); } }
.c2 .c2-seg__opt:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.c2-seg__dot { display: none; }
.c2-seg__tx { min-width: 0; overflow-wrap: anywhere; }   /* długie słowo przy dużym tekście łamie się zamiast wychodzić poza przycisk */
.c2-form__exp {
  padding: 14px 16px 15px;
  background: var(--c-mint);
  font: 400 .9375rem/1.55 var(--f-sans);
  color: var(--c-body);
  text-wrap: pretty;
}
.c2-form__exp b { font-weight: 600; color: var(--c-ink); }
.c2-form__exp p + p { margin-top: 10px; }

/* ---------- pola ---------- */
.c2-form__grid { display: grid; grid-template-columns: 1fr; gap: 22px 20px; align-items: start; }
.c2-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c2-field__label { font: 600 1rem var(--f-sans); }
.c2-field__opt { font-weight: 400; color: var(--c-muted); }
.c2 .c2-field__input {
  min-height: 52px;
  min-width: 0;
  padding: 0 14px;
  border: 1.5px solid var(--c-field);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--c-ink);
  font: 400 1rem var(--f-sans);
}
.c2 .c2-field__area { min-height: 144px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.c2 .c2-field__input[aria-invalid="true"] { border: 2px solid var(--c-error); }
.c2-field__err { font: 600 .875rem/1.45 var(--f-sans); color: var(--c-error); }
.c2-field__hint { font: 400 .875rem/1.5 var(--f-sans); color: var(--c-muted); }

/* ---------- forma konsultacji ---------- */
.c2-modes { display: grid; grid-template-columns: 1fr; gap: 8px; }
.c2 .c2-mode {
  min-height: 48px;
  padding: 8.5px 14.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid var(--c-field);
  cursor: pointer;
  color: var(--c-ink);
  font: 500 .9375rem/1.3 var(--f-sans);
  text-align: left;
}
.c2 .c2-mode[aria-checked="true"] { padding: 8px 14px; background: var(--c-mint); border: 2px solid var(--c-petrol); font-weight: 600; }
.c2 .c2-mode:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.c2-mode__dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--c-field); }
.c2-mode[aria-checked="true"] .c2-mode__dot { border: 5px solid var(--c-petrol); background: #FFFFFF; }

/* ---------- termin konsultacji (kalendarz demonstracyjny w podglądzie) ---------- */
.c2-cal__view { display: flex; flex-direction: column; }
.c2 .c2-cal__open {
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #FFFFFF;
  border: 1.5px solid var(--c-field);
  cursor: pointer;
  color: var(--c-petrol);
  font: 600 1rem var(--f-sans);
  text-align: left;
}
.c2 .c2-cal__open[aria-invalid="true"] { border: 2px solid var(--c-error); }
@media (hover: hover) { .c2 .c2-cal__open:hover { background: var(--c-mint); } }
.c2 .c2-cal__open:focus-visible { outline: 2px solid var(--c-petrol); outline-offset: 1px; }
.c2-cal__plus {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-petrol);
  font: 400 1.25rem var(--f-sans);
}
.c2-cal__sel, .c2-cal__lost {
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  border: 2px solid var(--c-petrol);
  background: var(--c-mint);
}
.c2-cal__lost { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; border-color: var(--c-error); background: #FFFFFF; outline: none; }
.c2-cal__sum { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c2-cal__eyebrow { font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-petrol); }
.c2-cal__lost .c2-cal__eyebrow { color: var(--c-error); }
.c2-cal__slot { font: 500 1.1875rem/1.25 var(--f-serif); color: var(--c-ink); }
.c2-cal__lost .c2-cal__slot { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--c-error); }
.c2-cal__meta { font: 400 .9375rem var(--f-sans); color: var(--c-body); }
.c2-cal__desc { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
.c2 .c2-cal__btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--c-petrol);
  background: #FFFFFF;
  color: var(--c-petrol);
  font: 600 .9375rem var(--f-sans);
  white-space: nowrap;
  cursor: pointer;
}
.c2-cal__lost .c2-cal__btn { margin-top: 4px; }
@media (hover: hover) { .c2 .c2-cal__btn:hover { background: var(--c-bg); } .c2 .c2-cal__lost .c2-cal__btn:hover, .c2 .c2-cal__err .c2-cal__btn:hover { background: var(--c-mint); } }
.c2 .c2-cal__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.c2-cal__panel {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1.5px solid var(--c-petrol);
  background: #FFFFFF;
}
.c2-cal__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.c2 .c2-cal__nav {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-petrol);
  background: #FFFFFF;
  color: var(--c-petrol);
  font: 400 1.25rem var(--f-sans);
  cursor: pointer;
}
.c2 .c2-cal__nav:disabled { border-color: var(--c-line-light); color: #9AA7A6; cursor: default; }
.c2-cal__week { text-align: center; font: 500 1.0625rem/1.25 var(--f-serif); }
.c2-cal__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.c2-cal__skel { height: 68px; background: #EDF0EE; }
.c2-cal__loading { display: flex; flex-direction: column; gap: 12px; }
.c2-cal__spin { min-height: 48px; display: flex; align-items: center; gap: 10px; font: 400 .9375rem var(--f-sans); color: var(--c-body); }
.c2-cal__spin svg { width: 20px; height: 20px; flex: none; }
.c2-cal__spin circle { transform-box: fill-box; transform-origin: center; animation: c2spin 1.2s linear infinite; }
@keyframes c2spin { to { transform: rotate(360deg); } }
.c2 .c2-cal__day {
  min-height: 68px;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: #FFFFFF;
  color: var(--c-ink);
  border: 1.5px solid var(--c-field);
  cursor: pointer;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 320ms ease;
}
@media (hover: hover) { .c2 .c2-cal__day:not(:disabled):not([aria-checked="true"]):hover, .c2 .c2-cal__time:not([aria-checked="true"]):hover { border-color: var(--c-petrol); } }
.c2-cal__ds { font: 500 .8125rem var(--f-sans); color: var(--c-body); }
.c2-cal__dn { font: 500 1.25rem/1.1 var(--f-serif); }
.c2-cal__dc { font: 600 .75rem var(--f-sans); color: var(--c-petrol); }
.c2 .c2-cal__day[aria-checked="true"] { background: var(--c-petrol); color: #FFFFFF; border: 2px solid var(--c-petrol); }
.c2-cal__day[aria-checked="true"] .c2-cal__ds, .c2-cal__day[aria-checked="true"] .c2-cal__dc { color: #FFFFFF; font-weight: 500; }
.c2 .c2-cal__day:disabled { background: var(--c-bg); color: var(--c-muted); border: 1px solid var(--c-line-light); cursor: default; }
.c2-cal__day:disabled .c2-cal__ds, .c2-cal__day:disabled .c2-cal__dc { color: var(--c-muted); font-weight: 500; }
.c2 .c2-cal__day:focus-visible, .c2 .c2-cal__time:focus-visible { outline: 2px solid var(--c-petrol); outline-offset: 2px; }
.c2-cal__empty {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  background: var(--c-bg);
  font: 400 .9375rem/1.5 var(--f-sans);
  color: var(--c-body);
}
.c2 .c2-cal__next {
  min-height: 44px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: var(--c-petrol);
  font: 600 .9375rem var(--f-sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.c2-cal__times { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.c2-cal__tlabel { font: 600 .9375rem var(--f-sans); color: var(--c-body); }
.c2-cal__tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.c2 .c2-cal__time {
  min-height: 48px;
  background: #FFFFFF;
  color: var(--c-ink);
  border: 1.5px solid var(--c-field);
  font: 500 1rem var(--f-sans);
  cursor: pointer;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 320ms ease;
}
.c2 .c2-cal__time[aria-checked="true"] { background: var(--c-petrol); color: #FFFFFF; border: 2px solid var(--c-petrol); font-weight: 600; }
.c2-cal__err {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--c-bg);
}
.c2-cal__err .c2-cal__btn { margin-top: 6px; }
.c2-cal__errt, .c2-cal__nonet { font: 600 1rem var(--f-sans); }
.c2-cal__none { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--c-bg); border: 1.5px solid var(--c-line); }

/* ---------- rozwijane panele: „Co warto opisać?” (mobile) i „Dodaj dokumenty” ---------- */
.c2-exp {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 0 rgba(227, 231, 228, 0), 0 0 0 rgba(18, 40, 42, 0), 0 0 0 rgba(18, 40, 42, 0);
  transition: background-color 240ms ease, box-shadow 320ms ease, border-color 240ms ease, margin 320ms var(--ease), padding 320ms var(--ease);
}
.c2-exp[data-open] {
  margin: 0 -10px;
  padding: 0 10px;
  border-color: transparent;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E3E7E4, 0 1px 2px rgba(18, 40, 42, .05), 0 10px 22px -16px rgba(18, 40, 42, .24);
}
.c2-exp--hint { margin-bottom: 4px; }
.c2-exp--hint[data-open] { margin-bottom: 4px; }
.c2 .c2-exp__btn {
  min-height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-ink);
  font: 600 1rem var(--f-sans);
  text-align: left;
}
.c2 .c2-exp--hint .c2-exp__btn { min-height: 44px; color: var(--c-petrol); font-size: .9375rem; }
.c2-exp__icon { position: relative; flex: none; width: 32px; height: 32px; }
.c2-exp__icon > span { position: absolute; inset: 0; border-radius: 50%; background: var(--c-mint); transition: background-color 240ms ease; }
.c2-exp__icon > span::before, .c2-exp__icon > span::after { content: ""; position: absolute; background: var(--c-petrol); }
.c2-exp__icon > span::before { left: 9px; top: 15.25px; width: 14px; height: 1.5px; }
.c2-exp__icon > span::after { left: 15.25px; top: 9px; width: 1.5px; height: 14px; transition: transform 320ms var(--ease); }
.c2-exp--hint .c2-exp__icon { width: 28px; height: 28px; }
.c2-exp--hint .c2-exp__icon > span::before { left: 8px; top: 13.25px; width: 12px; }
.c2-exp--hint .c2-exp__icon > span::after { left: 13.25px; top: 8px; height: 12px; }
.c2-exp[data-open] .c2-exp__icon > span { background: var(--c-petrol); }
.c2-exp[data-open] .c2-exp__icon > span::before, .c2-exp[data-open] .c2-exp__icon > span::after { background: #FFFFFF; }
.c2-exp[data-open] .c2-exp__icon > span::after { transform: scaleY(0); }
.c2-exp__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease); }
.c2-exp__clip { overflow: hidden; min-height: 0; }
.c2-exp__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 18px; transition: opacity 240ms ease 80ms, visibility 0s linear 0ms; }
.c2-exp--hint .c2-exp__body { gap: 8px; padding: 2px 0 14px; }
.c2-exp--hint .c2-exp__body p { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); }
.c2-exp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.c2-exp__list li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; font: 400 .9375rem/1.5 var(--f-sans); color: var(--c-body); }
.c2-exp__list li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; background: var(--c-petrol); }
/* zamknięte (tylko z JS — bez JS treść paneli jest widoczna) */
.c2-js .c2-exp:not([data-open]) .c2-exp__panel { grid-template-rows: 0fr; }
.c2-js .c2-exp:not([data-open]) .c2-exp__body { opacity: 0; visibility: hidden; transition: opacity 240ms ease 0ms, visibility 0s linear 320ms; }

/* strefa dokumentów */
.c2-drop { position: relative; }
.c2-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.c2-drop__zone {
  min-height: 112px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  border: 1.5px dashed var(--c-field);
  background: #FFFFFF;
  font: 500 .9375rem/1.55 var(--f-sans);
  color: var(--c-body);
  cursor: pointer;
}
.c2-drop[data-over] .c2-drop__zone { border-color: var(--c-petrol); background: var(--c-mint); }
.c2-drop__input:focus-visible + .c2-drop__zone { outline: 2px solid var(--c-petrol); outline-offset: 2px; }
.c2-drop__desc { font: 400 .875rem/1.55 var(--f-sans); color: var(--c-muted); }
.c2-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.c2-files li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 4px;
  border-bottom: 1px solid var(--c-line);
  font: 400 .9375rem/1.45 var(--f-sans);
  color: var(--c-ink);
}
.c2-files__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.c2-files__size { flex: none; font-size: .875rem; color: var(--c-muted); }
.c2 .c2-files__rm {
  flex: none;
  min-height: 44px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: var(--c-petrol);
  font: 600 .875rem var(--f-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.c2-files__rej { padding: 12px 14px; border: 1.5px solid var(--c-error); background: #FFFFFF; font: 400 .875rem/1.5 var(--f-sans); color: var(--c-body); }
.c2-files__rej p + p { margin-top: 6px; }
.c2-files__rej b { font-weight: 600; color: var(--c-error); }

/* pole-pułapka antyspamowe — ukryte dla ludzi */
.c2-hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c2-hp input, .c2-hp label { position: absolute; width: 1px; height: 1px; }

/* ---------- zgoda ---------- */
.c2-consent { display: flex; flex-direction: column; gap: 6px; }
.c2-consent__label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; min-height: 44px; cursor: pointer; }
.c2-consent__box { position: relative; width: 24px; height: 24px; margin-top: 1px; }
.c2-consent__input { position: absolute; inset: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.c2-consent__mark {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-field);
  background: #FFFFFF;
  color: #FFFFFF;
  font: 700 .9375rem var(--f-sans);
}
.c2-consent__input:checked + .c2-consent__mark { border-color: var(--c-petrol); background: var(--c-petrol); }
.c2-consent__input:checked + .c2-consent__mark::after { content: "✓"; }
.c2-consent__input[aria-invalid="true"] + .c2-consent__mark { border: 2px solid var(--c-error); }
.c2-consent__input:focus-visible + .c2-consent__mark { outline: 2px solid var(--c-petrol); outline-offset: 2px; }
.c2-consent__text { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); }
.c2 .c2-consent__text a { color: var(--c-petrol); font-weight: 600; text-underline-offset: 3px; }
.c2-consent__err { padding-left: 36px; }
.c2-form__only { padding: 12px 16px; border: 1.5px solid var(--c-error); background: #FFFFFF; font: 600 .9375rem/1.5 var(--f-sans); color: var(--c-error); }

/* ---------- błąd wysyłki: ramka inline (nie okno) ---------- */
.c2-form__error {
  padding: 18px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #FFFFFF;
  border: 1.5px solid var(--c-error);
  outline: none;
}
.c2-form__error-eyebrow { font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-error); }
.c2-form__error-title { font: 500 1.375rem/1.25 var(--f-serif); color: var(--c-ink); }
.c2-form__error-text { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); }
.c2-form__error-contact { margin-top: 4px; display: flex; flex-wrap: wrap; column-gap: 24px; border-top: 1px solid var(--c-line); }
.c2 .c2-form__error-contact a { min-height: 44px; display: flex; align-items: center; color: var(--c-ink); font: 500 .9375rem var(--f-sans); text-underline-offset: 3px; overflow-wrap: anywhere; }
.c2 .c2-form__error-contact a:first-child { font-weight: 600; }

/* ---------- wysyłka ---------- */
/* Turnstile (C1/K3): kontener poza układem (bez dodatkowego odstępu kolumny); widoczny tylko, gdy Cloudflare
   wymaga interakcji — formularz.js ustawia wtedy data-ts-widoczny */
.c2-form__ts { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c2-form__ts[data-ts-widoczny] { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.c2-form__submit { display: flex; flex-direction: column; gap: 16px; }
.c2-form__btnwrap { align-self: stretch; width: 100%; display: flex; flex-direction: column; }
.c2 .c2-form__btn { min-width: min(240px, 100%); min-height: 58px; padding-inline: 12px; }   /* mobile: przycisk na całą szerokość, tekst wyśrodkowany — mniejszy padding nie zmienia wyglądu, a zostawia miejsce przy zoomie 200% */
.c2-form[data-busy] .c2-form__btn { cursor: default; opacity: .82; }
.c2-form[data-busy] .c2-btn__sheen { transition-duration: 0ms; background-position: 100% 0 !important; }
@media (hover: hover) { .c2 .c2-form[data-busy] .c2-btn--petrol:hover { background: var(--c-petrol); } }
.c2-form__progress { height: 2px; margin-top: 10px; background: var(--c-line); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.c2-form__progress span { display: block; width: 38%; height: 100%; background: var(--c-petrol); transform: translateX(-130%); }
.c2-form[data-busy] .c2-form__progress { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
.c2-form[data-busy] .c2-form__progress span { animation: c2prog 1.05s var(--ease) infinite; }
@keyframes c2prog { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }
.c2-form__legal {
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font: 400 .875rem/1.6 var(--f-sans);
  color: var(--c-muted);
  text-wrap: pretty;
}

/* ---------- okno wysyłki (nad kartą) z pieczęcią ---------- */
.c2-form__modal {
  position: absolute;
  inset: -1px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 12px;
  background: rgba(18, 40, 42, .6);
}
.c2-form__dialog {
  position: sticky;
  top: 96px;
  width: 100%;
  max-width: 460px;
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  background: #FFFFFF;
  border-radius: 0 24px 0 0;
  outline: none;
}
.c2-form__dlg-eyebrow { padding-top: 6px; font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-petrol); }
.c2-form__dlg-title { font: 500 1.375rem/1.2 var(--f-serif); text-wrap: balance; }
.c2-form__dlg-text { max-width: 380px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
.c2-form__dlg-text:empty { display: none; }
.c2 .c2-form__close {
  margin-top: 12px;
  min-height: 48px;
  padding: 0 32px;
  border: 1.5px solid var(--c-ink);
  border-radius: 0 10px 0 0;
  background: #FFFFFF;
  color: var(--c-ink);
  font: 600 1rem var(--f-sans);
  cursor: pointer;
}
@media (hover: hover) { .c2 .c2-form__close:hover { border-color: var(--c-petrol); color: var(--c-petrol); } }

.c2-seal { display: block; width: 68px; height: 68px; flex: none; }
.c2-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c2-seal__ring, .c2-seal__arc { fill: none; stroke: var(--c-petrol); stroke-width: 2.7; stroke-linecap: round; }
.c2-seal__arc { stroke-dasharray: 150 64; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; transform: rotate(0deg); }
.c2-seal__check { fill: none; stroke: var(--c-petrol); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- po wysłaniu: trwałe potwierdzenie w miejscu formularza ---------- */
.c2-form__sent {
  min-height: 360px;
  padding: 24px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  outline: none;
}
.c2-form__sent-text { max-width: 520px; font: 500 1.5rem/1.35 var(--f-serif); text-wrap: pretty; }
.c2-form__sent-sum { max-width: 520px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
.c2 .c2-form__again {
  min-height: 44px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-ink);
  color: var(--c-ink);
  font: 500 .9375rem var(--f-sans);
  cursor: pointer;
}
@media (hover: hover) { .c2 .c2-form__again:hover { color: var(--c-petrol); border-bottom-color: var(--c-petrol); } }

@media (min-width: 64em) {
  .c2-form { padding: 40px 44px; border-radius: 0 40px 0 0; }
  .c2 .c2-seg__opt { padding: 8px 12px; font-size: 1rem; }
  .c2-seg__dot {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--c-petrol);
    background: transparent;
    transition: border 240ms ease, background-color 240ms ease;
  }
  .c2-seg__opt[aria-checked="true"] .c2-seg__dot { border: 5px solid #FFFFFF; background: var(--c-petrol); }
  .c2-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c2 .c2-field__area { min-height: 168px; }
  .c2-modes { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr) minmax(0, 1.05fr); }
  .c2-exp--hint { display: none; }
  .c2-cal__sel, .c2-cal__lost { padding: 14px 18px; }
  .c2-cal__slot { font-size: 1.375rem; }
  .c2-cal__panel { padding: 18px; }
  .c2-cal__week { font-size: 1.1875rem; }
  .c2-cal__skel { height: 78px; }
  .c2 .c2-cal__day { min-height: 78px; }
  .c2-cal__dn { font-size: 1.375rem; }
  /* zaznaczenie na desktopie mineralne (świadomie inne niż petrol na telefonie — wzorzec) */
  .c2 .c2-cal__day[aria-checked="true"] { background: var(--c-mint); color: var(--c-ink); box-shadow: 0 6px 16px -10px rgba(18, 40, 42, .45); }
  .c2-cal__day[aria-checked="true"] .c2-cal__ds { color: var(--c-body); }
  .c2-cal__day[aria-checked="true"] .c2-cal__dn { color: var(--c-petrol); font-weight: 600; }
  .c2-cal__day[aria-checked="true"] .c2-cal__dc { color: var(--c-petrol); font-weight: 600; }
  .c2-cal__tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c2 .c2-cal__time[aria-checked="true"] { background: var(--c-mint); color: var(--c-petrol); box-shadow: 0 6px 16px -10px rgba(18, 40, 42, .45); }
  .c2-form__btnwrap { align-self: flex-start; width: auto; }
  /* H145/K145 Form: min-width 240px — przycisk obok tekstu ma 240 px także przy krótkiej etykiecie („Wyślij wiadomość”);
     min(240px, 100%) z układu telefonu liczyłoby procent od kontenera dopasowanego do treści (227 px) */
  .c2 .c2-form__btn { padding: 8px 40px; min-width: 240px; }
  .c2-form__modal { padding: 96px 32px; }
  .c2-form__dialog { padding: 36px 32px 30px; }
  .c2-form__dlg-title { font-size: 1.625rem; }
  .c2-form__sent { min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .c2-form[data-busy] .c2-form__progress span { animation: none; width: 100%; transform: none; opacity: .55; }
  .c2-cal__spin circle { animation: none; }
}

/* Tryb „Wyślij wiadomość” z adresu (?tryb=wiadomosc) PRZED inicjalizacją formularza — Home i Kontakt.
   Znaczniki domyślnie opisują „Umów konsultację” (decyzja właściciela 2026-11-07), więc bez parametru pierwsze
   malowanie jest od razu poprawne. formularz-head.html ustawia <html data-tryb="wiadomosc"> przed malowaniem;
   te reguły odwzorowują stan setIntent('wiadomosc') do chwili, gdy formularz.js przejmie stan (data-tryb-js).
   Atrybut hidden w znacznikach — stąd !important wobec .c2-form [hidden]. */
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form .c2-seg__ind { transform: translateX(100%); }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2 .c2-form .c2-seg__opt[data-intent-opt="wiadomosc"] { color: #FFFFFF; font-weight: 600; }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2 .c2-form .c2-seg__opt[data-intent-opt="konsultacja"] { color: var(--c-petrol); font-weight: 500; }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form .c2-seg__opt[data-intent-opt="wiadomosc"] .c2-seg__dot { border: 5px solid #FFFFFF; background: var(--c-petrol); }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form .c2-seg__opt[data-intent-opt="konsultacja"] .c2-seg__dot { border: 1.5px solid var(--c-petrol); background: transparent; }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form [data-exp="konsultacja"],
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form [data-k-only] { display: none !important; }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form [data-exp="wiadomosc"][hidden] { display: block !important; }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form [data-phone-opt][hidden] { display: inline !important; }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form [data-f-label] { font-size: 0; }
html[data-tryb="wiadomosc"]:not([data-tryb-js]) .c2-form [data-f-label]::after { content: "Wyślij wiadomość"; font-size: 1.0625rem; }
/* konsultacja (domyślna): miejsce na „Wybierz dzień i godzinę” przed pierwszym renderem kalendarza (bez przesunięcia) */
html:not([data-tryb-js]) .c2-form [data-cal-view]:empty { min-height: 56px; }

/* ===== styles/glebia.css ===== */
/* C2 Głębia — hierarchia cieni i uniesienie klikalnych kart (wdrożenie specyfikacji design/c2-stage145/c2-glebia.js).
   Wartości 1:1 ze specyfikacją; zamiast arkusza wstrzykiwanego skryptem — zwykły arkusz, a elementy oznacza generator
   strony atrybutami data-c2-lift="card|row|bleed" i data-c2-faq="own|bleed". Bez JS działa wszystko poza skalą
   zależną od szerokości karty (domyślnie 1,018) i animacjami CTA / telefonu.
   Hover tylko na urządzeniach z precyzyjnym wskaźnikiem — bez sztucznego hover na dotyku; ten sam stan przy :focus-visible.
   Nav87 nie jest zmieniany — dodany wyłącznie zatwierdzony subtelny cień tabliczki (nav0); stan pełnego paska
   zachowuje własny cień Nav87. */
:root {
  --c2-ease: cubic-bezier(.25, .6, .3, 1);
  --c2-t: 220ms;
  --c2-sh-nav0: 0 0 0 0 rgba(18, 40, 42, 0), 0 1px 2px rgba(18, 40, 42, .04), 0 8px 18px -14px rgba(18, 40, 42, .16);
  --c2-sh-form: 0 0 1px rgba(18, 40, 42, .10), 0 1px 2px rgba(18, 40, 42, .05), 0 16px 34px -20px rgba(18, 40, 42, .22), 0 44px 84px -46px rgba(18, 40, 42, .28);
  --c2-sh-faq: 0 0 1px rgba(18, 40, 42, .10), 0 2px 6px -2px rgba(18, 40, 42, .07), 0 16px 34px -22px rgba(18, 40, 42, .24);
  --c2-sh-card: 0 0 1px rgba(18, 40, 42, .10), 0 4px 10px -4px rgba(18, 40, 42, .10), 0 22px 44px -22px rgba(18, 40, 42, .30), 0 54px 96px -50px rgba(18, 40, 42, .32);
  --c2-sh-under: 0 0 1px rgba(18, 40, 42, .08), 0 6px 14px -6px rgba(18, 40, 42, .10), 0 22px 44px -22px rgba(18, 40, 42, .26), 0 54px 96px -50px rgba(18, 40, 42, .26);
  /* Stage 147 — karty i kadry (jeden zestaw dla FAQ, sytuacji klientów, etapów, kolumn i obrazów):
     promień R1 (jeden zaokrąglony róg), cienka linia, cień spoczynku / najechania (otwarte = --c2-sh-faq),
     akcent górny 2 px tylko na karcie otwartej lub z treścią na wierzchu, odstęp kart. */
  --c2-r-card: 0 16px 0 0;
  --c2-card-line: var(--c-line-light);
  --c2-card-line-on: var(--c-line);
  --c2-card-gap: 8px;
  --c2-sh-rest: 0 1px 2px rgba(18, 40, 42, .04), 0 8px 20px -16px rgba(18, 40, 42, .16);
  --c2-sh-hover: 0 1px 2px rgba(18, 40, 42, .05), 0 14px 28px -18px rgba(18, 40, 42, .24);
  --c2-kadr-line: rgba(18, 40, 42, .09);
  --c2-kadr-line-dark: rgba(255, 255, 255, .12);
  --c2-sh-media: 0 1px 2px rgba(18, 40, 42, .06), 0 24px 44px -28px rgba(18, 40, 42, .34);
  --c2-fx-media: drop-shadow(0 1px 1px rgba(18, 40, 42, .07)) drop-shadow(0 12px 14px rgba(18, 40, 42, .085));
  /* ten sam cień jako box-shadow ramki (rozmycie box-shadow = 2 × odchylenie drop-shadow; różnica ≤ 3/255) */
  --c2-sh-media-box: 0 1px 2px rgba(18, 40, 42, .07), 0 12px 28px rgba(18, 40, 42, .085);
}
@media (min-width: 64em) { :root { --c2-card-gap: 12px; } }

/* Nav87 — tabliczka na Hero (przed przewinięciem). Trzy warstwy jak w Nav87, więc przejście do pełnego paska jest płynne. */
.n87:not([data-solid="1"]) .n87__bar { box-shadow: var(--c2-sh-nav0); }

/* Karta formularza (Home i Kontakt) */
[data-c2-form] { box-shadow: var(--c2-sh-form); }

/* FAQ (Stage 147) — każde pytanie jest kartą: biała, cienka linia, R1, cień spoczynku; otwarta odpowiedź — linia
   ciemniejsza, akcent górny petrol 2 px (krawędź + wewnętrzna linia 1 px, bez zmiany wymiarów) i cień faq.
   Najechanie (tylko precyzyjny wskaźnik) — zamknięta karta lekko się podnosi cieniem; fokus klawiatury — obrys
   przycisku wewnątrz karty. Mechanika akordeonu (home.js / akordeon.js) i treść bez zmian; strony ustawiają tylko
   wcięcie treści (--fx), typografię i ikony. */
[data-c2-faq] {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--c2-card-line);
  border-radius: var(--c2-r-card);
  box-shadow: var(--c2-sh-rest);
  transition: border-color var(--c2-t) ease, box-shadow 320ms var(--c2-ease);
}
[data-c2-faq]:has(button[aria-expanded="true"]) {
  border-color: var(--c2-card-line-on);
  border-top-color: var(--c-petrol);
  box-shadow: inset 0 1px 0 var(--c-petrol), var(--c2-sh-faq);
}
.c2 [data-c2-faq] button:focus-visible { outline-offset: -3px; border-radius: var(--c2-r-card); }
[data-c2-lift="row"]::before,
[data-c2-lift="bleed"]::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: #FFFFFF; opacity: 0; transition: opacity var(--c2-t) ease; }

/* Klikalne karty */
:where([data-c2-lift]) { position: relative; }
[data-c2-lift="row"], [data-c2-lift="bleed"] { isolation: isolate; }
[data-c2-lift="row"]::before { inset: 0 calc(-1 * var(--c2-b)); border-radius: 0 20px 0 0; box-shadow: var(--c2-sh-under); }
[data-c2-lift="bleed"]::before { inset: calc(-1 * var(--c2-b)); border-radius: 0 20px 0 0; box-shadow: var(--c2-sh-under); }
[data-c2-lift] { --c2-b: 16px; transition: transform var(--c2-t) var(--c2-ease), box-shadow var(--c2-t) var(--c2-ease), background-color var(--c2-t) ease, color var(--c2-t) ease; }
[data-c2-lift="row"] { --c2-y: -2px; }
@media (max-width: 1023px) { [data-c2-lift] { --c2-b: 12px; } }

@media (hover: hover) and (pointer: fine) {
  [data-c2-faq]:not(:has(button[aria-expanded="true"])):hover { border-color: var(--c2-card-line-on); box-shadow: var(--c2-sh-hover); }
  [data-c2-lift]:hover { transform: translateY(var(--c2-y, -3px)) scale(var(--c2-s, 1.018)); z-index: 3; }
  [data-c2-lift="card"]:hover { box-shadow: var(--c2-sh-card); }
  [data-c2-lift="row"]:hover { background-color: transparent; }
  [data-c2-lift="row"]:hover::before, [data-c2-lift="bleed"]:hover::before { opacity: 1; }
}
[data-c2-lift]:focus-visible { transform: translateY(var(--c2-y, -3px)) scale(var(--c2-s, 1.018)); z-index: 3; }
[data-c2-lift="card"]:focus-visible { box-shadow: var(--c2-sh-card); }
[data-c2-lift="row"]:focus-visible { background-color: transparent; }
[data-c2-lift="row"]:focus-visible::before, [data-c2-lift="bleed"]:focus-visible::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-c2-lift], [data-c2-faq], [data-c2-lift]::before { transition: none; }
  [data-c2-lift]:hover, [data-c2-lift]:focus-visible { transform: none; }
}

/* Kadry ilustracji i zdjęć (Stage 147) — obraz bez zmian, zmienia się wyłącznie oprawa:
   • [linia] cienka linia wewnątrz kadru (::after, promień kadru) — odsłania się razem z obrazem (Ruch „mask”);
   • [cień] miękki cień rzuca nieruchome opakowanie obrazu (filter: drop-shadow podąża za odsłanianą częścią obrazu,
     więc po animacji Ruch cień nie „doskakuje”); zdjęcie bez animacji (O mnie) — zwykły cień --c2-sh-media;
   • na ciemnym tle (K3) — tylko jasna linia (cień byłby niewidoczny). */
:where(.c2-sp-cta__img, .c2-sz-contact__img, .c2-om-cta__img, .c2-sp6-faq__ill, .c2-sp-faq__ill, .c2-sz-faq__ill,
  .c2-om-hero__portrait, .c2-sp-k3__portrait, .c2-sz-k3__port) { position: relative; }
:where(.c2-sp-cta__img, .c2-sz-contact__img, .c2-om-cta__img, .c2-sp6-faq__ill, .c2-sp-faq__ill, .c2-sz-faq__ill,
  .c2-om-hero__portrait, .c2-sp-k3__portrait, .c2-sz-k3__port)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--c2-kadr-line);
  pointer-events: none;
}
:where(.c2-sp-k3__portrait, .c2-sz-k3__port)::after { box-shadow: inset 0 0 0 1px var(--c2-kadr-line-dark); }
/* Cień kadru: W TRAKCIE odsłaniania (Ruch „mask”, ok. 0,6 s; ruch.js oznacza element atrybutem data-ruch-anim)
   rzuca go opakowanie przez filter: drop-shadow — podąża za odsłanianą częścią obrazu. Poza tym (po odsłonięciu,
   bez JS, ograniczony ruch, kadr widoczny od wejścia) — box-shadow samej ramki obrazu: malowany razem z elementem,
   więc nie znika, gdy hover sąsiedniego przycisku lub telefonu (skala w kompozytorze) przenosi kadr na osobną
   warstwę (Safari, część konfiguracji Chrome z GPU gubiły wtedy filter: drop-shadow). Przełączenie bez skoku. */
:where(.c2-sp-cta__img, .c2-sz-contact__img, .c2-om-cta__img, .c2-sp6-faq__ill, .c2-sp-faq__ill, .c2-sz-faq__ill) { box-shadow: var(--c2-sh-media-box); }
:where(.c2-sp-cta__media, .c2-sz-contact__media, .c2-om-cta__media, .c2-kadr):has([data-ruch-anim]) { filter: var(--c2-fx-media); }
:where(.c2-sp-cta__media, .c2-sz-contact__media, .c2-om-cta__media, .c2-kadr):has([data-ruch-anim]) :where(.c2-sp-cta__img, .c2-sz-contact__img, .c2-om-cta__img, .c2-sp6-faq__ill, .c2-sp-faq__ill, .c2-sz-faq__ill) { box-shadow: none; }
.c2-om-hero__portrait { box-shadow: var(--c2-sh-media); }
/* Karty indeksu specjalizacji: stały, bardzo lekki cień spoczynku (najechanie — Głębia „card” bez zmian) */
:where(.c2-hub-tile) { box-shadow: var(--c2-sh-rest); }
/* bardzo wąski telefon (< 370 px): węższe wcięcie karty FAQ (8 px), kolumna numeru 26 px i odstępy 6 px — kolumna pytania
   ok. 188 px przy 320 px: najdłuższe wyrazy pytań (np. „odpowiedzialnością?”) nie są dzielone, a karty nie wydłużają
   listy (początek odpowiedzi mieści się w oknie bez dodatkowego przewinięcia — akordeon, reguła 3). FAQ 03 ma własną
   siatkę (szerszą kolumnę pytania) — dotyczy go tylko węższe wcięcie. Decyzja właściciela po odbiorze Stage 147. */
@media (width < 23.125em) {
  .c2 [data-c2-faq] { --fx: 8px; }
  .c2 [data-c2-faq] :is(.c2-faq__btn, .c2-sp-faq__btn, .c2-sz-faq__btn) { grid-template-columns: 26px minmax(0, 1fr) 36px; gap: 6px; }
  .c2 [data-c2-faq] :is(.c2-faq__answer, .c2-sp-faq__answer, .c2-sz-faq__answer) { padding-left: calc(32px + var(--fx)); }
}
/* Końcowe CTA (specjalizacje, O mnie): rząd przycisku i telefonu malowany NAD ilustracją z cieniem kadru.
   Animacja hover (skala w kompozytorze) przenosi animowany element na osobną warstwę, a przeglądarka zakłada, że
   może on nachodzić na wszystko, co malowane jest później — bez tej kolejności opakowanie ilustracji z filter:
   drop-shadow trafiało na osobną warstwę kompozytora i (Safari, część konfiguracji Chrome z GPU) traciło cień.
   Wyłącznie kolejność malowania: rzędy nie nachodzą na ilustrację, więc wygląd i układ bez zmian. */
:where(.c2-sp-cta__act, .c2-sz-contact__act, .c2-om-cta__actions, .c2-hub-cta__actions) { position: relative; z-index: 1; }

/* ===== styles/zgody.css ===== */
/* C2 — baner zgody i panel „Ustawienia cookies” (zgody.js, moduł 1:1 z produkcji).
   Treść, kolejność i hierarchia akcji jak w produkcji: trzy przyciski tej samej geometrii („Odrzuć” różni się
   od „Akceptuję” wyłącznie wypełnieniem), panel jako dialog. Baner position:fixed — bez rezerwowania miejsca,
   zero przesunięć treści. Kolory i kroje — tokeny C2. Nad Nav87 (30) i pod nakładką P01. */
/* Styl II (decyzja właściciela) — matowe szkło: jasna, półprzezroczysta biel z rozmyciem tła, subtelna obwódka
   i miękki cień. Komputer: prawy dolny róg; telefon: dolna krawędź (kiedy widoczny — zgody.js). */
.consent-banner {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  width: calc(100% - 2rem);
  max-width: 25rem;
  z-index: 60;
  padding: 1rem 1.125rem 1.05rem;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 14px;
  box-shadow: 0 18px 44px -22px rgba(18, 40, 42, .5), inset 0 0 0 1px rgba(18, 40, 42, .07);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--c-ink);
}
.consent-banner[hidden] { display: none; }
.consent-banner__title { margin: 0 0 .3rem; font: 500 1.0625rem/1.3 var(--f-serif); color: var(--c-ink); }
.consent-banner__text { margin: 0 0 .75rem; font: 400 .8125rem/1.55 var(--f-sans); color: var(--c-body); }
.consent-banner__actions { display: flex; flex-wrap: nowrap; gap: .4rem; }
.consent-modal__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent-banner .consent-btn { flex: 1 1 0; padding: .6em .5em; font-size: .8125rem; }
.consent-banner .consent-btn--secondary, .consent-banner .consent-btn--tertiary { background: rgba(255, 255, 255, .6); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .consent-banner { background: rgba(255, 255, 255, .97); }   /* bez rozmycia — prawie pełna biel (czytelność) */
}
/* Telefon i tablet — przyklejony do dolnej krawędzi, jaśniejszy i mniej przezroczysty */
@media (max-width: 63.99em) {
  .consent-banner {
    left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    padding: .9rem clamp(1rem, 4vw, 1.5rem) calc(.9rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .93);
    border-width: 1px 0 0; border-color: rgba(18, 40, 42, .08);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 34px -20px rgba(18, 40, 42, .45);
  }
}

.consent-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: .7em 1.1em;
  font: 500 .875rem/1.2 var(--f-sans);
  border: 1px solid transparent;
  border-radius: var(--r-btn-m);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.consent-btn:focus-visible { outline: 2px solid var(--c-petrol); outline-offset: 2px; }
.consent-btn--primary { background: var(--c-petrol); color: #FFFFFF; border-color: var(--c-petrol); }
.consent-btn--primary:hover { background: var(--c-petrol-hover); border-color: var(--c-petrol-hover); }
.consent-btn--secondary { background: transparent; color: var(--c-petrol); border-color: var(--c-petrol); }
.consent-btn--secondary:hover { background: var(--c-mint); }
.consent-btn--tertiary { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.consent-btn--tertiary:hover { border-color: var(--c-muted); }

.consent-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(18, 40, 42, .32);
}
.consent-modal-backdrop[hidden] { display: none; }
.consent-modal {
  width: min(100%, 34rem);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(1.35rem, 4vw, 2rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line-light);
  border-left: 3px solid var(--c-petrol);
  border-radius: var(--r-btn);
  box-shadow: 0 32px 90px rgba(18, 40, 42, .18);
  color: var(--c-ink);
  outline: none;
}
.consent-modal__title { margin: 0 0 .5rem; font: 500 clamp(1.35rem, 3.2vw, 1.6rem)/1.25 var(--f-serif); }
.consent-modal__lead { margin: 0 0 1.25rem; font: 400 .875rem/1.55 var(--f-sans); color: var(--c-muted); }
.consent-cat { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.consent-cat__item { padding: .9rem 0; border-top: 1px solid var(--c-line-light); }
.consent-cat__item:last-child { border-bottom: 1px solid var(--c-line-light); }
.consent-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-cat__name { font: 500 .9375rem/1.4 var(--f-sans); color: var(--c-ink); }
label.consent-cat__name { cursor: pointer; }
.consent-cat__state { flex-shrink: 0; font: 500 .75rem/1.3 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.consent-cat__desc { margin: .4rem 0 0; font: 400 .875rem/1.55 var(--f-sans); color: var(--c-muted); }
.consent-cat__toggle { flex-shrink: 0; width: 1.15rem; height: 1.15rem; accent-color: var(--c-petrol); cursor: pointer; }
.consent-cat__toggle:focus-visible { outline: 2px solid var(--c-petrol); outline-offset: 2px; }
.consent-cat__toggle:disabled { cursor: not-allowed; }

/* Otwarte menu Nav87 (panel na telefonie) — baner nie przykrywa pozycji menu */
body:has(.n87[data-open="1"]) .consent-banner { visibility: hidden; }

@media (max-width: 420px) {
  .consent-banner__title { margin-bottom: .25rem; }
  .consent-banner__text { margin-bottom: .7rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent-banner { animation: consent-enter .4s var(--ease) both; }
}
@keyframes consent-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media print { .consent-banner, .consent-modal-backdrop { display: none !important; } }

/* ===== components/intro/intro.css ===== */
/* P01 — wejście strony głównej. Warstwa znaku (obrys, atrament, złoto, chwila kompletu, zejście znaku)
   1:1 z obecnej produkcji (public/index.html): te same krzywe, czasy, opóźnienia, maski i reguła rozmiaru —
   bez zmian przebiegu i czasu (decyzja właściciela: 2,30 s desktop, 1,95 s poniżej 640 px). Papier,
   kolory znaku i cykl życia (Enter / Spacja / Escape, raz na sesję, ograniczony ruch) — jak w produkcji.
   Tylko opacity / transform / visibility / mask → zero przesunięć układu.

   ODSŁONIĘCIE STRONY C2 (nowe, do akceptacji). W produkcji strona otwiera się jeszcze w trakcie
   rysowania (papier od 0,96 s), bo Hero był jasny. Hero C2 jest ciemne: przy tym samym harmonogramie
   pełny granatowy znak leży przez ok. 0,4 s na białym H1 na zdjęciu. Dlatego strona odsłania się PO
   sygnecie — od chwili, w której znak jest kompletny i zaczyna ustępować miejsca — i kończy się razem
   z jego zejściem (zdarzenie końca pozostaje to samo: markYield):
     desktop: papier 1,40–2,14 s · fotografia 1,40–2,06 · identyfikacja 1,50 · H1 i Nav87 1,56 ·
              linia 1,70 · lead 1,76 · CTA 1,82 (koniec 2,24; znak schodzi 1,44–2,25);
     < 640 px: papier 1,22–1,86 · fotografia 1,22–1,82 · identyfikacja 1,30 · H1 1,34 · Nav87 1,36 ·
              lead 1,46 · CTA 1,52 (koniec 1,90; znak schodzi 1,26–1,92).
   Nav87 leży pod papierem, więc wyłania się razem z fotografią, a nie na papierze. */

:root {
  --intro-calm: cubic-bezier(0.33, 0.1, 0.2, 1);
  --intro-soft: cubic-bezier(0.4, 0.02, 0.2, 1);
  --intro-lift: cubic-bezier(0.40, 0.08, 0.38, 1);
  --intro-yield: cubic-bezier(0.16, 0.55, 0.28, 1);
}

/* ===== PAPIER — sam podkład (kość słoniowa marki, jak w produkcji) ===== */
.intro-veil { position: fixed; inset: 0; z-index: 45; display: none; background: #F7F1E7; pointer-events: none; }
/* podprogowy „oddech papieru” */
.intro-veil::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 44%, rgba(168, 137, 85, .038) 0%, rgba(168, 137, 85, .018) 34%, rgba(247, 241, 231, 0) 74%); }

/* ===== ZNAK — warstwa nad papierem, wyśrodkowana w oknie ===== */
.intro-mark { position: fixed; inset: 0; z-index: 46; display: none; align-items: center; justify-content: center; pointer-events: none; }
.is-intro .intro-veil, .is-intro .intro-mark { display: flex; }

/* Sygnet — dwie warstwy tej samej geometrii: OBRYS (pióro) + ATRAMENT (wypełnienie, maska osiadania).
   Szerokość: jedna płynna funkcja (produkcja): 320 → 121 px, 390 → 136 px, od ~462 px 19vw, maks. 224 px. */
.intro-sig { position: relative; z-index: 2;
  width: clamp(150px, 19vw, 224px);
  width: clamp(min(150px, 54px + 21vw), 19vw, 224px); }
.sig-layer { display: block; width: 100%; height: auto; }
.sig-ink { position: absolute; left: 0; top: 0; }
.sig-outline .p-navy, .sig-outline .p-gold { fill: none; stroke-width: 1.8; stroke-linejoin: round;
  stroke-linecap: round; stroke-miterlimit: 2; shape-rendering: geometricPrecision;
  stroke-dasharray: 1; stroke-dashoffset: 0; }
.sig-outline .p-navy { stroke: #14202E; }
.sig-outline .p-gold { stroke: #A88955; }
.sig-ink--navy .i-navy { fill: #14202E; }
.sig-ink--gold .i-gold { fill: #A88955; }
/* ATRAMENT — pełny kolor odsłaniany miękką maską od góry ku dołowi */
.sig-ink { -webkit-mask-image: linear-gradient(to bottom, #000 0 40%, transparent 62%);
  mask-image: linear-gradient(to bottom, #000 0 40%, transparent 62%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%;
  -webkit-mask-position: 0 0%; mask-position: 0 0%; }

/* ===== CHOREOGRAFIA (produkcja, 2,30 s) =====
   0.05–1.10 pióro prowadzi granatowy obrys · 0.34–1.18 atrament osiada · 0.82–1.28 złoto (obrys → wypełnienie)
   0.96–1.70 papier traci krycie · 1.28–1.44 znak kompletny i nieruchomy · 1.44–2.25 znak ustępuje miejsca */
.is-intro .sig-outline .p-navy { animation: sigStroke 1.05s var(--intro-calm) .05s both, strokeFade .28s var(--intro-soft) .84s both; }
.is-intro .sig-ink--navy { animation: inkRise .84s var(--intro-soft) .34s both; }
.is-intro .sig-outline .p-gold { animation: sigStroke .28s var(--intro-calm) .82s both, strokeFade .22s var(--intro-soft) 1.06s both; }
.is-intro .sig-ink--gold { animation: inkRise .3s cubic-bezier(.42, 0, .58, 1) .98s both; }
.is-intro .intro-mark { animation: markYield .81s var(--intro-yield) 1.44s both; }

/* — PAPIER i STRONA C2 — po sygnecie (zob. nagłówek) */
.is-intro .intro-veil { animation: veilLift .74s var(--intro-lift) 1.40s both; }
.is-intro .n87-frame { animation: headerWake .52s var(--intro-soft) 1.56s both; }
.is-intro .c2-hero__img { animation: introBg .66s var(--intro-soft) 1.40s both; }
.is-intro .c2-hero__kicker { animation: introRise .46s var(--intro-soft) 1.50s both; }
.is-intro .c2-hero__h1 { animation: introRise .48s var(--intro-soft) 1.56s both; }
.is-intro .c2-hero__line { transform: scaleX(0); animation: introLine .44s var(--intro-soft) 1.70s both; }
.is-intro .c2-hero__lead { animation: introRise .44s var(--intro-soft) 1.76s both; }
.is-intro .c2-hero__cta { animation: introRise .42s var(--intro-soft) 1.82s both; }

/* ===== WARIANT MOBILNY (1,95 s) — ta sama ceremonia, krótsza końcówka (granica 640 px jak w produkcji) ===== */
@media (max-width: 640px) {
  .is-intro .sig-outline .p-navy { animation: sigStroke .94s var(--intro-calm) .04s both, strokeFade .26s var(--intro-soft) .74s both; }
  .is-intro .sig-ink--navy { animation: inkRise .76s var(--intro-soft) .28s both; }
  .is-intro .sig-outline .p-gold { animation: sigStroke .26s var(--intro-calm) .72s both, strokeFade .2s var(--intro-soft) .94s both; }
  .is-intro .sig-ink--gold { animation: inkRise .28s cubic-bezier(.42, 0, .58, 1) .88s both; }
  .is-intro .intro-mark { animation: markYield .66s var(--intro-yield) 1.26s both; }
  .is-intro .intro-veil { animation: veilLift .64s var(--intro-lift) 1.22s both; }
  .is-intro .n87-frame { animation: headerWake .48s var(--intro-soft) 1.36s both; }
  .is-intro .c2-hero__img { animation: introBg .6s var(--intro-soft) 1.22s both; }
  .is-intro .c2-hero__kicker { animation: introRise .42s var(--intro-soft) 1.30s both; }
  .is-intro .c2-hero__h1 { animation: introRise .44s var(--intro-soft) 1.34s both; }
  .is-intro .c2-hero__line { animation: introLine .4s var(--intro-soft) 1.40s both; }
  .is-intro .c2-hero__lead { animation: introRise .40s var(--intro-soft) 1.46s both; }
  .is-intro .c2-hero__cta { animation: introRise .38s var(--intro-soft) 1.52s both; }
}

@keyframes sigStroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes introRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes introLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes introBg { from { opacity: .55; } to { opacity: 1; } }
@keyframes headerWake { from { opacity: 0; } to { opacity: 1; } }
@keyframes strokeFade { from { stroke-opacity: 1; } to { stroke-opacity: 0; } }
@keyframes inkRise { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0%; mask-position: 0 0%; } }
@keyframes veilLift { from { opacity: 1; visibility: visible; } 99% { visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes markYield { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-6px) scale(.975); } }

/* prefers-reduced-motion i druk → od razu stan końcowy, bez papieru i bez animacji */
@media (prefers-reduced-motion: reduce) {
  .is-intro .intro-veil, .is-intro .intro-mark { display: none !important; }
  .is-intro * { animation: none !important; }
  .is-intro .c2-hero__line { transform: none !important; }
}
@media print {
  .is-intro .intro-veil, .is-intro .intro-mark { display: none !important; }
  .is-intro * { animation: none !important; }
  .is-intro .c2-hero__line { transform: none !important; }
}

/* ===== styles/preview.css ===== */
/* Podgląd (środowisko testowe) — oznaczenia, których nie ma we wzorcu i które nie trafiają do produkcji
   (znaczniki pojawiają się wyłącznie w buildzie --env podglad). Celowo obce stylistyce strony, żeby nie
   dało się ich pomylić z projektem: żółte tło, przerywana ramka, krój systemowy o stałej szerokości. */

.c2-preview-flag {
  position: fixed;
  z-index: 60;
  left: 8px;
  bottom: 8px;
  margin: 0;
  padding: 4px 8px;
  background: #FFF3C4;
  border: 1px dashed #7A4A12;
  color: #5A3608;
  font: 500 .6875rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: none;
  opacity: .92;
}
@media print { .c2-preview-flag { display: none; } }

.c2-demo-note {
  padding: 12px 14px;
  background: #FFF3C4;
  border: 1.5px dashed #7A4A12;
  color: #3D2A0A;
  font: 400 .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.c2-demo-note strong { font-weight: 700; }
.c2-demo-note--inline { margin-top: 2px; padding: 6px 10px; font-size: .8125rem; }