/* ============================================================
   KANCELARIA ADWOKACKA OSKAR SKOCZYLAS — Design System Tokens
   ============================================================ */

/* Google Fonts loaded via wp_enqueue_style in functions.php — do not use @import */

:root {
  /* ── Tła (light mode) ── */
  --bg-primary: #F8F6F2;
  --bg-secondary: #F0EDE7;
  --bg-tertiary: #E4E0D9;
  --bg-elevated: #FFFFFF;

  /* ── Tekst ── */
  --text-primary: #0D0D0D;
  --text-secondary: #3D3D3D;
  --text-tertiary: #6B6B6B;
  --text-muted: #737373;
  --text-inverse: #F8F6F2;

  /* ── Akcent główny: Malachit ── */
  --accent: #2E6B47;
  --accent-hover: #3A7D56;
  --accent-light: #4A9A6A;
  --accent-bg: rgba(46,107,71,0.06);
  --accent-border: rgba(46,107,71,0.12);
  --accent-bg-solid: #EDF7F1;
  --accent-border-solid: #B8DDCA;

  /* ── Akcent premium: Szampan ── */
  --accent-champagne: #C5B99A;
  --champagne-bg-solid: #FAF8F3;
  --champagne-border-solid: #E4DCC8;
  --ink-brass: #6B5C33;

  /* ── Emergency / Pilne ── */
  --emergency-bg: #0D0D0D;
  --emergency-accent: #4A9A6A;
  --emergency-text: #F8F6F2;
  --emergency-glow: rgba(74,154,106,0.35);

  /* ── Alert / Zarzuty: Bursztyn-ochra (akcent alertowy — zasada „malachit bez czerwieni") ──
     Ciepły akcent uwagi dopełniający malachit; zwalidowany WCAG 2.1 AA na kremie i bieli. */
  --alert: #B45309;                 /* baza: tekst / ramki / markery — AA 4.65 na #F8F6F2, 5.02 na #FFFFFF */
  --alert-hover: #92400E;           /* hover linków / przycisków */
  --alert-light: #E0912F;           /* wariant na ciemnych tłach */
  --alert-bg: rgba(180,83,9,0.06);  /* subtelny wash */
  --alert-bg-solid: #FBEFE0;        /* jasny bursztynowy panel (analog --accent-bg-solid) */
  --alert-border-solid: #E9C9A0;    /* miękka bursztynowa ramka (analog --accent-border-solid) */
  --alert-on: #FFFFFF;              /* tekst na wypełnieniu --alert (5.02) */

  /* ── Dark mode ── */
  --dark-bg: #0F2D1F;
  --dark-bg-alt: #0D0D0D;
  --dark-bg-elevated: #1A3D2B;
  --dark-border: #2A4D3A;
  --dark-border-subtle: #1F3F2D;
  --dark-text: #F8F6F2;
  --dark-text-secondary: #C5C0B5;
  --dark-text-muted: #9AA89F;

  /* ── Obramowania (light mode) ── */
  --border: #E4E0D9;

  /* ── Cienie ── */
  --shadow-sm: 0 1px 3px rgba(13,13,13,0.04), 0 1px 2px rgba(13,13,13,0.03);
  --shadow-md: 0 4px 16px rgba(13,13,13,0.06), 0 2px 6px rgba(13,13,13,0.04);
  --shadow-lg: 0 12px 40px rgba(13,13,13,0.08), 0 4px 12px rgba(13,13,13,0.04);
  --shadow-focus: 0 0 0 3px rgba(46,107,71,0.15);

  /* ── Typografia ── */
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;

  /* ── Skala rozmiarów pisma (statyczna, w rem) ──
     Płynność bierze się z jednego miejsca: reguły `html { font-size: clamp(...) }`
     w sekcji Reset niżej. Root rośnie 16px → 18px na odcinku 360px → 1920px
     szerokości okna, więc każdy rozmiar zapisany w rem skaluje się razem
     z ekranem, i razem z ustawieniem „rozmiar czcionki" w przeglądarce.
     Tokeny są zwykłym rem, nie clamp(): clamp na tokenie skalowałby się drugi raz.
     clamp() zostaje wyłącznie dla nagłówków, które mają zmieniać proporcje,
     nie tylko rozmiar (display kurczący się na telefonie mocniej niż reszta).
     Piksele w komentarzu to render przy root 16px, czyli stan na ≤360px. */
  --fs-3xs:  0.625rem;   /* 10px */
  --fs-2xs:  0.6875rem;  /* 11px */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-md:   0.875rem;   /* 14px */
  --fs-base: 0.9375rem;  /* 15px, tekst akapitowy */
  --fs-lg:   1rem;       /* 16px */
  --fs-xl:   1.125rem;   /* 18px */
  --fs-2xl:  1.25rem;    /* 20px */
  --fs-3xl:  1.5rem;     /* 24px */
  --fs-4xl:  1.875rem;   /* 30px */
  --fs-5xl:  2.25rem;    /* 36px */
  --fs-6xl:  3rem;       /* 48px */

  /* ── Hero padding-top (clears fixed header: top-bar + nav ≈ 116px + breathing room) ── */
  --hero-pt: clamp(120px, 9vw, 150px);

  /* ── Spacing (siatka 8px) ── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
}

/* ── Motyw akcentu stron specjalnych ──
   Nadpisuje token --ks-accent komponentów (eyebrow / heading <em> / arrow-link).
   Strona zachowuje jeden styl, zmienia tylko kolor akcentu wg motywu strony.
   (zgp używa .oz-page, które ustawia --ks-accent: var(--oz) niżej) */
.page-template-template-adwokat24,
.page-template-template-adwokat24-sub {
  --ks-accent: #FF6B6B;
  --ks-accent-strong: #FF8787;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  /* Tła */
  --bg-primary: #121212;
  --bg-secondary: #1A1A1A;
  --bg-tertiary: #2A2A2A;
  --bg-elevated: #1E1E1E;

  /* Tekst */
  --text-primary: #E8E4DE;
  --text-secondary: #C5C0B5;
  --text-tertiary: #9A9590;
  --text-muted: #6B6B6B;
  /* --text-inverse: NIE zmieniamy — zawsze jasny, bo używany na sekcjach z ciemnym bg (hero, emergency) */

  /* Akcent – jaśniejszy na ciemnym tle */
  --accent: #4A9A6A;
  --accent-hover: #5AAF7A;
  --accent-light: #6BC48A;
  --accent-bg: rgba(74,154,106,0.10);
  --accent-border: rgba(74,154,106,0.20);
  --accent-bg-solid: #1A2E22;
  --accent-border-solid: #2A4D3A;

  /* Szampan */
  --accent-champagne: #D4C9AB;
  --champagne-bg-solid: #1E1B16;
  --champagne-border-solid: #3D3526;
  --ink-brass: #C9B583;

  /* Emergency – nieco ciemniejsze od strony */
  --emergency-bg: #0A0A0A;
  --emergency-glow: rgba(74,154,106,0.25);

  /* Alert / zarzuty — jaśniejszy bursztyn na ciemnym tle (tekst-safe na dark) */
  --alert: #E0912F;
  --alert-hover: #F0A94E;
  --alert-light: #F0A94E;
  --alert-bg: rgba(224,145,47,0.12);
  --alert-bg-solid: #2A2012;
  --alert-border-solid: #5C4522;
  --alert-on: #1A1207;

  /* Dark sections — tła się lekko zmieniają, tekst NIE (--dark-text* zostaje jasny) */
  --dark-bg: #0F1F18;
  --dark-bg-alt: #0A0A0A;
  --dark-bg-elevated: #162E22;
  --dark-border: #253D32;
  --dark-border-subtle: #1C3328;
  /* --dark-text, --dark-text-secondary, --dark-text-muted: NIE nadpisujemy */

  /* Obramowania */
  --border: #2A2A2A;

  /* Cienie – mocniejsze na ciemnym tle */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-focus: 0 0 0 3px rgba(74,154,106,0.30);

  color-scheme: dark;
}

/* Dark mode: logo inversion for header + mobile nav panel */
[data-theme="dark"] .nav-logo__img,
[data-theme="dark"] .mobile-nav__logo img {
  filter: brightness(0) invert(1);
}

/* Dark mode: media logos need to stay readable */
[data-theme="dark"] .media__logo-link:hover .media__logo--fakt { color: #FF5252; }
[data-theme="dark"] .media__logo-link:hover .media__logo--natemat { color: #9A9ACA; }
[data-theme="dark"] .media__logo-link:hover .media__logo--onet { color: #FFD54F; }
[data-theme="dark"] .media__logo-link:hover .media__logo--prawo { color: #66BB6A; }
[data-theme="dark"] .media__logo-link:hover .media__logo--trojka { color: #64B5F6; }

/* Dark mode: social share buttons */
[data-theme="dark"] .blog-share__btn--facebook:hover { color: #5A9CF6; border-color: #5A9CF6; }
[data-theme="dark"] .blog-share__btn--linkedin:hover { color: #4A9AE6; border-color: #4A9AE6; }
[data-theme="dark"] .blog-share__btn--whatsapp:hover { color: #4ADE80; border-color: #4ADE80; }

/* Dark mode: category badge colors on bw (baza-wiedzy) cards – keep vibrant */
[data-theme="dark"] .bw-card__badge { opacity: 0.9; }

/* Dark mode: images – subtle brightness reduction */
[data-theme="dark"] .bw-card__image,
[data-theme="dark"] .blog-hero__image img {
  filter: brightness(0.85);
}

/* Dark mode: hardcoded white text on buttons – keep white */
[data-theme="dark"] .btn-primary { color: #fff; }
[data-theme="dark"] .btn-accent { color: #0D0D0D; }

/* Dark mode: form inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border);
}

/* Dark mode: scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); }

/* Dark mode: case-card emergency variant — keep contrast */
[data-theme="dark"] .case-card--emergency {
  background: #0A0A0A;
  border-color: #1a1a1a;
}
[data-theme="dark"] .case-card--emergency:hover {
  background: #0F0F0F;
}

/* Dark mode: bw-search input */
[data-theme="dark"] .bw-search__input {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="dark"] .bw-search__dropdown {
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Dark mode: bw-sidebar CTA */
[data-theme="dark"] .bw-sidebar__cta {
  background: var(--bg-secondary);
  border-color: var(--border);
}

/* Dark mode: smooth transition on toggle click */
html.theme-transitioning,
html.theme-transitioning body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode: footer badge keep white bg for image visibility */
[data-theme="dark"] .footer__badge-img {
  background: #fff;
}

/* Dark mode: blog single – prose content */
[data-theme="dark"] .blog-content h2,
[data-theme="dark"] .blog-content h3,
[data-theme="dark"] .blog-content h4 {
  color: var(--text-primary);
}
[data-theme="dark"] .blog-content blockquote {
  border-left-color: var(--accent);
  background: var(--accent-bg);
}
[data-theme="dark"] .blog-content code {
  background: var(--bg-secondary);
  color: var(--accent-light);
}
[data-theme="dark"] .blog-content table th {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
[data-theme="dark"] .blog-content table td {
  border-color: var(--border);
}

/* Dark mode: sort dropdown */
[data-theme="dark"] .bw-sort-dropdown__menu {
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Dark mode: bw filters */
[data-theme="dark"] .bw-filters__pill {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-color: var(--border);
}
[data-theme="dark"] .bw-filters__pill.is-active {
  background: var(--accent);
  color: #fff;
}

/* Dark mode: pill buttons — fix rgba(0,0,0) borders invisible on dark bg */
[data-theme="dark"] .bw-filters__pill {
  border-color: var(--border);
}
[data-theme="dark"] .bw-filters__pill:hover {
  border-color: var(--text-muted);
  background: var(--bg-tertiary);
}
[data-theme="dark"] .bw-filters__pill-count {
  background: var(--bg-tertiary);
}

/* Dark mode: sort dropdown — fix borders and shadows */
[data-theme="dark"] .bw-sort-dropdown__trigger {
  border-color: var(--border);
}
[data-theme="dark"] .bw-sort-dropdown__trigger:hover {
  border-color: var(--text-muted);
}
[data-theme="dark"] .bw-sort-dropdown__menu {
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Dark mode: category badges — hardcoded colors */
[data-theme="dark"] [class*="bw-card__badge--"][class*="gospodarcze"] {
  color: #D4C9AB;
  background: var(--champagne-bg-solid);
}
[data-theme="dark"] [class*="bw-card__badge--"][class*="skarbowe"] {
  color: #7EB3D4;
  background: rgba(78,139,186,0.12);
}

/* Dark mode: search dropdown */
[data-theme="dark"] .bw-search__dropdown {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
[data-theme="dark"] .bw-search__dropdown-item:hover {
  background: var(--bg-tertiary);
}

/* Dark mode: stabs (vertical tabs) */
[data-theme="dark"] .stabs__panel {
  background: var(--bg-elevated);
  border-color: var(--border);
}
[data-theme="dark"] .stab {
  color: var(--text-secondary);
}
[data-theme="dark"] .stab:hover {
  background: var(--bg-tertiary);
}
[data-theme="dark"] .stab.is-active {
  background: var(--accent-bg);
  color: var(--text-primary);
}

/* Dark mode: expert sidebar */
[data-theme="dark"] .expert__sidebar {
  color: var(--text-secondary);
}

/* Dark mode: blog single content area */
[data-theme="dark"] .blog-grid__main {
  color: var(--text-secondary);
}
[data-theme="dark"] .blog-sidebar__toc {
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Dark mode: mobile select */
[data-theme="dark"] .bw-filters__select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border);
}

/* ── Bookmark button ── */
.bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.bookmark-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border-solid);
  background: var(--accent-bg);
}
.bookmark-btn.is-saved {
  color: var(--accent);
  border-color: var(--accent-border-solid);
  background: var(--accent-bg-solid);
}
.bookmark-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.25s ease;
}
.bookmark-btn.is-saved svg {
  fill: currentColor;
}
.bookmark-btn__label--saved { display: none; }
.bookmark-btn.is-saved .bookmark-btn__label--default { display: none; }
.bookmark-btn.is-saved .bookmark-btn__label--saved { display: inline; }

/* Card bookmark — small icon in top-right corner of card image */
.bw-card__bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
  color: var(--text-muted);
  opacity: 0;
}
.bw-card:hover .bw-card__bookmark,
.bw-card__bookmark.is-saved {
  opacity: 1;
}
.bw-card__bookmark:hover {
  background: rgba(255,255,255,1);
  color: var(--accent);
}
.bw-card__bookmark.is-saved {
  background: var(--accent);
  color: #fff;
}
.bw-card__bookmark svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.2s ease;
}
.bw-card__bookmark.is-saved svg {
  fill: currentColor;
}
[data-theme="dark"] .bw-card__bookmark {
  background: rgba(30,30,30,0.85);
  color: var(--text-muted);
}
[data-theme="dark"] .bw-card__bookmark:hover {
  background: rgba(30,30,30,1);
  color: var(--accent);
}
[data-theme="dark"] .bw-card__bookmark.is-saved {
  background: var(--accent);
  color: #fff;
}

/* Card image wrapper needs position relative for bookmark */
.bw-card__image-wrap {
  position: relative;
  overflow: hidden;
}

/* ── Sidebar: saved articles section ── */
.bw-sidebar__saved {
  display: none; /* shown by JS when there are bookmarks */
}
.bw-sidebar__saved.has-items {
  display: block;
}
.bw-sidebar__saved-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bw-sidebar__saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.bw-sidebar__saved-item:last-child {
  border-bottom: none;
}
.bw-sidebar__saved-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  transition: color 0.2s ease;
}
.bw-sidebar__saved-link:hover {
  color: var(--accent);
}
.bw-sidebar__saved-remove {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.bw-sidebar__saved-remove:hover {
  color: var(--accent);
  background: var(--accent-bg);
}
.bw-sidebar__saved-remove svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── Ask Form (contextual) ── */
.ask-form {
  background: var(--bg-secondary);
  padding: clamp(64px, 7vw, 112px) 0;
  position: relative;
}
.ask-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 1200px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bg-tertiary), transparent);
}
.ask-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.ask-form__eyebrow {
  /* wygląd w components/atoms/eyebrow */
  margin-bottom: 20px;
}
.ask-form__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 16px;
}
.ask-form__lead {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 440px;
}
.ask-form__trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ask-form__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-tertiary);
}
.ask-form__trust-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--accent);
}

/* Card */
.ask-form__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-md);
}
.ask-form__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ask-form__category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  border-radius: 100px;
  width: fit-content;
  margin-bottom: 4px;
}
.ask-form__category-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ask-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ask-form__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.ask-form__req {
  color: var(--accent);
  font-weight: 700;
}
.ask-form__input,
.ask-form__textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ask-form__input::placeholder,
.ask-form__textarea::placeholder {
  color: var(--text-muted);
}
.ask-form__input:focus,
.ask-form__textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.ask-form__textarea {
  resize: vertical;
  min-height: 80px;
}
.ask-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.ask-form__submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
.ask-form__disclaimer {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}
.ask-form__disclaimer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Success state */
.ask-form__success {
  text-align: center;
  padding: 32px 16px;
}
.ask-form__success svg {
  width: 48px;
  height: 48px;
  stroke: var(--accent);
  margin-bottom: 16px;
}
.ask-form__success-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.ask-form__success-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.ask-form__success-text a {
  color: var(--accent);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .ask-form__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── Reading progress bar ── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1001;
  pointer-events: none;
  background: transparent;
}
.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--bg-tertiary);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}
.theme-toggle:hover svg {
  transform: rotate(15deg);
}
/* Sun icon hidden by default (light mode shows moon) */
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

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

/* ── Płynny root: jedyne pokrętło skalowania liter w całym serwisie ──
   Cała typografia motywu jest zapisana w rem, więc ta jedna reguła steruje
   rozmiarem pisma na każdej stronie:
     360px  → 16,00px  (dokładnie dzisiejszy render, na telefonie nic się nie kurczy)
     768px  → 16,52px
     1024px → 16,85px
     1440px → 17,38px
     1920px → 18,00px  (dalej płasko, layout i tak stoi na max-width 1440px)
   Człon rem w środku clamp() jest obowiązkowy. Bez niego (czyste vw) tekst
   przestaje reagować na ustawienie rozmiaru czcionki w przeglądarce i strona
   łamie WCAG 1.4.4 „Resize text". Na root elemencie rem liczy się od wartości
   początkowej, czyli od preferencji użytkownika, nie od siebie samego.
   text-size-adjust blokuje dodatkowe napompowanie tekstu przez Safari na iOS
   przy obrocie do poziomu, które nakładałoby się na skalowanie poniżej. */
html {
  font-size: clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
em { font-style: normal; }

/* ── Container ── */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 12px + 3vw, 96px);
}

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.4; transform: scale(1.6); }
}
@keyframes drawLine {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ── Pulse Dot (emergency) ── */
.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--emergency-accent);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--emergency-accent);
  opacity: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; background: var(--accent); color: #FFFFFF;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.5px; border-radius: 6px; border: none;
  cursor: pointer; transition: all 0.3s ease;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46,107,71,0.25);
}
.btn-primary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.btn-accent {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; background: var(--accent-light); color: var(--dark-bg);
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700;
  border-radius: 10px; border: none; cursor: pointer; transition: all 0.3s ease;
}
.btn-accent:hover {
  background: #5AAF7A;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(74,154,106,0.3);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 24px; background: transparent; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  border-radius: 6px; border: 1px solid var(--bg-tertiary);
  cursor: pointer; transition: all 0.3s ease;
}
.btn-ghost:hover {
  border-color: var(--accent); color: var(--text-primary);
  transform: translateY(-2px);
}

