/* ============================================================
   NSM LEGAL & TAX — design system v1
   Kierunek: „butikowa firma doradcza prawno-podatkowa"
   Jasna redakcyjna baza + ciemne akty + złoto jako jedyny akcent
   ============================================================ */

/* ---------- Tokeny ---------- */
:root {
  /* paleta — jasna baza */
  --bg:        #F7F5F0;               /* papier: ciepła złamana biel */
  --bg-deep:   #EFECE4;               /* panel: głębszy papier */
  --surface:   #FCFBF8;               /* karty na papierze */
  --ink:       #1C1B18;               /* ciepła czerń — tekst i ciemne akty */
  --ink-soft:  #6E6A61;               /* tekst drugorzędny */
  --hairline:  rgba(28, 27, 24, .16); /* linie 1px */

  /* złoto — jedyny akcent */
  --gold:       #B08D42;
  --gold-light: #CFAE63;
  --gold-text:  #85682B;  /* drobny złoty tekst na papierze — AA 4.8:1 */
  --gold-em:    #A5823A;  /* wielka złota kursywa na papierze — 3.4:1 (duży tekst) */
  --gold-faint: rgba(176, 141, 66, .12);
  --gold-line:  rgba(176, 141, 66, .38);

  /* ciemny akt */
  --d-bg:       #1C1B18;
  --d-ink:      #F7F5F0;
  --d-soft:     rgba(247, 245, 240, .74);
  --d-hairline: rgba(247, 245, 240, .16);

  /* typografia */
  --font-display: "Jost", "Instrument Sans", "Segoe UI", system-ui, sans-serif; /* decyzja: wyłącznie sansy */
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --h1: clamp(3rem, 4.7vw, 4rem);
  --h2: clamp(2.2rem, 4vw, 3.25rem);
  --h3: clamp(1.25rem, 1.6vw, 1.45rem);
  --body: 1.0625rem;
  --small: .9rem;
  --kicker-size: .72rem;

  /* rytm */
  --container: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(5rem, 9vw, 8.5rem);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 250ms;
  --t-slow: 550ms;

  /* sygnatura marki: ścięty prawy-dolny róg */
  --radius-sig: 0 0 48px 0;
}

/* ---------- Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Typografia ---------- */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h1, h2 { overflow-wrap: break-word; }

/* reguła firmowa: w każdym H1/H2 jedna fraza złotą kursywą (Jost 300 italic) */
h1 em, h2 em, .display em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-em);
}

h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--h3);
  line-height: 1.3;
}

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34em;
}

.muted { color: var(--ink-soft); }
.small { font-size: var(--small); }

/* kicker — rytuał otwarcia sekcji: linia + rozstrzelony wersalik */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: var(--kicker-size);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
}

/* wielki numer typograficzny */
.num {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec); }
/* jasna po jasnej: paddingi się nie sumują — odstęp między sekcjami = 1 moduł rytmu */
.section:not(.act) + .section:not(.act) { padding-top: 0; }

.section-head { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.section-head .kicker { margin-bottom: 1.1rem; }
.section-head p { margin-top: 1.25rem; }

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* ciemny akt */
.act {
  background: var(--d-bg);
  color: var(--d-ink);
}
.act .lead, .act .muted { color: var(--d-soft); }
.act ::selection { background: var(--gold); color: var(--d-bg); }
.act .kicker { color: var(--gold-light); }
.act h1 em, .act h2 em, .act .display em { color: var(--gold-light); }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.75rem;
  border-radius: 2px;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--dark {
  background: var(--ink);
  color: var(--d-ink);
}
.btn--dark:hover { background: var(--gold); color: var(--ink); }

.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold-text); }

/* warianty na ciemnym akcie */
.btn--gold {
  background: var(--gold);
  color: var(--ink);
}
.btn--gold:hover { background: var(--gold-light); }

.btn--ghost {
  border-color: rgba(247, 245, 240, .38);
  color: var(--d-ink);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); }

/* link tekstowy ze strzałką */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--small);
  color: var(--gold-text);
  transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.textlink:hover { gap: .85rem; color: var(--ink); }

/* strzałka SVG w komponentach */
.arrow { flex: none; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background-color var(--t-fast) var(--ease),
              padding var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.nav.is-scrolled {
  background: rgba(247, 245, 240, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-block: .7rem;
  box-shadow: 0 1px 0 var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
}
.nav__menu a {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: .35rem;
  position: relative;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-fast) var(--ease);
}
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__aside {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.nav__phone {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.nav__phone:hover { color: var(--gold); }
.nav .btn { padding: .68rem 1.3rem; font-size: .85rem; }

/* wordmark */
.brand { display: inline-block; line-height: 1; }
.brand__nsm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: .08em;
}
.brand__nsm i { font-style: italic; font-weight: 400; color: var(--gold); }
.brand__sub {
  display: block;
  margin-top: .3rem;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.act .brand__sub, .nav--dark .brand__sub { color: var(--d-soft); }

/* logo kancelarii (PNG) — zastępuje wordmark na żywych stronach; .brand__nsm/__sub zostają dla archiwów.
   W navbarze dwa warianty: jasny pokazuje się tylko na ciemnym menu mobilnym. Stopka ma od razu jasny plik. */
.brand__logo {
  display: block;
  width: auto;
  height: 4rem;
  transition: height var(--t-fast) var(--ease);
}
.nav.is-scrolled .brand__logo { height: 3.25rem; }
.brand__logo--light,
.menu-open .nav .brand__logo { display: none; }
.menu-open .nav .brand__logo--light { display: block; }
.footer .brand__logo { height: 8rem; }

/* burger (mobile) */
.nav__burger { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(90vh, 58rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: 2rem;
  padding-top: 7.5rem;
}
.hero__content { padding-bottom: clamp(3rem, 6vh, 5rem); }
.hero__content .kicker { margin-bottom: 1.5rem; }
.hero__content h1 { max-width: 12.5em; }
.hero__content .lead { margin-top: 1.75rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
.hero__creds {
  margin-top: 3.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2.5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero__figure {
  position: relative;
  align-self: end;
  margin: 0;
}
.hero__figure img {
  width: 100%;
  max-height: min(76vh, 46rem);
  object-fit: contain;
  object-position: bottom center;
  /* obróbka tonalna: róż -> ciepły monochrom, tło wtapia się w papier */
  filter: grayscale(1) sepia(.22) contrast(1.02) brightness(1.04);
  mix-blend-mode: multiply;
}

/* wskaźnik przewijania */
.hero__scroll {
  position: absolute;
  left: var(--pad-x);
  bottom: 0;
  display: none;
}

/* ---------- Pas zaufania ---------- */
.trust {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(2rem, 3.5vw, 3rem);
}
.trust__inner {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.trust__counter {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex: none;
}
.trust__number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--ink);
}
.trust__number i { font-style: italic; color: var(--gold-em); }
.trust__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 11em;
  line-height: 1.5;
}
.trust__media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem 2.25rem;
  flex-wrap: wrap;
  border-left: 1px solid var(--hairline);
  padding-left: clamp(2rem, 5vw, 5rem);
}
.trust__media-label {
  flex-basis: 100%;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.trust__logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.trust__logo:hover { color: var(--ink); }

/* ---------- Usługi: lista-indeks ---------- */
.index-list { border-bottom: 1px solid var(--hairline); }
.index-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 2.5rem;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
}
.index-row__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--gold-text);
}
.index-row__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.15;
  transition: color var(--t-fast) var(--ease);
}
.index-row__sub {
  display: block;
  margin-top: .5rem;
  color: var(--ink-soft);
  font-size: var(--small);
  max-width: 40em;
}
.index-row__arrow {
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.index-row:hover .index-row__title { color: var(--gold-em); }
.index-row:hover .index-row__arrow { transform: translateX(8px); color: var(--gold-em); }

/* ---------- Karty ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 2rem 1.75rem 2.25rem;
  transition: transform var(--t-slow) var(--ease), border-color var(--t-fast) var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--gold-line); }
.card:hover::before { transform: scaleX(1); }
.card__marker {
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.4rem;
}
.card__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--gold-text);
  margin-bottom: 1.3rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--hairline);
}
.card h3 { margin-bottom: .7rem; }
.card p { font-size: var(--small); color: var(--ink-soft); }

/* karta artykułu */
.post-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sig);
  padding: 2.1rem 1.9rem 2.3rem;
  transition: transform var(--t-slow) var(--ease), border-color var(--t-fast) var(--ease);
}
.post-card:hover { transform: translateY(-5px); border-color: var(--gold-line); }
.post-card__meta {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.post-card h3 { font-size: 1.35rem; }
.post-card p { font-size: var(--small); color: var(--ink-soft); flex: 1; }

/* ---------- Formularz ---------- */
.field { display: block; }
.field__label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .55rem;
}
.field__input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: .9rem 1.1rem;
  transition: border-color var(--t-fast) var(--ease);
}
.field__input::placeholder { color: var(--ink-soft); opacity: .7; }
.field__input:focus { outline: none; border-color: var(--gold); }
.act .field__label { color: var(--d-soft); }
.act .field__input {
  background: rgba(247, 245, 240, .05);
  border-color: var(--d-hairline);
  color: var(--d-ink);
}
.act .field__input:focus { border-color: var(--gold); }

