/* Specjalizacje 04–06 (Prawo podatkowe, Prawo karne skarbowe, Sprawy cywilne i gospodarcze) — wspólne moduły.
   Wzorzec: design/c2-stage145/C2 145 04 / 05 / 06 + Zaufanie C2 144-01 / -02 / -03 (wartości 1:1).
   Prototyp liczy część wymiarów w JS (renderVals); tu te same wzory w CSS:
   • skala dużych ekranów: calc(V * var(--s|t|h)) prototypu = calc(V + V_liczba * var(--ks|kt|kh)) (tokens.css);
   • wymiary zależne od szerokości: cqi ramki .c2-frame (= szerokość okna, jak kontener prototypu);
   • zaokrąglenia Math.round prototypu: round(…, 1px).
   Progi: < 64em telefon (gałąź „m” prototypu), od 64em komputer („d”), 73.75em (1180 px — Nav87 i obraz otwarcia),
   80em (1280 px — „wide”), 48em (768 px — stan początkowy pytań, skrypt akordeon.js).
   Klasy: c2-sp-… (rodzina specjalizacji). Arkusze stron (spec-<slug>.css) ustawiają kadry grafik i treści,
   które prototyp liczy inaczej na każdej stronie. */

/* łamanie wierszy (balance / pretty) — base.css, wspólne dla Stage 145; tu tylko miejsca, w których prototyp
   ustawia je jawnie na elemencie innym niż h1–h3 / p / li albo element C2 jest innego typu niż w prototypie */
.c2-sp-hero__hook, .c2-sp-pas__haslo, .c2-sp-k3__slogan { text-wrap: balance; }
.c2-sp-faq__q { text-wrap: pretty; }
@media (max-width: 63.99em) { .c2-sp-faq__q { text-wrap: balance; } }   /* prototyp 04/05: pytania na telefonie w nagłówku (balance) */
.c2-sp-k3__name, .c2-sp-k3__role, .c2-sp-cta__who { text-wrap: wrap; }
:where(.c2-sp ul, .c2-sp ol) { list-style: none; margin: 0; padding: 0; }
.c2-sp { --sp-mpx: max(20px, calc((100% - 37.5rem) / 2)); }

/* etykieta sekcji (Typowe sytuacje, Zakres pomocy…) — M 600 12 px, D 600 13 px, .1em, wersaliki */
.c2-sp-label { font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-petrol); }
/* H2 sekcji — M 26 → 30 px (320 → 390+), D 30 → 46 px (1024 → 1440) ×1,14 */
.c2-sp-h2 {
  margin: 12px 0 0;
  font: 500 1.75rem/1.1 var(--f-serif);
  font-size: clamp(1.625rem, calc(1.625rem + (100cqi - 320px) * .028), 1.875rem);
  letter-spacing: -.01em;
  color: var(--c-ink);
}
@media (min-width: 64em) {
  .c2-sp-label { font-size: .8125rem; }
  .c2-sp-h2 { margin: 0; line-height: 1.08; font-size: calc(clamp(1.875rem, calc(1.875rem + (100cqi - 64rem) * 16 / 416), 2.875rem) + 46 * var(--kh)); }
}

/* ===================================================================== 01 OTWARCIE (wariant 04 / 05)
   Telefon: ścieżka „← Specjalizacje”, scena z akwarelą (tło na pełną szerokość, maska) pod etykietą i H1,
   hasło, lead, adresaci, CTA + wiadomość i telefon. Wymiary sceny liczy prototyp w JS (MC: szerokość i wysokość
   okna) — wzory w arkuszu strony (zmienne --mh-*). Komputer: akwarela przy prawej krawędzi (top 74 / 60 px),
   kolumna tekstu zwężona o część szerokości obrazu. */
.c2-sp-hero {
  --sp-nav: 58px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
}
@media (min-width: 23.4375em) { .c2-sp-hero { --sp-nav: 62px; } }
@media (min-width: 73.75em) { .c2-sp-hero { --sp-nav: calc(86px + var(--n87-top-extra, 0px)); } }   /* + pasek narzędzi PL | EN (nav87.css) */
.c2-sp-hero__text {
  display: flex;
  flex-direction: column;
  padding: calc(var(--sp-nav) + var(--mh-crumb, 14px)) var(--sp-mpx) 0;
}
.c2-sp-crumbs { position: relative; z-index: 1; }
.c2-sp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 500 .875rem var(--f-sans); color: var(--c-muted); }
.c2 .c2-sp-crumbs a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--c-muted); text-decoration: none; }
@media (hover: hover) { .c2 .c2-sp-crumbs a:hover { color: var(--c-petrol); } }
.c2-sp-crumbs__back { color: var(--c-petrol); }
.c2-sp-crumbs__home, .c2-sp-crumbs__sep, .c2-sp-crumbs__cur { display: none; }
.c2-sp-crumbs__sep { color: #9AA7A6; }
.c2-sp-crumbs__cur { color: var(--c-ink); }

.c2-sp-hero__stage { position: relative; padding-top: var(--mh-pad); }
.c2-sp-hero__img {
  position: absolute;
  z-index: -1;
  top: var(--mh-top, 0px);
  left: calc(-1 * var(--sp-mpx));
  right: calc(-1 * var(--sp-mpx));
  height: var(--mh-h);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--mh-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--mh-mask);
  mask-composite: intersect;
}
.c2-sp-hero__img picture { display: contents; }
/* kadr jak background-position / size prototypu: ramka obrazu przycięta do pasa (nic poza ekranem), skala z wysokości
   (object-fit: cover przy wysokości = wysokość obrazu), przesunięcie poziome przez object-position */