.btn-ghost-dark {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; background: transparent; color: var(--dark-text);
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  border-radius: 10px; border: 1px solid var(--dark-border);
  cursor: pointer; transition: all 0.3s ease;
}
.btn-ghost-dark:hover {
  border-color: var(--accent-light); color: var(--accent-light);
  transform: translateY(-2px);
}

/* ── Reduced Motion ──
   Samo skrócenie czasu trwania NIE zatrzymuje animacji nieskończonych
   (animation-iteration-count: infinite) — pulsujące tła, obracające się ramki
   i migające kropki statusu przelatywały tysiące cykli na sekundę, czyli gorzej
   niż bez tej reguły. Iteracja musi być domknięta osobno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   HEADER — Site Header
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* ── Top Bar (Layer 1) ── */
.top-bar {
  background: var(--dark-bg-alt);
  max-height: 44px;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  opacity: 1;
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  height: 44px;
}
.top-bar__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
}
.top-bar__link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-text-muted);
  transition: color 0.25s ease;
}
.top-bar__link:hover {
  color: var(--dark-text);
}
.top-bar__separator {
  width: 1px;
  height: 14px;
  background: var(--dark-border);
  flex-shrink: 0;
}
.top-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.top-bar__contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-text-secondary);
  transition: color 0.25s ease;
}
.top-bar__contact-item:hover {
  color: var(--accent-light);
}
.top-bar__contact-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.site-header.is-scrolled .top-bar {
  max-height: 0;
  opacity: 0;
}

/* ── Main Nav (Layer 2) ── */
.main-nav {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--bg-tertiary);
  transition: border-color 0.35s ease;
}
.main-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: 16px;
  padding-bottom: 16px;
  transition: padding 0.35s ease;
}
.site-header.is-scrolled .main-nav .container {
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-header.is-scrolled .main-nav {
  border-color: transparent;
}

/* ── Logo ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo__img {
  height: 40px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.nav-logo:hover .nav-logo__img {
  opacity: 0.8;
}

/* ── Nav Links ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.nav-links__link,
.nav-links__trigger {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 0;
  position: relative;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-links__link::after,
.nav-links__trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav-links__link:hover,
.nav-links__link:focus-visible,
.nav-links__trigger:hover,
.nav-links__trigger:focus-visible,
.nav-links__trigger[aria-expanded="true"] {
  color: var(--text-primary);
}
.nav-links__link:hover::after,
.nav-links__link:focus-visible::after,
.nav-links__trigger:hover::after,
.nav-links__trigger:focus-visible::after,
.nav-links__trigger[aria-expanded="true"]::after {
  width: 100%;
}
.nav-links__link:focus-visible,
.nav-links__trigger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}
.nav-links__trigger-chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s ease;
}
.nav-links__trigger[aria-expanded="true"] .nav-links__trigger-chevron {
  transform: rotate(180deg);
}

/* ── Nav Actions (CTA + Phone) ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav-emergency-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--emergency-bg);
  color: var(--emergency-text);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.nav-emergency-cta:hover {
  background: #1a1a1a;
  box-shadow: 0 4px 16px rgba(74,154,106,0.2);
  transform: translateY(-1px);
}
.nav-emergency-cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.nav-phone:hover {
  color: var(--accent);
}
.nav-phone:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.nav-phone__icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.nav-phone__text {
  letter-spacing: 0.5px;
}

/* ── Hamburger ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.nav-hamburger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MEGA-MENU
   ============================================================ */

.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 16px 48px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.06);
}
.nav-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.2fr;
  gap: var(--space-4);
  padding-top: clamp(32px, 3vw, 48px);
  padding-bottom: clamp(32px, 3vw, 48px);
}

.nav-mega__col {
  min-width: 0;
}

.nav-mega__category {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
a.nav-mega__category-link {
  color: inherit;
  transition: color 0.25s ease;
}
a.nav-mega__category-link:hover {
  color: var(--text-primary);
}
a.nav-mega__category-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 2px;
}

.nav-mega__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mega__link {
  display: block;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
  transition: all 0.25s ease;
  border-radius: 4px;
}
.nav-mega__link:hover,
.nav-mega__link:focus-visible {
  color: var(--text-primary);
  padding-left: 4px;
}
.nav-mega__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* "More" link per column */
.nav-mega__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.25s ease;
}
.nav-mega__more:hover {
  gap: 8px;
}
.nav-mega__more svg {
  transition: transform 0.25s ease;
}
.nav-mega__more:hover svg {
  transform: translateX(2px);
}

/* Emergency column (Column 5) */
.nav-mega__emergency {
  background: var(--dark-bg);
  border-radius: 14px;
  padding: var(--space-3);
  border: 1px solid var(--dark-border);
  align-self: start;
}
.nav-mega__emergency .nav-mega__category {
  color: var(--emergency-accent);
  border-bottom-color: var(--dark-border);
}
.nav-mega__emergency .nav-mega__link {
  color: var(--dark-text-secondary);
  opacity: 0.85;
}
.nav-mega__emergency .nav-mega__link:hover,
.nav-mega__emergency .nav-mega__link:focus-visible {
  opacity: 1;
  color: #FFFFFF;
}

/* Emergency CTA — urgent button with glow animation */
@keyframes emergencyGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,154,106,0.4), 0 4px 16px rgba(74,154,106,0.1); }
  50% { box-shadow: 0 0 20px 4px rgba(74,154,106,0.25), 0 4px 24px rgba(74,154,106,0.2); }
}
@keyframes emergencyShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

.nav-mega__emergency-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-3);
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--emergency-accent), #3A7D56);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 10px;
  border: 1px solid rgba(74,154,106,0.3);
  transition: all 0.3s ease;
  justify-content: center;
  position: relative;
  overflow: hidden;
  animation: emergencyGlow 3s ease-in-out infinite;
}
.nav-mega__emergency-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: emergencyShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.nav-mega__emergency-cta:hover {
  background: linear-gradient(135deg, #5AAF7A, var(--emergency-accent));
  transform: translateY(-2px);
  box-shadow: 0 0 28px 6px rgba(74,154,106,0.3), 0 8px 32px rgba(74,154,106,0.25);
  animation: none;
}
.nav-mega__emergency-cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), 0 0 20px 4px rgba(74,154,106,0.25);
}
.nav-mega__emergency-cta .pulse-dot {
  width: 10px;
  height: 10px;
}
.nav-mega__emergency-cta .pulse-dot::after {
  inset: -5px;
}
.nav-mega__emergency-cta svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--bg-elevated);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.mobile-nav__inner {
  padding: 16px clamp(20px, 5vw, 40px) 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mobile-nav__logo img {
  height: 32px;
  width: auto;
}
.mobile-nav__close {
  position: static;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.mobile-nav__close:hover {
  background: var(--bg-secondary);
}
.mobile-nav__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.mobile-nav__close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mobile-nav__emergency-top {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.mobile-nav__emergency-top .nav-emergency-cta {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 0.875rem;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav__link {
  display: block;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}
.mobile-nav__link:hover {
  color: var(--accent);
  padding-left: 4px;
}
.mobile-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}

/* Mobile accordion */
.mobile-accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
  text-align: left;
}
.mobile-accordion__trigger:hover {
  color: var(--accent);
  padding-left: 4px;
}
.mobile-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}
.mobile-accordion__trigger-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.mobile-accordion__trigger[aria-expanded="true"] .mobile-accordion__trigger-icon {
  transform: rotate(180deg);
}
.mobile-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-accordion__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) 0 var(--space-2) var(--space-2);
}
.mobile-accordion__link {
  display: block;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-secondary);
  transition: all 0.25s ease;
}
.mobile-accordion__link:hover {
  color: var(--text-primary);
  padding-left: 4px;
}
.mobile-accordion__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}

/* Emergency accordion item */
.mobile-accordion__item--emergency {
  background: var(--dark-bg);
  border-radius: 12px;
  padding: 0 var(--space-2);
  margin-top: var(--space-1);
  border: 1px solid var(--dark-border);
}
.mobile-accordion__item--emergency .mobile-accordion__trigger {
  color: var(--emergency-accent);
  border-bottom-color: var(--dark-border);
  gap: 8px;
  justify-content: flex-start;
}
.mobile-accordion__item--emergency .mobile-accordion__trigger-icon {
  margin-left: auto;
}
.mobile-accordion__item--emergency .mobile-accordion__link {
  color: var(--dark-text-secondary);
  opacity: 0.85;
}
.mobile-accordion__item--emergency .mobile-accordion__link:hover {
  opacity: 1;
  color: #FFFFFF;
}

.mobile-nav__contact {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mobile-nav__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.mobile-nav__contact-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Próg hamburgera stoi na 1280px, nie na 1100px, bo poziome menu nie mieści się
   w jednym wierszu poniżej 1260px: „Baza Wiedzy" i „O Kancelarii" łamią się na
   dwa wiersze i belka rośnie z 79px do 100px. Pomiar na świeżo wczytanej stronie
   głównej (wysokość .main-nav < 88px): mieści się dopiero od 1260px. Pas
   1101-1259 był więc zepsuty jeszcze przed wprowadzeniem skalowania liter, które
   przesunęło granicę o kolejne 40px. Podniesienie progu zamyka oba pasy naraz.
   1280px zamiast 1260px to zapas na wahania szerokości po dociągnięciu fontów
   i na klasyczne paski przewijania w Windows. Laptopy 1280px zostają na menu
   poziomym, bo tam belka mieści się bez łamania.
   Ten sam próg siedzi w assets/js/script.js (isDesktop) i w critical-home.css. */
@media (max-width: 1279px) {
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .nav-actions {
    display: none;
  }
  .top-bar {
    display: none;
  }
  .theme-toggle {
    order: 1;
    width: 32px;
    height: 32px;
  }
  .nav-hamburger {
    order: 2;
  }
}

@media (min-width: 601px) and (max-width: 1279px) {
  .nav-mega__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .nav-mega__emergency {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .main-nav .container {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .nav-logo__sygnet {
    width: 36px;
    height: 36px;
    font-size: 1.0625rem;
    border-radius: 8px;
  }
  .nav-logo__text {
    display: none;
  }
  .nav-phone__text {
    display: none;
  }
  .nav-phone {
    padding: 8px;
  }
  .nav-mega__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

@media (min-width: 1280px) {
  .mobile-nav {
    display: none !important;
  }
  .nav-phone__icon {
    display: none;
  }
}

/* ── Body scroll lock ── */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ============================================================
   HERO — Strona główna (prefix: hh-)
   ============================================================ */

/* Skip link (global — in header.php for all pages) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--accent, #2E6B47);
  color: #fff;
  padding: 12px 24px;
  z-index: 10000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* ── Mobile accordion emergency link ── */
.mobile-accordion__link--emergency {
  color: var(--emergency-accent, #4A9A6A);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ============================================================
   FOOTER — Kancelaria Adwokacka Oskar Skoczylas
   Uses design tokens from style.css
   ============================================================ */

/* Main footer wrapper */
.site-footer {
  background: var(--dark-bg-alt);
  color: var(--dark-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.7;
  padding-top: var(--space-10);
}

/* Logo replaces heading in contact column */
.footer__logo {
  height: 42px;
  width: auto;
  margin-bottom: var(--space-3);
}

/* Four-column grid */
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: 0;
}

/* Column headings */
.footer__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-text);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

/* Contact address block */
.footer__address {
  font-style: normal;
  margin-bottom: var(--space-3);
}

.footer__address-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  color: var(--dark-text-secondary);
}

.footer__address-line--name {
  color: var(--dark-text);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.footer__address-line--legal {
  font-size: 0.75rem;
  color: var(--dark-text-muted);
  margin-top: 4px;
}

.footer__icon {
  width: 16px;
  height: 16px;
  color: var(--accent-light);
  flex-shrink: 0;
}

/* Links */
.footer__link {
  color: var(--dark-text-secondary);
  transition: color 0.2s ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--accent-light);
}

.footer__link--external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer__external-icon {
  font-size: 0.625rem;
  opacity: 0.6;
}

/* Messenger icons */
.footer__messengers {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.footer__messenger-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--dark-border);
  color: var(--dark-text-secondary);
  font-size: 1.125rem;
  transition: all 0.2s ease;
}

.footer__messenger-link svg {
  width: 20px;
  height: 20px;
}

.footer__messenger-link:hover,
.footer__messenger-link:focus-visible {
  color: var(--accent-light);
  border-color: var(--accent-light);
  background: rgba(74, 154, 106, 0.08);
}

/* Hours and 24/7 badge */
.footer__hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer__hours-line {
  color: var(--dark-text-muted);
  font-size: 0.8125rem;
}

.footer__badge-24 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(74, 154, 106, 0.12);
  color: var(--accent-light);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(74, 154, 106, 0.2);
  width: fit-content;
  letter-spacing: 0.02em;
}

/* Hours + Bank row below grid */
.footer__hours-bank {
  display: flex;
  /* Numery rachunków mają white-space: nowrap od 400px, więc ten rząd ma twardą
     szerokość minimalną, której nie da się ścisnąć. Przełącznik na kolumnę stoi
     dopiero przy 640px, a między 641px a ~860px blok rachunków przestaje się
     mieścić obok godzin, gdy pismo urośnie razem z ekranem. `wrap` zdejmuje to
     z breakpointu: blok schodzi do własnego wiersza dokładnie wtedy, kiedy
     trzeba, niezależnie od rozmiaru pisma i ustawień przeglądarki. */
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0 var(--space-4);
  border-bottom: 1px solid var(--accent);
  margin-top: 0;
}

/* Bank accounts */
.footer__bank {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__bank-items {
  display: flex;
  gap: var(--space-4);
}

.footer__bank-label {
  font-size: 0.75rem;
  color: var(--dark-text-muted);
  margin-bottom: 2px;
}

.footer__bank-item {
  display: flex;
  /* Mobile first: przy zawiniętym numerze plakietka waluty i przycisk kopiowania
     mają stać przy PIERWSZYM wierszu, nie w pionowym środku dwóch. Wyśrodkowanie
     wraca wyżej, gdzie numer i tak mieści się w jednej linii. */
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 400px) {
  .footer__bank-item {
    align-items: center;
  }
}

.footer__bank-currency {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent-light);
  background: rgba(74, 154, 106, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Mobile first: numer rachunku ma prawo się zawinąć.
   Pisany jest grupami po cztery cyfry, więc łamie się czysto na spacji;
   `anywhere` to siatka bezpieczeństwa na wypadek IBAN-u wpisanego ciągiem.
   Bez tego jeden nierozerwalny ciąg 31 znaków rozpychał stopkę i przewijał
   CAŁĄ stronę w poziomie przy 320px (zmierzone: scrollWidth 326 przy vw 320).
   Od 400px numer mieści się w jednym wierszu, więc wraca `nowrap`. */
.footer__bank-number {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.75rem;
  color: var(--dark-text-secondary);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
@media (min-width: 400px) {
  .footer__bank-number {
    white-space: nowrap;
  }
}

.footer__bank-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--dark-border);
  color: var(--dark-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: none;
}

.footer__bank-copy svg {
  width: 14px;
  height: 14px;
}

.footer__bank-copy:hover,
.footer__bank-copy:focus-visible {
  color: var(--accent-light);
  border-color: var(--accent-light);
}

.footer__bank-copy.is-copied {
  color: var(--accent-light);
  border-color: var(--accent-light);
  background: rgba(74, 154, 106, 0.08);
}

/* Navigation lists */
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Social media links */
.footer__social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--dark-border);
  color: var(--dark-text-secondary);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--accent-light);
  border-color: var(--accent-light);
  background: rgba(74, 154, 106, 0.08);
}

/* Bottom bar */
.footer__bottom {
  padding: var(--space-4) 0;
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__copyright {
  color: var(--dark-text-muted);
  font-size: 0.8125rem;
}

/* Media logos section */
.footer__media {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__media-label {
  color: var(--dark-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.footer__media-logos {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.footer__media-sep {
  color: var(--dark-text-muted);
  opacity: 0.3;
  font-size: 0.8125rem;
}

/* Font-based media logos, matching hero/media section style */
.footer__media-text {
  color: var(--dark-text-muted);
  opacity: 0.55;
  transition: opacity 0.2s ease;
  line-height: 1;
}

.footer__media-text:hover {
  opacity: 0.85;
}

.footer__media--fakt {
  font-family: 'Space Grotesk', Impact, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer__media--onet {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.footer__media--natemat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
}

.footer__media-light {
  font-weight: 300;
  opacity: 0.65;
}

.footer__media--prawo {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
}

.footer__media-dot {
  font-weight: 500;
  font-size: 0.75em;
  opacity: 0.7;
}

.footer__media--trojka {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Award badge */
.footer__badge-img {
  height: 48px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.footer__badge-img:hover {
  opacity: 1;
}

/* ── Tablet: 2 columns ── */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-5);
  }
}

/* ── Mobile: single column ── */
@media (max-width: 640px) {
  .site-footer {
    padding-top: var(--space-8);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-bottom: var(--space-3);
  }

  .footer__hours-bank {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer__bank-items {
    flex-direction: column;
    gap: 8px;
  }

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer__media {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .footer__media-logos {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* Focus styles for accessibility */
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   SPECJALIZACJE — Hero (Manifest)
   ============================================================ */

.sp-hero {
  position: relative;
  background: var(--dark-bg);
  /* padding-top clears fixed header */
  padding: var(--hero-pt) 0 var(--space-5);
  overflow: hidden;
  /* Manifest wyśrodkowany nad pełnoekranowym plakatem/filmem (scena kinowa) */
  display: flex;
  align-items: center;
  min-height: clamp(600px, 90vh, 900px);
}
/* .ks-has-video daje globalnie cursor:pointer całej sekcji — tu klika tylko pasek sceny */
.sp-hero.ks-has-video { cursor: default; }

/* ── Tło hero: plakat atmosferyczny w malachitowym duotonie ── */
.sp-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.sp-hero__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Zdjęcie ma być tłem, nie bohaterem — stonowane do malachitowej czerni */
  filter: grayscale(0.4) contrast(1.02) brightness(0.5);
}
/* Malachitowy duoton + scrim czytelności; kryty przez odtwarzacz przy is-playing.
   Płaski „floor" 0.55 przez całą strefę tekstu, głębszy u dołu — gwarantuje
   kontrast eyebrow/negacji nawet nad jasnymi fragmentami zdjęcia (niebo). */
.sp-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(46,107,71,0.30) 0%, transparent 64%),
    linear-gradient(180deg, rgba(15,45,31,0.62) 0%, rgba(15,45,31,0.56) 45%, rgba(15,45,31,0.85) 100%);
  pointer-events: none;
}

/* ── Pasek sceny (widoczny tylko przy filmie) ── */
.sp-hero__scene {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - 2 * var(--space-3));
  padding: 10px 22px 10px 12px;
  border-radius: 100px;
  background: rgba(13,13,13,0.55);
  border: 1px solid var(--dark-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Nadpisanie globalnego .ks-play (inset:0) na zwykły przycisk w pasku */
.sp-hero__play.ks-play {
  position: relative;
  inset: auto;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.sp-hero__play .ks-play__icon { width: 44px; height: 44px; }
.sp-hero__scene-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.sp-hero__scene-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-text);
}
.sp-hero__scene-dur {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
}

/* ── Odtwarzanie: manifest i pasek ustępują, film wypełnia hero full-bleed ── */
.sp-hero.is-playing .sp-hero__inner {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.sp-hero.is-playing .sp-hero__scene { display: none; }

/* Radial gradient overlays for depth — matching hh-hero pattern */
.sp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* nad plakatem (.sp-hero__media z-index:0), pod treścią */
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(46,107,71,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 85% 20%, rgba(46,107,71,0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,0,0,0.3) 0%, transparent 70%);
  pointer-events: none;
}

/* Accent top line — symmetric, matching hh-hero__topline */
.sp-hero__topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
  opacity: 0.5;
}

.sp-hero__inner {
  position: relative;
  z-index: 2; /* nad plakatem, duotonem i ::before */
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  text-align: center;
}

/* Breadcrumb */
.sp-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--dark-text-muted);
  margin-bottom: var(--space-3);
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.sp-hero__breadcrumb a {
  color: var(--dark-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.sp-hero__breadcrumb a:hover {
  color: var(--accent-light);
}
.sp-hero__breadcrumb-sep {
  color: var(--dark-text-muted);
  user-select: none;
}

/* Eyebrow badge */
.sp-hero__badge {
  margin-bottom: var(--space-3);
}
.sp-hero__badge span {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(46,107,71,0.08);
  border: 1px solid rgba(46,107,71,0.18);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-light);
}

/* H1 */
.sp-hero__heading {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  font-weight: 700;
  color: var(--text-inverse);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: var(--space-3);
}
.sp-hero__heading em {
  font-style: normal;
  color: var(--accent-light);
}

/* Negations — inline row with separators */
.sp-hero__negations {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-bottom: var(--space-2);
}
.sp-hero__negation {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--dark-text-muted);
  line-height: 1.5;
  opacity: 0;
  animation: spNegationIn 0.5s ease forwards;
}
.sp-hero__negation:nth-child(1) { animation-delay: 0.6s; }
.sp-hero__negation:nth-child(3) { animation-delay: 0.9s; }
.sp-hero__negation:nth-child(5) { animation-delay: 1.2s; }
.sp-hero__negation-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dark-text-muted);
  margin: 0 12px;
  flex-shrink: 0;
  opacity: 0;
  animation: spNegationIn 0.3s ease forwards;
}
.sp-hero__negation-sep:nth-child(2) { animation-delay: 0.75s; }
.sp-hero__negation-sep:nth-child(4) { animation-delay: 1.05s; }

@keyframes spNegationIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lead paragraph — the resolving "yes" */
.sp-hero__lead {
  /* Lead prosto, bez kursywy — grunt manifestu (kursywę niesie wiersz negacji) */
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  font-style: normal;
  font-weight: 400;
  color: var(--dark-text-secondary);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto var(--space-3);
  opacity: 0;
  animation: spNegationIn 0.6s ease 1.5s forwards;
}

/* Divider */
.sp-hero__divider {
  width: 40px;
  height: 1px;
  background: var(--dark-border);
  border: none;
  margin: 0 auto var(--space-3);
}

/* Trust bar */
.sp-hero__trust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--dark-text-muted);
  margin-bottom: var(--space-4);
}
.sp-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sp-hero__trust-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-light);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sp-hero__trust-sep {
  color: var(--dark-text-muted);
  user-select: none;
}