/* ---------- O mnie (ciemny akt) ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.about__figure { position: relative; margin: 0; }
.about__figure::before {
  /* hairline-rama przesunięta — echo podwójnej ramki Przybylskiej */
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sig);
  pointer-events: none;
}
.about__figure img {
  width: 100%;
  border-radius: var(--radius-sig);
  filter: grayscale(1) sepia(.18) contrast(1.03) brightness(.96);
}
.about__content .kicker { margin-bottom: 1.25rem; }
.about__content h2 { max-width: 13em; }
.about__content .lead { margin-top: 1.5rem; }
.about__creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.cred {
  border-top: 1px solid var(--d-hairline);
  padding-top: 1.1rem;
}
.cred__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--gold-light);
}
.cred__label {
  margin-top: .35rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--d-soft);
}
.about__actions { margin-top: 2.75rem; }

/* ---------- Proces ---------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.steps::before {
  /* pozioma złota linia łącząca numery */
  content: "";
  position: absolute;
  top: .75rem;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), var(--gold-faint) 60%, transparent);
}
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  content: "";
  position: absolute;
  top: .45rem;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--bg);
}
.step__num {
  position: absolute;
  top: -1.2rem;
  left: 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.2rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--gold);
  opacity: .3;
  pointer-events: none;
}
.step h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.step p { font-size: var(--small); color: var(--ink-soft); }

/* ---------- Baza wiedzy ---------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* ---------- Pas CTA (ciemny) ---------- */
.cta-band { text-align: center; }
.cta-band .kicker { justify-content: center; }
.cta-band .kicker::after {
  content: "";
  width: 32px; height: 1px;
  background: var(--gold);
  opacity: .7;
}
.cta-band h2 { max-width: 15em; margin-inline: auto; }
.cta-band .lead { max-width: 36em; margin: 1.5rem auto 0; }
.cta-band__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.75rem;
}
.cta-band__phone {
  margin-top: 2.25rem;
  font-size: .9rem;
  color: var(--d-soft);
}
.cta-band__phone a {
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: .04em;
}
.cta-band__phone a:hover { color: var(--gold); }

/* ---------- Stopka ---------- */
.footer { border-top: 1px solid var(--d-hairline); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.footer__tagline {
  margin-top: 1.4rem;
  font-size: var(--small);
  color: var(--d-soft);
  max-width: 22em;
}
.footer h4 {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
}
.footer__col li { margin-bottom: .65rem; }
.footer__col a {
  font-size: var(--small);
  color: var(--d-soft);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.footer__col a:hover { color: var(--d-ink); padding-left: 4px; }
.footer__contact li {
  font-size: var(--small);
  color: var(--d-soft);
  margin-bottom: .65rem;
}
.footer__contact a { color: var(--d-ink); font-weight: 500; }
.footer__contact a:hover { color: var(--gold-light); }
.footer__bottom {
  border-top: 1px solid var(--d-hairline);
  padding-block: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: rgba(247, 245, 240, .55);
}

/* ---------- Responsywność ---------- */
@media (min-width: 641px) {
  .card h3 { min-height: 2.6em; } /* wspólna linia body copy przy 1-2-wierszowych tytułach */
}

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
  .steps::before { display: none; }
  .step::before { display: none; }
  .step { padding-top: 1.2rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav__menu, .nav__phone { display: none; }
  .nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: .5rem;
  }
  .nav__burger span {
    width: 22px; height: 1.5px;
    background: currentColor;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  }
  .hero { min-height: 0; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 6.5rem;
  }
  .hero__content { padding-bottom: 0; }
  .hero__figure { max-width: 26rem; margin-top: 1rem; }
  .trust__inner { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .trust__media { border-left: 0; padding-left: 0; justify-content: flex-start; }
  .about__grid { grid-template-columns: 1fr; }
  .about__figure { max-width: 24rem; }
  .posts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --h1: 2.5rem; --h2: 2.05rem; }
  h1 br, h2 br { display: none; } /* na wąskich ekranach łamanie naturalne */
  body { overflow-x: clip; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .index-row { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; padding-block: 1.9rem; }
  .index-row__num { font-size: 1.15rem; }
  .about__creds { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__creds { gap: .4rem 1.25rem; }
}

@media (max-width: 480px) {
  .nav .btn { display: none; } /* na wąskich ekranach zostaje brand + burger */
}

@media (max-width: 420px) {
  .hero__actions .btn, .cta-band__actions .btn, .section-head--split .btn,
  .about__actions .btn { width: 100%; justify-content: center; }
  /* 1 1 auto, nie 1: para, która się mieści, stoi obok siebie; za długa (np. „Umów
     rozmowę o formie opodatkowania") przechodzi pod siebie zamiast łamać się na 4 wiersze. */
  .hero__actions .btn { width: auto; flex: 1 1 auto; }
}

/* ============================================================
   Strona główna v1 (copy 2026-08) — nowe komponenty
   ============================================================ */

/* hero z długim H1 */
.hero--long h1 { font-size: clamp(2.4rem, 3.7vw, 3.4rem); max-width: 15em; }

/* poświadczenia: wariant jasny (domyślny) + ciemny */
.cred { border-top: 1px solid var(--hairline); }
.cred__num { color: var(--gold-em); }
.cred__label { color: var(--ink-soft); }
.act .cred { border-top-color: var(--d-hairline); }
.act .cred__num { color: var(--gold-light); }
.act .cred__label { color: var(--d-soft); }

/* znacznik treści do potwierdzenia (usunąć przed publikacją) */
.todo {
  background: var(--gold-faint);
  border-bottom: 1px dotted var(--gold);
  padding: 0 .2em;
  color: inherit;
}

/* pull-quote: wariant jasny (domyślny) + ciemny
   (jasny: --gold-text, bo cienka kursywa 300 w tym rozmiarze nie łapie się na „duży tekst") */
.pullquote {
  margin-top: 2.25rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--gold-text);
  max-width: 22em;
}
.act .pullquote { color: var(--gold-light); }

/* tekst bio: wariant jasny (domyślny, np. zespol.html) + ciemny (index.html) */
.about__text p + p { margin-top: 1.1rem; }
.about__text p { color: var(--ink-soft); }
.act .about__text p { color: var(--d-soft); }

/* ---------- Dwa końce sprawy ---------- */
.duo { border-top: 1px solid var(--hairline); }
.duo .section-head { max-width: 44em; }
.duo__bridge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.duo__bridge::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--gold-line);
}
.duo__end {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 2.25rem 2rem 2rem;
}
.duo__end--right { border-radius: var(--radius-sig); }
.duo__label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1rem;
}
.duo__end h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); margin-bottom: .7rem; }
.duo__end > p { font-size: var(--small); color: var(--ink-soft); margin-bottom: 1.6rem; max-width: 26em; }
.duo__knot {
  position: relative;
  width: 7.5rem; height: 7.5rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--bg);
  box-shadow: 0 0 0 10px var(--bg);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: 1.15rem; line-height: 1.2;
  color: var(--gold-em);
}

/* ---------- Oferta: 16 kart usług + podświetlanie sytuacji ----------
   Każda usługa to osobna karta; 16 kart = pełne rzędy przy 4, 2 i 1 kolumnie.
   Przyciski sytuacji (JS) NIE filtrują — przygaszają resztę, więc siatka się nie przestawia.
   Wyjątek: jedna kolumna (≤640px) — tam pasujące karty byłyby ekran niżej za przygaszonymi,
   więc reszta się chowa (w jednej kolumnie nie powstanie osamotniony kafel). Bez JS przyciski są ukryte i widać wszystkie karty. Karta po najechaniu = mały ciemny akt
   z rogiem-sygnaturą. Animacja wejścia (data-reveal) siedzi na <a>, a przygaszanie na <li>:
   inline opacity z GSAP na tym samym elemencie nadpisałaby przygaszanie. */
.svc-filters { margin-bottom: 1.5rem; }
.svc-filters .filter i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  margin-right: .35rem;
}
.svc-filters .filter:not(.is-active) i { color: var(--gold-text); }