.c2 .c2-sp-hero__pic {
  position: absolute;
  left: max(0px, var(--mh-bgx));
  top: var(--mh-bgy);
  width: calc(min(100%, var(--mh-bgx) + var(--mh-s)) - max(0px, var(--mh-bgx)));
  max-width: none;
  height: calc(var(--mh-s) * var(--mh-ar, .666667));
  object-fit: cover;
  object-position: calc(var(--mh-bgx) - max(0px, var(--mh-bgx))) 0;
}
.c2-sp-hero__kicker {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 .75rem var(--f-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-petrol);
}
.c2-sp-hero__num { font: 500 1rem var(--f-serif); letter-spacing: 0; text-transform: none; }
.c2-sp-hero__h1 {
  position: relative;
  margin: 10px 0 0;
  font: 500 2.5rem/1.04 var(--f-serif);
  font-size: clamp(2.25rem, calc(2.25rem + (100cqi - 320px) * .057), 2.75rem);
  letter-spacing: -.015em;
  color: var(--c-ink);
}
.c2-sp-hero__hook {
  margin: var(--mh-hook, 14px) 0 0;
  font: 500 1.3125rem/1.25 var(--f-serif);
  font-size: clamp(1.25rem, calc(1.25rem + (100cqi - 360px) * .05), 1.375rem);
  color: var(--c-petrol);
}
.c2-sp-hero__lead { margin: var(--mh-lead, 18px) 0 0; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp-hero__aud { margin: var(--mh-aud, 10px) 0 0; font: 400 .875rem/1.5 var(--f-sans); color: var(--c-muted); }
.c2-sp-hero__cta { margin: var(--mh-cta, 22px) 0 40px; display: flex; flex-direction: column; gap: 2px; max-width: 420px; }
.c2-sp-hero__row { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; }   /* zawijanie tylko przy powiększonym tekście */
.c2 .c2-sp-hero__msg {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 400 .9375rem var(--f-sans);
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (hover: hover) { .c2 .c2-sp-hero__msg:hover { color: var(--c-petrol); } }
.c2 .c2-sp-hero__tel {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 .9375rem var(--f-sans);
  color: var(--c-ink);
  text-decoration: none;
}
.c2-sp-hero__tel svg { flex: none; width: 15px; height: 15px; }

@media (min-width: 64em) {
  /* Duże ekrany (korekta 2026-11-10): ilustracja trzyma się ramy 1920 px (jak hero Specjalizacji) zamiast krawędzi
     okna; kolumna tekstu przesuwa granicę i zmniejsza prawe wcięcie o tyle samo (szerokość bez zmian). Do 1920 px
     --hero-off = 0 — układ identyczny jak dotąd. */
  .c2-sp-hero { --hero-off: max(0px, calc((100cqi - 1920px) / 2)); display: block; min-height: clamp(600px, round(44cqi, 1px), 760px); }
  .c2-sp-hero__text {
    padding: calc(var(--sp-nav) + 40px + 40 * var(--ks)) calc(var(--px) - var(--hero-off)) calc(88px + 88 * var(--ks)) var(--px);
    max-width: calc(100% - var(--hero-off) - round(min(1060px, round(58cqi, 1px)) * .62, 1px));
  }
  .c2-sp-crumbs { position: static; }
  .c2-sp-crumbs__home, .c2-sp-crumbs__sep, .c2-sp-crumbs__cur { display: list-item; }
  .c2-sp-crumbs__back { display: none; }
  .c2 .c2-sp-crumbs a { display: flex; gap: 0; }
  .c2-sp-hero__stage { position: static; padding-top: 0; }
  .c2-sp-hero__img {
    top: 60px;
    left: auto;
    right: var(--hero-off);
    width: min(1060px, round(58cqi, 1px));
    height: round(min(740px, min(1060px, round(58cqi, 1px)) * .774), 1px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 var(--hero-m1, 58%), transparent var(--hero-m2, 97%));
    mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 var(--hero-m1, 58%), transparent var(--hero-m2, 97%));
  }
  .c2 .c2-sp-hero__pic { position: static; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%); }
  .c2-sp-hero__kicker { position: static; padding-top: calc(28px + 28 * var(--ks)); gap: 12px; font-size: .8125rem; }
  .c2-sp-hero__num { font-size: 1.0625rem; }
  .c2-sp-hero__h1 {
    position: static;
    margin-top: calc(14px + 14 * var(--ks));
    font-size: calc(clamp(2.9919rem, calc(2.9919rem + (100cqi - 64rem) * 16.13 / 416), 4rem) + 64 * var(--kh));
  }
  .c2-sp-hero__hook, .c2-sp-hero__lead, .c2-sp-hero__aud { max-width: min(32.5rem, 100%); }
  .c2-sp-hero__hook {
    margin-top: calc(18px + 18 * var(--ks));
    font-size: calc(clamp(1.5rem, calc(1.5rem + (100cqi - 64rem) * 4 / 416), 1.75rem) + 28 * var(--kh));
  }
  .c2-sp-hero__lead {
    margin-top: calc(20px + 20 * var(--ks));
    font-size: calc(clamp(1.0625rem, calc(1.0625rem + (100cqi - 64rem) * 2 / 416), 1.1875rem) + 19 * var(--kt));
  }
  .c2-sp-hero__aud { margin-top: calc(12px + 12 * var(--ks)); font-size: calc(.9375rem + 15 * var(--kt)); line-height: 1.55; }
  .c2-sp-hero__cta { margin: calc(34px + 34 * var(--ks)) 0 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; max-width: none; }
  .c2-sp-hero__row { display: contents; }
  .c2 .c2-sp-hero__msg { font-size: 1rem; }
  .c2 .c2-sp-hero__tel { display: none; }
}
@media (min-width: 73.75em) { .c2-sp-hero__img { top: 74px; } }
@media (min-width: 80em) {
  .c2-sp-hero__text { max-width: calc(100% - var(--hero-off) - round(min(1060px, round(56cqi, 1px)) * .7, 1px)); }
  .c2-sp-hero__img {
    width: min(1060px, round(56cqi, 1px));
    height: round(min(740px, min(1060px, round(56cqi, 1px)) * .774), 1px);
  }
  .c2-sp-hero__hook, .c2-sp-hero__lead, .c2-sp-hero__aud { max-width: calc(35rem + 560 * var(--kt)); }
}

/* ===================================================================== 02 ZAUFANIE (K3, wariant „w2b”)
   Komputer: portret (aside) | etykieta, H2, panel „prawo i matematyka”; trzy argumenty; pas „Następny krok”.
   Margines: max(76 px, (szerokość − 1288) / 2) — treść najwyżej 1136 px (własne wcięcie modułu, zgodnie z decyzją
   właściciela 2026-11-05 pozostaje jak w prototypie). 1024–1279 px (04, 05): portret 200 px
   w wierszu z podpisem nad pełną szerokością (strona 06: kolumna 360 px od 1024 px — spec-spory….css).
   Telefon: portret 104 px z podpisem, etykieta, H2, panel, argumenty, pas CTA; margines 20 px (16 px < 370 px). */