/* Licznik "440+": wartość w markupie serwerowym, animacja przez
   globalny count-up [data-animate] w script.js (progressive enhancement). */

/* CTAs */
.sp-hero__ctas {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.sp-hero__ctas .btn-accent,
.sp-hero__ctas .btn-ghost-dark {
  text-decoration: none;
}
.sp-hero__ctas .btn-accent svg,
.sp-hero__ctas .btn-ghost-dark svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.sp-hero__ctas .btn-accent:focus-visible,
.sp-hero__ctas .btn-ghost-dark:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Scroll-down connector line */
.sp-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--dark-border), transparent);
  border: none;
  margin: 0 auto;
}

/* ── Entrance animations ── */
@keyframes spFadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-anim {
  opacity: 0;
  animation: spFadeInUp 0.6s ease both;
}
.sp-anim--1 { animation-delay: 0.05s; }
.sp-anim--2 { animation-delay: 0.15s; }
.sp-anim--3 { animation-delay: 0.25s; }
.sp-anim--4 { animation-delay: 0.55s; }
.sp-anim--5 { animation-delay: 1.6s; }
.sp-anim--6 { animation-delay: 1.75s; }
.sp-anim--7 { animation-delay: 1.9s; }

/* ── Specjalizacje Hero — Mobile ── */
@media (max-width: 640px) {
  .sp-hero {
    /* niższy próg + zapas u dołu na pasek sceny */
    min-height: auto;
    padding: clamp(120px, 10vw, 150px) 0 96px;
  }
  .sp-hero__inner {
    text-align: left;
  }
  .sp-hero__poster {
    object-position: center 25%;
  }
  .sp-hero__scene {
    left: var(--space-3);
    right: var(--space-3);
    transform: none;
    max-width: none;
    justify-content: flex-start;
  }
  .sp-hero__breadcrumb {
    justify-content: flex-start;
  }
  .sp-hero__badge {
    text-align: left;
  }
  .sp-hero__negations {
    justify-content: flex-start;
  }
  .sp-hero__lead {
    margin-left: 0;
    margin-right: 0;
  }
  .sp-hero__divider {
    margin-left: 0;
  }
  .sp-hero__trust {
    justify-content: flex-start;
  }
  .sp-hero__ctas {
    flex-direction: column;
  }
  .sp-hero__ctas .btn-accent,
  .sp-hero__ctas .btn-ghost-dark {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .sp-hero__scroll-line {
    display: none;
  }
}

/* ── Specjalizacje Hero — Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sp-anim,
  .sp-hero__negation,
  .sp-hero__negation-sep,
  .sp-hero__lead {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   CATEGORY HERO — Split portrait bleed (sprawy-karne etc.)
   ============================================================ */

.cat-hero {
  position: relative;
  background: var(--dark-bg);
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hero-pt) 0 clamp(48px, 5vw, 72px);
  overflow: hidden;
}

/* Subtle bottom vignette */
.cat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,0,0,0.3) 0%, transparent 70%);
  pointer-events: none;
}

/* Noise grain texture for depth */
.cat-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Accent topline */
.cat-hero__topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
  opacity: 0.5;
}

/* Grid: 55/45 split */
.cat-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

/* ── Text column ── */
.cat-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}

/* Breadcrumb */
.cat-hero__breadcrumb {
  margin-bottom: var(--space-3);
}
.cat-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cat-hero__breadcrumb li {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.3px;
}
.cat-hero__breadcrumb li + li::before {
  content: '/';
  margin: 0 8px;
  color: var(--dark-border);
  font-weight: 400;
}
.cat-hero__breadcrumb a {
  color: var(--dark-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cat-hero__breadcrumb a:hover {
  color: var(--accent-light);
}
.cat-hero__breadcrumb li[aria-current="page"] {
  color: var(--dark-text-secondary);
}

/* H1 — with editorial accent bar */
.cat-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-inverse);
  margin-bottom: var(--space-3);
}
.cat-hero__heading em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  color: var(--accent-light);
}

/* Lead */
.cat-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--dark-text-secondary);
  max-width: 620px;
  margin-bottom: var(--space-4);
}

/* CTAs */
.cat-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.cat-hero__ctas .btn-accent svg,
.cat-hero__ctas .btn-ghost-dark svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.cat-hero__ctas .btn-accent:focus-visible,
.cat-hero__ctas .btn-ghost-dark:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Trust bar */
.cat-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 0;
}
.cat-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dark-text-muted);
}
.cat-hero__trust-item + .cat-hero__trust-item::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--dark-border);
  margin: 0 var(--space-2);
  flex-shrink: 0;
}
.cat-hero__trust-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-light);
  fill: none;
  flex-shrink: 0;
}

/* Testimonial spacing in category hero */
.cat-hero .hh-hero__testimonials {
  margin-bottom: var(--space-4);
}

/* ── Photo column ── */
.cat-hero__photo-wrap {
  position: relative;
  align-self: stretch;
  overflow: visible; /* bleed out of grid */
  z-index: 1;
}

.cat-hero__photo {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 14px;
}
.cat-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-hero__photo:hover img {
  transform: scale(1.03);
}

/* Badge: Orły Prawa — with shimmer */
@keyframes catHeroShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}
.cat-hero__award {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: 100px;
  background: rgba(46,107,71,0.15);
  border: 1px solid rgba(46,107,71,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent-light);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
}
.cat-hero__award::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: catHeroShimmer 4s ease-in-out 1.5s infinite;
}
.cat-hero__award > svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent-light);
  fill: none;
  flex-shrink: 0;
}
.cat-hero__award img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ── Entrance animations ── */
.cat-hero__content .cat-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-hero__content .cat-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cat-hero__photo-wrap .cat-anim {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-hero__photo-wrap .cat-anim.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.cat-hero__award {
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: opacity 0.45s ease 0.6s,
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.cat-hero__award.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Animation delay helpers */
.cat-anim-d1 { transition-delay: 0.05s !important; }
.cat-anim-d2 { transition-delay: 0.12s !important; }
.cat-anim-d3 { transition-delay: 0.2s !important; }
.cat-anim-d4 { transition-delay: 0.3s !important; }
.cat-anim-d5 { transition-delay: 0.4s !important; }
.cat-anim-d6 { transition-delay: 0.5s !important; }
.cat-anim-d7 { transition-delay: 0.6s !important; }
.cat-anim-d-photo { transition-delay: 0.18s !important; }


/* ── Responsive: Tablet (601–960) ── */
@media (max-width: 960px) {
  .cat-hero {
    min-height: auto;
    padding: clamp(96px, 12vw, 180px) 0 clamp(32px, 4vw, 48px);
  }
  .cat-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .cat-hero__content {
    order: 1;
  }
  .cat-hero__photo-wrap {
    order: 2;
  }
  .cat-hero__photo {
    min-height: auto;
    max-height: 55vh;
  }
  .cat-hero__photo img {
    max-height: 55vh;
  }
  .cat-hero__award {
    right: 16px;
  }
}

/* ── Responsive: Mobile (≤600) ── */
@media (max-width: 600px) {
  .cat-hero {
    padding: 80px 0 32px;
  }
  .cat-hero__heading {
    margin-bottom: var(--space-2);
  }
  .cat-hero__lead {
    margin-bottom: var(--space-3);
  }
  .cat-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
  }
  .cat-hero__ctas .btn-accent,
  .cat-hero__ctas .btn-ghost-dark {
    justify-content: center;
    text-align: center;
    padding: 12px 24px;
  }
  .cat-hero .hh-hero__testimonials {
    margin-bottom: var(--space-3);
  }
  .cat-hero__trust {
    gap: var(--space-1) var(--space-2);
  }
  .cat-hero__trust-item {
    font-size: 0.75rem;
  }
  .cat-hero__trust-item + .cat-hero__trust-item::before {
    display: none;
  }
  .cat-hero__photo {
    max-height: 60vh;
  }
  .cat-hero__photo img {
    max-height: 60vh;
  }
  .cat-hero__breadcrumb {
    margin-bottom: var(--space-2);
  }
  .cat-hero__breadcrumb li {
    font-size: 0.6875rem;
  }

  .cat-hero__award {
    right: 16px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cat-hero__content .cat-anim,
  .cat-hero__photo-wrap .cat-anim,
  .cat-hero__award {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   STABS — Vertical Tabs + Panel (Specjalizacje pillar)
   ============================================================ */

/* ============================================================
   SPZJ „Z czym przychodzą klienci" — filtr kategorii nad zakładkami
   (hub Specjalizacje). Chipy przełączają zestaw instancji .stabs;
   widoczna jest tylko aktywna kategoria (.spzj-cat[hidden]).
   ============================================================ */
.spzj-situations {
  background: var(--bg-primary);
  padding: clamp(60px, 8vw, 120px) 0;
}

/* Zagnieżdżone instancje komponentu niosą własny padding sekcji — zerujemy go
   w pionie i tło, bo ramę (odstępy, tło) daje już .spzj-situations. */
.spzj-situations .stabs {
  padding-block: 0;
  background: transparent;
}

.spzj-situations__header {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.spzj-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.spzj-chip {
  padding: 9px 18px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--bg-tertiary);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.spzj-chip:hover {
  border-color: var(--accent-border-solid);
  color: var(--accent);
}

.spzj-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.spzj-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.spzj-cat[hidden] {
  display: none;
}

/* Mobile: chipy w jednym rzędzie z przewijaniem poziomym (jak filtry ZGP FAQ). */
@media (max-width: 640px) {
  .spzj-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed do krawędzi ekranu — musi zgadzać się z paddingiem .container. */
    margin-inline: calc(-1 * clamp(20px, 12px + 3vw, 96px));
    padding-inline: clamp(20px, 12px + 3vw, 96px);
  }
  .spzj-filter::-webkit-scrollbar {
    display: none;
  }
  .spzj-chip {
    flex: 0 0 auto;
  }
}

.stabs {
  background: var(--bg-primary);
  padding: clamp(44px, 8vw, 120px) 0;
}

/* Kontener szerokości → globalny .container (zmigrowane ze .stabs__container). */

/* ── Section header (owijka layoutowa; treść → components/molecules/section-header) ── */
.stabs__header {
  margin-bottom: clamp(36px, 4vw, 56px);
}

/* ── Nagłówek dwukolumnowy: kadr + wprowadzenie ──────────────
   Odbicie nagłówka sekcji selektora („Wyłącznie sprawy karne”): tam
   siatka 12 kolumn daje head 7 | media 5, tutaj media 5 | head 7, czyli
   kadr po lewej, wpis po prawej. Te same wartości progu, przerw i ramy
   kadru, żeby obie sekcje czytały się jak jeden system.
   Kolejność w DOM to kolejność na telefonie (tekst → kadr); desktop
   przestawia wyłącznie obszary siatki, nigdy znaczniki. */
.stabs__header--split {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

/* Postać telefonowa kadru stoi PRZED progiem desktopu: zapytanie medialne nie
   podbija ważności, więc regułą wygrywa ta stojąca niżej w pliku. Gdy blok
   `min-width: 1000px` stał wyżej, twarde `aspect-ratio: 3 / 2` wracało także
   na desktopie: rama dostawała wysokość wiersza z `align-self: stretch`, z niej
   wyliczała szerokość 1,5 × wysokość i wychodziła poza swoje 5 kolumn na kolumnę
   tekstu, przykrywając lewą krawędź nagłówka i akapitów. */
.stabs__media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-tertiary);
  box-shadow: var(--shadow-md);
}

.stabs__media-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kadrowanie na twarz, nie na środek geometryczny, jak w selektorze. */
  object-position: center 38%;
}

@media (min-width: 1000px) {
  .stabs__header--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 48px);
    align-items: start;
    grid-template-areas: "media media media media media head head head head head head head";
  }
  .stabs__intro { grid-area: head; }
  .stabs__media {
    grid-area: media;
    /* Kadr ciągnie się do wysokości wiersza, więc dolna krawędź siada
       równo z blokiem tekstu. Rozciąga się rama, nie <img>: obraz jest
       w niej absolutny, więc siatka nie ma czego rozjechać.
       `aspect-ratio: auto` jest tu konieczne, bo proporcja liczona z narzuconej
       wysokości rozpycha ramę w poziomie ponad przydzielone kolumny. */
    align-self: stretch;
    aspect-ratio: auto;
    min-height: clamp(260px, 24vw, 380px);
    /* Zabezpieczenie na wypadek powrotu proporcji z innego arkusza: rama nigdy
       nie przekracza własnego obszaru siatki. */
    max-width: 100%;
  }
}

.stabs__intro {
  min-width: 0;
}

.stabs__eyebrow {
  margin-bottom: var(--space-2);
}

.stabs__title {
  margin-bottom: var(--space-2);
}

.stabs__lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
}

/* Lead niesie dwa odnośniki w środku zdania (kotwica i telefon) — bez
   podkreślenia sam kolor nie wystarcza za sygnał klikalności. */
.stabs__lead a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}

.stabs__lead a:hover {
  color: var(--accent-hover);
}

.stabs__action {
  margin: var(--space-4) 0 0;
}

/* Wezwanie w obwódce, wzięte z wariantu kalendarzowego selektora: ta sama
   wysokość, promień i ciężar pisma. Malachit stoi w obwódce, nie w
   wypełnieniu — sekcja ma zapraszać, a nie licytować się z paskiem pilnym. */
.stabs__action .btn-ghost {
  justify-content: center;
  min-height: 48px;
  padding: 13px 24px;
  gap: 10px;
  border-radius: 10px;
  border-color: var(--accent-border-solid);
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}

.stabs__action .btn-ghost:hover,
.stabs__action .btn-ghost:focus-visible {
  background: var(--accent-bg-solid);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.stabs__action .btn-ghost:focus-visible {
  box-shadow: var(--shadow-focus);
}

.stabs__action .btn-ghost svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.stabs__privacy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-tertiary);
}

.stabs__privacy svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
  margin-top: 2px;
}

/* ── Two-column grid ── */
.stabs__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* ── Left sidebar (card wrapping the tabs) ── */
.stabs__sidebar {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-tertiary);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Scrollable tab list ── */
.stabs__list {
  overflow-y: auto;
  padding: 6px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-border-solid) transparent;
}

.stabs__list::-webkit-scrollbar {
  width: 4px;
}

.stabs__list::-webkit-scrollbar-track {
  background: transparent;
}

.stabs__list::-webkit-scrollbar-thumb {
  background: var(--accent-border-solid);
  border-radius: 4px;
}

.stabs__list::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── Scroll fade hints ── */
.stabs__fade {
  position: absolute;
  left: 0;
  right: 4px;
  height: 32px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stabs__fade--top {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-elevated) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
}

.stabs__fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-elevated) 0%, transparent 100%);
  border-radius: 0 0 14px 14px;
}

.stabs__fade.is-visible {
  opacity: 1;
}

/* ── Sliding indicator bar ── */
.stabs__indicator {
  position: absolute;
  left: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  z-index: 2;
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Individual tab ── */
.stab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  position: relative;
  z-index: 1;
  transition: background 0.25s ease;
}

.stab:hover {
  background: var(--bg-secondary);
}

.stab.is-active {
  background: rgba(46, 107, 71, 0.04);
}

.stab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── Tab icon ── */
.stab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stab__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.8;
  transition: stroke 0.3s ease;
}

.stab.is-active .stab__icon {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(46, 107, 71, 0.2);
}

.stab.is-active .stab__icon svg {
  stroke: #fff;
}