.svc-hint {
  max-width: 46em;
  margin-bottom: 1.75rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--gold);
  animation: svc-fade var(--t-slow) var(--ease);
}
.svc-hint strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: .2rem;
}
.svc-hint span { color: var(--ink-soft); font-size: var(--small); }
@keyframes svc-fade { from { opacity: 0; transform: translateY(6px); } }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.svc-item { transition: opacity var(--t-fast) var(--ease); }
.svc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.25rem;
  height: 100%;
  min-height: 11.5rem;
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 0;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              border-radius var(--t-slow) var(--ease);
}
.svc-card__tag {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  transition: color var(--t-fast) var(--ease);
}
.svc-card__tag i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0;
}
.svc-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.svc-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.25;
  text-wrap: balance;
}
.svc-card .arrow {
  color: var(--gold);
  margin-bottom: .3rem;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.svc-card:hover, .svc-card:focus-visible {
  background: var(--ink);
  color: var(--d-ink);
  border-color: var(--ink);
  border-radius: var(--radius-sig);
}
.svc-card:hover .svc-card__tag, .svc-card:focus-visible .svc-card__tag,
.svc-card:hover .arrow, .svc-card:focus-visible .arrow { color: var(--gold-light); }
.svc-card:hover .arrow, .svc-card:focus-visible .arrow { transform: translateX(.4rem); }

/* podświetlenie sytuacji: siatka zostaje, nic nie znika i nic nie skacze */
.svc-grid.is-filtering .svc-item:not(.is-match) { opacity: .34; }
.svc-grid.is-filtering .svc-item:not(.is-match):hover,
.svc-grid.is-filtering .svc-item:not(.is-match):focus-within { opacity: 1; }
.svc-grid.is-filtering .is-match .svc-card { border-color: var(--gold); }

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .svc-card { min-height: 0; gap: 1.5rem; }
  .svc-grid.is-filtering .svc-item:not(.is-match) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card .arrow, .svc-item { transition: none; }
  .svc-hint { animation: none; }
}

/* ---------- Zespół: karty osób ---------- */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.person {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: transform var(--t-slow) var(--ease), border-color var(--t-fast) var(--ease);
}
.person:hover { transform: translateY(-5px); border-color: var(--gold-line); }
.person__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--hairline);
  filter: grayscale(1) sepia(.22) contrast(1.02) brightness(1.04);
}
.person__photo--placeholder {
  /* fallback bez zdjęcia: blok z numerem w języku systemu */
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 1rem 1.25rem;
  background: var(--bg-deep);
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: 4rem; line-height: 1;
  color: var(--gold-line);
  filter: none;
}
.person__body {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.5rem 1.5rem 1.75rem;
}
.person__name { font-size: 1.25rem; font-weight: 500; }
.person__role {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text);
}
.person__cred { font-size: .82rem; color: var(--ink-soft); }
.person__desc { margin-top: .6rem; font-size: var(--small); color: var(--ink-soft); }
@media (max-width: 1100px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .team { grid-template-columns: 1fr; } .person__photo { aspect-ratio: 1 / 1; } }