.c2-sp-k3 { --kpx: 20px; padding: 0 var(--kpx) 52px; background: var(--c-dark); color: var(--c-on-dark); }
@media (width < 23.125em) { .c2-sp-k3 { --kpx: 16px; } }
.c2-sp-k3__aside {
  padding-top: 52px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 16px;
  align-items: end;
}
.c2-sp-k3__portrait { aspect-ratio: 4 / 5; border-radius: 0 22px 0 0; overflow: hidden; background: #1B3436; }
.c2-sp-k3__portrait picture { display: contents; }
.c2 .c2-sp-k3__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.c2-sp-k3__who { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.c2-sp-k3__name { font: 500 1.25rem/1.15 var(--f-serif); color: #FFFFFF; }
.c2-sp-k3__role { font: 400 .8125rem/1.4 var(--f-sans); color: var(--c-on-dark-body); }
.c2 .c2-sp-k3__more {
  align-self: stretch;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font: 600 .875rem var(--f-sans);
  color: var(--c-on-hero);
  text-underline-offset: 4px;
}
.c2-sp-k3__main { display: flex; flex-direction: column; min-width: 0; }
.c2-sp-k3__label { margin-top: 22px; font: 600 .6875rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dark-num); }
.c2-sp-k3__h2 { margin: 10px 0 0; font: 500 1.75rem/1.14 var(--f-serif); letter-spacing: -.01em; color: var(--c-on-dark); }
.c2-sp-k3__panel {
  margin-top: 22px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #1B3436;
  border-radius: 0 28px 0 0;
}
.c2-sp-k3__col { display: contents; }
.c2-sp-k3__plabel { font: 600 .6875rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dark-num); }
.c2-sp-k3__ptitle { font: 500 1.5625rem/1.15 var(--f-serif); color: #FFFFFF; text-wrap: balance; }
.c2-sp-k3__dips { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.c2-sp-k3__dip { padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; border: 1px solid #3A5557; border-radius: 0 10px 0 0; }
.c2-sp-k3__dip dt { font: 600 .6875rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dark-num); }
.c2-sp-k3__dip dd { margin: 0; font: 400 .875rem/1.4 var(--f-sans); color: var(--c-mint); }
.c2-sp-k3__m1 { font: 500 1.0625rem/1.45 var(--f-serif); color: #FFFFFF; }
.c2-sp-k3__m2 { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-on-dark-body); }
.c2-sp-k3__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.c2-sp-k3__chips li { padding: 5px 9px; border: 1px solid #3A5557; border-radius: 0 8px 0 0; font: 500 .75rem/1.3 var(--f-sans); color: var(--c-mint); text-wrap: wrap; }
.c2-sp-k3__args { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.c2-sp-k3__arg { padding: 14px 0 0; display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--c-dark-line); border-radius: 0 20px 0 0; }
.c2-sp-k3__ak { font: 600 .6875rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dark-num); }
.c2-sp-k3__at { font: 500 1.3125rem/1.2 var(--f-serif); color: #FFFFFF; }
.c2-sp-k3__ad { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-on-dark-body); }
.c2-sp-k3__bar {
  margin-top: 28px;
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-petrol);
  border-radius: 0 24px 0 0;
}
.c2-sp-k3__btext { display: contents; }
.c2-sp-k3__blabel { font: 600 .6875rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: #CFE3DE; }
.c2-sp-k3__slogan { font: 500 1.6875rem/1.14 var(--f-serif); letter-spacing: -.01em; color: #FFFFFF; }
.c2-sp-k3__bcta { margin-top: 12px; }
.c2 .c2-sp-k3__btn {
  width: 100%;
  min-height: 54px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-on-hero);
  color: var(--c-dark);
  font: 600 1.0625rem var(--f-sans);
  text-align: center;
  text-decoration: none;
  border-radius: 0 12px 0 0;
}
@media (hover: hover) { .c2 .c2-sp-k3__btn:hover { background: #FFFFFF; color: var(--c-dark); } }
.c2 .c2-sp-k3__btn:focus-visible { outline-color: var(--c-on-hero); }

@media (min-width: 64em) {
  .c2-sp-k3 { --kpx: max(76px, round(calc((100cqi - 1288px) / 2), 1px)); padding: 96px var(--kpx); }   /* własne wcięcie modułu (bez zmian wg decyzji 2026-11-05) */
  .c2-sp-k3__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px 64px; align-items: start; }
  .c2-sp-k3__aside { padding-top: 0; display: flex; flex-direction: row; align-items: flex-end; gap: 28px; }
  .c2-sp-k3__portrait { flex: none; width: 200px; border-radius: 0 48px 0 0; }
  .c2-sp-k3__who { gap: 0; padding-bottom: 0; }
  .c2-sp-k3__name { font-size: 1.625rem; }
  .c2-sp-k3__role { margin-top: 4px; font-size: .9375rem; line-height: 1.5; }
  .c2 .c2-sp-k3__more { align-self: flex-start; margin-top: 6px; min-height: 44px; font-size: 1rem; text-underline-offset: 5px; }
  .c2-sp-k3__label { margin-top: 0; font-size: .8125rem; letter-spacing: .12em; }
  .c2-sp-k3__h2 { margin-top: 14px; font-size: 2.375rem; line-height: 1.1; }
  .c2-sp-k3__panel {
    margin-top: 30px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 18px 40px;
    align-items: start;
    border-radius: 0 48px 0 0;
  }
  .c2-sp-k3__col { display: flex; flex-direction: column; gap: 14px; }
  .c2-sp-k3__plabel { font-size: .75rem; }
  .c2-sp-k3__ptitle { font-size: clamp(1.5rem, calc(6.4cqi - 2.5625rem), 2.125rem); line-height: 1.1; letter-spacing: -.01em; }
  .c2-sp-k3__dips { gap: 8px; }
  .c2-sp-k3__dip { padding: 10px 12px; gap: 3px; }
  .c2-sp-k3__m1 { font-size: 1.25rem; }
  .c2-sp-k3__m2 { font-size: 1rem; line-height: 1.6; }
  .c2-sp-k3__chips li { padding: 5px 10px; font-size: .8125rem; }
  .c2-sp-k3__args { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .c2-sp-k3__arg { padding-top: 18px; gap: 10px; border-radius: 0; }
  .c2-sp-k3__ak { font-size: .75rem; }
  .c2-sp-k3__at { font-size: 1.375rem; }
  .c2-sp-k3__ad { line-height: 1.6; }
  .c2-sp-k3__bar {
    margin-top: 40px;
    padding: 34px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 40px;
    align-items: center;
    border-radius: 0 32px 0 0;
  }
  .c2-sp-k3__btext { display: flex; flex-direction: column; gap: 10px; }
  .c2-sp-k3__blabel { font-size: .75rem; }
  .c2-sp-k3__slogan { font-size: 2.125rem; line-height: 1.12; }
  .c2-sp-k3__bcta { margin-top: 0; }
  .c2 .c2-sp-k3__btn { width: auto; min-height: 58px; display: inline-flex; white-space: nowrap; }
}
@media (min-width: 80em) {
  .c2-sp-k3 { padding: 112px var(--kpx); }
  .c2-sp-k3__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 0 64px; }
  .c2-sp-k3__aside { flex-direction: column; align-items: stretch; gap: 0; }
  .c2-sp-k3__portrait { width: 100%; border-radius: 0 80px 0 0; }
  .c2-sp-k3__who { padding-top: 20px; }
  .c2-sp-k3__h2 { font-size: 2.75rem; }
}

/* ===================================================================== 02 TYPOWE SYTUACJE (04: 3 kolumny + pas KKS, 05: 2 × 2 z etykietą i podsumowaniem)
   Stage 147: każda sytuacja jest kartą (glebia.css: biała, linia, R1, cień spoczynku) z akcentem górnym petrol 2 px;
   etykieta kategorii tylko tam, gdzie wynika z treści (05). Karty w rzędzie mają równą wysokość. */
.c2-sp-etapy { padding: 48px var(--sp-mpx) 44px; background: var(--c-bg); }
.c2-sp-etapy__intro { margin-top: 12px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp-etapy__list { margin-top: 28px; display: flex; flex-direction: column; gap: var(--c2-card-gap); }
.c2-sp-etap {
  display: flex;
  flex-direction: column;
  padding: 16px 14px 18px;
  background: #FFFFFF;
  border: 1px solid var(--c2-card-line);
  border-top: 2px solid var(--c-petrol);
  border-radius: var(--c2-r-card);
  box-shadow: var(--c2-sh-rest);
}
.c2-sp-etap__lab { font: 600 .6875rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-petrol); }
.c2-sp-etap__t { font: 500 1.4375rem/1.2 var(--f-serif); font-size: clamp(1.3125rem, calc(1.3125rem + (100cqi - 320px) * .028), 1.5rem); color: var(--c-ink); }
.c2-sp-etap__lab + .c2-sp-etap__t { margin-top: 8px; }
.c2-sp-etap__d { margin-top: 8px; font: 400 1rem/1.55 var(--f-sans); color: var(--c-body); }
.c2-sp-etap__sub {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c2-card-line);
  font: 500 .9375rem/1.55 var(--f-sans);
  color: var(--c-petrol);
}
@media (min-width: 64em) {
  .c2-sp-etapy { padding: calc(96px + 96 * var(--ks)) var(--px) calc(88px + 88 * var(--ks)); }
  .c2-sp-etapy__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
    padding-bottom: calc(56px + 56 * var(--ks));
  }
  .c2-sp-etapy__title { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 14px; }
  .c2-sp-etapy__intro { grid-column: 8 / 13; margin: 0; font-size: calc(1.0625rem + 17 * var(--kt)); }
  .c2-sp-etapy__list { margin-top: 0; display: grid; grid-template-columns: repeat(var(--etapy-cols, 3), minmax(0, 1fr)); gap: calc(20px + 20 * var(--ks)); }
  .c2-sp-etap { padding: calc(26px + 26 * var(--ks)) calc(28px + 28 * var(--ks)) calc(30px + 30 * var(--ks)); }
  .c2-sp-etap__lab { font-size: .75rem; }
  .c2-sp-etap__lab + .c2-sp-etap__t { margin-top: 10px; }
  .c2-sp-etap__t { font-size: calc(clamp(1.5rem, calc(1.5rem + (100cqi - 64rem) * 4 / 416), 1.75rem) + 28 * var(--kh)); line-height: 1.15; letter-spacing: -.005em; }
  .c2-sp-etap__d { margin-top: 12px; max-width: calc(26.25rem + 420 * var(--kt)); font-size: calc(1.0625rem + 17 * var(--kt)); line-height: 1.6; }
  .c2-sp-etap__sub { margin-top: 16px; padding-top: 14px; max-width: calc(36.25rem + 580 * var(--kt)); font-size: calc(1rem + 16 * var(--kt)); }
}
@media (min-width: 80em) { .c2-sp-etapy__list { gap: calc(24px + 24 * var(--ks)); } }

/* pas odesłania (04: „Prawo karne skarbowe →”) */
.c2-sp-odeslanie { margin-top: 28px; padding-top: 18px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--c-ink); }
.c2-sp-odeslanie__thumb { display: none; }
.c2-sp-odeslanie__text { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-body); }
.c2 .c2-sp-odeslanie__link, .c2 .c2-sp-odeslanie__link:hover { font-size: 1rem; }
@media (min-width: 64em) {
  .c2-sp-odeslanie {
    margin-top: calc(56px + 56 * var(--ks));
    padding-top: 24px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: center;
  }
  .c2-sp-odeslanie__thumb { position: relative; display: block; width: 88px; height: 66px; overflow: hidden; border-radius: 0 14px 0 0; }
  .c2-sp-odeslanie__thumb picture { display: contents; }
  .c2 .c2-sp-odeslanie__thumb img { position: absolute; left: 0; top: calc((66px - 125.4px) * .55); width: 100%; height: 125.4px; object-fit: cover; object-position: 60% 0; }   /* 190% / 60% 55% (obraz 4:3) */
  .c2-sp-odeslanie__text { max-width: calc(42.5rem + 680 * var(--kt)); font-size: calc(1.0625rem + 17 * var(--kt)); }
  .c2 .c2-sp-odeslanie__link, .c2 .c2-sp-odeslanie__link:hover { align-self: center; white-space: nowrap; font-size: 1.0625rem; }
}