/* ── Tab text (two lines) ── */
.stab__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.stab__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  transition: color 0.25s ease;
}

.stab.is-active .stab__name {
  color: var(--accent);
}

.stab__sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Count badge ── */
.stab__badge {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 28px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.stab.is-active .stab__badge {
  background: var(--accent-bg-solid);
  border-color: var(--accent-border-solid);
  color: var(--accent);
}

/* ── Emergency tab variant ── */
.stab--emergency {
  margin-top: 4px;
  background: var(--dark-bg-alt);
  border-radius: 10px;
  overflow: hidden;
}

.stab--emergency::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(ellipse at 20% 50%, rgba(74, 154, 106, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.stab--emergency .stab__name {
  color: var(--dark-text);
}

.stab--emergency .stab__sub {
  color: var(--dark-text-muted);
}

.stab--emergency .stab__icon {
  background: rgba(74, 154, 106, 0.15);
  border-color: rgba(74, 154, 106, 0.25);
}

.stab--emergency .stab__badge {
  background: rgba(74, 154, 106, 0.1);
  border-color: rgba(74, 154, 106, 0.2);
  color: var(--accent-light);
  font-size: 0.625rem;
  min-width: 34px;
}

.stab--emergency:hover {
  background: var(--dark-bg-alt);
}

.stab--emergency.is-active {
  background: var(--dark-bg-alt);
  box-shadow: 0 0 20px rgba(74, 154, 106, 0.12);
}

.stab--emergency.is-active .stab__name {
  color: var(--accent-light);
}

.stab--emergency.is-active .stab__icon {
  background: var(--accent-light);
  border-color: var(--accent-light);
  box-shadow: 0 0 12px rgba(74, 154, 106, 0.3);
}

.stab--emergency.is-active .stab__badge {
  background: rgba(74, 154, 106, 0.15);
  border-color: rgba(74, 154, 106, 0.3);
  color: #fff;
}

/* ── Emergency panel variant ── */
.stabs__panel.is-emergency {
  background: var(--dark-bg-alt);
  border-color: rgba(74, 154, 106, 0.2);
}

.stabs__panel.is-emergency::before {
  background: radial-gradient(circle at top left, rgba(74, 154, 106, 0.08) 0%, transparent 70%);
}

.stabs__panel.is-emergency .stabs__panel-badge {
  background: rgba(74, 154, 106, 0.12);
  color: var(--accent-light);
}

.stabs__panel.is-emergency .stabs__panel-title {
  color: var(--dark-text);
}

.stabs__panel.is-emergency .stabs__panel-rule {
  background: linear-gradient(90deg, var(--accent-light), transparent);
}

.stabs__panel.is-emergency .stabs__panel-desc {
  color: var(--dark-text-secondary);
}

.stabs__panel.is-emergency .stabs__panel-points-label {
  color: var(--dark-text-muted);
}

.stabs__panel.is-emergency .stabs__panel-point-text {
  color: var(--dark-text-secondary);
}

.stabs__panel.is-emergency .stabs__panel-check {
  background: rgba(74, 154, 106, 0.12);
  border-color: rgba(74, 154, 106, 0.25);
}

.stabs__panel.is-emergency .stabs__panel-divider {
  background: rgba(74, 154, 106, 0.15);
}

.stabs__panel.is-emergency .stabs__panel-trust span {
  color: var(--dark-text-muted);
}

.stabs__panel.is-emergency .stabs__cta-primary {
  background: var(--accent-light);
  box-shadow: 0 0 16px rgba(74, 154, 106, 0.25);
}

.stabs__panel.is-emergency .stabs__cta-ghost {
  border-color: rgba(74, 154, 106, 0.25);
  color: var(--dark-text-secondary);
}

.stabs__panel.is-emergency .stabs__cta-ghost:hover {
  border-color: var(--accent-light);
  color: var(--dark-text);
}

/* ── Hide panel badge on homepage ── */
#stabs-section-home .stabs__panel-badge {
  display: none;
}

/* ── Hide tab count badge on homepage (liczby/teksty w prawym górnym rogu taba) ── */
#stabs-section-home .stab__badge {
  display: none;
}

/* ── Homepage: stretch + center.
   - JS `getMaxPanelHeight()` cachuje max wysokość wśród wszystkich paneli SSR,
     ustawia tablist.maxHeight raz; sidebar wrapper ≈ max + 14px (stabilny).
   - Grid stretch: panel rozciąga się do wysokości sidebar'a (= max).
   - Panel-inner flex column + justify-content: center → krótszy content
     wyśrodkowany pionowo (lewo wciąż default), nadmiar białej przestrzeni
     równo na górze i dole. */
@media (min-width: 861px) {
  #stabs-section-home .stabs__grid {
    align-items: stretch;
  }
  #stabs-section-home .stabs__panel-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

/* ── Homepage: subtelne wyróżnienie kart pilnych (zamiast ciemnego motywu) ── */
/* Reset dark theme dla .stab--emergency — wracamy do jasnego layoutu. */
#stabs-section-home .stab--emergency {
  background: transparent;
  margin-top: 0;
  overflow: visible;
}
#stabs-section-home .stab--emergency::before {
  display: none;
}
#stabs-section-home .stab--emergency .stab__name {
  color: var(--text-primary);
}
#stabs-section-home .stab--emergency .stab__sub {
  color: var(--text-muted);
}
#stabs-section-home .stab--emergency .stab__icon {
  background: var(--accent-bg-solid);
  border-color: var(--accent-border-solid);
}
#stabs-section-home .stab--emergency:hover {
  background: var(--bg-secondary);
}
#stabs-section-home .stab--emergency.is-active {
  background: rgba(46, 107, 71, 0.04);
  box-shadow: none;
}
#stabs-section-home .stab--emergency.is-active .stab__name {
  color: var(--accent);
}
#stabs-section-home .stab--emergency.is-active .stab__icon {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(46, 107, 71, 0.2);
}
#stabs-section-home .stab--emergency.is-active .stab__icon svg {
  stroke: #fff;
}

/* Subtelne wyróżnienie: accent-filled count badge (zielony zamiast obwódkowego). */
#stabs-section-home .stab--emergency .stab__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 0.6875rem;
  min-width: 28px;
}
#stabs-section-home .stab--emergency.is-active .stab__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Panel: zdejmij ciemny motyw, gdy aktywny tab to emergency. */
#stabs-section-home .stabs__panel.is-emergency {
  background: var(--bg-elevated);
  border-color: var(--bg-tertiary);
}
#stabs-section-home .stabs__panel.is-emergency::before {
  background: none;
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-title {
  color: var(--text-primary);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-rule {
  background: linear-gradient(90deg, var(--accent), transparent);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-desc {
  color: var(--text-secondary);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-points-label {
  color: var(--text-muted);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-point-text {
  color: var(--text-secondary);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-check {
  background: var(--accent-bg-solid);
  border-color: var(--accent-border-solid);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-divider {
  background: var(--bg-tertiary);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__panel-trust span {
  color: var(--text-muted);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__cta-primary {
  background: var(--accent);
  box-shadow: none;
}
#stabs-section-home .stabs__panel.is-emergency .stabs__cta-ghost {
  border-color: var(--bg-tertiary);
  color: var(--text-secondary);
}
#stabs-section-home .stabs__panel.is-emergency .stabs__cta-ghost:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* ── Pasek hubów ─────────────────────────────────────────────
   Wyjście z zestawu pozycji na całe działy. Ciężar wizualny celowo
   niski: jedna linia, tekst drugorzędny, akcent i ruch strzałki
   dopiero na hover — pasek ma być furtką, nie drugim wezwaniem.
   Włos nad paskiem odcina go od komponentu bez rysowania ramki.
   Kolory z tokenów, więc tryb ciemny wychodzi bez nadpisań. */
.stabs__hubs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 32px;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.stabs__hub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Cel dotykowy 44 px bez rozpychania linii pionowo. */
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.25s ease, gap 0.25s ease;
}

.stabs__hub-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.stabs__hub:hover,
.stabs__hub:focus-visible {
  color: var(--accent);
  gap: 10px;
}

.stabs__hub:hover .stabs__hub-arrow,
.stabs__hub:focus-visible .stabs__hub-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.stabs__hub:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Telefon: jedna kolumna wierszy-rejestru.
   Dwie kolumny dawały słupek 161 px, w którym najdłuższe etykiety
   („Postępowanie wykonawcze", „Wszystkie specjalizacje") łamały się na dwa
   wiersze, a strzałka zostawała przy pierwszym — wisiała w pustce oderwana
   od ostatniego słowa. Do tego pozycja jednowierszowa równała się do środka
   rzędu z dwuwierszową sąsiadką (baza niesie `align-items: center`, a to
   przechodzi na siatkę), więc rząd tracił wspólną linię, a piąta pozycja
   zostawała sierotą w lewej kolumnie.
   Jedna kolumna zdejmuje wszystkie cztery objawy naraz: żadna etykieta się
   nie łamie, strzałka zamyka wiersz po prawej, a włos pod wierszem daje rytm
   rejestru — ten sam idiom, co lista czynów. Strzałka w prawo, nie daszek
   w dół, więc pasek nie udaje akordeonu, który stoi wyżej. */
@media (max-width: 640px) {
  .stabs__hubs {
    display: grid;
    grid-template-columns: 1fr;
    /* Baza ma `center` pod flexa; w siatce rozjeżdżałoby to rzędy. */
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-5);
  }
  .stabs__hub {
    justify-content: space-between;
    /* Cały wiersz jest celem dotykowym, więc 48 px jak w rejestrze czynów. */
    min-height: 48px;
    padding-block: 12px;
    /* Bez ciasnoty dwóch kolumn etykieta wraca do czytelnego stopnia. */
    font-size: 0.9375rem;
    line-height: 1.35;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  /* Ostatni wiersz bez kreski: zamykałaby sekcję drugą linią pod paskiem. */
  .stabs__hub:last-child {
    border-bottom: 0;
  }
  .stabs__hub-arrow {
    /* Strzałka stoi w prawym słupku, a odstęp jest jej marginesem minimalnym. */
    margin-left: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stabs__hub,
  .stabs__hub-arrow {
    transition: none;
  }
  .stabs__hub:hover,
  .stabs__hub:focus-visible {
    gap: 6px;
  }
  .stabs__hub:hover .stabs__hub-arrow,
  .stabs__hub:focus-visible .stabs__hub-arrow {
    transform: none;
  }
}

/* ============================================================
   STABS — Adwokat 24 Emergency Override
   Dark theme, red accents, urgent atmosphere
   ============================================================ */

/* Section: dark emergency background with grid overlay */
#stabs-section-a24 {
  background: linear-gradient(to bottom, #0A0A0A 0%, #111111 30%, #0F0F0F 100%);
  position: relative;
  overflow: hidden;
}
#stabs-section-a24::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 0% 0%, rgba(180,40,40,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 100% 100%, rgba(180,40,40,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
#stabs-section-a24::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
#stabs-section-a24 .container {
  position: relative;
  z-index: 1;
}

/* Grid: stretch so sidebar = panel height (desktop only) */
@media (min-width: 861px) {
  #stabs-section-a24 .stabs__grid {
    align-items: stretch;
  }
}

/* Sidebar: dark elevated card */
#stabs-sidebar-a24 {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
@media (min-width: 861px) {
  #stabs-sidebar-a24 {
    display: flex;
    flex-direction: column;
  }
}
#stabs-sidebar-a24 .stabs__list {
  max-height: none !important;
  overflow-y: visible;
}
@media (min-width: 861px) {
  #stabs-sidebar-a24 .stabs__list {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
#stabs-sidebar-a24 .stabs__fade {
  display: none;
}

/* Indicator bar: red */
#stabs-section-a24 .stabs__indicator {
  background: #DC3232;
}

/* All tabs in a24: dark emergency style */
#stabs-section-a24 .stab {
  background: transparent;
}
#stabs-section-a24 .stab::before {
  background: none;
}
#stabs-section-a24 .stab:hover {
  background: rgba(220,50,50,0.06);
}
#stabs-section-a24 .stab.is-active {
  background: rgba(220,50,50,0.08);
  box-shadow: 0 0 16px rgba(220,50,50,0.08);
}

/* Tab icon: red-tinted */
#stabs-section-a24 .stab__icon {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.2);
}
#stabs-section-a24 .stab__icon svg {
  stroke: #FF8A8A;
}
#stabs-section-a24 .stab.is-active .stab__icon {
  background: #DC3232;
  border-color: #DC3232;
  box-shadow: 0 0 12px rgba(220,50,50,0.3);
}
#stabs-section-a24 .stab.is-active .stab__icon svg {
  stroke: #fff;
}

/* Tab text: light on dark */
#stabs-section-a24 .stab__name {
  color: var(--dark-text);
}
#stabs-section-a24 .stab__sub {
  color: var(--dark-text-muted);
}
#stabs-section-a24 .stab.is-active .stab__name {
  color: #FF6B6B;
}

/* Panel: dark elevated, red accent details */
#stabs-section-a24 .stabs__panel {
  background: var(--dark-bg-alt);
  border-color: rgba(220,50,50,0.15);
}
#stabs-section-a24 .stabs__panel::before {
  background: radial-gradient(circle at top left, rgba(220,50,50,0.06) 0%, transparent 70%);
}
#stabs-section-a24 .stabs__panel-badge {
  background: rgba(220,50,50,0.12);
  color: #FF6B6B;
}
#stabs-section-a24 .stabs__panel-title {
  color: var(--emergency-text);
}
#stabs-section-a24 .stabs__panel-rule {
  background: linear-gradient(90deg, #DC3232, transparent);
}
#stabs-section-a24 .stabs__panel-desc {
  color: var(--dark-text-secondary);
}
#stabs-section-a24 .stabs__panel-points-label {
  color: var(--dark-text-muted);
}
#stabs-section-a24 .stabs__panel-point-text {
  color: var(--dark-text-secondary);
}
#stabs-section-a24 .stabs__panel-check {
  background: rgba(220,50,50,0.1);
  border-color: rgba(220,50,50,0.25);
}
#stabs-section-a24 .stabs__panel-check svg {
  stroke: #FF6B6B;
}
#stabs-section-a24 .stabs__panel-divider {
  background: rgba(220,50,50,0.15);
}
#stabs-section-a24 .stabs__panel-trust span {
  color: var(--dark-text-muted);
}
#stabs-section-a24 .stabs__cta-primary {
  background: #DC3232;
  box-shadow: 0 0 16px rgba(220,50,50,0.25);
}
#stabs-section-a24 .stabs__cta-primary:hover {
  background: #E04040;
  box-shadow: 0 0 24px rgba(220,50,50,0.35);
}
#stabs-section-a24 .stabs__cta-ghost {
  border-color: rgba(220,50,50,0.25);
  color: var(--dark-text-secondary);
}
#stabs-section-a24 .stabs__cta-ghost:hover {
  border-color: #FF6B6B;
  color: var(--dark-text);
}

/* ── Right column — panel ── */
.stabs__panel {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-tertiary);
  border-radius: 14px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.stabs__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top left, rgba(46, 107, 71, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.stabs__panel-inner {
  position: relative;
  z-index: 1;
}

/* Staggered entrance for panel children */
.stabs__panel-inner > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stabs__panel-inner.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.stabs__panel-inner.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.stabs__panel-inner.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.stabs__panel-inner.is-visible > *:nth-child(3) { transition-delay: 0.10s; }
.stabs__panel-inner.is-visible > *:nth-child(4) { transition-delay: 0.14s; }
.stabs__panel-inner.is-visible > *:nth-child(5) { transition-delay: 0.18s; }
.stabs__panel-inner.is-visible > *:nth-child(6) { transition-delay: 0.22s; }
.stabs__panel-inner.is-visible > *:nth-child(7) { transition-delay: 0.26s; }
.stabs__panel-inner.is-visible > *:nth-child(8) { transition-delay: 0.30s; }

/* ── Panel content ── */
.stabs__panel-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--accent-bg-solid);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.stabs__panel-title {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.stabs__panel-rule {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
  margin-bottom: 16px;
}

.stabs__panel-desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}

.stabs__panel-points-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.stabs__panel-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stabs__panel-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.stabs__panel-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 6px;
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  margin-top: 1px;
}

.stabs__panel-check svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
}

.stabs__panel-point-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.stabs__panel-divider {
  width: 100%;
  height: 1px;
  background: var(--bg-tertiary);
  margin: 0 0 20px;
}

.stabs__panel-trust {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}

.stabs__panel-trust svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  flex-shrink: 0;
}

.stabs__panel-trust span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.stabs__panel-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stabs__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.stabs__cta-primary svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  transition: transform 0.3s ease;
}

.stabs__cta-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 107, 71, 0.25);
}

.stabs__cta-primary:hover svg {
  transform: translateX(3px);
}

.stabs__cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--bg-tertiary);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.stabs__cta-ghost svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.stabs__cta-ghost:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-2px);
}

/* ============================================================
   STABS — Tablet (860–1100px)
   ============================================================ */

@media (max-width: 1100px) and (min-width: 861px) {
  .stabs__grid {
    grid-template-columns: 240px 1fr;
  }
  .stab__badge {
    display: none;
  }
  .stab__sub {
    display: none;
  }
  .stabs__panel {
    padding: 24px;
  }
  .stabs__panel-point:nth-child(n+3) {
    display: none;
  }
}

/* ============================================================
   STABS — Mobile (< 860px) — Accordion
   ============================================================ */