/* ---------- Pas konkretów pod krokami ---------- */
.facts {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.fact {
  padding: 1.5rem;
  border-left: 1px solid var(--hairline);
  font-size: var(--small);
  color: var(--ink-soft);
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact strong {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .45rem;
}

/* ---------- Media: siatka tytułów ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.media-grid > * {
  background: var(--bg);
  padding: 1.7rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.media-grid > *:hover { color: var(--ink); background: var(--surface); }
.media-grid > .media-grid__cta {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.media-grid > .media-grid__cta:hover { background: var(--gold-faint); color: var(--gold-text); }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq__aside { position: sticky; top: 7rem; }
.faq__aside .kicker { margin-bottom: 1.1rem; }
.faq__aside p { margin-top: 1.25rem; color: var(--ink-soft); max-width: 22em; }
.faq__aside .textlink { margin-top: 1.25rem; }
.faq__list { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.3;
  transition: color var(--t-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-em); }
.faq__icon {
  flex: none;
  width: 28px; height: 28px;
  margin-top: .1rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  position: relative;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 11px; height: 1px; }
.faq__icon::after { width: 1px; height: 11px; transition: transform var(--t-slow) var(--ease); }
.faq__item[open] .faq__icon { border-color: var(--gold); color: var(--gold-em); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__answer { padding: 0 3.5rem 1.6rem 0; color: var(--ink-soft); max-width: 40em; }

/* ---------- Kontakt (ciemny akt) ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact__intro .kicker { margin-bottom: 1.25rem; }
.contact__intro .lead { margin-top: 1.5rem; }
.contact__list { margin-top: 2.25rem; }
.contact__list li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--d-hairline);
  font-size: var(--small);
  color: var(--d-soft);
}
.contact__list li:last-child { border-bottom: 1px solid var(--d-hairline); }
.contact__list span {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-soft);
  padding-top: .2rem;
}
.contact__list a { color: var(--d-ink); font-weight: 500; }
.contact__list a:hover { color: var(--gold-light); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field--full { grid-column: 1 / -1; }
textarea.field__input { min-height: 9rem; resize: vertical; }
.check {
  display: flex; align-items: flex-start; gap: .8rem;
  font-size: .8rem; line-height: 1.5;
  color: var(--d-soft);
  cursor: pointer;
}
.check input { flex: none; margin-top: .25rem; width: 16px; height: 16px; accent-color: var(--gold); }
.check a {
  color: var(--d-ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.check a:hover { color: var(--gold-light); }
.form__actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: .5rem;
}
.form__note { font-size: .78rem; color: var(--d-soft); }

/* ---------- Menu mobilne (overlay) ---------- */
.nav__overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--d-bg); color: var(--d-ink);
  display: flex; flex-direction: column;
  padding: 7rem var(--pad-x) 3rem; /* od góry, pod pełnym paskiem — po rozwinięciu usług lista rośnie w dół i się przewija */
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.nav__overlay a {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  padding: .5rem 0;
  border-bottom: 1px solid var(--d-hairline);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.nav__overlay a:nth-child(1) { transition-delay: .05s; }
.nav__overlay a:nth-child(2) { transition-delay: .1s; }
.nav__overlay a:nth-child(3) { transition-delay: .15s; }
.nav__overlay a:nth-child(4) { transition-delay: .2s; }
.nav__overlay a:nth-child(5) { transition-delay: .25s; }
.nav__overlay a:nth-child(6) { transition-delay: .3s; }
.nav__overlay a:nth-child(7) { transition-delay: .35s; }
.nav__overlay a:nth-child(8) { transition-delay: .4s; }
.nav__overlay-contact { margin-top: 2rem; font-size: .9rem; color: var(--d-soft); }
.nav__overlay-contact a {
  display: inline; font: inherit; border: 0; padding: 0;
  color: var(--gold-light); opacity: 1; transform: none; transition: none;
}
.menu-open { overflow: hidden; }
.menu-open .nav__overlay { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-open .nav__overlay a { opacity: 1; transform: none; }
.menu-open .nav { background: var(--d-bg); box-shadow: 0 1px 0 var(--d-hairline); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--d-ink); }
.menu-open .brand__sub { color: var(--d-soft); }
.menu-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
.menu-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Responsywność nowych komponentów ---------- */
@media (max-width: 960px) {
  .duo__bridge { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .duo__bridge::before { left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 1px; }
  .duo__knot { justify-self: center; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .faq { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .contact { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .fact { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); }
  .fact:first-child { border-top: 0; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__answer { padding-right: 0; }
  .duo__end { padding: 1.75rem 1.4rem 1.6rem; }
}

/* ============================================================
   PODSTRONA: KONTAKT
   Komponenty dołożone przy budowie kontakt.html — te same tokeny,
   ten sam rytm. Nic tu nie nadpisuje systemu ze strony głównej.
   ============================================================ */

/* rozszerzenie tokenów: stan błędu w formularzu (poza paletą marki, celowo stonowany) */
:root {
  --error:       #9E4A3C;
  --error-light: #E0A79C;
}

/* kotwice nie chowają się pod przyklejonym navbarem */
section[id] { scroll-margin-top: 5.5rem; }

/* aktywna pozycja w nawigacji */
.nav__menu a[aria-current="page"] { color: var(--gold-text); }
.nav__menu a[aria-current="page"]::after { transform: scaleX(1); }
.nav__overlay a[aria-current="page"] { color: var(--gold-light); }

/* ---------- Nagłówek podstrony ---------- */
.pagehead {
  padding-top: clamp(8.5rem, 14vh, 11.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.pagehead h1 { max-width: 11em; }
.pagehead .kicker { margin-bottom: 1.4rem; }
.pagehead .lead { margin-top: 1.75rem; max-width: 36em; }

/* okruszki */
.crumbs {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.75rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crumbs a:hover { color: var(--gold-text); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- Trzy kanały kontaktu ---------- */
.channels {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.channel {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 2rem 1.75rem;
  border-left: 1px solid var(--hairline);
}
.channel:first-child { border-left: 0; padding-left: 0; }
.channel__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.channel__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color var(--t-fast) var(--ease);
}
a.channel__value:hover { color: var(--gold-em); }

/* ---------- Podpowiedzi „co warto napisać" (ciemny akt) ---------- */
.hints { margin-top: 2.25rem; list-style: none; counter-reset: hint; }
.hints li {
  position: relative;
  counter-increment: hint;
  padding: .85rem 0 .85rem 2.4rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--small);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hints li::before {
  content: "0" counter(hint);
  position: absolute;
  left: 0;
  top: .95rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--gold);
}
.act .hints li::before { color: var(--gold-light); }
.hints li:last-child { border-bottom: 1px solid var(--hairline); }
.hints strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: .15rem;
}
.act .hints li { border-color: var(--d-hairline); color: var(--d-soft); }
.act .hints li:last-child { border-bottom-color: var(--d-hairline); }
.act .hints strong { color: var(--d-ink); }
.act .contact__intro .hints + .contact__list { margin-top: 2rem; }

/* ---------- Formularz: select, walidacja, potwierdzenie ---------- */
select.field__input,
.act select.field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23B08D42' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  cursor: pointer;
}
.act select.field__input option { background: var(--d-bg); color: var(--d-ink); }

.field__input.is-invalid { border-color: var(--error); }
.act .field__input.is-invalid { border-color: var(--error-light); }
.check.is-invalid > span { color: var(--error); }
.act .check.is-invalid > span { color: var(--error-light); }

.form__status {
  grid-column: 1 / -1;
  display: none;
  padding: .95rem 1.15rem;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  background: var(--gold-faint);
  font-size: .85rem;
  line-height: 1.55;
}
.form__status.is-visible { display: block; }
.form__status.is-error { border-color: var(--error); background: transparent; }
.act .form__status.is-error { border-color: var(--error-light); }

/* ---------- Biuro: kafel adresu + dane rejestrowe ---------- */
.office {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;
}
.office__title {
  padding-bottom: 1rem;
  font-size: 1.15rem;
}
.office__map {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .75rem;
  height: 100%; /* kafel sięga do dołu danych rejestrowych obok */
  min-height: 17rem;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sig);
  background-color: var(--bg-deep);
  /* schematyczna siatka ulic zamiast osadzonej mapy — bez zewnętrznych skryptów i cookies */
  background-image:
    linear-gradient(90deg, var(--gold-faint) 1px, transparent 1px),
    linear-gradient(0deg, var(--gold-faint) 1px, transparent 1px),
    linear-gradient(115deg, transparent calc(50% - 1px), var(--gold-line) 50%, transparent calc(50% + 1px)),
    linear-gradient(24deg, transparent calc(38% - 1px), var(--gold-line) 38%, transparent calc(38% + 1px));
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.office__map:hover { border-color: var(--gold-line); }
.office__pin {
  position: absolute;
  top: 38%;
  left: 34%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(176, 141, 66, .18), 0 0 0 14px rgba(176, 141, 66, .08);
}
.office__map-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.45;
}
.office__map-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.office__map:hover .office__map-cta .arrow { transform: translateX(4px); }
.office__map-cta .arrow { transition: transform var(--t-fast) var(--ease); }

.datalist { border-top: 1px solid var(--hairline); }
.datalist li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--small);
  line-height: 1.5;
}
.datalist li > span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-top: .18rem;
}

/* pas kontaktowy na stronie głównej (formularz mieszka na /kontakt) */
.contact--band {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
.contact--band .contact__list { margin-top: 0; }
.contact__actions { margin-top: 2.5rem; }

/* ---------- Responsywność podstrony ---------- */
@media (max-width: 960px) {
  .channels { grid-template-columns: 1fr; }
  .channel { border-left: 0; padding: 1.6rem 0; border-top: 1px solid var(--hairline); }
  .channel:first-child { border-top: 0; padding-top: 1.2rem; }
  .office { grid-template-columns: 1fr; }
  .contact--band { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .datalist li { grid-template-columns: 1fr; gap: .25rem; }
  .office__map { min-height: 14rem; padding: 1.4rem; }
}

/* ============================================================
   PODSTRONA: BAZA WIEDZY
   ============================================================ */

/* atrybut hidden musi wygrać z display: flex/grid komponentów */
[hidden] { display: none !important; }

.pagehead__note { margin-top: 1.6rem; max-width: 40em; }

/* ---------- Wyróżniony wpis: wiersz redakcyjny, nie karta ---------- */
.post-lead {
  display: block;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.post-lead__flag {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
  font-size: var(--kicker-size);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.post-lead__flag::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--gold);
  opacity: .7;
}
.post-lead h2 {
  max-width: 17em;
  transition: color var(--t-fast) var(--ease);
}
.post-lead .lead { margin-top: 1.4rem; max-width: 44em; }
.post-lead__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.post-lead:hover h2 { color: var(--gold-em); }
.post-lead:hover .textlink { gap: .85rem; }

/* ---------- Filtry tematów ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.filter {
  padding: .55rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.filter:hover { border-color: var(--gold-line); color: var(--gold-text); }
.filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--d-ink);
}

/* ---------- Karta wpisu: data obok kategorii ---------- */
.post-card__date {
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.post-card__date::before {
  content: "·";
  margin: 0 .5rem;
  color: var(--hairline);
}

/* pusty wynik filtrowania */
.posts-empty {
  margin-top: 2.5rem;
  padding-block: 3rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--small);
}

/* ---------- Responsywność ---------- */
@media (max-width: 1100px) {
  .posts--index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .posts--index { grid-template-columns: minmax(0, 1fr); }
  .post-lead__foot { align-items: flex-start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 640px) {
  .post-card__date { display: block; }
  .post-card__date::before { display: none; }
  .filters { gap: .4rem; }
  .filter { padding: .5rem .85rem; font-size: .72rem; }
}

/* ============================================================
   SZABLON WPISU BLOGOWEGO
   Style treści są zamknięte w .article__body — dzięki temu
   redakcja może wstawiać zwykłe h2/p/ul/table i wszystko trzyma rytm.
   ============================================================ */

/* ---------- Nagłówek wpisu ---------- */
.article-head h1 { max-width: 16em; font-size: clamp(2.3rem, 3.6vw, 3.4rem); }
.article-head .lead { margin-top: 1.75rem; max-width: 38em; }

.article-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.article-head__cat { color: var(--gold-text); }
.article-head__meta > * + *::before {
  content: "·";
  margin-right: 1rem;
  color: var(--hairline);
}

/* podpis autorki pod leadem */
.byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.byline__photo {
  width: 44px;
  height: 44px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-deep);
}
.byline__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) sepia(.22) contrast(1.02) brightness(1.04);
}
.byline__text { display: flex; flex-direction: column; }
.byline__name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.byline__role {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Treść + spis treści ---------- */
.article { padding-top: clamp(3rem, 5vw, 4.5rem); }
.article__grid {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.toc { position: sticky; top: 7rem; }
.toc__title {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--hairline);
}
.toc__list { list-style: none; counter-reset: toc; }
.toc__list li { counter-increment: toc; border-bottom: 1px solid var(--hairline); }
.toc__list a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: .5rem;
  padding: .85rem 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease);
}
.toc__list a::before {
  content: "0" counter(toc);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
.toc__list a:hover { color: var(--ink); }
.toc__list a.is-current { color: var(--ink); font-weight: 600; }
.toc__list a.is-current::before { color: var(--gold-em); }

/* ---------- Typografia treści ---------- */
.article__body { max-width: 40em; }
.article__body > * + * { margin-top: 1.35rem; }

.article__body h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 6rem; /* kotwica ze spisu treści nie chowa się pod navbarem */
}
.article__body h3 {
  font-size: 1.2rem;
  margin-top: 2.5rem;
}
.article__body h2 + p, .article__body h3 + p { margin-top: 1.1rem; }

.article__body p { line-height: 1.75; }
.article__body a:not(.btn):not(.textlink) {
  color: var(--gold-text);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: .22em;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.article__body a:not(.btn):not(.textlink):hover { text-decoration-color: var(--gold); }

.article__body ul, .article__body ol { padding-left: 0; }
.article__body li { position: relative; padding-left: 1.9rem; line-height: 1.7; }
.article__body li + li { margin-top: .8rem; }
.article__body ul li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .8em;
  width: 6px; height: 1px;
  background: var(--gold);
}
.article__body ol { list-style: none; counter-reset: step; }
.article__body ol > li { counter-increment: step; }
.article__body ol > li::before {
  content: counter(step) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
.article__body li strong { font-weight: 600; }

.article__body blockquote {
  margin-top: 2.25rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.45;
  color: var(--gold-em);
}

/* ramka „w skrócie / uwaga" */
.note {
  margin-top: 2.25rem;
  padding: 1.5rem 1.6rem;
  background: var(--gold-faint);
  border-left: 2px solid var(--gold);
  border-radius: 0 0 24px 0;
  font-size: var(--small);
  line-height: 1.65;
  color: var(--ink);
}
.note strong {
  display: block;
  margin-bottom: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* tabela */
.table-wrap { margin-top: 2.25rem; overflow-x: auto; }
.article__body table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--small);
}
.article__body caption {
  caption-side: bottom;
  padding-top: .9rem;
  font-size: .8rem;
  color: var(--ink-soft);
  text-align: left;
}
.article__body th {
  text-align: left;
  padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--ink);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.article__body td {
  padding: .95rem 1rem .95rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  line-height: 1.55;
}
.article__body tbody tr:last-child td { border-bottom: 1px solid var(--hairline); }

/* ilustracja */
.article__body figure { margin-top: 2.5rem; }
.article__body figure img {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-sig);
  background: var(--bg-deep);
  /* ta sama obróbka tonalna co portrety — zdjęcie nie wypada z palety */
  filter: grayscale(1) sepia(.18) contrast(1.02) brightness(1.02);
}
.article__body figcaption {
  margin-top: .9rem;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.article__body hr {
  margin-top: 3rem;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* podstawa prawna / źródła */
.sources {
  margin-top: 2rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.sources__title {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .9rem;
}
.sources ul { margin-top: .5rem; }
.sources li { padding-left: 1.9rem; }
.sources li + li { margin-top: .4rem; }
.sources__note { margin-top: 1.1rem; line-height: 1.6; }

/* ---------- Autorka pod wpisem (ciemny akt) ---------- */
.author {
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.author__photo { position: relative; margin: 0; }
.author__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* kadr 2:3 przycięty do 4:5 po równo z góry i z dołu — przypięty do góry ucinał dłonie */
  object-position: center;
  border-radius: var(--radius-sig);
  filter: grayscale(1) sepia(.18) contrast(1.02);
}
.author__body .kicker { margin-bottom: 1.1rem; }
.author__body .lead { margin-top: 1.25rem; }
.author__creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  max-width: 32rem;
}
.author__actions { margin-top: 2.25rem; }

/* ---------- Responsywność ---------- */
@media (max-width: 1000px) {
  /* minmax(0,…), nie 1fr: przy 1fr kolumna rozciąga się do min-content tabeli
     i rozpycha układ poza szerokość ekranu */
  .article__grid { grid-template-columns: minmax(0, 1fr); }
  .toc {
    position: static;
    padding: 1.4rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sig);
  }
  .article__body { max-width: none; }
  .author { grid-template-columns: 1fr; }
  .author__photo { max-width: 15rem; }
}
@media (max-width: 640px) {
  .article__body table { min-width: 26rem; }
  .author__creds { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   PODSTRONA USŁUGOWA (wzorzec: ceny-transferowe.html)
   Trzy nowe komponenty (.urgent, .qualify, .metrics) + warianty
   istniejących. Reszta podstrony stoi na klockach ze strony głównej.
   ============================================================ */

/* miara czytelnego wiersza dla akapitów poza .lead */
.measure { max-width: 40em; }

/* .note powstała wewnątrz .article__body (40em); poza artykułem
   potrzebuje własnego ograniczenia, żeby nie rozciągała się na 1240px */
.note { max-width: 46em; }

/* ---------- Pasek pilny (ciemny akt, wąski) ---------- */
.urgent { padding-block: clamp(1.75rem, 3vw, 2.4rem); }
.urgent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem clamp(2rem, 4vw, 4rem);
  flex-wrap: wrap;
}
.urgent__text { max-width: 44em; }
.urgent .kicker { margin-bottom: .55rem; }
.urgent p { font-size: var(--small); line-height: 1.6; color: var(--d-soft); }
.urgent__phone {
  flex: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.urgent__phone:hover { color: var(--gold-light); }

/* ---------- Checklista „odhacz, jeśli to Twoja sytuacja" ---------- */
.qualify__lead {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
}
.qualify {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--hairline);
}
.qualify li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .9rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--small);
  line-height: 1.55;
}
.qualify li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: .18rem;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  background-color: var(--gold-faint);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4.1l2.7 2.7L9 1.3' stroke='%23B08D42' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- Pas wielkich liczb (progi kwotowe, terminy) ---------- */
.metrics {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.metric {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.9rem 1.75rem;
  border-left: 1px solid var(--hairline);
}
.metric:first-child { border-left: 0; padding-left: 0; }
.metric__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.metric__label {
  margin-top: auto;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.metrics__note {
  margin-top: 1.15rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46em;
}

/* ---------- Warianty istniejących komponentów ---------- */
/* proces pięciokrokowy */
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }

/* nagłówek-split jako jedyna treść sekcji nie potrzebuje marginesu na listę pod spodem */
.section-head--split:last-child { margin-bottom: 0; }

/* ---------- Responsywność ---------- */
@media (max-width: 1100px) {
  .steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.75rem; }
}
@media (max-width: 960px) {
  .qualify { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric {
    border-left: 0;
    padding: 1.4rem 0;
    border-top: 1px solid var(--hairline);
  }
  .metric:first-child { border-top: 0; }
  .metric__label { margin-top: 0; }
  .urgent__inner { align-items: flex-start; }
}
@media (max-width: 700px) {
  .steps--5 { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
}

/* ============================================================
   NAWIGACJA: rozwijane „Usługi"
   Otwieranie obsługuje CSS (:hover + :focus-within), więc menu działa
   bez JS i z klawiatury. JS dokłada tylko klik na dotyku, Escape
   i stan aria-expanded.
   ============================================================ */

/* UWAGA: bez position:relative — panel ma się rozciągać na całą szerokość paska,
   więc kontenerem pozycjonowania musi zostać .nav (position: fixed) */
.nav__item { display: inline-flex; align-items: center; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  position: relative;
  padding-block: .35rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
}
.nav__trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--t-fast) var(--ease);
}
.nav__item:hover .nav__trigger::after,
.nav__item:focus-within .nav__trigger::after { transform: scaleX(1); }
.nav__trigger svg { transition: transform var(--t-fast) var(--ease); }
.nav__item:hover .nav__trigger svg,
.nav__item:focus-within .nav__trigger svg { transform: rotate(180deg); }
.hero-dark .nav:not(.is-scrolled) .nav__trigger::after { background: var(--gold-light); }
/* „Usługi" jako bieżąca sekcja serwisu */
.nav__trigger[aria-current] { color: var(--gold-text); }
.nav__trigger[aria-current]::after { transform: scaleX(1); }
.hero-dark .nav:not(.is-scrolled) .nav__trigger[aria-current] { color: var(--gold-light); }
.nav__overlay-group > summary[aria-current] { color: var(--gold-light); }

/* panel na pełną szerokość paska — .nav jest fixed, więc jest kontenerem pozycjonowania */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  color: var(--ink);
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 18px 44px rgba(28, 27, 24, .10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              visibility 0s linear var(--t-fast);
}
.nav__item:hover .megamenu,
.nav__item:focus-within .megamenu,
.megamenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.megamenu__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 3vw, 2.75rem);
}
.megamenu__col { min-width: 0; }
.megamenu__label {
  display: block;
  padding-bottom: .8rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--hairline);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.megamenu__label i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: .95rem;
  color: var(--gold);
  margin-right: .5rem;
}
.megamenu li a {
  display: block;
  padding: .42rem 0;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.megamenu li a:hover { color: var(--gold-text); padding-left: .3rem; }
/* reset dziedziczenia po .nav__menu a — w panelu to treść, nie etykiety nawigacji */
.megamenu li a, .megamenu__foot a { text-transform: none; letter-spacing: 0; }
.megamenu li a { font-weight: 400; }
.megamenu li a::after, .megamenu__foot a::after { display: none; }
/* usługa, która ma już własną podstronę */
.megamenu li a[data-live] { color: var(--ink); font-weight: 500; }
.megamenu li a[data-live]:hover { color: var(--gold-text); }

.megamenu__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.megamenu__note { font-size: .84rem; color: var(--ink-soft); }

.nav:has(.nav__item:hover),
.nav:has(.nav__item:focus-within),
.nav:has(.megamenu.is-open) {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--hairline);
}
.hero-dark .nav:has(.nav__item:hover),
.hero-dark .nav:has(.nav__item:focus-within),
.hero-dark .nav:has(.megamenu.is-open) { color: var(--ink); }
.hero-dark .nav:has(.nav__item:hover) .brand__sub,
.hero-dark .nav:has(.nav__item:focus-within) .brand__sub { color: var(--ink-soft); }