/* ===================================================================== 03 PRZERYWNIK (akwarela + hasło, „Zobacz zakres pomocy ↓”)
   Warstwa obrazu: kadr strony w spec-<slug>.css (--pas-*). Telefon: obraz w górnej części, hasło przy dolnej krawędzi. */
.c2-sp-pas { position: relative; overflow: hidden; height: var(--pas-h-m); background: var(--c-dark); }
.c2-sp-pas__img {
  position: absolute;
  inset: 0 0 calc(var(--pas-h-m) - var(--pas-ih-m)) 0;
  overflow: hidden;
  filter: brightness(.9) saturate(.95);
  pointer-events: none;
  -webkit-mask-image: var(--pas-mask-m);
  -webkit-mask-composite: source-in;
  mask-image: var(--pas-mask-m);
  mask-composite: intersect;
}
.c2-sp-pas__img picture { display: contents; }
.c2 .c2-sp-pas__img img { position: absolute; max-width: none; }
.c2-sp-pas__in {
  position: relative;
  height: 100%;
  padding: 0 20px var(--pas-pb-m, 22px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
}
.c2-sp-pas__haslo {
  font: 500 1.625rem/1.18 var(--f-serif);
  font-size: clamp(1.625rem, calc(1.625rem + (100cqi - 360px) * .1), 1.875rem);
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.c2-sp-pas__haslo span { display: block; }
.c2 .c2-sp-pas__link {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(230, 238, 235, .5);
  font: 600 .9375rem var(--f-sans);
  color: var(--c-mint);
  text-decoration: none;
}
@media (hover: hover) { .c2 .c2-sp-pas__link:hover { color: #FFFFFF; } }
.c2 .c2-sp-pas__link:focus-visible { outline-color: var(--c-on-hero); }
@media (min-width: 64em) {
  .c2-sp-pas { height: 320px; }
  .c2-sp-pas__img {
    inset: 0 0 0 var(--pas-l, 32%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .22) 9%, rgba(0, 0, 0, .62) 19%, #000 31%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0, #000 20%, #000 80%, rgba(0, 0, 0, .5) 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .22) 9%, rgba(0, 0, 0, .62) 19%, #000 31%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0, #000 20%, #000 80%, rgba(0, 0, 0, .5) 100%);
  }
  .c2-sp-pas__in { padding: 0 var(--px); justify-content: center; gap: 18px; }
  .c2-sp-pas__haslo { font-size: 2.5rem; }
}
@media (min-width: 80em) {
  .c2-sp-pas { height: 360px; }
  .c2-sp-pas__haslo { font-size: 2.875rem; }
}

/* ===================================================================== 03 ZAKRES POMOCY */
.c2-sp-zakres { scroll-margin-top: 0; padding: 52px var(--sp-mpx) 48px; display: flex; flex-direction: column; background: var(--c-surface); }
.c2-sp-zakres__intro { margin-top: 12px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp-zakres__grp { margin-top: 28px; display: flex; flex-direction: column; }
.c2-sp-zakres__gh { padding-bottom: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; border-bottom: 2px solid var(--c-ink); }
.c2-sp-zakres__gt { font: 500 1.375rem/1.2 var(--f-serif); color: var(--c-ink); }
.c2-sp-zakres__gs { font: 400 .875rem var(--f-sans); color: var(--c-muted); }
.c2-sp-zakres__grp li { padding: 13px 0; border-bottom: 1px solid var(--c-line); font: 500 1rem/1.45 var(--f-sans); color: var(--c-ink); }
@media (min-width: 64em) {
  .c2-sp-zakres {
    padding: calc(104px + 104 * var(--ks)) var(--px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .c2-sp-zakres__head { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 16px; padding-right: 24px; }
  .c2-sp-zakres__intro { margin-top: 6px; font-size: calc(1.0625rem + 17 * var(--kt)); }
  .c2-sp-zakres__cols { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .c2-sp-zakres__grp { margin-top: 0; }
  .c2-sp-zakres__gh { padding-bottom: 16px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
  .c2-sp-zakres__gt { font-size: calc(clamp(1.4375rem, calc(1.4375rem + (100cqi - 64rem) * 3 / 416), 1.625rem) + 26 * var(--kh)); line-height: 1.15; }
  .c2-sp-zakres__gs { font-size: calc(.9375rem + 15 * var(--kt)); }
  .c2-sp-zakres__grp li { padding: 18px 0; font-size: calc(1.125rem + 18 * var(--kt)); }
}
@media (min-width: 80em) { .c2-sp-zakres__cols { column-gap: calc(48px + 48 * var(--ks)); } }

/* ===================================================================== 04 WSPÓŁPRACA (kroki, CTA, dokumenty, konsultacja 450 zł) */
.c2-sp-start { padding: 52px var(--sp-mpx) 48px; display: flex; flex-direction: column; background: var(--c-dark); color: var(--c-on-dark); }
.c2-sp-start__main { display: flex; flex-direction: column; }
.c2-sp-start .c2-sp-label { color: var(--c-on-dark-meta); }
.c2-sp-start .c2-sp-h2 { color: var(--c-on-dark); }
.c2-sp-steps { margin-top: 24px; border-top: 1px solid var(--c-dark-line); }
.c2-sp-steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0 18px; border-bottom: 1px solid var(--c-dark-line); }
.c2-sp-steps__n { font: 500 1.1875rem/1.35 var(--f-serif); color: var(--c-dark-num); }
.c2-sp-steps__b { display: flex; flex-direction: column; gap: 5px; }
.c2-sp-steps__t { font: 600 1.125rem/1.3 var(--f-sans); color: var(--c-on-dark); }
.c2-sp-steps__d { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-on-dark-body); }
.c2-sp-start__cta { margin-top: 24px; display: flex; flex-direction: column; gap: 2px; }
.c2-sp-start__side { display: contents; }
.c2-sp-docs { margin-top: 24px; padding: 20px 18px 18px; background: var(--c-mint); color: var(--c-dark); border-radius: 0 18px 0 0; }
.c2-sp-docs__h { font: 500 1.3125rem/1.2 var(--f-serif); color: var(--c-dark); }
.c2-sp-docs__i { margin-top: 8px; font: 400 .9375rem/1.5 var(--f-sans); color: var(--c-body); }
.c2-sp-docs ul { margin-top: 12px; border-top: 1px solid #B9C7C3; }
.c2-sp-docs li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid #C9D5D1; font: 400 .9375rem/1.5 var(--f-sans); color: var(--c-body); }
.c2-sp-docs li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--c-petrol); transform: translateY(-2px); }
.c2-sp-docs__n { margin-top: 12px; font: 500 .875rem/1.5 var(--f-sans); color: var(--c-petrol); }
.c2-sp-cena-wrap { margin-top: 20px; }
.c2-sp-cena { padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 8px; background: #1B3436; color: var(--c-on-dark); border-radius: 0 32px 0 0; }
.c2-sp-cena__lab { font: 600 .75rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-dark-num); }
.c2-sp-cena__pv { margin: 2px 0 6px; font: 500 1.1875rem/1.4 var(--f-serif); color: #FFFFFF; }
.c2-sp-cena__kw { font: 500 2.5rem/1.05 var(--f-serif); color: #FFFFFF; }
.c2-sp-cena__pz { margin-top: 4px; font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-on-dark-body); }
.c2-sp-cena__pz2 { font: 400 .875rem/1.55 var(--f-sans); color: var(--c-on-dark-meta); }
.c2 .c2-sp-cena__link {
  align-self: flex-start;
  margin-top: 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 600 1rem var(--f-sans);
  color: var(--c-on-hero);
  text-underline-offset: 5px;
}
.c2 .c2-sp-cena__link:focus-visible { outline-color: var(--c-on-hero); }
@media (min-width: 64em) {
  .c2-sp-start {
    padding: calc(104px + 104 * var(--ks)) var(--px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .c2-sp-start__main { grid-column: 1 / 8; padding-right: calc(32px + 32 * var(--ks)); }
  .c2-sp-start .c2-sp-h2 { margin-top: 14px; }
  .c2-sp-steps { margin-top: calc(40px + 40 * var(--ks)); }
  .c2-sp-steps > li { grid-template-columns: 64px minmax(0, 1fr); padding: 22px 0 24px; }
  .c2-sp-steps__n { font-size: 1.375rem; line-height: 1.3; }
  .c2-sp-steps__b { gap: 6px; }
  .c2-sp-steps__t { font-size: calc(1.3125rem + 21 * var(--kt)); }
  .c2-sp-steps__d { max-width: calc(35rem + 560 * var(--kt)); font-size: calc(1.0625rem + 17 * var(--kt)); line-height: 1.6; }
  .c2-sp-start__cta { margin-top: calc(36px + 36 * var(--ks)); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
  .c2-sp-start__side { grid-column: 8 / 13; margin-top: calc(110px + 110 * var(--ks)); display: flex; flex-direction: column; gap: 20px; }
  .c2-sp-docs { margin-top: 0; padding: calc(32px + 32 * var(--ks)) calc(32px + 32 * var(--ks)) calc(28px + 28 * var(--ks)); border-radius: 0 24px 0 0; }
  .c2-sp-docs__h { font-size: calc(1.5rem + 24 * var(--kh)); }
  .c2-sp-docs__i { margin-top: 10px; font-size: calc(1rem + 16 * var(--kt)); }
  .c2-sp-docs ul { margin-top: 16px; }
  .c2-sp-docs li { padding: 11px 0; font-size: calc(1rem + 16 * var(--kt)); }
  .c2-sp-docs__n { margin-top: 16px; font-size: calc(.9375rem + 15 * var(--kt)); }
  .c2-sp-cena-wrap { display: contents; }
  .c2-sp-cena { padding: 28px 30px 18px; }
}

/* ===================================================================== 07 PYTANIA (04, 05) — akordeon (akordeon.js)
   Kilka odpowiedzi może być otwartych naraz (jak w prototypie); na start pytanie 01 otwarte od 768 px, poniżej
   wszystkie zwinięte. Bez JS wszystkie odpowiedzi są widoczne (stan zamknięty tylko pod .c2-js). Karta pytania
   (tło, linia, R1, cienie, akcent otwartej odpowiedzi): Głębia [data-c2-faq], Stage 147. Ilustracja: kadr R1
   z cienką linią i cieniem opakowania (.c2-kadr) zamiast wcześniejszej winiety. */
.c2-sp-faq { padding: 52px var(--sp-mpx); display: flex; flex-direction: column; background: var(--c-bg); }
.c2-sp-faq__kadr { margin-top: 20px; width: min(100%, 560px); }
.c2-sp-faq__ill { overflow: hidden; border-radius: 0 24px 0 0; background: var(--c-surface); }
.c2-sp-faq__ill picture { display: contents; }
.c2 .c2-sp-faq__ill img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.c2-sp-faq__kadr--d { display: none; }
.c2-sp-faq__list { margin-top: 24px; display: flex; flex-direction: column; gap: var(--c2-card-gap); }
.c2-sp-faq__item { --fx: 12px; display: flex; flex-direction: column; }
.c2-sp-faq__h { font: inherit; }
.c2 .c2-sp-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: var(--f-sans);
  transition: color 180ms ease, padding 320ms var(--ease);
}
@media (hover: hover) { .c2 .c2-sp-faq__btn:hover { color: var(--c-petrol); } }
.c2-sp-faq__num { padding-top: 1px; font: 500 1.0625rem/1.45 var(--f-serif); color: var(--c-petrol); }
.c2-sp-faq__q { padding-top: 1px; font: 600 1.125rem/1.4 var(--f-sans); }
.c2-sp-faq__icon { width: 36px; height: 44px; display: flex; align-items: center; justify-content: center; }
.c2-sp-faq__icon > span { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-petrol); transition: background-color 240ms ease; }
.c2-sp-faq__icon > span::before, .c2-sp-faq__icon > span::after { content: ""; position: absolute; background: #FFFFFF; }
.c2-sp-faq__icon > span::before { left: 11px; top: 17.25px; width: 14px; height: 1.5px; }
.c2-sp-faq__icon > span::after { left: 17.25px; top: 11px; width: 1.5px; height: 14px; transform: scaleY(0); transition: transform 320ms var(--ease); }
.c2-sp-faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease); }
.c2-sp-faq__clip { overflow: hidden; min-height: 0; }
.c2-sp-faq__answer {
  padding: 0 var(--fx) 22px calc(38px + var(--fx));
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 240ms ease 80ms, visibility 0s linear 0ms;
}
.c2-sp-faq__answer p { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
.c2-js .c2-sp-faq__item:not([data-open]) .c2-sp-faq__q { font-weight: 500; }
.c2-js .c2-sp-faq__item:not([data-open]) .c2-sp-faq__icon > span { background: var(--c-mint); }
.c2-js .c2-sp-faq__item:not([data-open]) .c2-sp-faq__icon > span::before,
.c2-js .c2-sp-faq__item:not([data-open]) .c2-sp-faq__icon > span::after { background: var(--c-petrol); }
.c2-js .c2-sp-faq__item:not([data-open]) .c2-sp-faq__icon > span::after { transform: scaleY(1); }
.c2-js .c2-sp-faq__item:not([data-open]) .c2-sp-faq__panel { grid-template-rows: 0fr; }
.c2-js .c2-sp-faq__item:not([data-open]) .c2-sp-faq__answer { opacity: 0; visibility: hidden; transition: opacity 240ms ease 0ms, visibility 0s linear 320ms; }
@media (min-width: 64em) {
  .c2-sp-faq {
    padding: calc(104px + 104 * var(--ks)) var(--px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  .c2-sp-faq__left {
    --fqh: calc(clamp(1.875rem, calc(1.875rem + (100cqi - 64rem) * 16 / 416), 2.875rem) + 46 * var(--kh));
    margin-top: -16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .c2-sp-faq .c2-sp-h2 { font-size: var(--fqh); }
  .c2-sp-faq__kadr--m { display: none; }
  .c2-sp-faq__kadr--d { display: block; }
  .c2-sp-faq__kadr {
    flex: none;
    margin-top: min(calc(var(--fqh) * 1.42), 68px);
    width: min(100%, 540px, max(240px, calc(468px + (100cqi - 1440px) * .2)));
  }
  .c2-sp-faq__ill { border-radius: 0 calc(48px + 48 * var(--ks)) 0 0; }
  .c2-sp-faq__list { margin-top: 0; }
  .c2-sp-faq__item { --fx: 20px; }
  .c2-sp-faq__icon { width: 44px; }
  .c2 .c2-sp-faq__btn { min-height: 72px; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 16px; align-items: center; }
  .c2-sp-faq__num { padding-top: 0; font-size: 1.1875rem; line-height: normal; }
  .c2-sp-faq__q { padding-top: 0; font-size: calc(1.3125rem + 21 * var(--kt)); }
  .c2-sp-faq__answer { padding: 0 var(--fx) 28px calc(60px + var(--fx)); gap: 12px; }
  .c2-sp-faq__answer p { max-width: calc(40rem + 640 * var(--kt)); font-size: calc(1.0625rem + 17 * var(--kt)); }
}

/* ===================================================================== 08 POWIĄZANE SPECJALIZACJE (04, 05) */
.c2-sp-rel { padding: 44px var(--sp-mpx) 40px; background: var(--c-surface); }
.c2-sp-rel__head { padding-bottom: 14px; border-bottom: 1px solid var(--c-ink); }
.c2-sp-rel__h2 { font: 500 1.5rem/1.15 var(--f-serif); color: var(--c-ink); }
.c2 .c2-sp-rel__all--d { display: none; }
.c2-sp-rel li { border-bottom: 1px solid var(--c-line); }
.c2 .c2-sp-rel__card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 32px;
  column-gap: 14px;
  align-items: center;
  padding: 16px 0;
  color: var(--c-ink);
  text-decoration: none;
}
@media (hover: hover) { .c2 .c2-sp-rel__card:hover { color: var(--c-petrol); } }
.c2-sp-rel__thumb { position: relative; height: 57px; overflow: hidden; border-radius: 0 12px 0 0; }
.c2-sp-rel__thumb picture { display: contents; }
/* tło prototypu: url() X% Y% / S% auto — ramka obrazu = szerokość miniatury, wysokość = S · szerokość · proporcja */
.c2-sp-rel__thumb { --tw: 76px; --th: 57px; --dh: calc(var(--tw) * var(--rel-s, 1.5) * var(--rel-ar, 1)); }
.c2 .c2-sp-rel__thumb img { position: absolute; left: 0; top: calc((var(--th) - var(--dh)) * var(--rel-y, .5)); width: 100%; height: var(--dh); object-fit: cover; object-position: var(--rel-x, 50%) 0; }
.c2-sp-rel__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c2-sp-rel__t { font: 500 1.1875rem/1.2 var(--f-serif); text-wrap: balance; }
.c2-sp-rel__d { display: none; }
.c2-sp-rel__arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: 0 8px 0 0;
  color: var(--c-petrol);
  font: 400 1rem var(--f-sans);
}
.c2 .c2-sp-rel__all--m { margin-top: 6px; }
@media (min-width: 64em) {
  .c2-sp-rel { padding: calc(88px + 88 * var(--ks)) var(--px) calc(96px + 96 * var(--ks)); }
  .c2-sp-rel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; padding-bottom: 20px; }
  .c2-sp-rel__h2 { font-size: calc(clamp(1.625rem, calc(1.625rem + (100cqi - 64rem) * 6 / 416), 2rem) + 32 * var(--kh)); line-height: 1.1; }
  .c2-sp-rel__all--d { display: inline-flex; }
  .c2 .c2-sp-rel__all--d, .c2 .c2-sp-rel__all--d:hover { align-self: auto; display: flex; font-size: 1rem; }
  .c2 .c2-sp-rel__all--m { display: none; }
  .c2-sp-rel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .c2 .c2-sp-rel__card { grid-template-columns: 128px minmax(0, 1fr) 44px; column-gap: 24px; padding: 24px 0; }
  .c2-sp-rel__thumb { --tw: 128px; --th: 96px; height: 96px; border-radius: 0 16px 0 0; }
  .c2-sp-rel__txt { gap: 6px; min-width: auto; }
  .c2-sp-rel__t { font-size: calc(clamp(1.3125rem, calc(1.3125rem + (100cqi - 64rem) * 3 / 416), 1.5rem) + 24 * var(--kh)); }
  .c2-sp-rel__d { display: block; font: 400 calc(1rem + 16 * var(--kt))/1.55 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
  .c2-sp-rel__arrow { width: 44px; height: 44px; border-radius: 0 10px 0 0; font-size: 1.125rem; }
}
@media (min-width: 80em) {
  .c2-sp-rel ul { column-gap: calc(48px + 48 * var(--ks)); }
  .c2 .c2-sp-rel__card { grid-template-columns: 168px minmax(0, 1fr) 44px; }
  .c2-sp-rel__thumb { --tw: 168px; --th: 126px; height: 126px; }
}

/* ===================================================================== 09 KONTAKT (CTA „Porozmawiajmy o Twojej sprawie”)
   Komputer 5/6: tekst | ilustracja biurka (3:2); telefon: nagłówek, ilustracja, podpis, tekst, CTA. */
.c2-sp-cta { padding: 52px var(--sp-mpx); background: var(--c-bg); }
.c2-sp-cta__in { display: flex; flex-direction: column; gap: 22px; }
.c2-sp-cta__txt { display: contents; }
.c2-sp-cta__media { order: 1; }   /* opakowanie kadru (cień, glebia.css) — na telefonie między nagłówkiem a podpisem */
.c2-sp-cta__head { display: flex; flex-direction: column; gap: 14px; }
.c2-sp-cta .c2-sp-label { letter-spacing: .12em; font-size: .8125rem; }
.c2-sp-cta__h2 { font: 500 1.75rem/1.08 var(--f-serif); font-size: clamp(1.625rem, calc(1.625rem + (100cqi - 320px) * .028), 1.875rem); letter-spacing: -.01em; color: var(--c-ink); }
.c2-sp-cta__img { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0 28px 0 0; background: var(--c-bg); }
.c2-sp-cta__img picture { display: contents; }
.c2 .c2-sp-cta__img img { width: 100%; height: 100%; object-fit: cover; }
.c2-sp-cta__head { order: 0; }
.c2-sp-cta__who, .c2-sp-cta__p, .c2-sp-cta__act { order: 2; }
.c2-sp-cta__who { padding-top: 14px; border-top: 1px solid var(--c-line-light); font: 600 1rem var(--f-sans); color: var(--c-ink); }
.c2-sp-cta__who span { font-weight: 400; color: var(--c-muted); }
.c2-sp-cta__p { display: flex; flex-direction: column; gap: 10px; }
.c2-sp-cta__p p { font: 400 1.125rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp-cta__act { display: flex; flex-direction: column; gap: 12px; }
.c2-sp-cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.c2 .c2-sp-cta__btn {
  width: 100%;
  min-height: 54px;
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-petrol);
  color: #FFFFFF;
  font: 600 1.0625rem var(--f-sans);
  text-decoration: none;
  border-radius: 0 12px 0 0;
}
@media (hover: hover) { .c2 .c2-sp-cta__btn:hover { background: var(--c-petrol-hover); color: #FFFFFF; } }
.c2 .c2-sp-cta__btn:focus-visible { outline-color: var(--c-ink); }
.c2 .c2-sp-cta__tel { min-height: 44px; display: inline-flex; flex-wrap: wrap; align-items: center; font: 500 1rem var(--f-sans); color: var(--c-ink); text-decoration: none; }
.c2-sp-cta__tel svg { flex: none; width: 21px; height: 21px; margin: 0 7px 0 4px; }
.c2-sp-cta__tel b { font-weight: 600; }
.c2-sp-cta__note { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-muted); }
.c2-sp-cta__note a { color: var(--c-petrol); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 64em) {
  .c2-sp-cta { padding: calc(104px + 104 * var(--ks)) var(--px); }
  .c2-sp-cta__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(64px + 64 * var(--ks)); align-items: center; }
  .c2-sp-cta__txt { display: flex; flex-direction: column; gap: 24px; max-width: 580px; }
  .c2-sp-cta__media { display: flex; justify-content: flex-end; }
  .c2-sp-cta__head { gap: 18px; }
  .c2-sp-cta__h2 { font-size: calc(clamp(2rem, calc(2rem + (100cqi - 64rem) * 8 / 416), 2.5rem) + 40 * var(--kh)); }
  .c2-sp-cta__img { max-width: 760px; border-radius: 0 64px 0 0; }
  .c2-sp-cta__act { gap: 14px; padding-top: 4px; }
  .c2 .c2-sp-cta__btn { width: auto; min-height: 58px; }
}

/* Karty „Powiązane”: tytuł łamie się jak w prototypie — wyraz dłuższy niż kolumna może wystawać w 14-pikselowy
   odstęp przed strzałką (np. „i gospodarcze” 122 px w kolumnie 120 px przy 320 px, „przedsiębiorców” 147 px w 140 px
   przy 340 px). Dopiero gdy kolumna jest za wąska względem tekstu (telefon węższy niż ok. 336 px albo powiększony
   tekst) i wyraz nachodziłby na przycisk (w prototypie nachodzi), dzieli się w miejscu miękkiego dywizu z budowania
   (typography.js: dzielenie) — z łącznikiem, nie w przypadkowym miejscu (korekty końcowe Etapu B).
   Kontenerem zapytań jest sam tytuł (em = rozmiar tytułu, więc próg rośnie z powiększeniem tekstu); jednostki cqi
   w rozmiarze tytułu nadal odnoszą się do sekcji (element nie jest własnym kontenerem). */
.c2-sp-rel__t { container-type: inline-size; }
.c2-sp-rel__t .c2-rel__w { overflow-wrap: normal; hyphens: none; }
@container (max-width: 6.8em) { .c2-sp-rel__t .c2-rel__w { hyphens: manual; } }
/* zabezpieczenie przy powiększonym tekście (fonty ×2, tekst 200%, zoom): kolumna węższa niż 5,6em — łamanie w dowolnym
   miejscu, żeby nic nie wyszło poza ekran; przy zwykłym rozmiarze od 320 px nie występuje */
@container (max-width: 5.6em) { .c2-sp-rel__t .c2-rel__w { overflow-wrap: break-word; } }