@media (max-width: 860px) {
  .stabs__grid {
    display: block;
  }

  .stabs__sidebar,
  .stabs__panel {
    display: none;
  }

  /* Accordion */
  .stabs-acc {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .stabs-acc__item {
    margin-bottom: 8px;
  }

  .stabs-acc__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-tertiary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    font-family: var(--font-body);
  }

  .stabs-acc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: var(--accent-bg-solid);
    border: 1px solid var(--accent-border-solid);
    transition: all 0.3s ease;
  }

  .stabs-acc__icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--accent);
    transition: stroke 0.3s ease;
  }

  .stabs-acc__text {
    flex: 1;
    min-width: 0;
  }

  .stabs-acc__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
  }

  .stabs-acc__sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
  }

  .stabs-acc__chevron {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
  }

  /* Active trigger */
  .stabs-acc__trigger[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--accent-bg-solid);
  }

  .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__icon {
    background: var(--accent);
    border-color: var(--accent);
  }

  .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__icon svg {
    stroke: #fff;
  }

  .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__name {
    color: var(--accent);
  }

  .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__chevron {
    transform: rotate(180deg);
    stroke: var(--accent);
  }

  .stabs-acc__trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  /* Accordion panel */
  .stabs-acc__panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease 0.05s;
  }

  .stabs-acc__panel.is-open {
    opacity: 1;
  }

  .stabs-acc__panel-body {
    padding: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-tertiary);
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  /* Stack CTAs vertically on mobile */
  .stabs-acc__panel-body .stabs__panel-ctas {
    flex-direction: column;
  }

  .stabs-acc__panel-body .stabs__cta-primary,
  .stabs-acc__panel-body .stabs__cta-ghost {
    width: 100%;
    justify-content: center;
  }

  /* ── Adwokat 24 — Emergency accordion override ── */

  #stabs-section-a24 .stabs-acc__trigger {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
  }
  #stabs-section-a24 .stabs-acc__trigger:hover {
    background: rgba(220,50,50,0.06);
    border-color: rgba(220,50,50,0.15);
  }
  #stabs-section-a24 .stabs-acc__icon {
    background: rgba(220,50,50,0.08);
    border-color: rgba(220,50,50,0.2);
  }
  #stabs-section-a24 .stabs-acc__icon svg {
    stroke: #FF8A8A;
  }
  #stabs-section-a24 .stabs-acc__name {
    color: var(--dark-text);
  }
  #stabs-section-a24 .stabs-acc__sub {
    color: var(--dark-text-muted);
  }
  #stabs-section-a24 .stabs-acc__chevron {
    stroke: #FF6B6B;
    color: #FF6B6B;
  }
  #stabs-section-a24 .stabs-acc__chevron svg {
    stroke: #FF6B6B;
  }

  /* Active trigger */
  #stabs-section-a24 .stabs-acc__trigger[aria-expanded="true"] {
    border-left-color: #DC3232;
    border-bottom-color: transparent;
    background: rgba(220,50,50,0.08);
  }
  #stabs-section-a24 .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__icon {
    background: #DC3232;
    border-color: #DC3232;
    box-shadow: 0 0 10px rgba(220,50,50,0.3);
  }
  #stabs-section-a24 .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__icon svg {
    stroke: #fff;
  }
  #stabs-section-a24 .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__name {
    color: #FF6B6B;
  }
  #stabs-section-a24 .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__chevron {
    stroke: #FF6B6B;
    color: #FF6B6B;
    transform: rotate(180deg);
  }
  #stabs-section-a24 .stabs-acc__trigger[aria-expanded="true"] .stabs-acc__chevron svg {
    stroke: #FF6B6B;
  }
  #stabs-section-a24 .stabs-acc__trigger:focus-visible {
    outline-color: #FF6B6B;
  }

  /* Panel body */
  #stabs-section-a24 .stabs-acc__panel-body {
    background: rgba(13,13,13,0.95);
    border-color: rgba(255,255,255,0.06);
    border-top: none;
  }

  /* Panel content overrides */
  #stabs-section-a24 .stabs__panel-title {
    color: var(--emergency-text);
  }
  #stabs-section-a24 .stabs__panel-badge {
    background: rgba(220,50,50,0.12);
    color: #FF6B6B;
  }
  #stabs-section-a24 .stabs__panel-rule {
    background: linear-gradient(90deg, #DC3232, transparent);
  }
  #stabs-section-a24 .stabs__panel-desc {
    color: var(--dark-text-secondary);
  }
  #stabs-section-a24 .stabs__panel-points-label {
    color: var(--dark-text-muted);
  }
  #stabs-section-a24 .stabs__panel-point-text {
    color: var(--dark-text-secondary);
  }
  #stabs-section-a24 .stabs__panel-check {
    background: rgba(220,50,50,0.1);
    border-color: rgba(220,50,50,0.25);
  }
  #stabs-section-a24 .stabs__panel-check svg {
    stroke: #FF6B6B;
  }
  #stabs-section-a24 .stabs__panel-divider {
    background: rgba(220,50,50,0.15);
  }
  #stabs-section-a24 .stabs__panel-trust span {
    color: var(--dark-text-muted);
  }
  #stabs-section-a24 .stabs__cta-primary {
    background: #DC3232;
    box-shadow: 0 0 16px rgba(220,50,50,0.25);
  }
  #stabs-section-a24 .stabs__cta-primary:hover {
    background: #E04040;
  }
  #stabs-section-a24 .stabs__cta-ghost {
    border-color: rgba(220,50,50,0.25);
    color: var(--dark-text-secondary);
  }
  #stabs-section-a24 .stabs__cta-ghost:hover {
    border-color: #FF6B6B;
    color: var(--dark-text);
  }
}

/* ============================================================
   EXPERT — Treść ekspercka + Sidebar TOC
   ============================================================ */

.expert {
  padding: clamp(32px, 3vw, 48px) 0 clamp(64px, 7vw, 112px);
}

.expert__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 12px + 3vw, 96px);
}

/* ── Nagłówek sekcji ── */
.expert__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.expert__eyebrow {
  /* wygląd w components/atoms/eyebrow */
  margin-bottom: 20px;
}

.expert__headline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}

.expert__headline em {
  font-family: var(--font-heading);
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

/* ── Content + Sidebar grid ── */
.expert__grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: clamp(32px, 3.5vw, 56px);
  align-items: start;
}

/* ── Sidebar (TOC) ── */
.expert__sidebar {
  position: sticky;
  top: 76px;
}

.toc {
  background: var(--bg-elevated);
  border: 1px solid var(--bg-tertiary);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.toc__title {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-tertiary);
  margin-bottom: 16px;
}

.toc__list {
  list-style: none;
  border-left: 2px solid var(--bg-tertiary);
  padding-left: 0;
}

.toc__link {
  display: block;
  padding: 8px 0 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color 0.25s ease, border-left-color 0.25s ease, transform 0.25s ease;
}

.toc__link:hover {
  color: var(--text-secondary);
  transform: translateX(4px);
  border-left-color: var(--accent-border-solid);
}

.toc__link.is-active {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
  transform: translateX(0);
}

/* Sidebar CTA */
.toc__cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bg-tertiary);
  text-align: center;
}

.toc__cta-phone {
  display: block;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.toc__cta-phone:hover {
  color: var(--accent-hover);
}

.toc__cta-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Sidebar Mini Form ── */
.sidebar-form {
  margin-top: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-tertiary);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.sidebar-form__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.sidebar-form__desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.sidebar-form__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-form__input,
.sidebar-form__textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--bg-tertiary);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.sidebar-form__input::placeholder,
.sidebar-form__textarea::placeholder {
  color: var(--text-muted);
}

.sidebar-form__input:focus,
.sidebar-form__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg-solid);
}

.sidebar-form__textarea {
  resize: vertical;
  min-height: 60px;
}

.sidebar-form__btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

.sidebar-form__btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.sidebar-form__btn:active {
  transform: translateY(0);
}

.sidebar-form__privacy {
  font-size: 0.625rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}

/* ── Main content ── */
.expert__main {
  max-width: 100%;
  min-width: 0;
}

/* ── Segment ── */
.segment {
  padding: clamp(16px, 2vw, 24px) 0;
  position: relative;
  scroll-margin-top: 120px;
}

.segment + .segment {
  border-top: none;
}

/* Alternujące tło */
.segment:nth-child(odd) .segment__inner {
  background: transparent;
}

.segment:nth-child(even) .segment__inner {
  background: var(--bg-primary);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--bg-tertiary);
}

/* Gdy segment--dark jest parzyste dziecko, wyłącz kartę z inner — dark sam jest kartą */
.segment--dark:nth-child(even) .segment__inner {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
}


/* ── Nagłówek segmentu ── */
.segment__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.segment__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.segment__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment__title {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

/* ── Treść segmentu ── */
.segment__body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.segment__body p {
  margin-bottom: 16px;
}

.segment__body p:last-child {
  margin-bottom: 0;
}

/* ── Podnagłówek w treści segmentu ──
   Treść z ACF wstawia gołe h3/h4 pod tytułem segmentu. Bez tej reguły biorą
   Cormorant (niska wysokość x) w rozmiarze akapitu, więc czytają się drobniej
   niż tekst obok, a globalny reset zabiera im marginesy. Trzymamy je między
   akapitem (15 px) a .segment__title (20–25.6 px). */
.segment__body h3,
.segment__body h4 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 28px 0 8px;
}

.segment__body > h3:first-child,
.segment__body > h4:first-child {
  margin-top: 0;
}

.segment__body strong {
  font-weight: 600;
  color: var(--text-primary);
}

.segment__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-border-solid);
  transition: color 0.2s ease;
}

.segment__body a:hover {
  color: var(--accent-hover);
}

/* Lista w treści */
.segment__body ul {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}

.segment__body ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.875rem;
}

.segment__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent-bg-solid);
  border: 1.5px solid var(--accent-border-solid);
}

/* ── Badge artykułu KK/KPK ── */
.kk-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

/* Only interactive badges (links) get hover */
a.kk-badge:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  text-decoration: none;
}

/* ── Inline CTA ── */
.inline-cta {
  background: var(--bg-elevated);
  border: 1px solid var(--accent-border-solid);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 20px;
  margin: clamp(4px, 0.5vw, 8px) 0 clamp(16px, 2vw, 24px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.inline-cta:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.inline-cta__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inline-cta__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
}

.inline-cta__text {
  flex: 1;
}

.inline-cta__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.inline-cta__desc {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.inline-cta__phone {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.inline-cta__phone:hover {
  color: var(--accent-hover);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Expert section responsive ── */
@media (max-width: 960px) {
  .expert__grid {
    grid-template-columns: 1fr;
  }

  .expert__sidebar {
    position: static;
    order: -1;
  }

  .toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 16px 20px;
  }

  .toc__title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-right: 12px;
  }

  .toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-left: none;
  }

  .toc__link {
    padding: 6px 14px;
    border-left: none;
    margin-left: 0;
    border-radius: 100px;
    border: 1px solid var(--bg-tertiary);
    font-size: 0.75rem;
  }

  .toc__link:hover {
    transform: none;
    border-color: var(--accent-border-solid);
    background: var(--accent-bg-solid);
  }

  .toc__link.is-active {
    border-left: none;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .toc__cta {
    display: none;
  }

  .sidebar-form {
    display: none;
  }
}

@media (max-width: 600px) {
  .inline-cta {
    flex-direction: column;
    text-align: center;
  }

  .segment:nth-child(even) .segment__inner {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   SUBHERO — Podkategoria kryminalna (podstrona typu /zabojstwo)
   Prefix: subhero-
   ============================================================ */

.subhero {
  position: relative;
  background: var(--dark-bg);
  padding: clamp(100px, 10vw, 150px) 0 clamp(56px, 6vw, 80px);
  overflow: hidden;
}

/* Radial gradient decorative glow */
.subhero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(46,107,71,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Accent top line */
.subhero-topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
  opacity: 0.5;
}

/* Grid: 55/45 split — text left, media right */
.subhero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

/* ── Text column ── */
.subhero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Media column (photo / video placeholder) ── */
.subhero-media {
  position: relative;
  align-self: stretch;
  z-index: 1;
}
.subhero-media__frame {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--dark-bg-elevated);
  border: 1px solid var(--dark-border);
}
.subhero-media__frame img,
.subhero-media__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.subhero-media__frame:hover img,
.subhero-media__frame:hover video {
  transform: scale(1.03);
}

/* Placeholder state — visible until replaced with real media */
.subhero-media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(46,107,71,0.06) 0%, transparent 70%),
    var(--dark-bg-elevated);
}
.subhero-media__placeholder svg {
  stroke: var(--dark-border);
  opacity: 0.5;
}
.subhero-media__placeholder span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── 1. Breadcrumb ── */
.subhero-breadcrumb {
  margin-bottom: 24px;
}
.subhero-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.subhero-breadcrumb li {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-text-muted);
}
.subhero-breadcrumb li + li::before {
  content: '›';
  margin: 0 6px;
  font-size: 0.625rem;
  color: var(--dark-border);
  font-weight: 400;
}
.subhero-breadcrumb a {
  color: var(--dark-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.subhero-breadcrumb a:hover {
  color: var(--dark-text);
}
.subhero-breadcrumb li[aria-current="page"] span {
  color: var(--dark-text-secondary);
}

/* ── 2. H1 ── */
.subhero-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 700;
  color: var(--dark-text);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
}
.subhero-heading em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  color: var(--accent-light);
}

/* ── 3. Quick-answer box ── */
.subhero-answer {
  background: var(--dark-bg-elevated);
  border-left: 3px solid var(--accent-light);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  max-width: 640px;
  margin: 0 0 24px;
  position: relative;
}
.subhero-answer p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--dark-text-secondary);
  line-height: 1.7;
  margin: 0;
}
.subhero-answer strong {
  font-weight: 600;
  color: var(--dark-text);
}
.subhero-answer__badge {
  display: inline-block;
  background: rgba(74,154,106,0.12);
  border: 1px solid rgba(74,154,106,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-light);
}

/* ── 4. CTA ── */
.subhero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.subhero-ctas .btn-accent svg,
.subhero-ctas .btn-ghost-dark svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.subhero-ctas .btn-accent:focus-visible,
.subhero-ctas .btn-ghost-dark:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── 5. Trust bar ── */
.subhero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--dark-text-muted);
}
.subhero-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.subhero-trust__item svg {
  stroke: var(--accent-light);
  flex-shrink: 0;
}
/* Kropka rozdzielająca należy do odznaki po lewej, nie stoi osobno: przy trzech
   odznakach pasek zawija się na wąskim ekranie i luźny separator zostawał
   sierotą otwierającą drugą linię. Margines dopełnia wewnętrzny gap 6px do
   szerokości odstępu między odznakami, żeby kropka stała pośrodku. */
.subhero-trust__item:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dark-border);
  flex-shrink: 0;
  margin-left: 10px;
}

/* ── 6. Emergency crosslink strip ── */
.subhero-emergency {
  margin-top: 28px;
  max-width: 640px;
}
.subhero-emergency__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--dark-bg-alt);
  border-radius: 12px;
  padding: 14px 24px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.subhero-emergency__link:hover {
  background: #141414;
}
.subhero-emergency__text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--emergency-accent);
}
.subhero-emergency__cta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--emergency-text);
  text-decoration: none;
  transition: text-decoration 0.2s ease;
  white-space: nowrap;
}
.subhero-emergency__link:hover .subhero-emergency__cta {
  text-decoration: underline;
}

/* ── Entrance animation states ── */
.subhero-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.subhero-anim--y20 {
  transform: translateY(20px);
}
.subhero-anim--y12 {
  transform: translateY(12px);
}
.subhero-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Media column entrance — slide from right */
.subhero-media.subhero-anim {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.subhero-media.subhero-anim.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Cascade delays */
.subhero-anim[data-subhero-delay="1"] { transition-delay: 0.06s; }
.subhero-anim[data-subhero-delay="2"] { transition-delay: 0.12s; }
.subhero-anim[data-subhero-delay="3"] { transition-delay: 0.18s; }
.subhero-anim[data-subhero-delay="4"] { transition-delay: 0.24s; }
.subhero-anim[data-subhero-delay="5"] { transition-delay: 0.30s; }
.subhero-anim[data-subhero-delay="6"] { transition-delay: 0.36s; }
.subhero-anim[data-subhero-delay="7"] { transition-delay: 0.42s; }

/* ── Responsive: Tablet ── */
@media (max-width: 960px) {
  .subhero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .subhero-content {
    text-align: center;
    align-items: center;
  }
  .subhero-breadcrumb ol {
    justify-content: center;
  }
  .subhero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .subhero-answer {
    margin-left: auto;
    margin-right: auto;
  }
  .subhero-ctas {
    justify-content: center;
  }
  .subhero-trust {
    justify-content: center;
  }
  .subhero-emergency {
    margin-left: auto;
    margin-right: auto;
  }
  .subhero-emergency__link {
    justify-content: center;
  }
  .subhero-media__frame {
    min-height: 360px;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
  .subhero-content {
    text-align: left;
    align-items: flex-start;
  }
  .subhero-breadcrumb ol {
    justify-content: flex-start;
  }
  .subhero-lead {
    margin-left: 0;
    margin-right: 0;
  }
  .subhero-answer {
    margin-left: 0;
    margin-right: 0;
    padding: 16px 18px;
  }
  .subhero-ctas {
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
  }
  .subhero-ctas .btn-accent,
  .subhero-ctas .btn-ghost-dark {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  .subhero-trust {
    font-size: 0.75rem;
    gap: 10px;
    justify-content: flex-start;
  }
  /* Na telefonie pasek i tak zawija się na kilka linii, więc kropki tylko
     zabierają szerokość i wypychają trzecią odznakę do własnego wiersza.
     Rozdziela sam odstęp; ikony niosą podział wizualny. */
  .subhero-trust__item:not(:last-child)::after {
    display: none;
  }
  .subhero-emergency {
    margin-left: 0;
    margin-right: 0;
  }
  .subhero-emergency__link {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 16px;
  }
  .subhero-media__frame {
    min-height: 280px;
  }
}

/* Reduced motion: skip entrance animations */
@media (prefers-reduced-motion: reduce) {
  .subhero-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   EXPERT CONVERSION ENHANCEMENTS
   Nowe klasy — nie modyfikują istniejących .segment, .inline-cta
   ============================================================ */

/* ── 1. segment--dark: wyróżniony segment z subteln. tłem ── */
.segment--dark {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 32px);
  border: 1px solid var(--border);
}
.segment--dark .segment__title {
  color: var(--text-primary);
}
.segment--dark .segment__body h3,
.segment--dark .segment__body h4 {
  color: var(--text-primary);
}

/* ── 2. Penalty highlight cards ── */
.penalty-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.penalty-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.penalty-card:hover {
  box-shadow: var(--shadow-md);
}
.penalty-card--severe {
  border-color: rgba(180,60,60,0.3);
  border-top: 3px solid rgba(180,60,60,0.5);
}
.penalty-card--mitigated {
  border-color: var(--accent-border-solid);
  border-top: 3px solid var(--accent-light);
}
.penalty-card__header {
  margin-bottom: 16px;
}
.penalty-card__badge {
  display: inline-block;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.penalty-card--severe .penalty-card__badge {
  background: rgba(180,60,60,0.06);
  border-color: rgba(180,60,60,0.15);
  color: #B43C3C;
}
.penalty-card__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
.penalty-card__penalty {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.penalty-card--severe .penalty-card__penalty {
  color: #B43C3C;
}
.penalty-card--mitigated .penalty-card__penalty {
  color: var(--accent);
}
.penalty-card__max {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.penalty-card__desc {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 767px) {
  .penalty-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .penalty-card {
    padding: 20px 16px;
  }
  .penalty-card--severe,
  .penalty-card--mitigated {
    border-top-width: 3px;
  }
  .segment--dark {
    border-radius: 12px;
  }
}

/* ── 3. Segment stat pullquote ── */
.segment__stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--accent-bg-solid);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.segment__stat-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.segment__stat-icon svg {
  stroke: var(--accent);
}
.segment__stat p {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.segment__stat p strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── 4. Trust callout (inside segment body) ── */
.segment__trust-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  border-radius: 12px;
}
.segment__trust-callout-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  gap: 4px;
}
.segment__trust-callout-number {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.segment__trust-callout-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.segment__trust-callout-sep {
  width: 1px;
  height: 40px;
  background: var(--accent-border-solid);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .segment__trust-callout {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  .segment__trust-callout-sep {
    width: 60px;
    height: 1px;
  }
}

/* ── 5. inline-cta--urgent variant ── */
.inline-cta--urgent {
  border-color: rgba(220,80,80,0.2);
  background: linear-gradient(135deg, rgba(220,80,80,0.03) 0%, var(--bg-primary) 60%);
}
.inline-cta--urgent .inline-cta__icon svg {
  stroke: #D66;
}

/* ── 6. Expert bottom CTA block ── */
.expert__bottom-cta {
  margin-top: var(--space-5);
  padding: clamp(28px, 3vw, 40px);
  background: var(--dark-bg);
  border-radius: 16px;
  border: 1px solid var(--dark-border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.expert__bottom-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(46,107,71,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.expert__bottom-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.8rem);
  font-weight: 700;
  color: var(--dark-text);
  line-height: 1.2;
  margin-bottom: 8px;
}
.expert__bottom-cta-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--dark-text-secondary);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 24px;
}
.expert__bottom-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}
.expert__bottom-cta-actions .btn-accent svg,
.expert__bottom-cta-actions .btn-ghost-dark svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.expert__bottom-cta-footnote {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--dark-text-muted);
  position: relative;
}

@media (max-width: 767px) {
  .expert__bottom-cta-actions {
    flex-direction: column;
  }
  .expert__bottom-cta-actions .btn-accent,
  .expert__bottom-cta-actions .btn-ghost-dark {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* ── 7. Sidebar urgency pulse ── */
.sidebar-urgency {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--dark-bg);
  border-radius: 10px;
  border: 1px solid var(--dark-border);
  margin-top: var(--space-2);
}
.sidebar-urgency .pulse-dot {
  margin-top: 4px;
}
.sidebar-urgency__text {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--dark-text-muted);
  line-height: 1.5;
  margin: 0;
}
.sidebar-urgency__text strong {
  color: var(--dark-text);
  font-weight: 600;
}
.sidebar-urgency__phone {
  color: var(--accent-light);
  font-weight: 700;
  text-decoration: none;
  transition: text-decoration 0.2s ease;
}
.sidebar-urgency__phone:hover {
  text-decoration: underline;
}

/* ── 8. Expert case study (inline, below grid) ── */
.expert__case-study {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.expert__case-study .cases__eyebrow {
  display: block;
  margin-bottom: var(--space-1);
}
.expert__case-study-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.8rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

/* ============================================================
   RELATED — Powiązane podkategorie (3-kolumnowy grid kart)
   ============================================================ */

.related {
  padding: var(--space-10) 0;
  background: var(--bg-secondary);
}

/* ── Header ── */
.related__header {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* ── Grid ── */
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Card (entire card is a link) ── */
.related__card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.related__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-border-solid);
}
.related__card:hover .related__card-arrow {
  transform: translateX(4px);
  color: var(--accent);
}
.related__card:hover .related__card-icon {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(46,107,71,0.08);
}

/* ── Icon ── */
.related__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-bg-solid);
  border: 1px solid var(--accent-border-solid);
  margin-bottom: 16px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.related__card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
}

/* ── Content ── */
.related__card-content {
  flex: 1;
}
.related__card-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 8px;
}
.related__card-desc {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: 14px;
}
.related__card-badge {
  display: inline-block;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
}