/* ---------- Usługi w menu mobilnym ---------- */
.nav__overlay-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  padding: .5rem 0;
  border-bottom: 1px solid var(--d-hairline);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: .1s;
  list-style: none;
}
.nav__overlay-group > summary::-webkit-details-marker { display: none; }
.nav__overlay-group > summary::after {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23CFAE63' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--t-fast) var(--ease);
}
.nav__overlay-group[open] > summary::after { transform: rotate(180deg); }
.menu-open .nav__overlay-group > summary { opacity: 1; transform: none; }

/* usługi w czterech grupach jak w megamenu: złota etykieta z numerem, pod nią lista */
.nav__overlay-sub { padding: .25rem 0 1.25rem; }
.nav__overlay-label {
  display: block;
  padding: 1.25rem 0 .35rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.nav__overlay-label:first-child { padding-top: .75rem; }
.nav__overlay-label i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: .95rem;
  letter-spacing: 0;
  margin-right: .5rem;
  opacity: .7;
}
.nav__overlay-sub a {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.35;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(247, 245, 240, .08);
  color: rgba(247, 245, 240, .86);
  transition-delay: 0s;
}
.nav__overlay-sub li:last-child a { border-bottom: 0; }
.nav__overlay-sub a:hover { color: var(--gold-light); }