/* ── Arrow ── */
.related__card-arrow {
  position: absolute;
  top: 28px;
  right: 24px;
  color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.related__card-arrow svg {
  width: 18px;
  height: 18px;
}

/* ── Responsive: Tablet ── */
@media (max-width: 960px) {
  .related__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .related__card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px;
  }
  .related__card-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .related__card-desc {
    display: none;
  }
  .related__card-arrow {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
  .related {
    padding: var(--space-7) 0;
  }
  .related__card {
    padding: 16px;
  }
  .related__card-icon {
    width: 38px;
    height: 38px;
  }
  .related__card-icon svg {
    width: 18px;
    height: 18px;
  }
  .related__card-title {
    font-size: 0.875rem;
  }
  .related__card-badge {
    display: none;
  }
}

/* ============================================================
   ADWOKAT 24 (a24-/a24s-/e24-) → wyniesione do assets/css/adwokat24.css,
   ładowane warunkowo na template-adwokat24.php + template-adwokat24-sub.php.
   ============================================================ */

/* ============================================================
   SIDEBAR DOCS CARD (Option 1 — Expert sidebar)
   ============================================================ */
.sidebar-docs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.sidebar-docs:hover {
  border-color: rgba(220,50,50,0.3);
  background: rgba(220,50,50,0.04);
}
.sidebar-docs__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(220,50,50,0.08);
  border: 1px solid rgba(220,50,50,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-docs__icon svg {
  width: 20px;
  height: 20px;
  stroke: #FF6B6B;
}
.sidebar-docs__text {
  flex: 1;
  min-width: 0;
}
.sidebar-docs__title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-inverse);
  margin-bottom: 2px;
}
.sidebar-docs__desc {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--dark-text-muted);
}
.sidebar-docs__arrow {
  flex-shrink: 0;
}
.sidebar-docs__arrow svg {
  width: 18px;
  height: 18px;
  stroke: rgba(255,255,255,0.25);
  transition: stroke 0.3s ease, transform 0.3s ease;
}
.sidebar-docs:hover .sidebar-docs__arrow svg {
  stroke: #FF6B6B;
  transform: translateX(3px);
}

/* ============================================================
   INLINE CTA — DOCS VARIANT (Option 2)
   ============================================================ */
.inline-cta--docs {
  text-decoration: none;
  cursor: pointer;
}
.inline-cta--docs .inline-cta__badge {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.inline-cta--docs .inline-cta__arrow {
  flex-shrink: 0;
}
.inline-cta--docs .inline-cta__arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
.inline-cta--docs:hover .inline-cta__arrow svg {
  transform: translateX(3px);
}

/* Dark theme (inside expert--dark) */
.expert--dark .inline-cta--docs {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.expert--dark .inline-cta--docs:hover {
  border-color: rgba(220,50,50,0.3);
  background: rgba(220,50,50,0.04);
}
.expert--dark .inline-cta--docs .inline-cta__icon {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.15);
}
.expert--dark .inline-cta--docs .inline-cta__icon svg {
  stroke: #FF6B6B;
}
.expert--dark .inline-cta--docs .inline-cta__title {
  color: var(--text-inverse);
}
.expert--dark .inline-cta--docs .inline-cta__desc {
  color: var(--dark-text-muted);
}
.expert--dark .inline-cta--docs .inline-cta__badge {
  background: rgba(220,50,50,0.1);
  color: #FF6B6B;
}
.expert--dark .inline-cta--docs .inline-cta__arrow svg {
  stroke: rgba(255,255,255,0.3);
}
.expert--dark .inline-cta--docs:hover .inline-cta__arrow svg {
  stroke: #FF6B6B;
}

/* ============================================================
   FAQ SIDEBAR — DOCS CARD (Option 3)
   ============================================================ */
.faq__sidebar-card--docs {
  display: block;
  margin-top: 16px;
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq__sidebar-card--docs:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.faq__sidebar-card--docs .faq__sidebar-icon svg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.faq__sidebar-card--docs .btn-secondary {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq__sidebar-card--docs:hover .btn-secondary {
  color: var(--accent-hover, var(--accent));
}

/* ============================================================
   DOCUMENTS SHOWCASE SECTION (Option 4)
   ============================================================ */
.docs-showcase {
  position: relative;
  background: #0A0A0A;
  padding: clamp(48px, 6vw, 80px) 0;
  overflow: hidden;
}
.docs-showcase__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.docs-showcase__header {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
/* Cards grid */
.docs-showcase__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.docs-showcase__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.docs-showcase__card:hover {
  border-color: rgba(220,50,50,0.3);
  background: rgba(220,50,50,0.04);
}
.docs-showcase__card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(220,50,50,0.08);
  border: 1px solid rgba(220,50,50,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.docs-showcase__card-icon svg {
  width: 22px;
  height: 22px;
  stroke: #FF6B6B;
}
.docs-showcase__card-content {
  flex: 1;
  min-width: 0;
}
.docs-showcase__card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
}
.docs-showcase__card-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
  margin: 0;
}
.docs-showcase__card-price {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #FF6B6B;
  padding: 4px 10px;
  background: rgba(220,50,50,0.08);
  border-radius: 20px;
  white-space: nowrap;
}
.docs-showcase__card-arrow {
  flex-shrink: 0;
}
.docs-showcase__card-arrow svg {
  width: 18px;
  height: 18px;
  stroke: rgba(255,255,255,0.2);
  transition: stroke 0.3s ease, transform 0.3s ease;
}
.docs-showcase__card:hover .docs-showcase__card-arrow svg {
  stroke: #FF6B6B;
  transform: translateX(3px);
}

/* CTA */
.docs-showcase__cta {
  text-align: center;
}
.docs-showcase__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: rgba(220,50,50,0.1);
  border: 1px solid rgba(220,50,50,0.25);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.docs-showcase__btn:hover {
  background: rgba(220,50,50,0.18);
  border-color: rgba(220,50,50,0.4);
}

/* Responsive */
@media (max-width: 600px) {
  .docs-showcase__cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RELATED CARD — DOCS VARIANT (Option 5)
   ============================================================ */
.related__card--docs .related__card-badge {
  background: var(--accent-bg-solid, rgba(220,50,50,0.08));
  color: var(--accent, #DC3232);
}

/* ============================================================
   CENNIK (cennik-/pricing-/cost-) → wyniesione do assets/css/cennik.css,
   ładowane warunkowo tylko na template-cennik.php.
   ============================================================ */

/* ════════════════════════════════════════════════════════════════
   KONTAKT PAGE — kt- prefix
   ════════════════════════════════════════════════════════════════ */

/* ── Breadcrumbs (17) ── */
.kt-breadcrumbs {
  background: var(--dark-bg);
  padding: var(--space-2) 0 0;
}
.kt-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
}
.kt-breadcrumbs__item {
  display: flex;
  align-items: center;
  color: var(--dark-text-muted);
}
.kt-breadcrumbs__item + .kt-breadcrumbs__item::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8A80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.6;
  flex-shrink: 0;
}
.kt-breadcrumbs__link {
  color: var(--dark-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.kt-breadcrumbs__link:hover {
  color: var(--accent-light);
}
.kt-breadcrumbs__item--current {
  color: var(--dark-text-muted);
  font-weight: 500;
}

/* ── Reveal animation base ── */
.kt-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.kt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Staggered hero animations ── */
.kt-anim {
  opacity: 0;
  transform: translateY(24px);
  animation: ktFadeInUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.kt-anim--1 { animation-delay: 0.05s; }
.kt-anim--2 { animation-delay: 0.15s; }
.kt-anim--3 { animation-delay: 0.25s; }
.kt-anim--4 { animation-delay: 0.4s; }
.kt-anim--5 { animation-delay: 0.55s; }

@keyframes ktFadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════
   SECTION 1 — HERO
   ════════════════════════════════════════════════════ */
.kt-hero {
  position: relative;
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: var(--hero-pt) 0 clamp(72px, 10vh, 120px);
  overflow: hidden;
  text-align: center;
}

/* Subtle gradient overlay for depth */
.kt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(74, 154, 106, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 100%, rgba(46, 107, 71, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.kt-hero__topline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
  opacity: 0.6;
}

.kt-hero__inner {
  position: relative;
  max-width: 740px;
  margin: 0 auto;
}

.kt-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: var(--dark-text);
}
.kt-hero__heading em {
  font-style: normal;
  color: var(--accent-light);
}

.kt-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  color: var(--dark-text-secondary);
  margin: 0 0 var(--space-5);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Quick action buttons in hero */
.kt-hero__quick {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.kt-hero__quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.kt-hero__quick-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.kt-hero__quick-btn--phone {
  background: var(--accent-light);
  color: var(--dark-bg);
}
.kt-hero__quick-btn--phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(74, 154, 106, 0.35);
}

.kt-hero__quick-btn--form {
  background: transparent;
  color: var(--dark-text);
  border: 1.5px solid var(--dark-border);
}
.kt-hero__quick-btn--form:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
  transform: translateY(-2px);
}

/* Availability badge */
.kt-hero__availability {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark-text-secondary);
}
.kt-hero__availability .pulse-dot {
  width: 8px;
  height: 8px;
}

/* Scroll hint */
.kt-hero__scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  animation: ktBounce 2s ease-in-out infinite;
}
.kt-hero__scroll-hint svg {
  width: 24px;
  height: 24px;
  stroke: var(--dark-text-muted);
  opacity: 0.5;
}

@keyframes ktBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ── Grain texture overlay (11) ── */
.kt-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ── Parallax container (14) ── */
[data-kt-parallax] {
  will-change: background-position;
  background-attachment: fixed;
}
@media (hover: none) {
  [data-kt-parallax] {
    background-attachment: scroll;
  }
}

/* ── Pulsing ring on CTA (15) ── */
.kt-pulse-ring {
  position: relative;
}
.kt-pulse-ring::before,
.kt-pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--accent-light);
  opacity: 0;
  animation: ktPulseRing 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}
.kt-pulse-ring::after {
  animation-delay: 1.5s;
}
@keyframes ktPulseRing {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ── Social proof in hero (5) ── */
.kt-hero__social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.kt-hero__social-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--dark-text-muted);
}
.kt-hero__social-text strong {
  color: var(--dark-text-secondary);
  font-weight: 700;
}

/* ── Hero stats bar ── */
.kt-hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.kt-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.kt-hero__stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1.1;
}
.kt-hero__stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kt-hero__stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* ── Dynamic availability status (1) ── */
#kt-availability.is-closed .pulse-dot {
  background: var(--accent-champagne);
  animation: none;
}
#kt-availability.is-closed .pulse-dot::before {
  display: none;
}


/* ════════════════════════════════════════════════════
   SECTION 2 — CONTACT + FORM
   ════════════════════════════════════════════════════ */
.kt-contact {
  background: var(--bg-primary);
  padding: clamp(64px, 8vh, 100px) 0;
}

.kt-contact__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 2.5vw, 40px);
  align-items: start;
}

/* ── Info cards (left column) ── */
.kt-contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kt-info-card {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.kt-info-card:hover {
  border-color: var(--accent-border-solid);
  box-shadow: var(--shadow-md);
}

/* Phone card — emphasized */
.kt-info-card--phone {
  background: var(--dark-bg);
  border-color: var(--dark-border);
  color: var(--dark-text);
  padding: var(--space-4) var(--space-3);
}
.kt-info-card--phone:hover {
  border-color: var(--accent-light);
  box-shadow: 0 8px 32px rgba(74, 154, 106, 0.15);
}
.kt-info-card--phone .kt-info-card__icon-wrap {
  background: rgba(74, 154, 106, 0.15);
  color: var(--accent-light);
}
.kt-info-card--phone .kt-info-card__label {
  color: var(--dark-text-secondary);
}
.kt-info-card--phone .kt-info-card__meta {
  color: var(--dark-text-muted);
}

.kt-info-card__icon-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 10px;
}
.kt-info-card__icon-wrap svg {
  width: 22px;
  height: 22px;
}

.kt-info-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kt-info-card__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.kt-info-card__value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.kt-info-card__value:hover {
  color: var(--accent);
}
.kt-info-card__value--big {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark-text);
}
.kt-info-card__value--big:hover {
  color: var(--accent-light);
}

.kt-info-card__address {
  font-style: normal;
  line-height: 1.6;
}

.kt-info-card__directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
  transition: gap 0.2s ease;
}
.kt-info-card__directions:hover {
  gap: 10px;
}
.kt-info-card__directions svg {
  transform: rotate(45deg);
}

.kt-info-card__meta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kt-info-card__meta .pulse-dot {
  width: 6px;
  height: 6px;
}
.kt-info-card__meta--accent {
  color: var(--accent);
  font-weight: 500;
}

/* Messenger buttons */
.kt-info-card__messenger-links {
  display: flex;
  gap: 10px;
  margin: 4px 0;
}

.kt-messenger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kt-messenger-btn:hover {
  transform: translateY(-1px);
}
/* Reguła celowała w <i> z czasów fontu ikon, a w znacznikach od dawna stoi
   <svg> bez atrybutów width/height — obie ikony (WhatsApp i Signal) miały
   przez to 0×0 i były niewidoczne. */
.kt-messenger-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.kt-messenger-btn--wa {
  background: #25D366;
  color: #fff;
}
.kt-messenger-btn--wa:hover {
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}
.kt-messenger-btn--signal {
  background: #3A76F0;
  color: #fff;
}
.kt-messenger-btn--signal:hover {
  box-shadow: 0 4px 16px rgba(58, 118, 240, 0.3);
}

/* Hours */
.kt-info-card__hours {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kt-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 6px 0;
}
.kt-hours-row + .kt-hours-row {
  border-top: 1px solid var(--border);
}

/* ── Phone card actions row (copy + availability inline) ── */
.kt-info-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ── Staggered card reveal (4) ── */
.kt-info-card.kt-reveal { transition-delay: 0s; }
.kt-info-card.kt-reveal[data-kt-stagger="1"] { transition-delay: 0.1s; }
.kt-info-card.kt-reveal[data-kt-stagger="2"] { transition-delay: 0.2s; }
.kt-info-card.kt-reveal[data-kt-stagger="3"] { transition-delay: 0.3s; }
.kt-info-card.kt-reveal[data-kt-stagger="4"] { transition-delay: 0.4s; }

/* ── Copy button (7) ── */
.kt-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--dark-text-secondary);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-top: 4px;
  align-self: flex-start;
}
.kt-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-light);
  color: var(--accent-light);
}
.kt-copy-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.kt-copy-btn__check {
  display: none;
}
.kt-copy-btn.is-copied .kt-copy-btn__icon { display: none; }
.kt-copy-btn.is-copied .kt-copy-btn__check { display: block; stroke: var(--accent-light); }
.kt-copy-btn.is-copied .kt-copy-btn__text { color: var(--accent-light); }
.kt-copy-btn.is-copied {
  border-color: var(--accent-light);
  background: rgba(74, 154, 106, 0.12);
}

/* ── Mouse-tracking glow on cards (12) ── */
[data-kt-glow] {
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  overflow: hidden;
}
[data-kt-glow]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--glow-x) var(--glow-y),
    rgba(74, 154, 106, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
[data-kt-glow]:hover::after {
  opacity: 1;
}
/* Dark card gets brighter glow */
.kt-info-card--phone[data-kt-glow]::after {
  background: radial-gradient(
    300px circle at var(--glow-x) var(--glow-y),
    rgba(74, 154, 106, 0.15) 0%,
    transparent 70%
  );
}


/* ── Form card (right column) ── */
.kt-contact__form-wrap {
  position: sticky;
  top: 100px;
}

.kt-form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.kt-form-card__header {
  padding: var(--space-4) var(--space-4) 0;
}

.kt-form-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.kt-form-card__subtitle {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}

/* Form */
.kt-form {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kt-form[hidden] {
  display: none;
}

.kt-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kt-form__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.kt-form__req {
  color: var(--accent);
  font-weight: 700;
}
.kt-form__optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.kt-form__input,
.kt-form__select,
.kt-form__textarea {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.kt-form__input::placeholder,
.kt-form__textarea::placeholder {
  color: var(--text-muted);
}

.kt-form__input:focus,
.kt-form__select:focus,
.kt-form__textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
  background: var(--bg-elevated);
}

/* Select wrapper */
.kt-form__select-wrap {
  position: relative;
}
.kt-form__select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.kt-form__select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  pointer-events: none;
}

/* Textarea */
.kt-form__textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
}
/* Checkbox */
.kt-form__group--checkbox {
  gap: 8px;
}
.kt-form__checkbox-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  line-height: 1.55;
}
.kt-form__checkbox-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Submit button */
.kt-form__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: var(--space-1);
  overflow: hidden;
}
.kt-form__submit:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 107, 71, 0.25);
}
.kt-form__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Phone auto-format visual (6) ── */
.kt-form__input[data-formatted] {
  letter-spacing: 0.04em;
}

/* ── Map placeholder (9) ── */
.kt-map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 420px;
  background: var(--bg-secondary);
}
.kt-map__placeholder-icon {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  animation: ktPulseMap 1.5s ease-in-out infinite;
}
.kt-map__placeholder-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.kt-map__placeholder.is-hidden {
  display: none;
}
@keyframes ktPulseMap {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}


/* ════════════════════════════════════════════════════
   SECTION 3 — TRUST STRIP
   ════════════════════════════════════════════════════ */
.kt-trust {
  position: relative;
  background: var(--bg-secondary);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kt-trust__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.kt-trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.kt-trust__item strong {
  color: var(--text-primary);
  font-weight: 700;
}
.kt-trust__item a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kt-trust__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent);
}

.kt-trust__sep {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Animated line (13) ── */
.kt-trust__line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}
.kt-trust__line.is-drawn {
  transform: translateX(-50%) scaleX(1);
}


/* ════════════════════════════════════════════════════
   SECTION 4 — MAP
   ════════════════════════════════════════════════════ */
.kt-map {
  background: var(--bg-primary);
  padding: clamp(64px, 8vh, 100px) 0;
}

.kt-map__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* Eyebrow przeniesione do atomu: components/atoms/eyebrow (tone="light"). */
.kt-map__eyebrow {
  margin-bottom: 20px;
}

.kt-map__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.kt-map__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-tertiary);
  margin: 0;
}

.kt-map__embed-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.kt-map__iframe {
  display: block;
  width: 100%;
  height: 420px;
}

.kt-map__footer {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kt-map__address-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
}
.kt-map__address-bar svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

.kt-map__transport {
  display: flex;
  gap: var(--space-3);
}
.kt-map__transport-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}
.kt-map__transport-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════
   SECTION 5 — FAQ
   ════════════════════════════════════════════════════ */
.kt-faq {
  background: var(--bg-secondary);
  padding: clamp(64px, 8vh, 100px) 0;
}

.kt-faq__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* Eyebrow przeniesione do atomu: components/atoms/eyebrow (tone="light"). */
.kt-faq__eyebrow {
  margin-bottom: 20px;
}

.kt-faq__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.kt-faq__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

/* Accordion */
.kt-faq__accordion {
  display: flex;
  flex-direction: column;
}

.kt-faq__item {
  border-bottom: 1px solid var(--border);
}
.kt-faq__item:first-child {
  border-top: 1px solid var(--border);
}

.kt-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.kt-faq__question:hover {
  color: var(--accent);
}

.kt-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.kt-faq__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-muted);
  transition: stroke 0.2s ease;
}
.kt-faq__question:hover .kt-faq__icon svg {
  stroke: var(--accent);
}

.kt-faq__icon-v {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  transform-origin: center;
}
.kt-faq__question[aria-expanded="true"] .kt-faq__icon-v {
  transform: scaleY(0);
  opacity: 0;
}

.kt-faq__answer {
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 0;
}
.kt-faq__answer[hidden] {
  display: block !important;
  max-height: 0;
}
.kt-faq__answer.is-open {
  max-height: 400px;
}

.kt-faq__answer-inner {
  padding: 0 0 var(--space-3);
}
.kt-faq__answer-inner p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}
.kt-faq__answer-inner a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* Sidebar */
.kt-faq__sidebar {
  position: sticky;
  top: 100px;
}

.kt-faq__sidebar-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.kt-faq__sidebar-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border-radius: 12px;
}
.kt-faq__sidebar-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent);
}

.kt-faq__sidebar-headline {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.kt-faq__sidebar-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.kt-faq__sidebar-card .btn-primary {
  width: 100%;
  justify-content: center;
}

.kt-faq__sidebar-meta {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
}


/* ════════════════════════════════════════════════════
   RESPONSIVE — KONTAKT
   ════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .kt-faq__grid {
    grid-template-columns: 1fr;
  }
  .kt-faq__sidebar {
    position: static;
  }
}

@media (max-width: 960px) {
  .kt-contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .kt-contact__form-wrap {
    position: static;
  }

  .kt-trust__sep {
    display: none;
  }
  .kt-trust__inner {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
  .kt-trust__item {
    justify-content: center;
  }

  .kt-map__footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .kt-map__transport {
    flex-direction: column;
    gap: var(--space-1);
  }
}

@media (max-width: 600px) {
  .kt-hero__quick {
    flex-direction: column;
  }
  .kt-hero__quick-btn {
    justify-content: center;
  }

  .kt-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .kt-hero__stat-sep {
    display: none;
  }

  .kt-info-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .kt-info-card__meta {
    justify-content: center;
  }
  .kt-info-card__messenger-links {
    justify-content: center;
  }
  .kt-hours-row {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  .kt-map__iframe {
    height: 300px;
  }

  .kt-form-card__header {
    padding: var(--space-3) var(--space-3) 0;
  }
  .kt-form {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kt-anim {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .kt-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .kt-hero__scroll-hint {
    animation: none;
  }
  .kt-faq__answer {
    transition: none;
  }
}


/* ============================================================
   LARGE SCREENS — reduce excessive spacing
   ============================================================ */
@media (min-width: 1600px) {

  /* ── Hero sections — cap height & padding ── */
  .hh-hero {
    min-height: min(90vh, 800px);
    padding: 160px 0 48px;
  }
  .cat-hero {
    min-height: min(92vh, 820px);
    padding: 140px 0 56px;
  }
  .sp-hero { padding: 140px 0 40px; }
  .oka-hero {
    min-height: min(90vh, 800px);
    padding: 140px 0 56px;
  }
  .kt-hero { padding: 120px 0 80px; }
  .cennik-hero { padding: 140px 0 56px; }
  .pro-section { padding: 120px 0 64px; }
  .cost-bottom-cta { padding: 120px 0 64px; }

  /* ── Front page sections ── */
  .stabs { padding: 80px 0; }
  .ecta { padding: 72px 0; }
  .why { padding: 80px 0; }
  .about { padding-bottom: 80px; }
  .about__grid { gap: 64px; }
  .cases { padding: 80px 0; }
  .reviews { padding: 64px 0; }
  .media { padding-bottom: 72px; }
  .cpanel { padding: 80px 0; }
  .cpanel__emergency { padding: 56px 0; }
  .knowledge { padding: 80px 0; }
  .faq { padding: 72px 0; }
  .fcta { padding: 56px 0; }
  .fcta-follow { padding: 80px 0; }

  /* ── Subpage sections ── */
  .expert { padding: 36px 0 80px; }
  .oka-story { padding: 80px 0; }
  .oka-team { padding: 80px 0; }
  .oka-collab { padding: 80px 0; }
  .kt-contact { padding: 72px 0; }
  .pricing { padding: 80px 0; }
  .why-hourly { padding: 80px 0; }
  .cost-factors { padding: 80px 0; }
  .cost-cta { padding: 80px 0; }
}

/* ============================================================
   HERO SPLIT LAYOUT (kontakt)
   ============================================================ */

.kt-hero--split {
  text-align: left;
  padding-bottom: var(--space-6);
}

.kt-hero--split > .container {
  position: relative;
  z-index: 2;
}

.kt-hero__split-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.kt-hero--split .kt-hero__inner {
  max-width: none;
  margin: 0;
  align-self: start;
}

.kt-hero--split .kt-hero__stats {
  justify-content: flex-start;
}

.kt-hero--split .kt-hero__lead {
  margin-left: 0;
  margin-right: 0;
}

.kt-hero--split .kt-hero__quick {
  justify-content: flex-start;
}

.kt-hero--split .kt-hero__availability {
  justify-content: flex-start;
}

.kt-hero--split .kt-hero__social-proof {
  justify-content: flex-start;
}

.kt-hero__form-col {
  position: relative;
}

.kt-hero__form-col .kt-form-card {
  position: sticky;
  top: 100px;
}

@media (max-width: 991px) {
  .kt-hero__split-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .kt-hero--split {
    text-align: center;
  }
  .kt-hero--split .kt-hero__inner {
    max-width: 600px;
    margin: 0 auto;
    position: static;
  }
  .kt-hero--split .kt-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .kt-hero--split .kt-hero__quick {
    justify-content: center;
    flex-wrap: wrap;
  }
  .kt-hero--split .kt-hero__availability {
    justify-content: center;
  }
  .kt-hero--split .kt-hero__social-proof {
    justify-content: center;
  }
  .kt-hero--split .kt-hero__stats {
    justify-content: center;
  }
  .kt-hero--split .kt-hero__trust-badges {
    justify-content: center;
  }
  .kt-hero--split .kt-hero__location {
    justify-content: center;
  }
  .kt-hero__form-col .kt-form-card {
    position: static;
  }
}

/* Hero split — trust badges */
.kt-hero__trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: var(--space-3);
}

.kt-hero__trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--dark-text-secondary, rgba(255,255,255,0.75));
}

.kt-hero__trust-badge svg {
  flex-shrink: 0;
  stroke: var(--accent-light);
}

.kt-hero__trust-badge strong {
  color: var(--dark-text, #fff);
}

/* Hero split — location */
.kt-hero__location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--dark-text-muted, rgba(255,255,255,0.5));
}

.kt-hero__location svg {
  flex-shrink: 0;
  stroke: var(--accent-light);
  opacity: 0.7;
}


/* ============================================================
   CALENDAR CARD IN CONTACT SECTION
   ============================================================ */

.kt-contact__calendar-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.kt-contact__calendar-header {
  padding: var(--space-3) var(--space-3) 0;
}

.kt-contact__calendar-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 6px;
}

.kt-contact__calendar-sub {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}

.kt-contact__calendar-embed {
  padding: var(--space-2) var(--space-2) var(--space-3);
}

/* Zencal v4 renders into a Shadow DOM inside .zencal-embed — do NOT
   use ::before/::after with :empty here, Shadow DOM does not affect
   :empty matching and the overlay would cover the real calendar. */
.kt-contact__calendar-embed .zencal-embed {
  display: block;
  min-height: 520px;
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .kt-contact__calendar-header {
    padding: var(--space-2) var(--space-3) 0;
  }
  .kt-contact__calendar-embed {
    padding: var(--space-1) var(--space-2) var(--space-2);
  }
  .kt-contact__calendar-embed .zencal-embed {
    min-height: 440px;
  }
}

/* ============================================================
   ZENCAL CALENDAR SECTION (standalone — kept for reuse)
   ============================================================ */

.kt-calendar {
  padding: clamp(64px, 8vh, 100px) 0;
  background: var(--bg-secondary);
}

.kt-calendar__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.kt-calendar__eyebrow {
  /* wygląd w components/atoms/eyebrow */
  margin-bottom: 20px;
}

.kt-calendar__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.kt-calendar__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-tertiary);
  margin: 0;
}

.kt-calendar__embed {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg-primary);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  overflow: hidden;
}

.kt-calendar__embed .zencal-embed {
  min-height: 500px;
}

@media (max-width: 768px) {
  .kt-calendar__embed {
    padding: var(--space-2);
    border-radius: 12px;
  }
  .kt-calendar__embed .zencal-embed {
    min-height: 400px;
  }
}

/* ============================================================
   CONTACT FORM 7 – OVERRIDE TO MATCH EXISTING DESIGN
   ============================================================ */

/* CF7 wraps each field in .wpcf7-form-control-wrap – make it block */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* CF7 form inherits kt-form class via html_class */
.wpcf7 .wpcf7-form.kt-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wpcf7 .wpcf7-form p,
.wpcf7 .wpcf7-form .kt-form__group p,
.wpcf7 .wpcf7-form .kt-form__select-wrap p,
.wpcf7 .wpcf7-form .kt-form__rodo-row p {
  margin: 0 !important;
  padding: 0 !important;
}
.wpcf7 .wpcf7-form .kt-form__group {
  margin: 0;
  padding: 0;
  gap: 2px;
}
.wpcf7 .wpcf7-form br {
  display: none !important;
}
.wpcf7 .wpcf7-form .wpcf7-form-control-wrap {
  margin: 0;
  padding: 0;
}
.wpcf7 .wpcf7-form .kt-form__label {
  margin: 0;
}
.wpcf7 .wpcf7-form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

/* CF7 inputs/selects/textareas inherit our classes via class: shortcode attr,
   but CF7 also adds .wpcf7-form-control – ensure no conflicts */
.wpcf7 .wpcf7-form-control.kt-form__input,
.wpcf7 .wpcf7-form-control.kt-form__select,
.wpcf7 .wpcf7-form-control.kt-form__textarea {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.wpcf7 .wpcf7-form-control.kt-form__input:focus,
.wpcf7 .wpcf7-form-control.kt-form__select:focus,
.wpcf7 .wpcf7-form-control.kt-form__textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
  background: var(--bg-elevated);
}

/* CF7 select: match our appearance:none + chevron setup */
.wpcf7 .wpcf7-form-control.kt-form__select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

/* CF7 textarea */
.wpcf7 .wpcf7-form-control.kt-form__textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
}

/* CF7 submit button – match kt-form__submit */
.wpcf7 .wpcf7-form-control.wpcf7-submit.kt-form__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: var(--space-1);
  overflow: hidden;
}
.wpcf7 .wpcf7-form-control.wpcf7-submit.kt-form__submit:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 107, 71, 0.25);
}
.wpcf7 .wpcf7-form-control.wpcf7-submit.kt-form__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* CF7 spinner (loading indicator) */
.wpcf7 .wpcf7-spinner {
  margin-left: 8px;
}

/* CF7 validation error per-field */
.wpcf7 .wpcf7-not-valid {
  border-color: #C0392B !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1) !important;
}
.wpcf7 .wpcf7-not-valid-tip {
  color: #C0392B;
  font-family: var(--font-body);
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
}

/* CF7 response output (success/error message) */
.wpcf7 .wpcf7-response-output {
  border: none !important;
  padding: 16px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: var(--space-1) 0 0;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: var(--accent-bg-solid, rgba(3, 81, 67, 0.08));
  color: var(--accent);
  border-left: 4px solid var(--accent) !important;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  background: rgba(192, 57, 43, 0.08);
  color: #C0392B;
  border-left: 4px solid #C0392B !important;
}
.wpcf7 form.invalid .wpcf7-response-output {
  background: rgba(192, 57, 43, 0.06);
  color: #C0392B;
  border-left: 4px solid #C0392B !important;
}

/* CF7 acceptance (RODO checkbox) */
.kt-form__rodo-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.kt-form__rodo-row .wpcf7-form-control-wrap {
  flex: 0 0 20px;
  display: flex;
  width: 20px;
}
.kt-form__rodo-row .wpcf7-form-control.wpcf7-acceptance {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.kt-form__rodo-row .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.kt-form__rodo-row .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label {
  cursor: pointer;
}
.kt-form__rodo-row .wpcf7-acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--bg-primary);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin: 0;
  display: block;
  position: relative;
  flex-shrink: 0;
}
.kt-form__rodo-row .wpcf7-acceptance input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.kt-form__rodo-row .wpcf7-acceptance input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.kt-form__rodo-row .wpcf7-acceptance input[type="checkbox"]:focus-visible {
  box-shadow: var(--shadow-focus);
}
.kt-form__rodo-row > .kt-form__checkbox-text {
  flex: 1;
}

/* CF7 callback form in sidebar */
.sidebar-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.sidebar-form .wpcf7 .wpcf7-response-output {
  font-size: 0.8125rem;
  padding: 10px;
  margin: 8px 0 0;
}
.sidebar-form .wpcf7 .wpcf7-response-output[aria-hidden="true"] {
  display: none;
}

/* ============================================================
   PRZESTĘPCZOŚĆ ZORGANIZOWANA (oz-) → wyniesione do assets/css/zgp.css,
   ładowane warunkowo tylko na template-zgp.php (functions.php $page_css[]='zgp').
   ============================================================ */

/* ============================================================
   404 PAGE
   ============================================================ */
.kt-hero__inner--centered {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.kt-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}
.kt-hero__cta-group--centered {
  justify-content: center;
}
/* ── 404 hero modifier ── */
.kt-hero--404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-top: clamp(120px, 15vh, 180px);
  padding-bottom: clamp(80px, 12vh, 140px);
}
.kt-hero--404 > .container {
  width: 100%;
}

/* ── Large decorative "404" ── */
.error-404__big-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(12rem, 28vw, 22rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(74, 154, 106, 0.12);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .error-404__big-number {
  -webkit-text-stroke-color: rgba(74, 154, 106, 0.08);
}

/* ── Search ── */
.error-404__search {
  margin: 2rem auto;
  max-width: 480px;
}
.error-404__search-row {
  display: flex;
  gap: 0.5rem;
}
.error-404__search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--dark-border);
  background: var(--dark-bg-elevated);
  color: var(--dark-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.error-404__search-input::placeholder {
  color: var(--dark-text-muted);
}
.error-404__search-input:focus {
  outline: none;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(74, 154, 106, 0.15);
}

/* ── Nav section ── */
.error-404__nav {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--bg-primary);
}
.error-404__nav-inner {
  max-width: 640px;
  margin: 0 auto;
}
.error-404__nav-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin: 0 0 1rem;
  padding-left: 4px;
}
.error-404__nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--border);
}

/* ── Nav items ── */
.error-404__nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: var(--bg-elevated);
  text-decoration: none;
  transition: background 0.2s ease;
}
.error-404__nav-item:hover {
  background: var(--accent-bg);
}
.error-404__nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-bg);
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.error-404__nav-item:hover .error-404__nav-icon {
  background: rgba(46, 107, 71, 0.14);
}
[data-theme="dark"] .error-404__nav-icon {
  background: rgba(74, 154, 106, 0.1);
}
[data-theme="dark"] .error-404__nav-item:hover .error-404__nav-icon {
  background: rgba(74, 154, 106, 0.18);
}
.error-404__nav-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.error-404__nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.error-404__nav-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.error-404__nav-desc {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.error-404__nav-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.error-404__nav-item:hover .error-404__nav-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .kt-hero--404 .kt-hero__inner {
    max-width: 100%;
  }
  .error-404__search {
    max-width: 100%;
  }
  .error-404__search-row {
    flex-wrap: wrap;
  }
  .error-404__search-row .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .kt-hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .kt-hero__cta-group .btn-primary,
  .kt-hero__cta-group .btn-ghost-light {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 12px 24px;
  }
  .error-404__big-number {
    font-size: clamp(8rem, 40vw, 14rem);
  }
  .error-404__nav-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   GLOBAL: Focus-visible
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* ============================================================
   GLOBAL: prefers-contrast: high
   ============================================================ */
@media (prefers-contrast: high) {
  :root {
    --border: #999;
    --text-muted: #555;
    --text-tertiary: #444;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.16);
  }
}

/* ============================================================
   GLOBAL: Search loading state
   ============================================================ */
.bw-search__dropdown--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.bw-search__spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sk-spin 0.6s linear infinite;
}
@keyframes sk-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   GLOBAL: Toast notification (replaces alert())
   ============================================================ */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  z-index: 10001;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.toast--error {
  background: #B91C1C;
  color: #fff;
}
.toast--success {
  background: var(--accent);
  color: #fff;
}