/* ---------- Responsywność ---------- */
@media (max-width: 1180px) {
  .nav__menu { gap: 1rem; }
  .nav__menu a, .nav__trigger { font-size: .74rem; letter-spacing: .08em; }
}

/* ============================================================
   PODSTRONA USŁUGOWA II (wzorzec: holding.html)
   Jeden nowy komponent — .scheme, schemat „przed / po" na ciemnym
   akcie — plus modyfikatory istniejących siatek. Reszta podstrony
   stoi na klockach ze strony głównej i z ceny-transferowe.html.
   ============================================================ */

/* akapity .measure na ciemnym akcie (bez tego dziedziczą pełną biel) */
.act .measure { color: var(--d-soft); }

/* ---------- Dwie ścieżki: checklista w dwóch nazwanych kolumnach ----------
   Rekombinacja .qualify: ta sama krata i te same złote ptaszki, ale każda
   kolumna dostaje własny nagłówek (reużyta .duo__label). */
.qualify-cols {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vw, 4rem);
  align-items: start;
}
.qualify-cols .qualify { margin-top: 1rem; }
.qualify--single { grid-template-columns: minmax(0, 1fr); }
.qualify-cols__foot {
  margin-top: 1.35rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.qualify-cols__foot a {
  font-weight: 600;
  color: var(--gold-text);
  border-bottom: 1px solid var(--gold-line);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.qualify-cols__foot a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Schemat „przed / po" (ciemny akt) ----------
   Blueprint, nie infografika: żadnych wypełnień i cieni, tylko hairline'y,
   złota linia relacji i róg-sygnatura na ostatnim podmiocie każdego stanu.
   Podpis pod każdym stanem mówi o ODPOWIEDZIALNOŚCI, nie o oszczędności. */
.scheme {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
.scheme__state { display: flex; flex-direction: column; }
.scheme__label {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: 1.2rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--d-hairline);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d-soft);
}
.scheme__label i { font-style: normal; color: var(--gold-light); }
.scheme__node {
  border: 1px solid var(--d-hairline);
  background: rgba(247, 245, 240, .035);
  padding: 1.4rem 1.5rem 1.3rem;
}
/* róg-sygnatura na ostatnim podmiocie stanu */
.scheme__state > .scheme__node:last-of-type { border-radius: var(--radius-sig); }
.scheme__node--safe { border-color: var(--gold-line); }
.scheme__node-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--d-ink);
}
.scheme__node--safe .scheme__node-name { color: var(--gold-light); }
.scheme__items { margin-top: .95rem; }
.scheme__items li {
  padding: .55rem 0;
  border-top: 1px solid var(--d-hairline);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--d-soft);
}
/* linia relacji między podmiotem majątkowym a operacyjnym */
.scheme__link {
  position: relative;
  padding: 1.2rem 0 1.2rem 3.4rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.scheme__link::before {
  content: "";
  position: absolute;
  left: 1.5rem; top: 0; bottom: 0;
  width: 1px;
  background: var(--gold-line);
}
.scheme__arrow { align-self: center; color: var(--gold); }
/* element bezpośrednio nad podpisem dostaje oddech; podpisy równają się do dołu */
.scheme__state > :nth-last-child(2) { margin-bottom: 1.6rem; }
.scheme__risk {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--d-hairline);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--d-soft);
}
.scheme__risk strong { font-weight: 500; color: var(--gold-light); }
.scheme__caption {
  grid-column: 1 / -1;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.15rem;
  border-top: 1px solid var(--d-hairline);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--d-soft);
  max-width: 46em;
}

/* ---------- Modyfikatory siatek (kardynalność, nie nowy komponent) ---------- */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.posts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* zespół bez czwartej osoby: rząd domyka się na trzech kaflach, bez pustego slotu obok */
.team--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .team--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .team--3 { grid-template-columns: 1fr; } }
/* duo jako para „krok wejściowy → wdrożenie": zdanie domykające pod listą */
.duo__end > p:last-child { margin-bottom: 0; }

/* ---------- Responsywność ---------- */
@media (max-width: 1100px) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .qualify-cols { grid-template-columns: minmax(0, 1fr); }
  .scheme { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .scheme__arrow { justify-self: start; transform: rotate(90deg); }
  .scheme__risk { margin-top: 1.5rem; }
  .posts--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cards--3 { grid-template-columns: minmax(0, 1fr); }
}
/* zdanie domykające pod listą w panelu .duo potrzebuje oddechu od hairline'u */
.duo__end .hints + p { margin-top: 1.15rem; }

/* ============================================================
   PODSTRONA USŁUGOWA III — wariant v2 (wzorzec: ceny-transferowe.html)
   Copy tej wersji rozróżnia trzy poziomy tła: „ciemna", „ciemniejsza",
   „jasna". System ma dokładnie trzy: --d-bg, --bg-deep, --bg — mapowanie
   jest 1:1, nie trzeba nowej palety.
   Nowe komponenty: .trustline (linia zaufania zamykająca hero), .areas
   (akordeon obszarów), .reasons (powody bez powierzchni), .tiers (trzy sposoby
   wejścia). Reszta strony to reużycie — hero to jasny .pagehead jak w v1,
   a rytm tła między hero a pierwszą sekcją trzyma .urgent z v1.
   ============================================================ */

/* trzeci poziom tła: „sekcja ciemniejsza" = głębszy papier, nie ciemny akt.
   Reguła zwijania paddingu (.section:not(.act) + .section:not(.act)) musi
   zostać wyłączona na styku z panelem — inaczej tło startuje wprost pod
   treścią poprzedniej sekcji. Selektory mają celowo tę samą wagę co reguła
   zwijająca i stoją po niej. */
.section--deep { background: var(--bg-deep); }
.section:not(.act) + .section--deep:not(.act) { padding-top: var(--sec); }
.section--deep:not(.act) + .section:not(.act) { padding-top: var(--sec); }

/* ---------- Linia zaufania w hero ----------
   Zamyka hero na miejscu pasa wpisów zawodowych (.hero__creds z v1): ten sam
   hairline, ta sama pozycja, jedno zdanie z ikoną zamiast dwóch numerów wpisu.
   Domyślnie na papierze; wariant na ciemnym akcie na wypadek reużycia. */
.trustline {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  max-width: 40em;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.trustline svg { flex: none; margin-top: .22rem; color: var(--gold); }
.act .trustline { border-top-color: var(--d-hairline); color: var(--d-soft); }
.act .trustline svg { color: var(--gold-light); }
/* Linia z tytułem (wybor-formy-opodatkowania.html: termin w miejscu linii zaufania). */
.trustline strong {
  display: block;
  margin-bottom: .2rem;
  font-weight: 600;
  color: var(--ink);
}
.act .trustline strong { color: var(--d-ink); }

/* ---------- Obszary pomocy: akordeon numerowany ----------
   Copy każe rozwijać obszar („Rozwiń obszar, żeby zobaczyć…"), więc siedem
   opisów nie może leżeć otworem. Bez JS działa natywnie: to <details>.
   Ikonę +/- bierzemy z FAQ (.faq__icon) — ten sam gest, ten sam rysunek. */
.areas { border-top: 1px solid var(--hairline); }
.area { border-bottom: 1px solid var(--hairline); }
.area > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.55rem 0;
}
.area > summary::-webkit-details-marker { display: none; }
.area__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--gold-text);
}
.area__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.25;
  text-wrap: balance;
  transition: color var(--t-fast) var(--ease);
}
.area > summary:hover .area__title { color: var(--gold-em); }
.area .faq__icon { align-self: center; margin-top: 0; }
.area[open] .faq__icon { border-color: var(--gold); color: var(--gold-em); }
.area[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.area__body {
  margin-left: 5.75rem;   /* wyrównanie do kolumny tytułu */
  padding-bottom: 1.9rem;
  max-width: 46em;
  color: var(--ink-soft);
}
.area__body p + p { margin-top: 1rem; }
.area__body .textlink { margin-top: 1.2rem; }
/* Dwa linki w jednym panelu (interpretacje, poz. 02): odstęp z prawej, nie z lewej —
   po zawinięciu na telefonie drugi link zaczyna wiersz równo z tekstem. */
.area__body .textlink:has(+ .textlink) { margin-right: 2rem; }

/* ---------- Powody: krata bez powierzchni ----------
   Świadomie NIE .cards — karty stoją już w sekcji „Z kim pracujemy".
   Tu sygnatura systemu: hairline + wielki numer w lekkiej wadze. */
.reasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
.reason { border-top: 1px solid var(--hairline); padding-top: 1.3rem; }
.reason__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.3rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--gold);
  opacity: .5;
  margin-bottom: .85rem;
}
.reason h3 { margin-bottom: .6rem; }
.reason p { font-size: var(--small); color: var(--ink-soft); }