/* ============================================================
   GLOBAL: Scroll reveal (IntersectionObserver)
   JS adds .io-ready to <html> once IO is set up, so sections
   are always visible if JS fails or hasn't loaded yet.
   ============================================================ */
html.io-ready .io-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}
html.io-ready .io-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.io-ready .io-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   GLOBAL: Noscript banner
   ============================================================ */
.noscript-banner {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================================
   EM-BANNER — Emergency Bottom Banner (global, used in footer)
   ============================================================ */
/* Domyślnie widoczny — to jedyne trwałe CTA telefoniczne na mobile i musi
   przetrwać awarię JS. Chowanie do czasu przewinięcia poza hero włącza dopiero
   skrypt, przez klasę .emb-ready na <html> (script.js — blok EM-BANNER).
   Ten sam wzorzec co html.io-ready i html.ecta-ready. */
.em-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#0D0D0D;border-top:1px solid rgba(255,255,255,0.06);transform:translateY(0);transition:transform .35s cubic-bezier(.4,0,.2,1);padding-bottom:env(safe-area-inset-bottom,0)}
html.emb-ready .em-banner{transform:translateY(100%)}
html.emb-ready .em-banner.is-visible{transform:translateY(0)}
.em-banner.is-hidden{transform:translateY(100%)}
.em-banner.is-dismissed{transform:translateY(100%)!important;pointer-events:none}
/* Pasek jest fixed, więc bez tego przykrywa ostatnie ~76 px strony — na stronach
   kryzysowych akurat fragment stopki z numerem telefonu. Rezerwujemy miejsce
   tylko wtedy, gdy pasek faktycznie jest w DOM i nie został zamknięty. */
:root{--em-banner-h:76px}
@media(min-width:769px){:root{--em-banner-h:52px}}
body:has(#em-banner:not(.is-dismissed)){padding-bottom:calc(var(--em-banner-h) + env(safe-area-inset-bottom,0px))}
html:has(#em-banner){scroll-padding-bottom:calc(var(--em-banner-h) + env(safe-area-inset-bottom,0px))}
.em-banner__inner{max-width:1440px;margin:0 auto;padding:0 clamp(20px,12px + 3vw,96px);display:flex;align-items:center;justify-content:space-between;height:52px;gap:24px}
.em-banner__left{display:flex;align-items:center;gap:20px;min-width:0}
.em-banner__headline{font-size:0.8125rem;font-weight:600;color:#F8F6F2;white-space:nowrap;letter-spacing:.01em}
.em-banner__headline strong{color:#FF8A8A;font-weight:700}
.em-banner__sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.2);flex-shrink:0}
.em-banner__badges{display:flex;align-items:center;gap:6px}
.em-banner__badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:100px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.6875rem;font-weight:600;color:#B5AFA5;text-decoration:none;transition:all .25s ease;white-space:nowrap}
.em-banner__badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.em-banner__badge:hover{background:rgba(220,50,50,0.1);border-color:rgba(220,50,50,0.25);color:#F8F6F2}
.em-banner__badge:focus-visible{outline:2px solid #F5A623;outline-offset:2px}
.em-banner__right{flex-shrink:0}
.em-banner__cta{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:8px;font-size:0.8125rem;font-weight:700;text-decoration:none;color:#fff;transition:all .25s ease;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;position:relative;overflow:hidden;background:linear-gradient(90deg,#162040 0%,#0e0e18 40%,#0e0e18 60%,#2a1020 100%);border:1px solid rgba(255,255,255,0.06);box-shadow:0 0 35px rgba(60,120,255,0.2),0 4px 20px rgba(0,0,0,0.25);animation:ctaWashGlow 2.5s ease-in-out infinite}
.em-banner__cta::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);animation:ctaShimmer 3s ease-in-out infinite}
.em-banner__cta::before{content:'';position:absolute;inset:0;border-radius:inherit;animation:ctaWashSurface 2.5s ease-in-out infinite;z-index:0}
.em-banner__cta>*{position:relative;z-index:1}
.em-banner__cta:hover{transform:translateY(-1px)}
.em-banner__cta span{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,#6BA3FF 0%,#d0d8e8 30%,#e8e8e8 50%,#e8d0d0 70%,#FF6B6B 100%);background-size:200% 100%;animation:ctaTextSweep 2.5s ease-in-out infinite}
.em-banner__cta svg{width:14px;height:14px;stroke:#d0d8e8;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.em-banner__cta:focus-visible{outline:2px solid #F5A623;outline-offset:2px}
@keyframes ctaShimmer{0%,100%{left:-100%}50%{left:100%}}
@keyframes ctaWashGlow{0%,100%{box-shadow:0 0 35px rgba(60,120,255,0.25),0 4px 20px rgba(0,0,0,0.25)}50%{box-shadow:0 0 35px rgba(220,50,50,0.25),0 4px 20px rgba(0,0,0,0.25)}}
@keyframes ctaWashSurface{0%,100%{background:linear-gradient(90deg,rgba(60,120,255,0.4) 0%,rgba(60,120,255,0.2) 40%,transparent 100%)}50%{background:linear-gradient(90deg,transparent 0%,rgba(220,50,50,0.2) 60%,rgba(220,50,50,0.4) 100%)}}
@keyframes ctaTextSweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.em-banner__pulse{width:6px;height:6px;background:#DC3232;border-radius:50%;flex-shrink:0;animation:emPulse 2s ease-in-out infinite}
@keyframes emPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
@media(max-width:768px){
  .em-banner.is-visible{transform:translateY(0)}
  .em-banner__inner{height:auto;padding:10px 12px;gap:8px}
  .em-banner__left{display:none}
  .em-banner__right{display:contents}
  .em-banner__mobile-bar{display:flex;width:100%;gap:8px;align-items:stretch}
  .em-banner__cta{flex:7;justify-content:center;padding:14px 16px;font-size:0.875rem;border-radius:10px;min-height:48px}
  .em-banner__cta::after{animation-duration:2.5s}
  .em-banner__wa{flex:3;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a 0%,#111 100%);border-radius:10px;min-height:48px;text-decoration:none;transition:all .25s ease;border:1px solid rgba(37,211,102,0.2)}
  .em-banner__wa svg{width:22px;height:22px;fill:#25D366;transition:fill .25s ease}
  .em-banner__wa:hover{background:linear-gradient(135deg,#1e1e1e 0%,#151515 100%);border-color:rgba(37,211,102,0.4)}
  .em-banner__wa:hover svg{fill:#2EE876}
  .em-banner__wa:focus-visible{outline:2px solid #25D366;outline-offset:2px}
  .em-banner__close{display:flex}
}
@media(min-width:769px) and (max-width:1100px){.em-banner__badges,.em-banner__sep{display:none}}
@media(min-width:769px){.em-banner{will-change:transform}.em-banner__mobile-bar{display:contents}.em-banner__wa{display:none}}
.em-banner__close{display:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);cursor:pointer;flex-shrink:0;transition:background .2s ease;position:absolute;top:-14px;right:12px}
.em-banner__close svg{width:12px;height:12px;stroke:#B5AFA5;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.em-banner__close:hover{background:rgba(255,255,255,0.15)}
.em-banner__close:focus-visible{outline:2px solid #F5A623;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.em-banner{transition:none}.em-banner__cta,.em-banner__cta::after,.em-banner__cta::before,.em-banner__cta span{animation:none}.em-banner__cta span{-webkit-text-fill-color:#F8F6F2}.em-banner__pulse{animation:none}}

/* ============================================================
   UNIVERSAL BREADCRUMB — bc-slide
   ============================================================
   Od 900 px cała ścieżka stoi rozwinięta; niżej zwija się do „⋯ › bieżąca
   strona" i rozwija na dotknięcie, najechanie albo fokus (patrz blok „Zwijanie").

   Kiedyś środkowe pozycje siedziały na `max-width:0` na KAŻDEJ szerokości
   i wyjeżdżały wyłącznie na :hover, przez co na telefonie i tablecie nie dało
   się do nich dotrzeć w ogóle: dotyk nie ma stanu hover, więc jedyną dostępną
   pozycją była nazwa bieżącej strony, czyli ta, na której użytkownik już stoi.
   Okruszek, który chowa ścieżkę i nie daje jej odsłonić, nie jest okruszkiem.

   Strzałka „wróć" zniknęła razem z tym: prowadziła pod ten sam adres, co
   pierwsza pozycja ścieżki, więc przy pełnej ścieżce była podwójnym linkiem do
   tego samego miejsca (i drugim przystankiem dla czytnika ekranu).

   Wąskie ekrany: ścieżka NIE łamie się na wiersze, tylko przewija w poziomie
   wewnątrz własnego kontenera. Łamanie rozbijało pigułkę na dwa i trzy wiersze,
   a przy długim tytule wpisu blogowego robiło z okruszka akapit. Przewijanie
   trzyma jedną linię i nigdy nie dokłada przewijania całej stronie.
   ============================================================ */
.bc-slide {
  margin-bottom: var(--space-2);
  /* Kontener przewijania. `max-width` z `overflow-x` to warunek, żeby długa
     ścieżka przewijała się tutaj, a nie rozpychała rodzica.
     `min-width: 0` jest równie konieczne: część hero trzyma okruszek w siatce
     albo we flexie, gdzie domyślne `min-width: auto` każe elementowi być co
     najmniej tak szerokim, jak jego treść. Bez tego `max-width: 100%` nie ma
     nic do ograniczenia i pigułka wyjeżdża poza kadr (na 320 px robiła 416 px,
     schowane pod globalnym `overflow-x: clip`, więc niewidoczne w audycie
     przewijania, ale ostatnia pozycja ścieżki była nieosiągalna).

     `contain: inline-size` dokłada to, czego `min-width: 0` samo nie umie:
     zeruje wkład treści w szerokość MINIMALNĄ przodków. Bez tego ścieżka
     pchała w górę przez `min-width: auto` na kolejnych elementach siatek
     i flexów aż do .container, który przy 320 px rozciągał się do 459 px
     (zmierzone na hero kategorii). Z kontenerem szerokość okruszka wynika
     wyłącznie z rodzica, a treść przewija się w środku. */
  min-width: 0;
  max-width: 100%;
  contain: inline-size;
  /* `contain: inline-size` ma skutek uboczny, którego nie widać na siatce ani
     w bloku: zeruje wkład treści w szerokość WŁASNĄ elementu wszędzie tam,
     gdzie ta szerokość bierze się z treści. W kolumnowym flexie (subhero
     podspecjalizacji: `flex-direction: column; align-items: center`) rozmiarem
     poprzecznym pozycji jest właśnie fit-content, więc okruszek dostawał 0 px
     i znikał z ekranu na wszystkich ~40 podstronach czynów.

     `align-self: stretch` odbiera tę szerokość rodzicowi zamiast treści, więc
     kontener przewijania znów ma się w czym rozłożyć. Poza flexem deklaracja
     jest bezczynna (w bloku i w komórce siatki `align-self` nie steruje
     szerokością), a przez to, że stretch nigdy nie wychodzi poza pole treści
     rodzica, nie może przywrócić rozpychania, przed którym stoi `contain`. */
  align-self: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Pasek przewijania pod okruszkiem wyglądałby jak usterka, a przewijanie
     i tak jest odkrywalne: ścieżka jest wtedy widocznie ucięta na krawędzi. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bc-slide::-webkit-scrollbar { display: none; }

.bc-slide__list {
  display: inline-flex;
  align-items: center;
  /* `max-content` w kontenerze przewijania: bez tego lista skurczyłaby się do
     szerokości rodzica i pozycje zaczęłyby się zgniatać zamiast przewijać. */
  width: max-content;
  /* Bez pigułki: żadnego tła, ramki ani zaokrąglenia. Tło i obwódka robiły
     z okruszka blok, który pod nagłówkiem czytał się jak element interfejsu,
     a 12 px wcięcia w poziomie odsuwało napis od lewej krawędzi kontenera, więc
     okruszek nie stał w jednej linii ze zdjęciem i nagłówkiem pod nim.

     Wysokość zostaje 34 px: to cel dotykowy, nie światło (WCAG 2.2 / 2.5.8
     wymaga 24 px, więc jest zapas). Zajmowaną przestrzeń regulują marginesy,
     nie ten wymiar. */
  min-height: 34px;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--dark-text-muted);
}

/* Pozycje.
   Cel dotykowy robi wysokość samego odnośnika (44 px), nie padding pigułki:
   dzięki temu obszar klikalny pokrywa całą wysokość paska, a nie sam napis. */
.bc-slide__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.bc-slide__item:not(:last-child)::after {
  content: '›';
  margin: 0 8px;
  opacity: 0.4;
}
.bc-slide__item a,
.bc-slide__item span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

/* ── Zwijanie: TYLKO poniżej 900 px ──
   Zwijanie powstało dla wąskich ekranów, gdzie czteroelementowa ścieżka nie
   mieści się w jednej linii. Od 900 px mieści się z zapasem („Strona główna ›
   Specjalizacje › Postępowanie wykonawcze › Warunkowe przedterminowe zwolnienie"
   to ok. 460 px przy wersie 11 px), więc chowanie jej za ⋯ tylko kosztowało
   kliknięcie i ukrywało kontekst, dla którego okruszek w ogóle istnieje.

   Poniżej 900 px zostaje tak, jak było: widać „⋯ › bieżąca strona", a rozwija
   to najechanie (tylko wskaźnik), fokus klawiatury albo dotknięcie ⋯.

   Przycisk znika przy rozwinięciu przez najechanie i przez kliknięcie, ale NIE
   przy :focus-within: fokus stoi wtedy często na samym przycisku i skasowanie
   go zgubiłoby miejsce w tabulacji. */
.bc-slide__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  /* Same znaki ⋯ mają 16 px szerokości, czyli poniżej progu 24 px z WCAG 2.2
     (2.5.8). Minimalna szerokość robi z nich cel, w który da się trafić. */
  min-width: 26px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.bc-slide__toggle::before {
  content: "\22EF"; /* ⋯ */
  font-size: 1.15em;
  line-height: 1;
}
.bc-slide__toggle:hover { color: var(--accent-light); }
.bc-slide__toggle:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 899.98px) {
  .bc-slide__item--fold {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }
  .bc-slide__list.is-open .bc-slide__item--fold,
  .bc-slide:focus-within .bc-slide__item--fold {
    max-width: 24ch;
    opacity: 1;
  }
  .bc-slide__list.is-open .bc-slide__item--toggle {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
  }
}
@media (max-width: 899.98px) and (hover: hover) {
  .bc-slide__list:hover .bc-slide__item--fold { max-width: 24ch; opacity: 1; }
  .bc-slide__list:hover .bc-slide__item--toggle { max-width: 0; opacity: 0; overflow: hidden; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .bc-slide__item--fold { transition: none; }
}

/* Od 900 px ścieżka stoi w całości, więc nie ma czego rozwijać. Przycisk ⋯
   znika z układu i z tabulacji: zostawiony byłby celem, który niczego nie
   zmienia, a czytnikowi ekranu dokładałby przystanek przed pierwszą pozycją. */
@media (min-width: 900px) {
  .bc-slide__item--toggle { display: none; }
}

/* Bieżąca strona */
.bc-slide__item[aria-current] span {
  color: var(--dark-text-secondary);
  letter-spacing: 0.3px;
}

/* Odnośniki */
.bc-slide__item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bc-slide__item a:hover {
  color: var(--accent-light);
}
.bc-slide__item a:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Wariant jasny (strony na kremowym tle) ──
   Po zdjęciu pigułki wariant sprowadza się do samych kolorów pisma. */
.bc-slide--light .bc-slide__list {
  color: var(--text-tertiary);
}
.bc-slide--light .bc-slide__item[aria-current] span {
  color: var(--text-primary);
}
.bc-slide--light .bc-slide__item a:hover {
  color: var(--accent);
}
.bc-slide--light .bc-slide__item a:focus-visible {
  outline-color: var(--accent);
}

/* ── Telefon ──
   Ciaśniej między pozycjami. Bez maski gradientowej na krawędzi: na kontenerze
   przewijania przygaszałaby ostatnią pozycję również po dojechaniu do końca
   ścieżki, a samo ucięcie napisu na krawędzi wystarcza za sygnał. */
@media (max-width: 600px) {
  .bc-slide__item:not(:last-child)::after { margin: 0 6px; }
}

/* ============================================================
   FILM ZAMIAST ZDJĘCIA — fasada (kadr startowy + przycisk)
   ============================================================
   Wspólne dla wszystkich miejsc: zdjęcie zostaje kadrem startowym,
   odtwarzacz wstawia skrypt dopiero po kliknięciu przycisku.
   Bez filmu żadna z tych reguł nie ma do czego się przypiąć —
   znacznik zdjęcia zostaje wtedy dokładnie taki jak dotąd. */

.ks-has-video { cursor: pointer; }

.ks-play {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.ks-play:hover { transform: scale(1.08); }

.ks-play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 50%;
}

.ks-play__icon {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  transition: filter 0.2s ease;
}

.ks-play:hover .ks-play__icon { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4)); }

@media (max-width: 600px) {
  .ks-play__icon { width: 52px; height: 52px; }
}

/* Stan odtwarzania: kadr startowy ustępuje miejsca filmowi.
   `visibility`, nie `display` — zdjęcie musi nadal zajmować miejsce, bo w części
   sekcji to ono wyznacza wysokość ramy. Przy `display:none` kontener zapadał się,
   a film wychodził poza niego i podnosił treść pod spodem. */
.ks-has-video.is-playing > img,
.ks-has-video.is-playing > picture { visibility: hidden; }
.ks-has-video.is-playing .ks-play { display: none; }
.ks-has-video.is-playing::before,
.ks-has-video.is-playing::after { display: none; }

.ks-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tło pod kadrem: ramy bywają pionowe, a film z serwisu ma 16:9.
     Dziedziczone tło zlewa pasy z otoczeniem zamiast dawać czarne dziury. */
  background: inherit;
}

/* Film z serwisu ma stałe proporcje 16:9 — wpisujemy go w szerokość ramy. */
.ks-video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}

/* Wgrany plik bywa pionowy lub kwadratowy — taki wypełnia ramę bez pasów. */
.ks-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

/* Zamknięcie filmu → powrót do kadru/hero (wspólne dla wszystkich fasad wideo) */
.ks-video-close,
.blog-hero__video-wrap .ks-video-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7; /* nad .ks-video-wrap (z-index:6) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(13,13,13,0.62);
  border: 1px solid rgba(255,255,255,0.18);
  color: #F8F6F2;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ks-video-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.ks-video-close:hover {
  background: rgba(13,13,13,0.85);
  transform: scale(1.06);
}
.ks-video-close:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
/* Hero pełnoekranowe: film sięga pod stały nagłówek — × poniżej niego */
.sp-hero .ks-video-close {
  top: var(--hero-pt);
  right: clamp(16px, 4vw, 40px);
}
@media (prefers-reduced-motion: reduce) {
  .ks-video-close { transition: none; }
  .ks-video-close:hover { transform: none; }
}