/* ---------- Trzy sposoby wejścia ----------
   To alternatywy, nie sekwencja — dlatego NIE .steps (złota linia łącząca
   numery kłamałaby o kolejności). Każdy kafel ma etykietę i stopkę „dla kogo". */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.tier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 1.9rem 1.75rem 1.8rem;
  transition: transform var(--t-slow) var(--ease), border-color var(--t-fast) var(--ease);
}
.tier:last-child { border-radius: var(--radius-sig); } /* róg-sygnatura zamyka rząd */
.tier:hover { transform: translateY(-5px); border-color: var(--gold-line); }
.tier__label {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: 1.15rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--hairline);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.tier__label i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--gold-text);
}
.tier h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); margin-bottom: .7rem; }
.tier p { font-size: var(--small); color: var(--ink-soft); }
/* Minimalny odstęp nad „Dla kogo" — margin-top:auto sam nie daje go w najwyższej
   karcie rzędu i hairline dotykał ostatniego wiersza (złapane na audyt-podatkowy.html). */
.tier p:has(+ .tier__for) { margin-bottom: 1.25rem; }
/* Link w karcie (umowy-z-kontrahentami.html, karta 03): między opisem a „Dla kogo",
   żeby „Dla kogo" we wszystkich kartach rzędu zostało wyrównane do dołu. */
.tier > .textlink { display: block; margin: 1rem 0 1.25rem; }
/* display:block, nie inline-flex: w wąskiej karcie tekst się zawija, a strzałka jako
   osobny element flex odjeżdżała do prawej krawędzi — tu zostaje na końcu tekstu. */
.tier > .textlink .arrow { display: inline; margin-left: .45rem; vertical-align: -1px; transition: margin-left var(--t-fast) var(--ease); }
.tier > .textlink:hover .arrow { margin-left: .75rem; }
.tier__for {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tier__for strong {
  display: block;
  margin-bottom: .3rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.tiers__foot {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.tiers__foot p { max-width: 44em; font-size: var(--small); color: var(--ink-soft); }

/* ---------- Znacznik wyróżnika w wierszu numeru karty ---------- */
.card__num--tagged {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card__tag {
  padding: .28rem .55rem;
  border: 1px solid var(--gold-line);
  background: var(--gold-faint);
  border-radius: 2px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
}

/* ---------- Responsywność ---------- */
@media (max-width: 1100px) {
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier:last-child { border-radius: 0; }
  .area > summary { grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: 1rem; }
  .area__body { margin-left: 4.25rem; }
}
@media (max-width: 640px) {
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .area > summary { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .8rem; }
  .area__num { font-size: 1.25rem; }
  .area__body { margin-left: 0; }
  .tiers__foot { align-items: flex-start; }
}

/* ============================================================
   PODSTRONA USŁUGOWA IV — wariant v2 (wzorzec: holding.html)
   Strona stoi w całości na klockach z „PODSTRONY USŁUGOWEJ III"
   (.areas, .reasons, .tiers, .trustline, .section--deep, .card__tag).
   Jeden nowy komponent: .scopebar.
   ============================================================ */

/* ---------- Pas „Zakres" (ciemny akt, wąski) ----------
   Powstał z karty „Zakres", którą copy stawia w hero — hero ma jednak wyglądać
   jak w v1 (jasny, jednokolumnowy, bez panelu z boku), więc zakres zszedł pod
   niego jako osobny pas. Robi przy okazji drugą, ważniejszą robotę: rozdziela
   jasne hero od jasnej sekcji „Z kim pracujemy". Na ceny-transferowe.html
   ten slot zajmuje .urgent, ale holding nie ma wyzwalacza „wezwanie z urzędu",
   więc potrzebował własnego pasa. Wysokość i rytm celowo takie jak w .urgent. */
.scopebar { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.scopebar .kicker { margin-bottom: 1.5rem; }
.scopebar__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--d-hairline);
}
.scopebar__list li {
  padding: 1.4rem 1.5rem 0;
  border-left: 1px solid var(--d-hairline);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--d-soft);
}
.scopebar__list li:first-child { border-left: 0; padding-left: 0; }
/* ten sam znacznik co w .card__marker — kreska, nie punktor */
.scopebar__list li::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  margin-bottom: .85rem;
}

/* ---------- Responsywność ---------- */
@media (max-width: 960px) {
  .scopebar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scopebar__list li:nth-child(3) { border-left: 0; padding-left: 0; }
  .scopebar__list li:nth-child(n+3) { margin-top: 1.4rem; border-top: 1px solid var(--d-hairline); }
}
@media (max-width: 560px) {
  .scopebar__list { grid-template-columns: minmax(0, 1fr); }
  .scopebar__list li { border-left: 0; padding-left: 0; }
  .scopebar__list li + li { margin-top: 1.4rem; border-top: 1px solid var(--d-hairline); }
}

/* ============================================================
   PODSTRONA USŁUGOWA V (wzorzec: cit-estonski.html)
   Zero nowych komponentów — strona składa się wyłącznie z klocków
   zbudowanych wcześniej (.scopebar, .cards--3, .qualify, .areas,
   .reasons, .tiers, .faq, .contact--band). Poniżej trzy drobiazgi,
   które te klocki musiały dostać, żeby unieść nową treść.
   ============================================================ */

/* Checklista warunków wejścia: pozycje mają teraz „etykietę. wyjaśnienie",
   a nie jedno zdanie. Pogrubienie 700 z przeglądarki jest za ciężkie
   przy Instrument Sans — system trzyma się 500/600. */
.qualify strong { font-weight: 600; }

/* Link wychodzący pod odpowiedzią w FAQ (dotąd linki żyły tylko w .areas).
   .textlink jest inline-flex, więc jako rodzeństwo akapitu staje we własnym
   wierszu; odpowiedź nad nim oddaje część dolnego paddingu. */
.faq__item > .textlink { margin-bottom: 1.7rem; }
.faq__answer:has(+ .textlink) { padding-bottom: .9rem; }

/* ============================================================
   PODSTRONA USŁUGOWA VI (wzorzec: fundacja-rodzinna.html)
   Znów bez nowego komponentu — jeden wariant istniejącego.
   ============================================================ */

/* ---------- .qualify bez ptaszków: słownik mechanizmu, nie checklista ----------
   Sekcja „Podatki w fundacji" to sześć bloków „pojęcie + wyjaśnienie". Krata,
   hairline'y i rytm zostają te same co w checkliście warunków, ale ptaszek
   musi zniknąć: to nie jest lista do odhaczenia, tylko opis mechanizmu.
   Świadomie NIE .offer-row--wide — tamten wariant (numer + duży tytuł + hairline)
   wygląda jak zamknięta pozycja akordeonu .areas, który stoi sekcję niżej;
   użytkownik próbowałby w to klikać. */
.qualify--plain li {
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem;
  padding: 1.5rem 0;
}
.qualify--plain li::before { content: none; }
.qualify--plain strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink);
}
.qualify--plain span { color: var(--ink-soft); }

/* ============================================================
   PODSTRONA USŁUGOWA VII (wzorzec: spor-z-organem.html)
   Znów bez nowego komponentu — warianty .scopebar i .qualify--plain.
   ============================================================ */

/* ---------- .scopebar jako pasek PILNY, nie zakresowy ----------
   Copy tej podstrony każe karcie z hero pełnić funkcję paska pilnego:
   trzy terminy zawite plus klikalny numer. To jedyna strona, na której
   telefon jest treścią, a nie tylko elementem nagłówka — stąd stopka
   pasa z numerem w Jost 300 (reużyta .urgent__phone). */
.scopebar__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* liczba dni ma się rzucać w oczy — jedyne złote wyróżnienie w pasie */
.scopebar__list strong { font-weight: 500; color: var(--gold-light); }

.scopebar__foot {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--d-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(2rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.scopebar__foot p {
  max-width: 44em;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--d-soft);
}

/* ---------- Wyróżnienie w treści pozycji .qualify--plain ----------
   W sekcji „Etapy i terminy" <strong> pełni dwie role: tytuł etapu
   (dziecko <li>) i liczba dni wewnątrz wyjaśnienia (dziecko <span>).
   Ta druga musi wrócić do kroju tekstowego, bo inaczej dziedziczy
   nagłówkowy Jost 1.12rem i wygląda jak drugi tytuł. */
.qualify--plain span strong {
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Responsywność ---------- */
@media (max-width: 960px) {
  .scopebar__list--3 { grid-template-columns: minmax(0, 1fr); }
  .scopebar__list--3 li { border-left: 0; padding-left: 0; margin-top: 0; border-top: 0; }
  .scopebar__list--3 li + li { margin-top: 1.35rem; border-top: 1px solid var(--d-hairline); }
  .scopebar__foot { align-items: flex-start; }
}

/* ---------- Nieparzysta liczba pozycji w .qualify: bez osamotnionego kafla ----------
   ZASADA OGÓLNA PROJEKTU (decyzja Mikołaja, 2026-09-03): dwukolumnowa krata nigdy
   nie może kończyć się jednym kaflem i pustką obok — ostatnia pozycja rozciąga się
   wtedy na pełną szerokość, żeby hairline domknął sekcję równo.

   `:nth-child(odd):last-child` jest prawdziwe TYLKO wtedy, gdy pozycji jest nieparzyście
   — więc reguła włącza się sama i nie trzeba jej ruszać przy zmianie liczby pozycji.

   Sam `grid-column: 1 / -1` dałby wiersz tekstu na 1240 px, czyli ~110 znaków — dwa razy
   ponad miarę czytelności. Dlatego pełną szerokość dostaje KAFEL (i jego hairline),
   a treść zostaje ograniczona przez `grid-template-columns` samej pozycji. Robimy to
   kratą, nie `max-width` na dzieciach, bo część pozycji .qualify to goły tekst
   bez elementu opakowującego. */
.qualify li:nth-child(odd):last-child {
  grid-column: 1 / -1;
  grid-template-columns: 1.5rem minmax(0, 46em);
}
/* wariant --plain nie ma kolumny na ptaszek */
.qualify--plain li:nth-child(odd):last-child { grid-template-columns: minmax(0, 46em); }
/* .qualify--single stoi już na jednej kolumnie — reguła jest tam bezczynna */

/* ============================================================
   PODSTRONA USŁUGOWA VIII (wzorzec: biezace-doradztwo.html)
   Bez nowego komponentu. Pierwsze użycie .duo poza stroną główną
   i holdingiem — sekcja „rozgraniczenie z księgowością" to z natury
   zestawienie dwóch rzeczy naprzeciw siebie, czyli dokładnie ten klocek.
   ============================================================ */

/* .duo__knot maskuje złotą linię biegnącą za nim kółkiem w kolorze tła,
   więc na panelu --bg-deep musi zmienić kolor razem z sekcją. Bez tego
   na głębszym papierze siedziałaby jaśniejsza plama. */
.section--deep .duo__knot {
  background: var(--bg-deep);
  box-shadow: 0 0 0 10px var(--bg-deep);
}

/* ---------- Kafel wyróżniony w .tiers ----------
   Na tej jednej stronie produktem docelowym jest karta ŚRODKOWA, a nie ostatnia:
   kolejność kart nie rośnie tu wraz z zaangażowaniem (notatka wdrożeniowa copy).
   Sama etykieta „Najczęstszy wybór" tego nie unosi, gdy trzy kafle wyglądają
   identycznie — stąd złoty hairline. Róg-sygnatura zostaje na :last-child,
   żeby rząd domykał się tak samo jak na pozostałych podstronach. */
.tier--featured { border-color: var(--gold-line); }
.tier--featured .tier__label {
  color: var(--gold-em);
  border-bottom-color: var(--gold-line);
}

/* ============================================================
   ZESPÓŁ: KARTA OSOBY → OKNO Z BIOGRAMEM (zespol.html, index.html)
   Przycisk siedzi na imieniu (.person__open), a jego ::after rozciąga się
   na cały kafel — klikalna jest cała karta, a czytnik ekranu słyszy jeden
   przycisk z imieniem, nie „kartę" bez nazwy. Okno to natywny <dialog>
   w warstwie top-layer: Escape, pułapka fokusu i powrót fokusu na kartę
   daje przeglądarka. Karta bez .person__open zostaje zwykłym kaflem.
   ============================================================ */

/* ---------- Karta jako wyzwalacz ---------- */
.person:has(.person__open) { position: relative; cursor: pointer; }
.person__open { font: inherit; color: inherit; text-align: left; }
.person__open::after { content: ""; position: absolute; inset: 0; }
/* obrys fokusu na całym kaflu, nie na samym imieniu — klikalny jest kafel */
.person__open:focus-visible { outline: none; }
.person:has(.person__open:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
/* „Poznaj bliżej" dociśnięte do dołu, żeby w rzędzie stało na jednej linii */
.person__body:has(.person__more) { flex: 1; }
.person__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .7rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: var(--small);
  font-weight: 600;
  color: var(--gold-text);
}
.person__more .faq__icon { width: 24px; height: 24px; margin-top: 0; }
.person:hover .person__more .faq__icon,
.person:has(.person__open:focus-visible) .person__more .faq__icon { border-color: var(--gold); color: var(--gold-em); }

/* ---------- Okno ---------- */
.bio {
  width: min(100% - 2rem, 62rem);
  max-width: none;
  max-height: min(100dvh - 2rem, 56rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sig);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
/* display tylko na [open] — samo .bio nadpisałoby dialog:not([open]) { display: none } z przeglądarki */
.bio[open] { display: flex; }
/* kolor wpisany wprost: starsze przeglądarki nie dziedziczą zmiennych do ::backdrop */
.bio::backdrop {
  background: rgba(28, 27, 24, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* strona pod oknem stoi; gutter trzyma miejsce po pasku przewijania, więc nic nie skacze */
html:has(.bio[open]) { overflow: hidden; scrollbar-gutter: stable; }

/* zdjęcie wypełnia kolumnę, ale nie wyznacza wysokości okna — robi to treść */
.bio__media {
  position: relative;
  flex: 0 0 38%;
  border-right: 1px solid var(--hairline);
}
.bio__photo {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-bottom: 0;
}
.bio__photo.person__photo--placeholder { font-size: 6rem; padding: 1.5rem 1.75rem; }

.bio__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem);
}
.bio__name {
  margin-top: .8rem;
  padding-right: 2.5rem; /* miejsce na przycisk zamknięcia */
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}
.bio .person__cred { margin-top: .55rem; }
.bio__text { margin-top: 1.6rem; max-width: 36em; color: var(--ink-soft); }
.bio__text p + p { margin-top: 1rem; }

.bio__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}
.bio__label {
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-size: var(--kicker-size);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
}
.bio__list { display: grid; gap: .4rem; margin-top: .8rem; }
.bio__list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--small);
  color: var(--ink-soft);
}
.bio__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .8em;
  width: .6rem; height: 1px;
  background: var(--gold);
}
.bio__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

/* zamknięcie: w rogu okna, poza przewijaną kolumną — zawsze pod ręką */
.bio__closeform { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.bio__close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bio__close:hover { border-color: var(--gold); color: var(--gold-text); }

/* wejście: 550 ms, wyjście: 250 ms — te same tokeny co reszta ruchu na stronie */
@media (prefers-reduced-motion: no-preference) {
  .bio, .bio::backdrop {
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                overlay var(--t-fast) allow-discrete,
                display var(--t-fast) allow-discrete;
  }
  .bio { opacity: 0; transform: translateY(14px); }
  .bio::backdrop { opacity: 0; }
  .bio[open], .bio[open]::backdrop { opacity: 1; transform: none; transition-duration: var(--t-slow); }
  @starting-style {
    .bio[open] { opacity: 0; transform: translateY(14px); }
    .bio[open]::backdrop { opacity: 0; }
  }
}

@media (max-width: 720px) {
  .bio[open] { flex-direction: column; }
  .bio__media {
    flex: 0 0 auto;
    height: clamp(9rem, 28vh, 13rem);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .bio__photo.person__photo--placeholder { font-size: 4rem; padding: 1rem 1.25rem; }
  .bio__facts { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PLIKI COOKIES — baner zgody i linki prawne w stopce
   Baner buduje js/main.js (bez JS go nie ma — strona i tak niczego wtedy nie zapisuje).
   Oba przyciski wyglądają tak samo: odmowa ma być równie łatwa jak zgoda.
   ============================================================ */
.cookies {
  position: fixed;
  left: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 80; /* pod paskiem nawigacji (100) i menu mobilnym (90) */
  width: min(27rem, calc(100vw - 2rem));
  padding: 1.6rem 1.75rem 1.75rem;
  border: 1px solid var(--d-hairline);
  border-radius: var(--radius-sig);
  background: var(--d-bg);
  color: var(--d-ink);
  box-shadow: 0 18px 48px rgba(28, 27, 24, .22);
}
.cookies__title {
  font-size: var(--kicker-size);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.cookies__text {
  margin-top: .75rem;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--d-soft);
}
.cookies__text a {
  color: var(--d-ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.cookies__text a:hover { color: var(--gold-light); }
.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.4rem;
}
.cookies__actions .btn { flex: 1 1 auto; justify-content: center; padding: .8rem 1.25rem; }

@media (prefers-reduced-motion: no-preference) {
  .cookies {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .cookies.is-visible { opacity: 1; transform: none; transition-duration: var(--t-slow); }
}

@media (max-width: 640px) {
  .cookies { left: 1rem; right: 1rem; bottom: 1rem; width: auto; padding: 1.4rem 1.4rem 1.5rem; }
}

/* stopka: Polityka prywatności · Ustawienia cookies */
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: .25rem .9rem; }
.footer__legal a,
.footer__legal button {
  font-size: inherit;
  color: inherit;
  transition: color var(--t-fast) var(--ease);
}
.footer__legal a:hover,
.footer__legal button:hover { color: var(--d-ink); }