/*
Theme Name: Szwarc Physio
Theme URI: https://szwarcphysio.pl
Author: Stanisław Szwarc
Author URI: https://szwarcphysio.pl
Description: Własny motyw szwarc.physio — Academic Brutalism
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: szwarcphysio
*/

/* ============================================================
   FONTS — self-hosted (Q14 Faza 2.1, 2026-05-05)
   Pliki płasko w assets/ — rrsync command-restriction nie tworzy
   nowych subfolderów (Q9 Krok 7B), więc fonty żyją obok lead-magnet.js.
   Subset: latin-ext (polskie znaki).
   @font-face deklaruje 7 wag faktycznie używanych w redesignie.
   Pozostałe pliki na serwerze są dostępne — dorzucasz @font-face
   gdy redesign tego wymaga, bez ponownego deploy fontów.
   Cleanup nieużywanych plików: Faza 4 domknięcia.
   ============================================================ */

/* Switzer — display H1/H2 + UI labels */
@font-face {
    font-family: 'Switzer';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/Switzer-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Switzer';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/Switzer-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Switzer';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/Switzer-Semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Switzer';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/Switzer-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Switzer';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('assets/Switzer-Black.woff2') format('woff2');
}

/* Literata — body long-form */
@font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/literata-v40-latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Literata';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/literata-v40-latin-ext-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/literata-v40-latin-ext-700.woff2') format('woff2');
}

/* IBM Plex Mono — sygnatury FIG., daty, meta */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/ibm-plex-mono-v20-latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/ibm-plex-mono-v20-latin-ext-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/ibm-plex-mono-v20-latin-ext-600.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/ibm-plex-mono-v20-latin-ext-700.woff2') format('woff2');
}

/* ============================================
   ZMIENNE PROJEKTOWE — design system
   ============================================ */
:root {
  /* --- Kolory semantyczne (Atlas Editorial, brand/design-system.md sekcja 2) --- */
  --color-navy:        #14233D;
  --color-paper:       #F4F0E6;
  --color-paper-dark:  #ECE6D6;
  --color-paper-muted: rgba(244, 240, 230, 0.55);
  --color-paper-line:  rgba(244, 240, 230, 0.12);
  --color-paper-deeper: #DDD5BF;
  --color-white-clean: #FAFAF7;
  --color-navy-soft:   #2A3B5E;
  --color-ink-soft:    #4A5878;
  --color-orange:      #D85A30;
  --color-orange-deep: #B8421C;
  --color-burgundy:    #6B1F1A;

  /* --- Aliasy do starych nazw (kompatybilność szablonów Q14c-e) --- */
  --color-black:        var(--color-navy);
  --color-cream:        var(--color-paper);
  --color-sand:         var(--color-paper-dark);
  --color-white:        var(--color-white-clean);
  --color-text-muted:   #888780;              /* zostaje dla mono/meta */
  --color-text-subtle:  var(--color-ink-soft);
  --color-text-body:    var(--color-ink-soft);
  --color-border-dark:  var(--color-navy-soft);
  --color-surface-dark: var(--color-navy);
  --color-backround-lightgrey: #BDBDBD;       /* zostaje, używana sporadycznie */

  /* --- Fonty (semantyczne) --- */
  --font-display: 'Switzer', system-ui, sans-serif;
  --font-body:    'Literata', Georgia, serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* --- Aliasy starych nazw fontów --- */
  --font-serif: var(--font-display);
  --font-main:  var(--font-body);

  /* --- Motion (brand/design-system.md sekcja 5) --- */
  --motion-instant: 100ms;
  --motion-fast:    150ms;
  --motion-base:    250ms;
  --motion-slow:    400ms;
  --ease-default:   ease;
  --ease-precise:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* prefers-reduced-motion — globalny override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================
   RESET I PODSTAWY
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* clip zamiast hidden — hidden łamie position:sticky w potomkach */
  overflow-x: clip;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-cream);
  color: var(--color-black);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip zamiast hidden — hidden łamie position:sticky w potomkach */
  overflow-x: clip;
  /* Szerokość nigdy nie przekroczy viewportu */
  max-width: 100vw;
}

/* ============================================
   TYPOGRAFIA BAZOWA
   ============================================ */
h1 {
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 400;
  line-height: 1.0;
}

h2 {
  font-family: var(--font-main);
  font-size: clamp(32px, 3.5vw, 42px);  
  font-weight: 700;
  line-height: 1.15;
}
h3 {
  font-family: var(--font-main);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  line-height: 1.3;
}

p {
  font-size: 16px;
  line-height: 1.7;
}

a {
  color: var(--color-black);
  text-decoration: none;
}

a:hover {
  color: var(--color-black);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   KONTENER BAZOWY
   ============================================ */
.sp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================
   ETYKIETY I TAGI (signature mark)
   ============================================ */
.sp-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
}

/* ============================================
   PRZYCISKI
   ============================================ */
.sp-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 13px 24px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.sp-btn:hover {
  opacity: 0.85;
}

.sp-btn-primary {
  background: var(--color-orange);
  color: var(--color-cream);
}

.sp-btn-outline {
  background: var(--color-orange);
  color: var(--color-cream);
  border: 1px solid var(--color-orange);
}

/* Fix: globalny a:hover nadpisywałby kolor na czarny */
.sp-btn-outline:hover {
  color: var(--color-cream);
  opacity: 0.85;
}
/* ============================================
   NAWIGACJA — Atlas Editorial v2.1
   ============================================ */

/* Skip link a11y */
.sp-skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--color-navy);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
}
.sp-skip-link:focus-visible {
  top: 8px;
}

.sp-nav {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-paper-dark);
  height: 56px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.sp-nav-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 100%;
}

.sp-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.sp-nav-logo img {
  height: 36px;
  width: 36px;
  display: block;
}

/* Desktop: book tabs */
.sp-nav-links {
  position: relative;
  display: flex;
  gap: 4px;
  list-style: none;
  align-self: flex-end;
  height: 100%;
  align-items: flex-end;
}

.sp-nav-tabs-indicator {
  position: absolute;
  bottom: 0;
  height: 40px;
  background: var(--color-navy);
  left: 0;
  width: 0;
  transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.sp-nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  background: var(--color-paper-dark);
  padding: 0 18px;
  height: 28px;
  transition: color 0.25s ease, background 0.25s ease, height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-nav-link:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.sp-nav-link-num {
  color: var(--color-orange);
  margin-right: 8px;
  transition: color 0.25s ease;
}

.sp-nav-link:not(.is-active):hover {
  background: var(--color-paper-deeper);
  color: var(--color-navy);
  height: 36px;
}

.sp-nav-links:has(.sp-nav-link:not(.is-active):hover) .sp-nav-tabs-indicator {
  height: 36px;
}

.sp-nav-links:has(.sp-nav-link:not(.is-active):hover) .sp-nav-link.is-active {
  height: 36px;
}

.sp-nav-link.is-active {
  background: transparent;
  color: var(--color-paper);
  height: 40px;
}

.sp-nav-link.is-active:hover {
  background: transparent;
  color: var(--color-paper);
}

.sp-nav-link.is-active .sp-nav-link-num {
  color: var(--color-orange);
}

/* Desktop CTA — slide animation (zatwierdzone przez Stanisława) */
.sp-nav-cta {
  position: relative;
  align-self: flex-end;
  display: block;
  width: 220px;
  height: 40px;
  background: var(--color-orange);
  color: var(--color-paper);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.25s ease;
}

.sp-nav-cta-label,
.sp-nav-cta-icon {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-nav-cta-label {
  left: 0;
  width: 75%;
  font-size: 11px;
}

.sp-nav-cta-label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  width: 1px;
  height: 50%;
  background: var(--color-orange-deep);
}

.sp-nav-cta-icon {
  right: 0;
  width: 25%;
  font-size: 16px;
  line-height: 1;
}

.sp-nav-cta:hover .sp-nav-cta-label {
  left: -75%;
  opacity: 0;
}

.sp-nav-cta:hover .sp-nav-cta-icon {
  width: 100%;
  font-size: 22px;
}

.sp-nav-cta:hover {
  background: var(--color-orange-deep);
}

/* Mobile: hamburger toggle */
.sp-nav-toggle {
  display: none;
  align-self: stretch;
  width: 56px;
  background: var(--color-paper-dark);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.22s ease;
  padding: 0;
  flex-shrink: 0;
}

.sp-nav-toggle:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.sp-nav-toggle-bar {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--color-navy);
  transition: top 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.18s ease;
}

.sp-nav-toggle-bar.top    { top: calc(50% - 6px); }
.sp-nav-toggle-bar.middle { top: calc(50% - 1px); }
.sp-nav-toggle-bar.bottom { top: calc(50% + 4px); }

.sp-nav-toggle.is-open { background: var(--color-navy); }

.sp-nav-toggle.is-open .sp-nav-toggle-bar { background: var(--color-paper); }
.sp-nav-toggle.is-open .sp-nav-toggle-bar.top    { top: calc(50% - 1px); }
.sp-nav-toggle.is-open .sp-nav-toggle-bar.middle { opacity: 0; }
.sp-nav-toggle.is-open .sp-nav-toggle-bar.bottom { top: calc(50% - 1px); }

.sp-nav-toggle.is-open .sp-nav-toggle-bar.top,
.sp-nav-toggle.is-open .sp-nav-toggle-bar.bottom {
  width: 22px;
  margin-left: -11px;
}

/* Mobile menu sheet */
.sp-menu-sheet {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-paper-dark);
  overflow: hidden;
  height: 0;
  transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99;
}

.sp-menu-sheet.is-open { height: 100vh; }

.sp-menu-inner {
  padding: 80px 20px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.sp-menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
}

.sp-menu-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 16px;
  background: var(--color-paper-dark);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  font-size: 18px;
  transition: background 0.22s ease, color 0.22s ease;
}

.sp-menu-link:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.sp-menu-link-num {
  font-size: 12px;
  color: var(--color-orange);
  letter-spacing: 0.12em;
}

.sp-menu-link.is-active {
  background: var(--color-navy);
  color: var(--color-paper);
}

.sp-menu-link.is-active .sp-menu-link-num { color: var(--color-orange); }

/* Mobile CTA — statyczny (zatwierdzone przez Stanisława) */
.sp-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  background: var(--color-orange);
  color: var(--color-paper);
  text-decoration: none;
  transition: background 0.22s ease;
  margin-bottom: 48px;
}

.sp-menu-cta-label,
.sp-menu-cta-icon {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.sp-menu-cta-label { font-size: 13px; }
.sp-menu-cta-icon  { font-size: 18px; line-height: 1; }

/* Mobile meta — 3 badges w rzędzie */
.sp-menu-meta {
  margin-top: auto;
  border-top: 1px solid var(--color-paper-dark);
  padding-top: 32px;
}

.sp-menu-meta-badges {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.sp-menu-meta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-paper-dark);
  color: var(--color-navy);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.22s ease, color 0.22s ease;
}

.sp-menu-meta-badge:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Body scroll lock przy otwartym mobile menu */
/* iOS Safari scroll lock — overflow:hidden sam nie blokuje touch scroll;
   trzeba position:fixed + top:-scrollY (ustawiane przez JS) + width:100%.
   Plus nav switch sticky → fixed @media mobile, żeby nav nie odjechał z viewport. */
body.menu-locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
@media (max-width: 768px) {
  body.menu-locked .sp-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}

/* Responsywnosc */
@media (max-width: 768px) {
  .sp-nav-inner {
    padding: 0 20px;
    max-width: none;
    gap: 0;
  }
  .sp-nav-links  { display: none; }
  .sp-nav-cta    { display: none; }
  .sp-nav-toggle { display: block; }
  .sp-menu-sheet { display: block; }
}

@media (min-width: 769px) {
  .sp-nav-toggle { display: none !important; }
  .sp-menu-sheet { display: none !important; }
}

/* ============================================
   STOPKA — Atlas Editorial v2.1
   ============================================ */
.sp-footer {
  background: var(--color-navy);
  color: var(--color-paper);
  padding: 32px 0 20px;
}

.sp-footer-inner {
  max-width: 1200px;   /* sync z .sp-container — wcześniej 1280 z mockupu standalone */
  margin: 0 auto;
  padding: 0 32px;
}

.sp-footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  padding-bottom: 40px;
  align-items: start;
}

/* Wyrównanie kolumn — brand do lewej krawędzi, nawigacja w dokładnym środku content area,
   adres do prawej krawędzi (text-align right żeby obie linie adresu były wyrównane do prawej) */
.sp-footer-col-brand   { justify-self: start; }
.sp-footer-col-nav     { justify-self: center; }
.sp-footer-col-address { justify-self: end; text-align: right; }

.sp-footer-favicon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 24px;
}

.sp-footer-social {
  display: flex;
  gap: 4px;
}

.sp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--color-paper-line);
  color: var(--color-paper);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.sp-footer-social a:hover {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-paper);
}

.sp-footer-col-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 20px;
}

.sp-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-footer-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
  text-decoration: none;
  transition: color 0.22s ease;
}

.sp-footer-links a:hover { color: var(--color-orange); }

.sp-footer-address {
  font-family: 'Literata', Georgia, serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-paper-muted);
  font-style: normal;
}

.sp-footer-meta {
  border-top: 1px solid var(--color-paper-line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.sp-footer-meta-copy {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper-muted);
}

.sp-footer-meta-links {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.sp-footer-meta-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
  text-decoration: none;
  transition: color 0.22s ease;
}

.sp-footer-meta-links a:hover { color: var(--color-orange); }

/* Trigger preferencji cookies w stopce (zamiast plywajacej plakietki CKY) */
.sp-footer-meta-links .sp-cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
  transition: color 0.22s ease;
}
.sp-footer-meta-links .sp-cookie-prefs:hover { color: var(--color-orange); }

/* ============================================
   STOPKA — responsywność
   ============================================ */
@media (max-width: 960px) {
  .sp-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sp-footer-col-brand {
    grid-column: 1 / -1;
  }
  /* W tablet nav drifuje do środka swojej kolumny przy justify-self:center (desktop default).
     Override na start — nav left-aligned w lewej kolumnie, address right-aligned w prawej. */
  .sp-footer-col-nav {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .sp-footer { padding: 40px 0 20px; }
  .sp-footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 32px; }
  .sp-footer-col-nav,
  .sp-footer-col-address { display: none; }
  .sp-footer-col-brand { margin-bottom: 0; }
  .sp-footer-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================
   SEKCJA HERO — sticky-reveal D (2026-05)
   Desktop: sticky mega H1 + photo z cutoutem
   Mobile: photo top + content card overlap
   ============================================ */

.sp-hero {
  position: relative;
  background: var(--color-paper);
}

/* H1 parallax slow przez hero-parallax.js (desktop), sekcja stoi w flow */
.sp-hero-top {
  position: relative;
  z-index: 1;
  --bg-shift: 0px;  /* tweenowane przez hero-parallax.js — przesuwa bg-position-y pseudo-elementu UP, ujawnia dolne części ryciny */
  background: var(--color-paper);
  padding: clamp(96px, 13vh, 200px) 56px clamp(72px, 9vh, 140px);
  overflow: hidden;
}

.sp-hero-top::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: url('https://www.szwarcphysio.pl/wp-content/uploads/2026/05/miesnie_plecow_web.webp') right calc(0px - var(--bg-shift, 0px)) / auto 140% no-repeat;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

.sp-hero-top > * {
  position: relative;
  z-index: 1;
}

.sp-hero-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  margin-bottom: 48px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.sp-hero-meta .accent {
  color: var(--color-orange);
  font-weight: 600;
}

.sp-hero-meta .sep {
  opacity: .45;
}

.sp-hero-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(80px, 9.5vw, 160px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-navy);
  text-shadow:
    0 0 8px var(--color-paper),
    0 0 18px var(--color-paper),
    0 0 32px var(--color-paper);
}

.sp-hero-h1 .loc {
  color: var(--color-orange);
}

.sp-hero-photo {
  position: relative;
  z-index: 2;
  height: 92vh;
  min-height: 680px;
  background-color: #0a0d18;
  background-image: var(--sp-hero-bg, url('https://www.szwarcphysio.pl/wp-content/uploads/2026/05/sylwetka_web-scaled.webp'));
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 -16px 40px -6px rgba(10, 13, 24, 0.22);
}

.sp-hero-cutout {
  position: absolute;
  top: 15%;
  left: 6%;
  width: min(560px, 42vw);
  background: var(--color-paper);
  padding: 44px 42px 42px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 32px rgba(10, 13, 24, 0.12),
    inset 0 -1px 2px rgba(0, 0, 0, 0.05),
    0 30px 60px -20px rgba(10, 13, 24, 0.45),
    0 8px 20px -8px rgba(10, 13, 24, 0.22);
}

@media (min-width: 1500px) { .sp-hero-cutout { left: 10%; } }
@media (min-width: 1800px) { .sp-hero-cutout { left: 13%; } }

.sp-hero-cutout h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(42px, 3.8vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 22px;
}

.sp-hero-cutout p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin-bottom: 32px;
}

.cta-row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.sp-hero-fig {
  position: absolute;
  bottom: 32px;
  right: 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 240, 230, 0.7);
  text-align: right;
  line-height: 1.6;
}

.sp-hero-fig .num {
  color: var(--color-orange);
}

/* Ghost link — shared utility */
.sp-link-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--color-navy);
  padding-bottom: 4px;
  transition: border-bottom-width var(--motion-fast) var(--ease-precise);
}

.sp-link-ghost:hover {
  border-bottom-width: 2px;
  padding-bottom: 3px;
}

.sp-link-ghost--paper { color: var(--color-paper); border-bottom-color: var(--color-paper); }

/* === Mobile: meta strip + content card === */
.sp-meta-strip {
  position: relative;
  z-index: 2;
  background: var(--color-paper);
}

.sp-meta-strip::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: url('https://www.szwarcphysio.pl/wp-content/uploads/2026/05/miesnie_plecow_web.webp') right top / auto 100% no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.7) 65%, #000 90%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.7) 65%, #000 90%);
  pointer-events: none;
  z-index: 0;
}

.sp-meta-strip > * {
  position: relative;
  z-index: 1;
}

.sp-content-card {
  position: relative;
  z-index: 3;
  margin: 10px 20px -205px;  /* margin-bottom -205 = wycina docs flow karty, credentials wskakuje 205px wyżej (mirror INITIAL_Y w hero-reveal.js) */
  background: var(--color-paper);
  padding: 30px 26px 36px;
  container-type: inline-size;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 0 20px rgba(10, 13, 24, 0.05),
    0 12px 28px -14px rgba(10, 13, 24, 0.18),
    0 4px 10px -4px rgba(10, 13, 24, 0.10);
  --card-shift: 0px;
  transform: translateY(var(--card-shift));
  will-change: transform;
}

/* Nagłówek karty widoczny od ładowania (--card-shift: 0 default).
   JS hero-reveal.js ustawia --card-shift na -32px max w trakcie scroll = subtelny parallax up. */

@media (prefers-reduced-motion: reduce) {
  html.js .sp-content-card { --card-shift: 0px; }
}

.sp-content-card h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 14cqi, 50px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--color-navy);
  margin-bottom: 20px;
}

.sp-content-card h1 .loc {
  color: var(--color-orange);
}

.sp-content-card p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin-bottom: 28px;
}

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

@media (min-width: 769px) {
  .sp-meta-strip { display: none; }
}

@media (max-width: 768px) {
  .sp-hero-top { display: none; }
  .sp-hero-cutout { display: none; }
  .sp-hero-photo {
    /* Deterministyczny aspect-ratio matching image hero2.webp (1080×1920 portrait).
       Container height liczone z image aspect → zero crop, pełna sylwetka widoczna.
       Niezależne od vh/lvh/svh quirks (iOS WebKit lvh ≠ Firefox Desktop emulation lvh). */
    width: 100vw;
    aspect-ratio: 1080 / 1920;
    height: auto;
    min-height: 200px;
    background-image: url('https://www.szwarcphysio.pl/wp-content/uploads/2026/05/hero2.webp');
    background-position: center top;
    box-shadow: 0 -14px 32px -6px rgba(10, 13, 24, 0.22);
  }
  .sp-hero-fig {
    top: 16px;
    right: 20px;
    bottom: auto;
    font-size: 10px;
    color: rgba(244, 240, 230, 0.85);
  }
}


/* ============================================
   SEKCJA "O MNIE" — strona główna
   ============================================ */

.sp-about {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-sand);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Siatka: tekst L | filary P */
.sp-about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* --- LEWA KOLUMNA --- */
.sp-about-left {
  display: flex;
  flex-direction: column;
}

/* Etykieta sekcji */
.sp-about-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 24px;
}

/* Nagłówek H2 */
.sp-about-h2 {
font-size: clamp(32px, 3.5vw, 42px); 
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-black);
  margin-bottom: 28px;
}

/* Akapity z treścią */
.sp-about-body {
  font-size: 16px;
  line-height: 1.75;
    font-weight: 400;
  color: var(--color-black);
  margin-bottom: 16px;
}

.sp-about-body:last-of-type {
  margin-bottom: 0;
}

/* --- PRAWA KOLUMNA --- */
.sp-about-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 55px;
}

/* Cytat z lewą krawędzią */
.sp-about-quote {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.75;
  color: var(--color-black);
  border-left: 2px solid var(--color-orange);
  padding-left: 20px;
  margin-bottom: 40px;
}

/* Lista filarów / zasad */
.sp-pillars {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-sand);
}

/* Pojedynczy filar */
.sp-pillar {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-sand);
}

/* Numer filaru */
.sp-pillar-num {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-orange);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Tekst filaru */
.sp-pillar-text {
   font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.5;
}
/* Parametry boldowania */
.sp-pillar-emphasis {
  font-weight: 550;
  color: var(--color-black);
}

/* ============================================
   RESPONSYWNOŚĆ "O MNIE" — mobile
   ============================================ */

@media (max-width: 768px) {

  .sp-about {
    padding: 56px 0;
  }

  .sp-about-inner {
    grid-template-columns: 1fr;
    gap: 48px;
        padding: 0 20px;

  }

  .sp-about-quote {
    font-size: clamp(20px, 5vw, 26px);
  }
}
/* ============================================
   SEKCJA "WSPÓŁPRACA" — karty oferty
   ============================================ */

.sp-offer {
   position: relative; 
  background: var(--color-black);
  padding: 80px 0;
  border-bottom: 1px solid #222;
}
/* Wrapper ryciny anatomicznej w tle sekcji oferty */
.sp-offer-anatomy {
  position: absolute;
  inset: 0;                  /* wypełnia całą sekcję */
  overflow: hidden;          /* rycina nie wychodzi poza sekcję */
  pointer-events: none;      /* kliknięcia przechodzą do kart */
  z-index: 0;
}

.sp-offer-anatomy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* wypełnia całość, nie rozciąga */
  object-position: center;
  opacity: 0.4;
  display: block;
}

/* Karty i nagłówek muszą być nad ryciną */
.sp-offer .sp-container {
  position: relative;
  z-index: 1;
}

/* Nagłówek sekcji: etykieta + H2 w jednej linii */
.sp-offer-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #222;
}

.sp-offer-label {
  flex-shrink: 0;
}

.sp-offer-h2 {
font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
}

/* Siatka: 3 kolumny z 1px separatorem (trick z gap: 0 + border) */
.sp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid #222;
  position: relative;
  z-index: 1;
}

/* Pojedyncza karta */
.sp-card {
  background: var(--color-black);
  padding: 36px 28px 40px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #222;
transition: background 0.2s ease, outline-color 0.35s ease, opacity 0.3s ease;
  position: relative;
  z-index: 1;
}
.sp-card:last-child {
  border-right: none;
}

.sp-card:hover {
outline: 1.5px solid var(--color-orange);
  outline-offset: -1px;
  background: var(--color-black); /* tło bez zmian */
  opacity: 0.92;
}


/* Numer karty (zastępuje etykietę "usługa 01") */
.sp-card-index {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-orange);
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}

/* Tytuł karty */
.sp-card-title {
  font-family: var(--font-main);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Linia akcentu pod tytułem */
.sp-card-divider {
  width: 28px;
  height: 1px;
  background: var(--color-orange);
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* Treść opisu */
.sp-card-body {
  font-size: 16px;
  line-height: 1.75;
  color: #A8A49C;
  flex: 1;
  margin-bottom: 32px;
}

/* CTA na dole karty */
.sp-card-cta {
  align-self: flex-start;
  font-size: 13px;
  padding: 13px 22px;
}

/* Karta flagship — wyróżniona ramką */
.sp-card-flagship {
  background: var(--color-black);
  border-left: none;
  border-right: none;
}

.sp-card-flagship .sp-card-index {
  color: var(--color-orange);
}

.sp-card-flagship:hover {
  background: var(--color-black);
  opacity: 0.92;
}

/* ============================================
   RESPONSYWNOŚĆ "WSPÓŁPRACA" — mobile
   ============================================ */

@media (max-width: 768px) {

 .sp-offer {
    padding: 56px 0;
  }

 .sp-offer-anatomy-img {
    object-position: center;
    height: calc(100% + 15px);
    transform: translateY(-15px);
  }
  .sp-offer-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

    .sp-cards {
    grid-template-columns: 1fr;
    border: none;
    gap: 1px;
    background: #222;
    position: relative;
    z-index: 1;
  }

  .sp-card {
    border-right: none;
    border: none;
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
  }





  .sp-card-flagship {
    border-left: none;
    border-top: 1px solid var(--color-orange);
  }
}
/* ============================================
   SEKCJA "BLOG" — karuzela kart
   ============================================ */

.sp-blog {
  background: var(--color-cream);
  padding: 80px 0 72px;
  border-top: 1px solid var(--color-sand);
}

/* Nagłówek sekcji */
.sp-blog-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-sand);
}

.sp-blog-header-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.sp-blog-label {
  color: #888780;
}

.sp-blog-h2 {
   font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.1;
}

.sp-blog-all-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  text-decoration: none;
  border-bottom: 1px solid var(--color-orange);
  padding-bottom: 2px;
  transition: opacity 0.15s ease;
}

.sp-blog-all-link:hover {
  opacity: 0.75;
}

/* Karuzela */
.sp-blog-carousel-wrap {
  overflow: hidden;
}

.sp-blog-track {
  display: flex;
  gap: 24px;
  will-change: transform;
}

/* Karta bloga */
.sp-blog-card {
  flex-shrink: 0;
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
  display: flex;
  flex-direction: column;
  min-height: 400px;       
  transition: border-color 0.2s ease;
}

.sp-blog-card:hover {
  border-color: #888780;
}

/* Okładka — 38% wysokości karty */
.sp-blog-cover {
 position: relative;
  height: 152px;            /* ← 38% z 480px */
  overflow: hidden;
  flex-shrink: 0;
  background: #111;
}

.sp-blog-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-blog-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}

/* Tag w lewym dolnym rogu okładki */
.sp-blog-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cream);
  background: var(--color-orange);
  padding: 4px 9px;
  z-index: 2;
  line-height: 1.4;
}

/* Treść karty */
.sp-blog-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sp-blog-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-black);
  margin-bottom: 12px;
}

.sp-blog-card-title a {
  color: var(--color-black);
  text-decoration: none;
}

.sp-blog-card-title a:hover {
  color: var(--color-orange);
}

.sp-blog-excerpt {
  font-size: 16px;
  line-height: 1.7;
  color: #5F5E5A;
  margin-bottom: 20px;
  height: calc(14px * 1.7 * 4);  /* stałe 4 linijki */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888780;
  border-top: 1px solid var(--color-sand);
  padding-top: 14px;
  margin-top: auto;
}

.sp-blog-read-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.sp-blog-read-link:hover {
  opacity: 0.75;
}

/* Nawigacja */
.sp-blog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.sp-blog-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sp-blog-dot {
  height: 4px;
  width: 6px;
  background: var(--color-sand);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.25s ease, background 0.25s ease;
  flex-shrink: 0;
}

.sp-blog-dot--active {
  width: 24px;
  background: var(--color-orange);
}

.sp-blog-btns {
  display: flex;
  gap: 8px;
}

.sp-blog-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-sand);
  background: transparent;
  color: #888780;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sp-blog-btn:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

/* Responsywność — mobile */
@media (max-width: 768px) {
  .sp-blog {
    padding: 56px 0 56px;
  }

  .sp-blog-card {
    flex: 0 0 100%;
  }

  .sp-blog-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
/* ============================================
   SEKCJA "NEWSLETTER" — integracja MailerLite
   ============================================ */

.sp-newsletter {
  background: var(--color-black);
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  padding: 56px 0;
}

.sp-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

/* --- LEWA KOLUMNA --- */
.sp-newsletter-left {
  display: flex;
  flex-direction: column;
}

.sp-newsletter-label {
  margin-bottom: 24px;
}

.sp-newsletter-h2 {
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 20px;
}

.sp-newsletter-body {
  font-size: 16px;
  line-height: 1.75;
  color: #A8A49C;
  margin-bottom: 16px;
}

.sp-newsletter-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #1e1e1e;
}

.sp-newsletter-perk {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #A8A49C;
  padding: 10px 0;
  border-bottom: 1px solid #1e1e1e;
  line-height: 1.5;
}

.sp-newsletter-perk-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-orange);
  flex-shrink: 0;
}

/* --- PRAWA KOLUMNA --- */
.sp-newsletter-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 40px;
}

/* ============================================
   NADPISANIE STYLU MAILERLITE
   ============================================ */

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper {
  background-color: transparent !important;
  border-radius: 0 !important;
  width: 100% !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  max-width: 100% !important;
  width: 100% !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer {
  display: block !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-align-center {
  display: block !important;
  text-align: left !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
  padding: 0 !important;
}

/* Ukryj nagłówek ML */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent {
  display: none !important;
}

/* --- LABELE (Imię / Adres e-mail) --- */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
  font-family: var(--font-body), sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #888780 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* --- INPUTY tekstowe --- */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input[type="text"],
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input[type="email"] {
  background-color: #111 !important;
  color: var(--color-white) !important;
  border-color: #2a2a2a !important;
  border-radius: 0 !important;
  border-width: 1px !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  transition: border-color 0.15s ease !important;
  width: 100% !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input[type="text"]:focus,
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input[type="email"]:focus {
  border-color: var(--color-orange) !important;
  outline: none !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder {
  color: var(--color-text-muted) !important;
  font-size: 15px !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
  margin-bottom: 16px !important;
}

/* --- CHECKBOX RODO — natywny input, flexbox layout --- */

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
  margin: 0 0 16px 0 !important;
  float: none !important;
  width: 100% !important;
}

/* Label jako flex — checkbox i tekst obok siebie */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 0 !important;       /* ← zero — nie używamy ::before */
  margin: 0 !important;
  cursor: pointer !important;
  position: static !important;
  min-height: unset !important;
  font-weight: normal !important;
}

/* ============================================
   FIX: Checkbox RODO — wymuszenie widoczności
   Nadpisuje agresywny CSS MailerLite
   ============================================ */
.sp-newsletter-right .ml-form-checkboxRow input[type="checkbox"],
.sp-newsletter-right .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
  z-index: auto !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  /* Własny wygląd: transparent + ceglasta ramka */
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: transparent !important;
  border: 2px solid #D85A30 !important;
}

/* Stan zaznaczony */
.sp-newsletter-right .ml-form-checkboxRow input[type="checkbox"]:checked,
.sp-newsletter-right .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"]:checked {
  background-color: #D85A30 !important;
  border-color: #D85A30 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23FFFAFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Label — flex żeby checkbox i tekst były obok siebie */
.sp-newsletter-right .ml-form-checkboxRow label.checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: static !important;
}

/* Wyłącz pseudo-element ::before który tworzy "fake checkbox" w ML */
.sp-newsletter-right .ml-form-checkboxRow label.checkbox::before,
.sp-newsletter-right .ml-form-checkboxRow .label-description::before {
  display: none !important;
  content: none !important;
}

/* Tekst zgody */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
  display: block !important;
  position: static !important;
  color: #888780 !important;
  font-size: 15px !important;
  font-family: var(--font-body), sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Wyłącz ::before i ::after — nie potrzebujemy custom boxa */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before,
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
  display: none !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description p {
  color: #888780 !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
  color: #C8B89A !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* --- PRZYCISK SUBMIT --- */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
  margin: 8px 0 0 0 !important;
  float: none !important;
  width: 100% !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
  background-color: var(--color-orange) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-cream) !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 18px 24px !important;
  width: 100% !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
  line-height: 1 !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
  background-color: var(--color-orange) !important;
  opacity: 0.85 !important;
}

/* --- KOMUNIKAT PO ZAPISIE --- */
.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
  background: #111 !important;
  border: 1px solid #2a2a2a !important;
  padding: 32px 28px !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
  font-family: var(--font-body), sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.sp-newsletter-right #mlb2-38789641.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  font-family: var(--font-body), sans-serif !important;
  font-size: 15px !important;
  color: #888780 !important;
  line-height: 1.7 !important;
}

/* Błędy walidacji */
.sp-newsletter-right .ml-error input[type="text"],
.sp-newsletter-right .ml-error input[type="email"] {
  border-color: var(--color-orange) !important;
}

.sp-newsletter-right .ml-error .label-description,
.sp-newsletter-right .ml-error .label-description p,
.sp-newsletter-right .ml-error label:first-child {
  color: var(--color-orange) !important;
}

/* ============================================
   RESPONSYWNOŚĆ — mobile
   ============================================ */

@media (max-width: 768px) {

  .sp-newsletter {
    padding: 40px 0;
  }

  .sp-newsletter-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sp-newsletter-right {
    padding-top: 0;
  }
}
/* ============================================
   STRONY PRAWNE — page.php
   Brand v2: paper bg, breadcrumb mono caps,
   Switzer H1, Literata long-form body.
   Dotyczy: /polityka-prywatnosci/,
            /regulamin-korzystania-z-uslugi/,
            /dane-adresowe-przedsiebiorstwa/
   Prefix: sp-page-
   ============================================ */

/* --- HERO: breadcrumb + H1 --- */
.sp-page-hero {
  background: var(--color-paper);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--color-paper-dark);
  position: relative;
  overflow: hidden;
}

.sp-page-hero::after {
  content: '';
  position: absolute;
  right: clamp(-2rem, -2vw, -1rem);
  bottom: -20%;
  width: clamp(180px, 28vw, 340px);
  height: clamp(180px, 28vw, 340px);
  background-image: url('assets/vertebral-column-page-flat.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.07;
  pointer-events: none;
}

.sp-page-bc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.sp-page-bc-home {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.sp-page-bc-home:hover {
  color: var(--color-orange);
}

.sp-page-bc-sep {
  color: var(--color-ink-soft);
}

.sp-page-bc-cur {
  color: var(--color-navy);
}

.sp-page-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-navy);
}

/* --- TREŚĆ: Literata long-form --- */
.sp-page-content {
  background: var(--color-paper);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 10vw, 8rem);
}

.sp-page-content-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.sp-page-body {
  max-width: 720px;
}

/* drop cap intentionally omitted — legal content starts with numbered sections */

.sp-page-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin-top: clamp(4rem, 8vw, 7rem);
  margin-bottom: 1.25rem;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 1rem;
  border-top: 1px solid var(--color-paper-dark);
  border-bottom: 1px solid var(--color-paper-dark);
}

.sp-page-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sp-page-body h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.sp-page-body p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
  font-feature-settings: "kern", "liga", "calt";
  text-wrap: pretty;
}

.sp-page-body p:last-child {
  margin-bottom: 0;
}

.sp-page-body ul,
.sp-page-body ol {
  padding-left: 0;
  margin-bottom: 1.25rem;
  list-style: none;
}

.sp-page-body ul li,
.sp-page-body ol li {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-navy);
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-bottom: 1px solid var(--color-paper-dark);
  position: relative;
}

.sp-page-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.55em + 0.5rem);
  width: 8px;
  height: 1px;
  background: var(--color-orange);
}

.sp-page-body ol {
  counter-reset: sp-counter;
}

.sp-page-body ol li {
  counter-increment: sp-counter;
}

.sp-page-body ol li::before {
  content: counter(sp-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-orange);
}

.sp-page-body a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.sp-page-body a:hover {
  color: var(--color-orange);
}

.sp-page-body strong {
  font-weight: 600;
  color: var(--color-navy);
}

.sp-page-body address {
  font-style: normal;
  background: var(--color-paper-dark);
  border-left: 2px solid var(--color-orange);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-navy);
}

.sp-page-body hr {
  border: none;
  border-top: 1px solid var(--color-paper-dark);
  margin: 2.5rem 0;
}

.sp-page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.9375rem;
}

.sp-page-body th {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  background: var(--color-paper-dark);
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--color-navy);
}

.sp-page-body td {
  background: var(--color-paper-dark);
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-navy);
  line-height: 1.5;
}

/* --- META: data ostatniej aktualizacji --- */
.sp-page-meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-paper-dark);
  max-width: 720px;
}

/* --- POWRÓT NA STRONĘ GŁÓWNĄ --- */
.sp-page-back {
  padding-top: 1.5rem;
  max-width: 720px;
}

/* --- READING PROGRESS BAR --- */
#sp-page-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-orange);
  z-index: 9999;
  transition: width 80ms linear;
  pointer-events: none;
}

/* --- STICKY TOC SIDEBAR --- */
.sp-page-toc {
  flex: 0 0 200px;
  position: sticky;
  top: clamp(5rem, 8vw, 7rem);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.sp-page-main {
  flex: 1 1 0;
  min-width: 0;
  max-width: 720px;
}

.sp-page-toc-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-paper-dark);
}

.sp-page-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sp-page-toc-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  text-decoration: none;
  padding: 0.375rem 0.5rem;
  border-left: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  border-radius: 0 2px 2px 0;
}

.sp-page-toc-link:hover {
  color: var(--color-navy);
  border-left-color: var(--color-paper-dark);
}

.sp-page-toc-link.active {
  color: var(--color-navy);
  border-left-color: var(--color-orange);
  background: color-mix(in srgb, var(--color-orange) 6%, transparent);
  font-weight: 500;
}

/* --- MOBILE: ukryj TOC (flex child display:none nie psuje layoutu) --- */
@media (max-width: 1023px) {
  .sp-page-toc {
    display: none;
  }

  .sp-page-main {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .sp-page-hero {
    padding: 2.5rem 0 1.75rem;
  }

  .sp-page-content {
    padding: 2.5rem 0 4rem;
  }

  .sp-page-body,
  .sp-page-meta,
  .sp-page-back {
    max-width: 100%;
  }

  .sp-page-body h2 {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
  }

}

/* --- PRINT CSS --- */
@media print {
  #sp-page-progress-bar,
  .sp-page-toc,
  .sp-page-back {
    display: none !important;
  }

  .sp-page-hero {
    background: white;
    border-bottom: 1px solid #ccc;
    padding: 2rem 0 1.5rem;
  }

  .sp-page-hero::after {
    display: none;
  }

  .sp-page-content {
    background: white;
    padding: 1.5rem 0 2rem;
  }

  .sp-page-content-inner {
    grid-template-columns: 1fr;
  }

  .sp-page-h1 {
    color: #000;
    font-size: 2rem;
  }

  .sp-page-body p,
  .sp-page-body li {
    color: #000;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .sp-page-body h2 {
    color: #000;
    margin-top: 2rem;
    padding-top: 1rem;
    break-after: avoid;
    page-break-after: avoid;
  }

  .sp-page-body h2,
  .sp-page-body h3 {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .sp-page-body > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    font-weight: inherit;
  }

  .sp-page-bc {
    color: #666;
  }

  .sp-page-meta {
    color: #666;
    border-top: 1px solid #ccc;
  }

  .sp-page-body a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #000;
  }

  .sp-page-body address {
    background: #f5f5f5;
    border-left-color: #000;
  }

  .sp-page-body th {
    background: #eee;
    color: #000;
  }

  .sp-page-body td {
    background: white;
  }
}

/* ============================================
   STRONA BLOGA — archive.php
   Prefix: sp-bl- (blog list)
   ============================================ */

/* -----------------------------------------------
   NAGŁÓWEK — ciemne tło, duży napis [ blog ]
   ----------------------------------------------- */
.sp-bl-hero {
  background: var(--color-black);
  border-bottom: 1px solid #1e1e1e;
  padding: 56px 0 52px;
}

.sp-bl-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}

/* Duży napis [ blog ] — Switzer bold, nie display serif */
.sp-bl-h1 {
  font-family: var(--font-main);
  font-size: clamp(52px, 8vw, 80px);
  font-weight: 700;
  line-height: 1.0;
  color: var(--color-white);
  letter-spacing: -0.02em;
}

.sp-bl-hero-desc {
  font-size: 15px;
  line-height: 1.75;
  color: #888780;
  margin-bottom: 28px;
}

/* Usuń marginesy p jeśli opis pochodzi z WP content */
.sp-bl-hero-desc p {
  margin: 0;
  font-size: 15px;
  color: #888780;
  line-height: 1.75;
}

/* Statystyki */
.sp-bl-stats {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid #1e1e1e;
}

.sp-bl-stat-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.sp-bl-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-body);
  margin-top: 4px;
}

/* -----------------------------------------------
   FILTRY KATEGORII
   Poziomy pasek zakładek
   ----------------------------------------------- */
.sp-bl-filters {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-sand);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sp-bl-filters::-webkit-scrollbar {
  display: none;
}

.sp-bl-filters-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: max-content; /* nie zawijaj na mobile */
}

.sp-bl-filter {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888780;
  padding: 16px 20px;
  border-right: 1px solid var(--color-sand);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.sp-bl-filter:first-child {
  padding-left: 0;
}

.sp-bl-filter:hover {
  color: var(--color-black);
  text-decoration: none;
}

.sp-bl-filter.is-active {
  color: var(--color-orange);
  border-bottom-color: var(--color-orange);
  font-weight: 700;
}

/* -----------------------------------------------
   WYRÓŻNIONY POST
   Dwie kolumny: zdjęcie + treść
   ----------------------------------------------- */
.sp-bl-featured {
  padding: 52px 0;
  border-bottom: 1px solid var(--color-sand);
}

.sp-bl-featured-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Miniatura / placeholder */
.sp-bl-featured-img {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-border-dark);
  border: 1px solid #2a2a2a;
  overflow: hidden;
  position: relative;
}

.sp-bl-featured-img-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-bl-featured-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Odznaka "wyróżniony post" */
.sp-bl-featured-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sp-bl-badge-dot {
  width: 5px;
  height: 5px;
  background: var(--color-orange);
  border-radius: 50%;
  flex-shrink: 0;
}

.sp-bl-featured-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  padding: 3px 8px;
  margin-left: 4px;
}

.sp-bl-featured-title {
  font-family: var(--font-main);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-black);
  margin-bottom: 16px;
}

.sp-bl-featured-title a {
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sp-bl-featured-title a:hover {
  color: var(--color-orange);
}

.sp-bl-featured-excerpt {
  font-size: 13px;
  line-height: 1.75;
  color: #5F5E5A;
  margin-bottom: 24px;
}

.sp-bl-featured-meta {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888780;
  margin-bottom: 24px;
}

/* Przycisk "czytaj artykuł" */
.sp-bl-featured-cta {
  display: inline-block;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  padding: 10px 18px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sp-bl-featured-cta:hover {
  background: var(--color-orange);
  color: var(--color-white);
}

/* -----------------------------------------------
   SIATKA ARTYKUŁÓW
   3 kolumny desktop, 2 tablet, 1 mobile
   ----------------------------------------------- */
.sp-bl-grid-section {
  padding: 48px 0 64px;
}

/* Nagłówek siatki */
.sp-bl-grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-sand);
}

.sp-bl-grid-count {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sand);
}

/* Siatka — separator między kartami przez gap+background trick */
.sp-bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-sand);
  border: 1px solid var(--color-sand);
}

/* Karta artykułu */
.sp-bl-card {
  background: var(--color-cream);
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease;
}

.sp-bl-card:hover {
  background: #F0EBE2;
}

.sp-bl-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  padding: 3px 8px;
  margin-bottom: 14px;
  align-self: flex-start;
}

.sp-bl-card-title {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-black);
  margin-bottom: 10px;
  flex: 1;
}

.sp-bl-card-title a {
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sp-bl-card-title a:hover {
  color: var(--color-orange);
}

.sp-bl-card-excerpt {
  font-size: 13px;
  line-height: 1.65;
  color: #5F5E5A;
  margin-bottom: 20px;
  /* Ogranicz do 3 linii */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-bl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-sand);
  padding-top: 12px;
  margin-top: auto;
}

.sp-bl-card-meta {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888780;
}

.sp-bl-card-arrow {
  font-size: 14px;
  color: var(--color-orange);
  text-decoration: none;
  transition: transform 0.15s ease;
  display: inline-block;
}

.sp-bl-card-arrow:hover {
  transform: translateX(3px);
}

/* -----------------------------------------------
   PAGINACJA
   ----------------------------------------------- */
.sp-bl-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

/* WordPress generuje <ul class="page-numbers"> */
.sp-bl-pagination .page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-bl-pagination .page-numbers li a,
.sp-bl-pagination .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-sand);
  background: transparent;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  color: #888780;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sp-bl-pagination .page-numbers li a:hover {
  border-color: var(--color-black);
  color: var(--color-black);
}

.sp-bl-pagination .page-numbers li span.current {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
}

/* -----------------------------------------------
   BRAK WPISÓW
   ----------------------------------------------- */
.sp-bl-empty {
  padding: 64px 0;
  text-align: center;
}

.sp-bl-empty .sp-label {
  display: block;
  margin-bottom: 16px;
}

.sp-bl-empty p {
  font-size: 15px;
  color: #888780;
  margin-bottom: 24px;
}

.sp-bl-empty-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-orange);
  text-decoration: none;
  border: 1px solid var(--color-orange);
  padding: 10px 18px;
  display: inline-block;
}

/* -----------------------------------------------
   CTA BANNER — zachęta do konsultacji
   ----------------------------------------------- */
.sp-bl-cta-banner {
  background: var(--color-black);
  border-top: 1px solid #1e1e1e;
}

.sp-bl-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 48px;
}

.sp-bl-cta-text .sp-label {
  display: block;
  margin-bottom: 12px;
  color: var(--color-text-body);
}

.sp-bl-cta-h3 {
  font-family: var(--font-main);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: 8px;
}

.sp-bl-cta-sub {
  font-size: 13px;
  line-height: 1.65;
  color: #666;
}

.sp-bl-cta-btn {
  white-space: nowrap;
  align-self: center;
}

/* ============================================
   RESPONSYWNOŚĆ — strona bloga
   ============================================ */

/* Tablet: 2 kolumny w siatce */
@media (max-width: 1024px) {
  .sp-bl-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-bl-hero-inner {
    gap: 32px;
  }

  .sp-bl-featured-inner {
    gap: 32px;
  }
}

/* Mobile */
@media (max-width: 768px) {

  /* Hero: jedna kolumna */
  .sp-bl-hero {
    padding: 40px 0 36px;
  }

  .sp-bl-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sp-bl-h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .sp-bl-stats {
    gap: 24px;
  }

  /* Filtry — scrollują poziomo */
  .sp-bl-filters-inner {
    padding: 0 16px; /* padding na mobile */
  }

  .sp-bl-filter:first-child {
    padding-left: 20px; /* wyrównaj z pozostałymi na mobile */
  }

  /* Featured: jedna kolumna */
  .sp-bl-featured {
    padding: 36px 0;
  }

  .sp-bl-featured-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Siatka: 1 kolumna */
  .sp-bl-grid {
    grid-template-columns: 1fr;
  }

  .sp-bl-grid-section {
    padding: 36px 0 48px;
  }

  /* CTA: jedna kolumna, wyśrodkowane */
  .sp-bl-cta-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sp-bl-cta-btn {
    width: 100%;
    text-align: center;
  }
}
/* ============================================================
   STRONA KONTAKTOWA — page-form.php
   Design System v1.2 — szwarc.physio

   INSTRUKCJA:
   W pliku style.css znajdź PIERWSZY blok który zaczyna się od:
     ".sp-ct-hero {"
   (około linii 2657)
   Zaznacz i usuń WSZYSTKO od tego miejsca do końca pliku.
   Wklej poniższy blok w to miejsce.
   ============================================================ */


/* ── HERO ── */
.sp-ct-hero {
  background: var(--color-black);
  /* Brief v1.2: hero podstron → padding: 56px 0 48px */
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-dark);
}

/* Opcjonalne zdjęcie tła */
.sp-ct-hero[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

/* Warstwa przyciemniająca gdy jest zdjęcie */
.sp-ct-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 14, 16, 0.75);
  z-index: 1;
}

/* Rycina anatomiczna SVG — tło dekoracyjne */
.sp-ct-anatomy {
  position: absolute;
  right: -40px;
  top: -20px;
  /* currentColor dziedziczy cream od rodzica — SVG używa currentColor */
  color: var(--color-cream);
  opacity: 0.045;
  pointer-events: none;
  width: 520px;
  height: 520px;
}

/* Duża liczba typograficzna "bleeding" */
.sp-ct-hero-num {
  position: absolute;
  right: 40px;
  bottom: -28px;
  font-family: var(--font-serif);
  font-size: clamp(80px, 12vw, 160px);
  line-height: 1;
  color: var(--color-cream);
  opacity: 0.04;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.04em;
}

/* Wewnętrzny kontener hero */
.sp-ct-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

/* ── Breadcrumb ── */
.sp-ct-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.sp-ct-breadcrumb-home {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sand);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sp-ct-breadcrumb-home:hover {
  color: var(--color-cream);
}

.sp-ct-breadcrumb-sep {
  font-size: 11px;
  color: var(--color-sand);
  opacity: 0.4;
}

/* Aktywna pozycja breadcrumb — signature mark z nawiasami */
.sp-ct-breadcrumb-current {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Brief v1.2: .sp-label i signature mark zawsze --color-orange */
  color: var(--color-orange);
}

/* ── Tytuł H1 ── */
.sp-ct-title {
  font-family: var(--font-serif);
  /* Brief v1.2: H1 globalny = clamp(48px, 7vw, 72px) */
  font-size: clamp(48px, 7vw, 72px);
  line-height: 1.0;
  color: var(--color-cream);
  margin-bottom: 20px;
  font-weight: 400;
}

/* Kursywa w H1 — element stylistyczny */
.sp-ct-title em {
  font-style: italic;
}

/* ── Lead / subtitle ── */
.sp-ct-subtitle {
  /* Brief v1.2: lead 18px, 400, 1.75 */
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  /* Tekst na dark tle → --color-text-subtle */
  color: var(--color-text-subtle);
  max-width: 460px;
}


/* ============================================================
   MAIN — dwie kolumny
   ============================================================ */

.sp-ct-main {
  padding: 72px 0 96px;
  background: var(--color-cream);
}

.sp-ct-layout {
  display: grid;
  /* Brief v1.2: kontakt asymetryczny 1fr 1.55fr */
  grid-template-columns: 1fr 1.55fr;
  /* Brief v1.2: gap kontaktu = 64px desktop */
  gap: 64px;
  align-items: start;
}


/* ============================================================
   SIDEBAR — lewa kolumna
   ============================================================ */

/* Etykieta na górze sidebar — .sp-label jest klasą systemową */
.sp-ct-sidebar-label {
  display: block;
  margin-bottom: 16px;
}

/* H2 sidebar — Inter Tight, weight 700 */
.sp-ct-sidebar-h2 {
  font-family: var(--font-main);
  /* Brief v1.2: H3 tytułu karty = clamp(22px, 2.5vw, 28px) */
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: 16px;
}

/* Body sidebar — tekst pomocniczy na jasnym tle */
.sp-ct-sidebar-body {
  /* Brief v1.2: body główne 16px */
  font-size: 16px;
  line-height: 1.7;
  /* Brief v1.2: body/opis na cream → --color-text-body */
  color: var(--color-text-body);
  margin-bottom: 40px;
}

/* ── Lista kroków "co się dzieje" ── */
.sp-ct-expect {
  border-top: 1px solid var(--color-sand);
  padding-top: 32px;
  margin-bottom: 40px;
}

/* Etykieta podsekcji — .sp-label jest klasą systemową */
.sp-ct-expect-label {
  display: block;
  margin-bottom: 20px;
}

.sp-ct-expect-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sp-ct-expect-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-sand);
}

.sp-ct-expect-item:last-child {
  border-bottom: none;
}

/* Numer kroku — brief v1.2: akcent = --color-orange (nie navy) */
.sp-ct-expect-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-orange);
  min-width: 24px;
  padding-top: 2px;
  flex-shrink: 0;
}

.sp-ct-expect-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  line-height: 1.5;
}

.sp-ct-expect-sub {
  font-size: 12px;
  /* Meta na jasnym tle → --color-text-muted */
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 3px;
}

/* ── Znacznik czasu odpowiedzi ── */
.sp-ct-response-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  /* Brief v1.2: border-radius 0 (kanciasty styl) */
  border: 1px solid var(--color-sand);
  padding: 7px 14px;
}

/* Kolorowa kropka — sygnał "online/aktywny" */
.sp-ct-response-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
  flex-shrink: 0;
}


/* ============================================================
   RESPONSYWNOŚĆ — max-width: 768px
   ============================================================ */

@media (max-width: 768px) {

  /* Hero podstron — brief v1.2: mobile → 40px 0 36px */
  .sp-ct-hero {
    padding: 40px 0 36px;
  }

  /* Rycina anatomiczna — mniejsza na mobile */
  .sp-ct-anatomy {
    width: 300px;
    height: 300px;
    right: -20px;
    top: -10px;
    opacity: 0.03;
  }

  /* Duża cyfra — ukryta na mobile (za mała żeby wyglądać dobrze) */
  .sp-ct-hero-num {
    display: none;
  }

  /* Tytuł H1 na mobile */
  .sp-ct-title {
    font-size: clamp(40px, 10vw, 56px);
  }

  /* Lead na mobile — delikatniejszy kolor */
  .sp-ct-subtitle {
    font-size: 16px;
    /* Brief v1.2: dopuszczalny wyjątek dla mobile */
    color: rgba(200, 184, 154, 0.75);
  }

  /* Sekcja główna — padding mobile */
  .sp-ct-main {
    padding: 48px 0 64px;
  }

  /* Grid → jedna kolumna na mobile */
  .sp-ct-layout {
    grid-template-columns: 1fr;
    /* Brief v1.2: gap kontaktu mobile = 48px */
    gap: 48px;
  }

  /* Sidebar H2 — mniejszy na mobile */
  .sp-ct-sidebar-h2 {
    font-size: 22px;
  }

}
/* ============================================================
   FORMULARZ CF7: baza jednoekranowa + kreator progressive enhancement
   Baza pokazuje wszystkie sekcje na kazdej stronie. Klase .sp-cf7-kreator
   dodaje JS tylko na /kontakt/, wiec awaria JS nie ukrywa pol ani wysylki.
   ============================================================ */

.wpcf7 {
  margin: 0;
  padding: 0;
}

.wpcf7-form {
  margin: 0;
  padding: 0;
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form br {
  display: none;
}

.wpcf7-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

span.wpcf7-form-control-wrap {
  display: block;
  margin: 0;
  padding: 0;
}

.sp-cf7-form {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--color-navy);
  border-radius: 0;
  background: var(--color-white-clean);
  color: var(--color-navy);
}

.sp-cf7-step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid var(--color-navy);
  border-radius: 0;
}

.sp-cf7-step:last-of-type {
  border-bottom: 0;
}

.sp-cf7-step-num {
  padding: 28px 18px;
  border-right: 1px solid var(--color-navy);
  font: 500 34px/1 var(--font-mono);
  color: var(--color-orange-deep);
}

.sp-cf7-step-body {
  min-width: 0;
  padding: 28px;
}

/* Eyebrow („Pytanie 01") wycięty — meta-label nad nagłówkiem, którego marka nie
   używa. Reguła zostaje jako `display: none` zamiast zniknąć razem z markupem,
   bo markup CF7 żyje w bazie WP i wgrywa się ręcznie, w innym momencie niż ten
   plik. Bez tego między jednym a drugim wdrożeniem etykieta wyświetliłaby się
   jako nieostylowany tekst. Do sprzątnięcia, gdy markup bez eyebrow będzie
   pewny na wszystkich formularzach. */
.sp-cf7-step-eyebrow {
  display: none;
}

.sp-cf7-step-title,
.sp-cf7-field-label {
  display: block;
  margin: 0 0 12px;
  font: 600 12px/1.35 var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.sp-cf7-micro {
  display: block;
  margin: -6px 0 14px;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--color-ink-soft);
}

.sp-cf7-contact-stack {
  display: grid;
  gap: 22px;
}

.sp-cf7-form .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sp-cf7-form .wpcf7-radio .wpcf7-list-item {
  display: block;
  min-width: 0;
  margin: 0;
}

.sp-cf7-form .wpcf7-radio label {
  position: relative;
  display: flex;
  min-height: 88px;
  margin: 0;
  cursor: pointer;
}

.sp-cf7-form .wpcf7-radio input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sp-cf7-form .wpcf7-radio .wpcf7-list-item-label {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-navy);
  border-radius: 0;
  background: var(--color-paper);
  font: 600 16px/1.35 var(--font-display);
  color: var(--color-navy);
  transition: background var(--motion-fast) var(--ease-precise),
              color var(--motion-fast) var(--ease-precise),
              border-color var(--motion-fast) var(--ease-precise);
}

/* Wskaźnik wyboru: pusty kwadrat, po zaznaczeniu ptaszek na pomarańczowym tle.
   Ptaszek jest tłem SVG, nie osobnym elementem — ten sam mechanizm co przy
   zgodzie RODO, żeby oba zaznaczenia wyglądały identycznie. Kolor kreski musi
   być wpisany na sztywno (#FAFAF7 = --color-white-clean), bo data-URI nie widzi
   zmiennych CSS. Zmiana palety wymaga ręcznej poprawki także tutaj. */
.sp-cf7-form .wpcf7-radio .wpcf7-list-item-label::before {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-navy);
  border-radius: 0;
  background-color: var(--color-white-clean);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

.sp-cf7-form .wpcf7-radio label:hover .wpcf7-list-item-label {
  padding: 15px;
  border: 2px solid var(--color-orange);
  background: var(--color-paper-dark);
}

.sp-cf7-form .wpcf7-radio label:hover .wpcf7-list-item-label::before {
  border-color: var(--color-orange);
}

.sp-cf7-form .wpcf7-radio input:checked + .wpcf7-list-item-label {
  padding: 15px;
  border: 2px solid var(--color-orange);
  background: var(--color-paper-dark);
}

.sp-cf7-form .wpcf7-radio input:checked + .wpcf7-list-item-label::before {
  border-color: var(--color-orange);
  background-color: var(--color-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.4l3.6 3.6 7.4-7.9' fill='none' stroke='%23FAFAF7' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E");
}

.sp-cf7-form .wpcf7-radio input:focus-visible + .wpcf7-list-item-label {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}

.sp-cf7-form .wpcf7-text,
.sp-cf7-form .wpcf7-email,
.sp-cf7-form .wpcf7-tel,
.sp-cf7-form .wpcf7-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  appearance: none;
  border: 1px solid var(--color-navy);
  border-radius: 0;
  background: var(--color-white-clean);
  color: var(--color-navy);
  font: 400 17px/1.55 var(--font-body);
}

.sp-cf7-form .wpcf7-text,
.sp-cf7-form .wpcf7-email,
.sp-cf7-form .wpcf7-tel {
  min-height: 54px;
}

.sp-cf7-form .wpcf7-textarea {
  min-height: 220px;
  resize: vertical;
}

.sp-cf7-form .wpcf7-form-control::placeholder {
  color: var(--color-ink-soft);
  opacity: 1;
}

.sp-cf7-form .wpcf7-form-control:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
}

.sp-cf7-form .wpcf7-acceptance {
  display: block;
  margin-top: 24px;
}

.sp-cf7-form .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.sp-cf7-form .wpcf7-acceptance label {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
  font: 400 13px/1.55 var(--font-body);
  color: var(--color-navy-soft);
  text-transform: none;
  letter-spacing: normal;
}

.sp-cf7-form .wpcf7-acceptance input {
  width: 24px;
  height: 24px;
  margin: 10px;
  appearance: none;
  border: 2px solid var(--color-navy);
  border-radius: 0;
  background: var(--color-white-clean);
  cursor: pointer;
}

/* Ptaszek jak przy wyborze formy — patrz komentarz wyżej o zahardkodowanym
   kolorze kreski. Tło i obrazek longhandem, bo bazowa reguła ustawia `background`
   skrótem i shorthand wyzerowałby background-image. */
.sp-cf7-form .wpcf7-acceptance input:checked {
  background-color: var(--color-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.4l3.6 3.6 7.4-7.9' fill='none' stroke='%23FAFAF7' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

.sp-cf7-form .wpcf7-acceptance input:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
}

.sp-cf7-form .wpcf7-acceptance .wpcf7-list-item-label {
  min-width: 0;
  padding-top: 11px;
}

.sp-cf7-form .wpcf7-acceptance a {
  color: var(--color-navy);
  text-underline-offset: 3px;
}

.sp-cf7-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* CF7 owija zawartość akcji we własne `<p>`, więc przyciski nie były dziećmi
   tego kontenera — cała siatka flex powyżej nie miała na nie żadnego wpływu.
   Zmierzone na produkcji przed poprawką: „Wstecz" i „Wyślij" sklejone w lewym
   rogu 4px odstępu (zwykły whitespace między tagami), 240px pustki po prawej,
   `gap` i `margin-left: auto` bez efektu. `display: contents` wyjmuje ten `<p>`
   z układu, nie ruszając markupu, który żyje w bazie WP. */
.sp-cf7-actions > p {
  display: contents;
}

.sp-cf7-step:last-of-type .sp-cf7-actions {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-navy);
}

.sp-cf7-button,
.wpcf7-submit {
  min-height: 56px;
  padding: 16px 28px;
  border: 2px solid var(--color-navy);
  border-radius: 0;
  cursor: pointer;
  font: 700 13px/1.3 var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sp-cf7-next,
.wpcf7-submit {
  margin-left: auto;
  border-color: var(--color-orange-deep);
  background: var(--color-orange-deep);
  color: var(--color-white-clean);
}

/* „Wstecz" był ramką 1px z przygaszonym tekstem na tle strony i czytał się jak
   podpis, nie jak przycisk — na tyle, że wyglądał na brak cofania w kreatorze.
   Dostaje pełną wagę przycisku: ta sama ramka co „Dalej", własne tło odcinające
   go od strony i pełny kontrast tekstu. Hierarchia zostaje czytelna, bo „Dalej"
   trzyma pomarańczowe wypełnienie, a „Wstecz" jest tylko obrysem. */
.sp-cf7-back {
  background: var(--color-paper-dark);
  color: var(--color-navy);
}

.sp-cf7-next:hover,
.wpcf7-submit:hover {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-white-clean);
}

/* Hover musi się różnić od stanu spoczynku, a ten po wzmocnieniu przycisku ma
   już ramkę navy i tło paper-dark. Stąd reakcja kolorem akcentu zamiast
   pogłębiania tła — i bez wchodzenia w wypełnienie, które należy do „Dalej". */
.sp-cf7-back:hover {
  border-color: var(--color-orange-deep);
  color: var(--color-orange-deep);
}

.sp-cf7-button:focus-visible,
.wpcf7-submit:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}

.wpcf7-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sp-cf7-safe-note {
  flex: 0 0 100%;
  margin: 0;
  max-width: none;
  font: 400 12px/1.5 var(--font-body);
  color: var(--color-navy-soft);
}

.sp-cf7-field-error,
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font: 600 13px/1.45 var(--font-body);
  color: var(--color-burgundy);
}

.sp-cf7-field-error:empty {
  display: none;
}

.sp-cf7-form .is-invalid,
.wpcf7-not-valid {
  border-color: var(--color-burgundy);
  outline: 2px solid var(--color-burgundy);
  outline-offset: -2px;
}

.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--color-navy);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-navy);
  font: 400 14px/1.55 var(--font-body);
}

.wpcf7-form .wpcf7-response-output[aria-hidden="true"] {
  display: none;
}

.sp-cf7-form .sp-cf7-field-label[for="sp-cf7-problem"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wpcf7-mail-sent-ok {
  border-color: var(--color-orange);
  background: var(--color-navy);
  color: var(--color-paper);
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-spam-blocked {
  border-color: var(--color-burgundy);
  background: var(--color-navy);
  color: var(--color-paper);
}

.wpcf7-spinner {
  display: none;
}

.wpcf7 .screen-reader-response,
.sp-cf7-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sp-cf7-progress {
  display: none;
}

/* Bez ramki: granatowa plama sama się odcina od kremowej strony, a pomarańczowy
   obrys dokładał drugie urządzenie do tego samego zadania i czytał się jak alert.
   Akcent koloru przeniesiony na zakreślenie w dopisku, gdzie faktycznie coś robi. */
.sp-cf7-result {
  padding: 48px 28px;
  border: 0;
  border-radius: 0;
  background: var(--color-navy);
  color: var(--color-paper);
  font: 600 clamp(24px, 4vw, 36px)/1.2 var(--font-display);
}

/* Komunikat rozbity na dwa poziomy przez `renderResult()` w JS. Font bazowy wyżej
   zostaje jako zapas: gdy tekst w panelu straci kropkę, całość leci jedną bryłą. */
.sp-cf7-result-glowne {
  display: block;
  margin-bottom: 13px;
  font: 600 clamp(26px, 3.4vw, 34px)/1.15 var(--font-display);
}

.sp-cf7-result-dopisek {
  display: block;
  font: 400 clamp(15px, 1.6vw, 17px)/1.55 var(--font-body);
}

/* Zakreślenie „na żywo": tło jedzie od lewej do prawej jak pociągnięcie
   zakreślaczem, więc oko trafia w tę frazę po tym, jak komunikat już usiadł.
   Stąd opóźnienie — animacja startuje po wejściu bloku, nie razem z nim.
   800ms wychodzi poza skalę `--motion-*` (najdłuższy token to 400ms) i tak ma
   być: tokeny opisują tranzycje UI, które mają zejść z drogi, a to jest gest
   czytany jak ruch ręki. Na 400ms zakreślacz migał, zamiast się przejechać.
   Kolor: `--color-orange-deep`, nie brandowy `mark.sp-highlight` (#D85A30): przy 17px
   dopisku jaśniejsza terrakota daje 3.6:1, ta wersja 4.81:1. Reszta formularza
   trzyma tę samą zasadę — deep wszędzie tam, gdzie na pomarańczowym leży tekst.
   `box-decoration-break: clone` na wypadek, gdyby dłuższa fraza złamała się na
   dwie linie: bez tego drugi fragment zostałby bez tła. */
.sp-cf7-result-mark {
  padding: 2px 5px;
  margin: 0 -5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-color: transparent;
  background-image: linear-gradient(var(--color-orange-deep), var(--color-orange-deep));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0 100%;
  color: inherit;
  animation: sp-cf7-zakreslacz 800ms var(--ease-precise) 360ms both;
}

@keyframes sp-cf7-zakreslacz {
  from {
    background-size: 0 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

/* Kroki leżą na sobie w jednej komórce siatki, zamiast pojawiać się kolejno w
   kolumnie. Dzięki temu kreator jest zawsze tak wysoki, jak jego najwyższy krok,
   i nie skacze przy nawigacji — wcześniej rósł 582 → 764 → 857px na desktopie
   i 613 → 755 → 906px na telefonie, więc każde „Dalej" przesuwało stronę pod
   kursorem. Wysokość bierze się z treści, nie z wpisanej liczby: zmierzone
   maksimum waha się 798–906px zależnie od szerokości, a każda zmiana copy w
   textarea albo w zgodzie RODO by je przesunęła. */
.sp-cf7-form.sp-cf7-kreator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 610px;
  overflow: visible;
  border-width: 2px 0;
  background: var(--color-paper);
}

.sp-cf7-kreator .sp-cf7-result {
  grid-area: 2 / 1;
}

.sp-cf7-kreator .sp-cf7-progress {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-navy);
}

.sp-cf7-progress-count {
  white-space: nowrap;
  font: 600 12px/1.3 var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.sp-cf7-progress-steps {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 600 14px/1.35 var(--font-display);
  color: var(--color-ink-soft);
}

.sp-cf7-progress-step {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.sp-cf7-progress-step:not(:last-child)::after {
  content: '·';
  margin: 0 9px;
  color: var(--color-ink-soft);
}

.sp-cf7-progress-step.is-current {
  font-weight: 700;
  color: var(--color-orange-deep);
}

.sp-cf7-progress-step.is-complete {
  color: var(--color-navy);
}

.sp-cf7-progress-track {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-paper-deeper);
}

.sp-cf7-progress-fill {
  display: block;
  width: 33.333%;
  height: 100%;
  background: var(--color-orange);
  transition: width var(--motion-base) var(--ease-precise);
}

/* Nieaktywne kroki muszą nadal zajmować miejsce, żeby siatka znała wysokość
   najwyższego z nich — stąd `visibility` zamiast `display: none`. Ukrycie jest
   pełne: `visibility: hidden` wyjmuje pola i z kolejności tabulacji, i z drzewa
   dostępności, więc czytnik ekranu widzi tylko krok bieżący (zweryfikowane —
   `focus()` na polu ukrytego kroku nie przenosi tam kursora).
   Padding siedzi na wszystkich krokach, nie tylko na bieżącym: gdy był na samym
   `.is-current`, kroki poza ekranem mierzyły się o 64px za nisko i stos zwracał
   złą wysokość. */
.sp-cf7-kreator .sp-cf7-step {
  grid-area: 2 / 1;
  display: block;
  visibility: hidden;
  min-width: 0;
  padding: clamp(32px, 6vw, 64px) 0 32px;
  border: 0;
}

.sp-cf7-kreator .sp-cf7-step.is-current {
  visibility: visible;
  animation: sp-cf7-step-in var(--motion-base) var(--ease-precise) both;
}

/* Po wysłaniu kroki nie mają już czego rezerwować — bez tego stos trzymałby
   pełne 857px pod komunikatem wysokim na 358px. */
.sp-cf7-kreator.is-sent .sp-cf7-step {
  display: none;
}

/* JS chowa pasek po wysłaniu atrybutem `hidden`, ale reguła `.sp-cf7-kreator
   .sp-cf7-progress { display: grid }` bije domyślne `[hidden] { display: none }`
   przeglądarki — pasek zostawał nad podziękowaniem (zmierzone: 248px rozciągniętej
   siatki na desktopie, pełne 91px segmentów na telefonie). Ta sama reguła gasi go
   też przed startem skryptu, bo `hidden` siedzi już w markupie. */
.sp-cf7-kreator .sp-cf7-progress[hidden] {
  display: none;
}

/* Bez tego komunikat rozciągałby się na całą wysokość kreatora i tekst wisiałby
   u góry, z 212px pustki pod spodem. Wyśrodkowanie zamiast zdjęcia `min-height`:
   formularz zachowuje wysokość, więc strona nie skacze w momencie wysyłki. */
.sp-cf7-kreator.is-sent {
  align-content: center;
}

@keyframes sp-cf7-step-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sp-cf7-kreator .sp-cf7-step-num {
  display: none;
}

.sp-cf7-kreator .sp-cf7-step-body {
  padding: 0;
}

.sp-cf7-kreator .sp-cf7-step-title {
  max-width: 13ch;
  margin: 0 0 clamp(28px, 5vw, 48px);
  font: 600 clamp(42px, 6vw, 70px)/0.98 var(--font-display);
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--color-navy);
}

.sp-cf7-kreator .sp-cf7-step-content {
  max-width: 760px;
}

.sp-cf7-kreator .wpcf7-radio .wpcf7-list-item-label {
  align-items: center;
}

.sp-cf7-kreator .sp-cf7-actions {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-navy);
}

@media (max-width: 980px) {
  .sp-cf7-step {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .sp-cf7-step-num {
    padding: 24px 14px;
    font-size: 28px;
  }

  .sp-cf7-step-body {
    padding: 24px 20px;
  }

  .sp-cf7-form .wpcf7-radio {
    grid-template-columns: 1fr;
  }

  .sp-cf7-form .wpcf7-radio label {
    min-height: 60px;
  }

  .sp-cf7-kreator .sp-cf7-step-title {
    font-size: clamp(40px, 6vw, 58px);
  }
}

@media (max-width: 768px) {
  .sp-cf7-form.sp-cf7-kreator {
    min-height: 0;
  }

  /* Podłoga wysokości dotyczy wszystkich kroków, nie tylko bieżącego — inaczej
     krok poza ekranem mierzyłby się bez niej i stos dostawałby zaniżoną
     wysokość. */
  .sp-cf7-kreator .sp-cf7-step {
    min-height: 500px;
  }

  .sp-cf7-kreator .sp-cf7-step-title {
    font-size: clamp(38px, 11vw, 54px);
  }
}

/* Pasek postępu na wąskich ekranach: trzy segmenty obok siebie zamiast licznika
   i nazw kroków ustawionych w linię. Stary układ się nie mieścił — „Forma
   współpracy" zajmowała 167px ze 202px kolumny, więc dwa pozostałe kroki
   spadały do drugiej linii i pasek przestawał cokolwiek komunikować (zmierzone
   na 375px: 103px wysokości, nazwy rozrzucone w trzech miejscach). Segmenty są
   równe, a bieżący krok podświetla tło przesuwane przez `--sp-cf7-krok`, którą
   ustawia JS kreatora. */
@media (max-width: 680px) {
  .sp-cf7-kreator .sp-cf7-progress {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 14px 0;
  }

  /* Licznik i kreska są zbędne, skoro segmenty same pokazują pozycję. */
  .sp-cf7-kreator .sp-cf7-progress-count,
  .sp-cf7-kreator .sp-cf7-progress-track {
    display: none;
  }

  .sp-cf7-kreator .sp-cf7-progress-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    counter-reset: sp-krok;
    overflow: hidden;
    border: 1px solid var(--color-navy);
    font-size: 11px;
  }

  /* Pozycja z `--sp-cf7-krok`, nie z `:has(.is-current)` — reguła oparta na
     :has() jest poprawna, ale Chromium nie przelicza stylu pseudo-elementu po
     zmianie klasy na potomku i tło zostawało na pierwszym segmencie aż do
     następnego pełnego recalc. */
  .sp-cf7-kreator .sp-cf7-progress-steps::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 33.3333%;
    background: var(--color-orange-deep);
    transform: translateX(calc(var(--sp-cf7-krok, 0) * 100%));
    transition: transform var(--motion-base) var(--ease-precise);
  }

  .sp-cf7-kreator .sp-cf7-progress-step {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 44px;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 9px 6px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  /* Numer kroku z licznika CSS, nie z markupu — nazwy kroków żyją w bazie WP,
     a `<ol>` i tak niesie tu kolejność. Bez przezroczystości: przy `opacity`
     0.75 numer schodził do 3.57:1, przy 0.85 do 4.42:1, więc przy 10px nie
     spełniałby progu. Hierarchię wobec nazwy robi rozmiar i krój, nie wyblakły
     kolor — numer dziedziczy barwę segmentu, przez co sam podąża za stanem. */
  .sp-cf7-kreator .sp-cf7-progress-step::before {
    content: counter(sp-krok, decimal-leading-zero);
    counter-increment: sp-krok;
    font: 600 10px/1 var(--font-mono);
    letter-spacing: 0.14em;
  }

  /* CF7 owija treść każdego `<li>` we własne `<p>`. Bez tego nazwa kroku nie
     dziedziczy ani rozmiaru, ani interlinii segmentu — pasek puchł z 46px do
     72px na samych domyślnych stylach akapitu. */
  .sp-cf7-kreator .sp-cf7-progress-step > p {
    display: contents;
    font: inherit;
  }

  /* Kropka-separator należała do układu liniowego. */
  .sp-cf7-kreator .sp-cf7-progress-step:not(:last-child)::after {
    display: none;
  }

  /* Biel na `--color-orange-deep` daje 5.24:1; na jaśniejszym `--color-orange`
     wychodziło 3.7:1, za mało dla tekstu 11px. */
  .sp-cf7-kreator .sp-cf7-progress-step.is-current {
    color: var(--color-white-clean);
  }

  .sp-cf7-kreator .sp-cf7-progress-step.is-complete {
    color: var(--color-navy);
  }
}

@media (max-width: 520px) {
  .sp-cf7-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-cf7-step-num {
    padding: 18px 18px 0;
    border-right: 0;
    font-size: 25px;
  }

  .sp-cf7-step-body {
    padding: 16px 18px 24px;
  }

  /* `column-reverse` zapisano tu zanim przyciski w ogóle trafiały do siatki
     flex, więc nigdy nie zadziałało i na telefonie od początku widać było
     „Wstecz" nad akcją główną. Po naprawie `<p>` wyżej odwrócenie nagle by
     ożyło i przestawiło kolejność, której nikt nie zamawiał. Zostaje `column`:
     akcja główna zostaje na dole, bliżej kciuka. */
  .sp-cf7-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sp-cf7-button,
  .wpcf7-submit {
    width: 100%;
    margin-left: 0;
  }

  .sp-cf7-safe-note {
    flex: 0 0 auto;
    width: 100%;
    order: -1;
  }

  .sp-cf7-result {
    padding: 40px 18px;
  }
}

/* Blok 360px został usunięty razem z liniowym paskiem. Chował nazwy kroków
   (`.sp-cf7-progress-steps { display: none }`) i przestawiał licznik z kreską,
   bo w jednej linii nic z tego się nie mieściło. Segmentowy pasek mieści się
   nawet na 320px, a że tamten blok stoi w pliku po nim, jego `display: none`
   skasowałby segmenty. */

@media (prefers-reduced-motion: reduce) {
  .sp-cf7-progress-fill,
  .sp-cf7-kreator .sp-cf7-progress-steps::before {
    transition: none;
  }

  /* Samo `animation: none` zostawiłoby zakreślenie na `background-size: 0`,
     czyli bez tła. Stan końcowy trzeba dopisać ręcznie. */
  .sp-cf7-result-mark {
    animation: none;
    background-size: 100% 100%;
  }

  .sp-cf7-kreator .sp-cf7-step.is-current {
    animation: none;
  }
}
/* ============================================
   MOBILE — kolejność kolumn formularza
   Na mobile: formularz (prawa kolumna) nad opisem (sidebar)
   ============================================ */
@media (max-width: 768px) {

  .sp-ct-form-wrap {
    order: -1; /* formularz skacze na górę */
  }

  .sp-ct-sidebar {
    order: 0;  /* sidebar zostaje pod formularzem */
  }
}
/* ============================================================
   STRONA KONTAKT — sp-ct-*
   page-kontakt.php
   Struktura Q14b/2.5: hero / form-section / info-map
   ============================================================ */


/* ── HERO — paper bg, split grid ─────────────────────────── */

.sp-ct-hero {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-navy);
  padding: 72px 0 96px;
}

.sp-ct-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.sp-ct-hero-text {
  display: flex;
  flex-direction: column;
}

.sp-ct-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--color-navy);
  margin: 0 0 28px;
}

.sp-ct-lead {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-navy-soft);
  margin: 0 0 32px;
  max-width: 48ch;
}

.sp-ct-hero-social {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  border-top: 1px solid var(--color-navy);
  padding-top: 28px;
}

.sp-ct-hero-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--motion-fast, 120ms);
}

.sp-ct-hero-social-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sp-ct-hero-social-link:hover {
  color: var(--color-orange);
}

.sp-ct-hero-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-orange);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 14px 24px;
  text-decoration: none;
  border-radius: 0;
  transition: background var(--motion-base, 200ms) var(--ease-default, ease);
}

.sp-ct-hero-cta:hover {
  background: var(--color-orange-deep);
  color: var(--color-paper);
}

.sp-ct-hero-portrait {
  position: relative;
}

.sp-ct-hero-frame {
  border: 1px solid var(--color-navy);
  background: var(--color-paper-dark);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.sp-ct-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
  display: block;
}

.sp-ct-hero-fig {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.sp-ct-fig-muted {
  color: var(--color-navy-soft);
}


/* ── FORM SECTION — kroki (sticky) + formularz CF7 ────────── */

.sp-ct-form-section {
  border-top: 1px solid var(--color-navy);
  padding: 96px 0;
}

.sp-ct-fs-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.sp-ct-fs-process {
  position: sticky;
  top: 32px;
}

.sp-ct-process-sublabel {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 24px;
}

.sp-ct-process-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-navy);
}

.sp-ct-process-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(20, 35, 61, 0.2);
}

.sp-ct-process-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-orange);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 36px;
}

.sp-ct-process-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.sp-ct-process-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-navy-soft);
}

.sp-ct-process-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.sp-ct-sf-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.sp-ct-form-wrap {
  background: var(--color-paper);
}

.sp-ct-form-intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-navy-soft);
  margin-bottom: 32px;
  max-width: 48ch;
}


/* ── INFO + MAPA — dane kontaktowe i mapa 50/50 ─────────── */

.sp-ct-info-map {
  border-top: 1px solid var(--color-navy);
  padding: 96px 0;
}

.sp-ct-im-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}

.sp-ct-im-info {
  display: flex;
  flex-direction: column;
}

.sp-ct-im-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: 32px;
}

.sp-ct-studio-list {
  display: flex;
  flex-direction: column;
}

.sp-ct-studio-block {
  padding: 24px 0;
  border-top: 1px solid rgba(20, 35, 61, 0.25);
}

.sp-ct-studio-block:first-of-type {
  border-top: 1px solid var(--color-navy);
}

.sp-ct-studio-block:last-of-type {
  border-bottom: 1px solid var(--color-navy);
}

.sp-ct-block-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy-soft);
  margin-bottom: 8px;
}

.sp-ct-block-val {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-navy);
}

.sp-ct-block-val a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-orange);
  padding-bottom: 1px;
  transition: border-bottom-width var(--motion-fast, 120ms);
}

.sp-ct-block-val a:hover {
  border-bottom-width: 2px;
}

.sp-ct-hours-row {
  display: flex;
  gap: 24px;
}

.sp-ct-hours-day {
  color: var(--color-navy-soft);
  min-width: 64px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sp-ct-hours-time {
  font-family: var(--font-body);
}

.sp-ct-studio-note {
  margin-top: 32px;
  padding: 24px;
  background: var(--color-paper-dark);
  border: 1px solid var(--color-navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-navy);
}

.sp-ct-nlabel {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  display: block;
  margin-bottom: 8px;
}

.sp-ct-im-map {
  display: flex;
  flex-direction: column;
}

.sp-ct-map-frame {
  flex: 1;
  min-height: 420px;
  border: 1px solid var(--color-navy);
  background: var(--color-paper-dark);
  overflow: hidden;
  filter: contrast(1.02) saturate(0.85);
}

.sp-ct-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sp-ct-map-fig {
  margin-top: 14px;
}

.sp-ct-map-cap {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-navy);
}


/* ── RESPONSYWNOŚĆ ────────────────────────────────────────── */

@media (max-width: 960px) {
  .sp-ct-hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .sp-ct-hero-frame {
    aspect-ratio: 4 / 5;
    max-width: 480px;
  }

  .sp-ct-fs-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .sp-ct-fs-process {
    position: static;
    top: auto;
  }

  .sp-ct-im-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .sp-ct-map-frame {
    min-height: 320px;
    flex: none;
  }
}

@media (max-width: 640px) {
  .sp-ct-hero {
    padding: 48px 0 64px;
  }

  .sp-ct-form-section {
    padding: 64px 0;
  }

  .sp-ct-info-map {
    padding: 64px 0;
  }

  .sp-ct-hero-social {
    gap: 16px;
  }
}
/* ============================================================
   PODSTRONY OFERTY — sp-of-*
   Redesigned Q14e/1 · source: mockup-oferta.html (Atlas Editorial)
   Strony: /oferta-konsultacja/, /oferta-online/, /oferta-hybrydowa/
   ============================================================ */


/* ============================================
   SHARED PRIMITIVES — link-ghost, mono-meta
   ============================================ */

.sp-of-link-ghost {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--color-orange);
    padding-bottom: 4px;
    transition: border-bottom-width var(--motion-fast) var(--ease-precise);
}
.sp-of-link-ghost:hover {
    border-bottom-width: 2px;
    padding-bottom: 3px;
}
.sp-of-link-ghost--paper { color: var(--color-paper); }

.sp-of-mono-meta {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.sp-of-mono-meta--accent { color: var(--color-orange); }
.sp-of-mono-meta--muted  { color: var(--color-ink-soft); }


/* ============================================
   BREADCRUMB
   ============================================ */
.sp-of-bc {
    border-bottom: 1px solid color-mix(in srgb, var(--color-navy) 25%, transparent);
    padding-block: clamp(12px, 2vw, 24px);
}
.sp-of-bc-inner {
    display: flex;
    column-gap: clamp(6px, 1.2vw, 12px);
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: baseline;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.sp-of-bc-inner a {
    color: var(--color-ink-soft);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-default);
}
.sp-of-bc-inner a:hover { color: var(--color-orange); }
.sp-of-bc-sep { color: var(--color-ink-soft); }
.sp-of-bc-cur { color: var(--color-navy); }


/* ============================================
   SECTION BASE
   ============================================ */
.sp-of-sec { padding: 96px 0; }

.sp-of-dark {
    background: var(--color-navy);
    color: var(--color-paper);
}

.sp-of-sec-head {
    margin-bottom: 56px;
    max-width: 920px;
}
.sp-of-sec-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--color-navy);
}
.sp-of-dark .sp-of-sec-head h2 { color: var(--color-paper); }


/* ============================================
   HERO
   ============================================ */
.sp-of-hero { padding: 80px 0 96px; }

.sp-of-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 80px;
    align-items: start;
}

.sp-of-hero-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(56px, 7vw, 96px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-navy);
    margin-bottom: 32px;
    max-width: 14ch;
}

.sp-of-hero-lead {
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1.55;
    color: var(--color-ink-soft);
    max-width: 50ch;
    margin-bottom: 40px;
}

.sp-of-hero-cta-row {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}

.sp-of-hero-anatomy {
    border: 1px solid var(--color-navy);
    background: var(--color-paper-dark);
    padding: 32px 24px 16px;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 32px;
}
.sp-of-hero-anatomy svg,
.sp-of-hero-anatomy img {
    width: 100%;
    flex: 1;
    object-fit: contain;
    margin: 0 auto;
    max-height: 380px;
    opacity: 0.92;
}
/* CSS override: zamienia białe stroke inline SVG na navy dla jasnego tła.
   svg * potrzebne bo dzieci mają własne presentation attributes (wyższy priorytet niż inherit). */
.sp-of-hero-anatomy svg   { opacity: 0.5; }
.sp-of-hero-anatomy svg * { stroke: var(--color-navy); }
.sp-of-hero-anatomy figcaption {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-navy);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.sp-of-fig-num { color: var(--color-orange); }


/* ============================================
   DLA KOGO — 3-up cards
   ============================================ */
.sp-of-forwho { border-top: 1px solid var(--color-navy); }

.sp-of-fw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-navy);
    border: 1px solid var(--color-navy);
}

/* Override: grid hybrydy z navy headerami - subgrid rows + wider gap, bez bordera */
.sp-of-fw-grid:has(.sp-of-fw-head) {
    grid-template-rows: auto 1fr;
    gap: 8px;
    border: 0;
}
.sp-of-fw-grid > article {
    background: var(--color-paper);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
}

.sp-of-fw-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-orange);
    margin-bottom: 24px;
}
.sp-of-fw-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-navy);
    margin-bottom: 20px;
}
.sp-of-fw-body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-ink-soft);
}

/* Override: karty z navy headerem (hybryda PHP używa .sp-of-fw-head wrapper).
   Inne strony oferty (online, konsultacja) bez wrappera = base styles. */
.sp-of-fw-grid > article:has(.sp-of-fw-head) {
    padding: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 2;
}
.sp-of-fw-head {
    background: var(--color-navy);
    padding: 36px 32px 40px;
    display: flex;
    flex-direction: column;
}
.sp-of-fw-head .sp-of-fw-title {
    color: var(--color-paper);
    margin-bottom: 0;
}
.sp-of-fw-grid > article:has(.sp-of-fw-head) .sp-of-fw-body {
    padding: 28px 32px 36px;
}


/* ============================================
   PRZEBIEG — numbered steps
   ============================================ */
.sp-of-process { background: var(--color-paper-dark); }

.sp-of-steps { border-top: 1px solid var(--color-navy); }

.sp-of-step {
    display: grid;
    grid-template-columns: 80px 1fr 1.1fr;
    gap: 0 48px;
    padding: 40px 0;
    border-bottom: 1px solid var(--color-navy);
    align-items: stretch;
}
.sp-of-step-num-cell {
    border-right: 1px solid var(--color-navy);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    overflow: hidden;
}
.sp-of-step-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange);
    font-variant-numeric: tabular-nums;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
}
.sp-of-step-prefix { padding-bottom: 0.4em; }

.sp-of-step-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-navy);
    max-width: 22ch;
    align-self: start;
}
.sp-of-step-body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-ink-soft);
    align-self: start;
}
.sp-of-process-foot {
    margin-top: 32px;
    padding-top: 20px;
    display: flex;
    gap: 16px;
    align-items: baseline;
    justify-content: flex-end;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.sp-of-foot-key { color: var(--color-orange); }
.sp-of-foot-val { color: var(--color-navy); }


/* ============================================
   SZCZEGÓŁY — spec table + body
   ============================================ */
.sp-of-details-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: start;
}

.sp-of-spec-table {
    border-top: 1px solid var(--color-navy);
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 20px;
}

.sp-of-spec-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-navy);
    align-items: baseline;
}
.sp-of-spec-key {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange);
    line-height: 1.4;
}
.sp-of-spec-val {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-navy);
}

.sp-of-details-body p {
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.6;
    color: var(--color-navy);
    margin-bottom: 24px;
    max-width: 50ch;
}
.sp-of-det-table-cta {
    margin-top: 32px;
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}


/* ============================================
   CTA BOTTOM — navy invert
   ============================================ */
.sp-of-cta-inner {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 64px;
    align-items: end;
}
.sp-of-cta-h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--color-paper);
    margin-bottom: 8px;
}
.sp-of-cta-btns {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}


/* ============================================
   RESPONSIVE — breakpoints oferty
   ============================================ */
@media (max-width: 1024px) {
    .sp-of-hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .sp-of-hero-anatomy {
        aspect-ratio: 4 / 3;
        max-width: 480px;
        position: static;
    }
    .sp-of-details-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .sp-of-cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: start;
    }
}

@media (max-width: 768px) {
    .sp-of-sec { padding: 64px 0; }

    .sp-of-fw-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 24px;
        background: transparent;
        border: 0;
    }
    /* Mobile base: online/konsultacja (bez fw-head wrappera) */
    .sp-of-fw-grid > article:not(:has(.sp-of-fw-head)) {
        padding: 24px 0;
        border-top: 1px solid var(--color-navy);
    }
    .sp-of-fw-grid > article:not(:has(.sp-of-fw-head)):first-child {
        border-top: 0;
        padding-top: 0;
    }
    /* Mobile override: hybryda (z fw-head wrapperem) */
    .sp-of-fw-grid > article:has(.sp-of-fw-head) {
        display: flex;
        flex-direction: column;
        grid-row: auto;
        grid-template-rows: none;
        padding: 0 12px;
    }
    .sp-of-fw-grid > article:has(.sp-of-fw-head) .sp-of-fw-head {
        padding: 24px 20px 28px;
    }
    .sp-of-fw-grid > article:has(.sp-of-fw-head) .sp-of-fw-body {
        padding: 20px 20px 24px;
    }

    .sp-of-step {
        grid-template-columns: 40px 1fr;
        gap: 6px 14px;
        padding: 28px 0;
    }
    .sp-of-step-num-cell {
        grid-row: 1 / span 2;
        border-right: 0;
        padding-top: 4px;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .sp-of-step-num {
        writing-mode: initial;
        text-orientation: initial;
        transform: none;
        font-size: 12px;
    }
    .sp-of-step-prefix { display: none; }
    .sp-of-step-title { grid-column: 2; font-size: 20px; }
    .sp-of-step-body  { grid-column: 2; font-size: 15px; }

    .sp-of-spec-table { grid-template-columns: 1fr; }
    .sp-of-spec-row { grid-template-columns: 1fr; gap: 4px; }
    .sp-of-spec-val { font-size: 18px; }

    .sp-of-hero-anatomy {
        max-width: 100%;
        max-height: 360px;
        aspect-ratio: auto;
        align-self: center;
        padding-bottom: 28px;
    }
    .sp-of-hero-anatomy svg,
    .sp-of-hero-anatomy img {
        max-height: 260px;
    }
    .sp-of-hero-anatomy figcaption {
        display: block;
        font-size: 9px;
        letter-spacing: 0.06em;
        line-height: 1.5;
    }
    .sp-of-hero-anatomy figcaption span + span::before {
        content: "·";
        margin: 0 4px;
        color: var(--color-orange);
    }
}

/* ============================================================
   KONIEC: sp-of-* — Podstrony Oferty
   ============================================================ */

/* ============================================================
   sp-404 — strona 404 (Q14e/4)
   ============================================================ */

.sp-404 {
  background: var(--color-paper);
}

.sp-404-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 10vw, 160px) 0;
}

.sp-404-inner {
  text-align: center;
  max-width: 600px;
}

.sp-404-sig {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-orange);
  display: inline-block;
  margin-bottom: 32px;
}

.sp-404-num {
  font-family: var(--font-mono);
  font-size: clamp(96px, 16vw, 200px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.sp-404-heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-navy);
  margin-bottom: 20px;
}

.sp-404-lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin-bottom: 48px;
}

.sp-404-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   KONIEC: sp-404
   ============================================================ */


/* ============================================================
   CREDENTIALS STRIP — 3 cells (Zawód / PWZFz / Opinie)
   Desktop: 3-column grid, border-right separators
   Mobile: column stack, border-bottom separators
   ============================================================ */

.sp-credentials {
  background: var(--color-paper);
  border-top: 1px solid rgba(20, 35, 61, 0.18);
  border-bottom: 1px solid rgba(20, 35, 61, 0.18);
}

.sp-cred-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.sp-cred-cell {
  padding: 24px 28px 26px;
  border-right: 1px solid rgba(20, 35, 61, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-cred-cell:last-child { border-right: 0; padding-right: 0; }
.sp-cred-cell:first-child { padding-left: 0; }

.sp-cred-key {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.sp-cred-key--mixed {
  text-transform: none;
  letter-spacing: 0.08em;
}

.sp-cred-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-navy);
}

.sp-cred-stars { color: var(--color-orange); letter-spacing: 0.15em; }

@media (max-width: 768px) {
  .sp-credentials {
    background: transparent;
  }
  .sp-cred-grid {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .sp-cred-cell {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(20, 35, 61, 0.10);
    flex-direction: column;
    gap: 6px;
  }
  .sp-cred-cell:last-child { border-bottom: 0; }
  .sp-cred-cell:first-child { padding-left: 0; }
  .sp-cred-val { font-size: 17px; }
}



/* ============================================================
   Q14c — ABOUT GRID (nowy layout 1.2fr/1fr, 2026-05-08)
   Stare sp-about-label/quote/pillars zostają jako dead code.
   ============================================================ */

.sp-about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 72px;
    align-items: start;
}

.sp-about-text .sp-about-h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 3.5vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin-bottom: 40px;
    color: var(--color-navy);
}

.sp-about-text .sp-about-body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-navy);
    margin-bottom: 24px;
    max-width: 60ch;
}

.sp-about-aside { padding-top: 12px; }

.sp-about-tagline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(28px, 2.8vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    max-width: 18ch;
    color: var(--color-navy);
}

/* Process list (4 kroki) */
.sp-process-list {
    list-style: none;
}

.sp-process-list li {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--color-navy);
    align-items: baseline;
}

.sp-process-list li:last-child { border-bottom: 1px solid var(--color-navy); }

.sp-process-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.sp-process-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
    color: var(--color-navy);
    display: block;
}

.sp-process-desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-ink-soft);
    display: block;
}

@media (max-width: 1024px) {
    .sp-about-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   Q14c — OFFER JOURNEY CARDS (split-into-3, 2026-05-08)
   ============================================================ */

.sp-journey {
    position: relative;
    background: var(--color-paper);
    border-top: 1px solid var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
    padding: 0;
}

.sp-journey-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sp-journey-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: translate3d(0, var(--journey-y, 0px), 0);
    opacity: 0.15;
    mix-blend-mode: multiply;
    will-change: transform;
}

.sp-journey-track {
    position: relative;
    height: 340vh;
}

.sp-journey-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 56px 24px 64px;
}

.sp-journey-head {
    position: relative;
    z-index: 2;
    max-width: 720px;
    text-align: left;
    width: 100%;
    padding: 0 24px;
}

.sp-journey-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--color-navy);
}

.sp-journey-deck {
    --card-w: clamp(280px, 30vw, 340px);
    --card-h: clamp(380px, 50vh, 460px);
    position: relative;
    z-index: 2;
    width: 100%;
    height: var(--card-h);
}

.sp-journey-card {
    position: absolute;
    width: var(--card-w);
    height: var(--card-h);
    top: 50%;
    left: 50%;
    margin-top: calc(var(--card-h) / -2);
    margin-left: calc(var(--card-w) / -2);
    background: var(--color-paper-dark);
    border: 1px solid var(--color-navy);
    padding: 32px 30px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 18px 40px -24px rgba(20,35,61,0.22);
    transform: translate3d(var(--card-x, 0), var(--lift-y, 0), 0);
    text-decoration: none;
    color: inherit;
    will-change: transform;
    transition: border-color var(--motion-base) var(--ease-precise),
                box-shadow var(--motion-base) var(--ease-precise);
}

.sp-journey-card:hover {
    --lift-y: -8px;
    border-color: var(--color-navy);
    box-shadow: 0 32px 64px -28px rgba(20,35,61,0.42);
    transition: transform 240ms var(--ease-precise),
                border-color var(--motion-base) var(--ease-precise),
                box-shadow var(--motion-base) var(--ease-precise);
}

.sp-journey-card--flagship { background: var(--color-paper); }

.sp-journey-card:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 4px;
}

.sp-journey-card-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(48px, 5vw, 64px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--color-orange);
    display: block;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(20,35,61,0.20);
    margin-bottom: 22px;
}

.sp-journey-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-navy);
    margin-bottom: 14px;
}

.sp-journey-card-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-navy);
    flex: 1 1 auto;
}

.sp-journey-card-foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(20,35,61,0.20);
}

.sp-journey-card-cta {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-navy);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.sp-journey-card-arrow {
    color: var(--color-orange);
    font-size: 14px;
    transition: transform var(--motion-base) var(--ease-precise);
}

.sp-journey-card:hover .sp-journey-card-arrow { transform: translateX(6px); }

/* Card overlay (navy reveal on scroll) */
.sp-card-overlay {
    position: absolute;
    inset: 0;
    background: var(--color-navy);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 36px 30px 28px;
    transform: translate3d(0, var(--overlay-y, 0%), 0);
    will-change: transform;
    pointer-events: none;
    overflow: hidden;
}

.sp-card-overlay::after {
    content: attr(data-sig);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244,240,230,0.5);
}

.sp-overlay-q {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(36px, 4vw, 44px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--color-paper);
    max-width: 14ch;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(216,90,48,0.45);
}

/* Mobile journey */
@media (max-width: 880px) {
    .sp-journey-track { height: auto; }
    .sp-journey-stage {
        position: static;
        height: auto;
        gap: 32px;
        padding: 56px 24px 56px;
    }
    .sp-journey-bg { display: none; }
    .sp-journey-deck {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        perspective: 900px;
        perspective-origin: 50% 30%;
    }
    .sp-journey-card {
        position: relative;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        margin: 0;
        /* Paper-fold initial state — karta "zamknięta" pochylona w głąb */
        transform-origin: top center;
        transform: rotateX(-42deg) translateY(12px);
        opacity: 0.25;
        will-change: transform, opacity, box-shadow;
        transition:
            transform  1.05s var(--ease-precise),
            opacity    0.85s var(--ease-precise),
            box-shadow 1.05s var(--ease-precise);
    }
    .sp-journey-card.is-revealed {
        transform: rotateX(0) translateY(0);
        opacity: 1;
    }
    /* Mobile overlay: class-driven slide (ignores --overlay-y desktop var) */
    .sp-card-overlay {
        transform: translate3d(0, 0, 0);
        transition: transform 1.5s cubic-bezier(0.33, 0, 0.2, 1) 0.25s;
    }
    .sp-journey-card.is-revealed .sp-card-overlay {
        transform: translate3d(0, 108%, 0);
    }
}

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
    .sp-journey-card {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .sp-card-overlay {
        transform: translate3d(0, 108%, 0) !important;
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-journey-bg-img { transform: translate3d(0,0,0) !important; }
    .sp-journey-card { transition: none !important; }
}

/* ============================================================
   Q14c — BLOG HOME CARD-STACK (GSAP pinned, 2026-05-08)
   ============================================================ */

.sp-blog-home {
    padding-top: 0;
    padding-bottom: 0;
    overflow: clip;
}

.sp-blog-stack {
    position: relative;
    height: calc(4.0 * 100vh);
}

.sp-blog-pin {
    height: 100vh;
    display: flex;
    overflow: hidden;
}

.sp-blog-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sp-blog-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0.10;
    mix-blend-mode: multiply;
}

.sp-blog-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 64px 0 32px;
    min-width: 0;
}

.sp-blog-section-head {
    padding: 0 0 32px;
}

.sp-blog-section-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 3.8vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--color-navy);
}

.sp-blog-section-head h2 em {
    font-style: normal;
    color: var(--color-orange);
}

.sp-blog-section-lede {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-ink-soft);
    max-width: 56ch;
    margin-top: 12px;
    text-shadow:
        0 0 8px var(--color-paper),
        0 0 18px var(--color-paper),
        0 0 32px var(--color-paper);
}

.sp-blog-viewport {
    position: relative;
    height: 68vh;
    width: min(1180px, calc(100vw - 80px));
    margin: 24px auto 24px;
    min-height: 0;
}

/* Blog entry cards */
.sp-blog-entry {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1.62fr 1fr;
    border: 1px solid var(--color-navy);
    will-change: transform;
    overflow: hidden;
}

.sp-blog-entry--paper { background: var(--color-paper-dark); color: var(--color-navy); }

.sp-blog-entry--navy {
    background: var(--color-paper-dark);
    color: var(--color-navy);
    border-color: var(--color-navy);
}

.sp-blog-entry--navy .sp-blog-entry-media { background: var(--color-navy); }

.sp-blog-entry-media {
    position: relative;
    background: var(--color-navy);
    overflow: hidden;
    border-bottom: 1px solid var(--color-navy);
}

.sp-blog-entry-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-blog-entry-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}

.sp-blog-entry-media-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--color-navy);
}

.sp-blog-entry-fig {
    position: absolute;
    left: 24px;
    bottom: 20px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-paper);
}

.sp-blog-entry-fig span { color: var(--color-orange); }

.sp-blog-entry-content {
    padding: 28px 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "body sig"
        "body foot";
    column-gap: 40px;
    row-gap: 12px;
    align-items: start;
}

.sp-blog-entry-sig {
    grid-area: sig;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-orange);
    text-align: right;
}

.sp-blog-entry-sig span:last-child { color: var(--color-ink-soft); }

.sp-blog-entry-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.sp-blog-entry-h {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 32ch;
    color: inherit;
}

.sp-blog-entry-lead {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    max-width: 56ch;
    color: var(--color-ink-soft);
}

.sp-blog-entry-foot {
    grid-area: foot;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    align-self: end;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    text-align: right;
}

.sp-blog-entry-cta {
    background: var(--color-orange);
    color: var(--color-cream);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    padding: 14px 22px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--motion-base) var(--ease-precise);
}

.sp-blog-entry-cta:hover { background: var(--color-orange-deep); color: var(--color-cream); }

.sp-blog-entry-meta { color: var(--color-ink-soft); }

/* Mobile blog stack */
@media (max-width: 900px) {
    .sp-blog-home { overflow: visible; }
    .sp-blog-stack { height: auto; position: relative; }
    .sp-blog-pin { position: static; height: auto; display: block; overflow: visible; }
    .sp-blog-inner { padding: 24px 0; }
    .sp-blog-section-head { padding: 0 0 16px; }
    .sp-blog-viewport {
        height: auto;
        width: calc(100vw - 24px);
        margin: 0 auto;
        display: block;
    }
    .sp-blog-entry {
        position: sticky;
        inset: auto;
        top: 72px;
        min-height: 70dvh;
        margin-bottom: 24px;
        grid-template-rows: auto 1fr;
        will-change: auto;
        transform: none;
    }
    .sp-blog-entry:last-child { margin-bottom: 0; }
    .sp-blog-entry-media { aspect-ratio: 16/10; min-height: 0; }
    .sp-blog-entry-media-placeholder { aspect-ratio: 16/10; }
    .sp-blog-entry-content {
        padding: 24px;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "sig"
            "body"
            "foot";
        column-gap: 0;
        row-gap: 16px;
    }
    .sp-blog-entry-sig {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        text-align: left;
    }
    .sp-blog-entry-foot {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        align-self: stretch;
    }
}


@media (prefers-reduced-motion: reduce) {
    .sp-blog-stack { height: auto; margin: 0 0 80px; }
    .sp-blog-pin { position: relative; top: auto; height: auto; display: block; }
    .sp-blog-inner { padding: 32px 0; }
    .sp-blog-viewport {
        height: auto;
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: min(1180px, calc(100vw - 80px));
        margin: 0 auto;
    }
    .sp-blog-entry { position: relative; inset: auto; }
    .sp-blog-entry-media { aspect-ratio: 16/10; }
}

/* ============================================================
   Q14c — NEWSLETTER MARQUEE (2026-05-08)
   ============================================================ */

.sp-newsletter {
    position: relative;
    overflow: hidden;
}

.sp-marquee-wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: var(--color-navy);
    padding: 22px 0;
}

.sp-marquee-track {
    display: flex;
    gap: 56px;
    width: max-content;
    white-space: nowrap;
    animation: sp-marquee 120s linear infinite;
}

.sp-marquee-item {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
    color: var(--color-paper);
    letter-spacing: -0.005em;
}

.sp-marquee-sep {
    color: var(--color-orange);
    font-style: normal;
    margin: 0 8px;
}

@keyframes sp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .sp-marquee-track { animation: none; }
}

/* Newsletter cover / card */
.sp-newsletter-cover {
    background: var(--color-navy);
    padding: 48px 0 56px;
    position: relative;
    overflow: hidden;
}

.sp-newsletter-anatomy-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 120vw;
    aspect-ratio: 1200 / 1700;
    pointer-events: none;
    z-index: 0;
    margin-top: -405px;
    transform: translate(-50px, 70px);
}

.sp-newsletter-anatomy-bg object {
    width: 100%;
    height: 100%;
    opacity: 0.22;
    filter: brightness(0) invert(1);
    display: block;
}

@media (max-width: 900px) {
    .sp-newsletter-anatomy-bg {
        margin-top: -120px;
        width: 200vw;
        right: -50vw;
    }
}

.sp-newsletter-cover .sp-container {
    position: relative;
    z-index: 1;
}

.sp-newsletter-card {
    background: var(--color-paper);
    color: var(--color-navy);
    padding: 56px 56px 52px;
    max-width: 580px;
}

.sp-newsletter-h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 3.2vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    color: var(--color-navy);
}

.sp-newsletter-body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-ink-soft);
    margin-bottom: 36px;
    max-width: 50ch;
}

/* Select Kim jesteś? */
.sp-nl-role-select {
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2314233D' stroke-width='1.5' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Newsletter form fields — scoped do .sp-newsletter-card, nie wpływa na lead-magnet w innych kontekstach */
.sp-newsletter-card .sp-nl-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.sp-newsletter-card .sp-lm-field-label,
.sp-newsletter-card label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-navy);
    margin-bottom: 0;
}

.sp-newsletter-card input[type="text"],
.sp-newsletter-card input[type="email"],
.sp-newsletter-card select.sp-lm-select,
.sp-newsletter-card select.sp-nl-role-select {
    background: var(--color-paper);
    border: 1px solid var(--color-navy);
    border-radius: 0;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--color-navy);
    transition: border-color var(--motion-fast) var(--ease-default);
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
}

.sp-newsletter-card input[type="text"]:focus,
.sp-newsletter-card input[type="email"]:focus,
.sp-newsletter-card select:focus {
    outline: 2px solid var(--color-orange);
    outline-offset: 0;
    border-color: var(--color-orange);
}

/* Newsletter form (home) — RODO + submit */
.sp-lm-gdpr {
    margin-top: 32px;
    margin-bottom: 18px;
}

.sp-lm-gdpr-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.sp-lm-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-orange);
    cursor: pointer;
}

.sp-newsletter-card .sp-lm-gdpr-text {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--color-ink-soft);
    text-transform: none;
    letter-spacing: normal;
}

.sp-lm-gdpr-link {
    color: var(--color-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sp-nl-submit {
    padding: 20px 40px;
}

@media (max-width: 768px) {
    .sp-newsletter-card { padding: 32px 24px 28px; }
    .sp-marquee-item { font-size: clamp(28px, 8vw, 48px); }
}

/* ============================================================
   COOKIEYES — brand-align + symetria przyciskow (B4, 2026-07-08)
   ------------------------------------------------------------
   Baner cookie renderuje WTYCZKA CookieYes (konfig: app.cookieyes.com),
   NIE motyw. Z kodu mozemy tylko nadpisac wyglad. Dzielimy sie tak:
     - Motyw (ten blok): fonty self-hosted (Switzer/Literata/IBM Plex Mono —
       panel CookieYes ich nie zaladuje), paleta brandowa, radius 0 i
       SYMETRIA przyciskow Odrzuc/Akceptuj (wymog PKE art. 361 / RODO —
       oba solidne, rowna prominencja, zaden nie jest wyszarzonym ghostem).
     - Panel CookieYes: copy „po co zgoda", tlumaczenie kategorii na PL,
       layout (Bar vs Box). Tego z CSS nie zrobimy.
   Wszystko !important + zdublowana klasa (0,2,0), bo CookieYes wstrzykuje
   wlasny <style> w runtime. NIE ustawiaj kolorow przyciskow w panelu —
   ten CSS je nadpisze (jedno zrodlo prawdy dla wygladu przyciskow).
   Selektory potwierdzone na zywej stronie 2026-07-08.
   ============================================================ */

/* CENTROWANIE — CookieYes nie ma layoutu „srodek" (tylko rogi/pasek).
   Kontener robimy pelnoekranowa nakladka flex z przyciemnionym tlem,
   a karte (.cky-consent-bar) centrujemy w srodku. :not(.cky-hide) jest
   KRYTYCZNE — inaczej nakladka zostaje na calym ekranie po wyborze zgody.
   Dziala niezaleznie od tego, ktory rog ustawisz w panelu. */
.cky-consent-container:not(.cky-hide) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(20, 35, 61, 0.55) !important;
    z-index: 999999 !important;
}
.cky-consent-container:not(.cky-hide) .cky-consent-bar.cky-consent-bar {
    max-width: 540px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Karta: navy brand + cien */
.cky-consent-bar.cky-consent-bar {
    background: var(--color-navy) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 48px rgba(20, 35, 61, 0.45) !important;
    font-family: var(--font-body) !important;
}

/* Tytul + opis: czytelne, paper na navy */
.cky-title.cky-title {
    color: var(--color-white-clean) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
}
.cky-notice-des.cky-notice-des,
.cky-notice-des.cky-notice-des p {
    color: var(--color-paper) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}
.cky-notice-des.cky-notice-des a {
    color: var(--color-orange) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Przyciski — wspolna baza (dziala i w barze, i w modalu preferencji) */
.cky-btn.cky-btn {
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 12px 26px !important;
    border: 2px solid transparent !important;
    transition: filter 0.15s ease !important;
}

/* UKLAD 2 WIERSZE (Stanisław decyzja 2026-07-09):
   gorny wiersz — Odrzuc + Dostosuj obok siebie (kazdy flex:1, razem = pelna
   szerokosc), dolny wiersz — Akceptuj na cala szerokosc. flex-wrap + akceptuj
   z flex-basis 100% wymusza zawiniecie do wlasnego wiersza.
   UWAGA: selektor .cky-notice-btn-wrapper to jedyny element NIEZWERYFIKOWANY
   na zywej stronie (brak podlaczonej przegladarki przy edycji) — sprawdzic po
   deployu, ze uklad faktycznie sie składa w 2 wiersze. */
.cky-notice-btn-wrapper.cky-notice-btn-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.cky-btn-reject.cky-btn-reject { order: 1 !important; flex: 1 1 0 !important; }
.cky-btn-preferences.cky-btn-preferences,
.cky-btn-customize.cky-btn-customize { order: 2 !important; flex: 1 1 0 !important; }
.cky-btn-accept.cky-btn-accept { order: 3 !important; flex: 1 1 100% !important; }

/* DLACZEGO UKLAD 2 WIERSZY NIE DZIALAL NA TELEFONIE (diagnoza 2026-07-30).
   CookieYes ma wlasna regule `@media (max-width: 440px)`, ktora ustawia
   wrapperowi `flex-direction: column`, a kazdemu `.cky-btn` `width: 100%`.
   iPhone ma 390px, wiec lapal sie na nia i przyciski szly w slupek — mimo
   flex:1 1 0 wyzej. Zadna z tych regul nie jest !important, wiec wystarczy
   je nadpisac; potrzebna jest tylko rowna szerokosc breakpointu.
   Mniejszy font + weższe paddingi, zeby "ODRZUC WSZYSTKIE" zmiescilo sie
   w polowie szerokosci bez zawijania (zmierzone: 146px na 390px ekranu).
   ZWERYFIKOWANE na zywej stronie, iPhone 13: Odrzuc i Dostosuj w jednym
   wierszu po 146px, Akceptuj osobno na 302px, zero zawijania tekstu,
   cel dotykowy 44px zachowany. */
@media (max-width: 440px) {
    .cky-notice-btn-wrapper.cky-notice-btn-wrapper { flex-direction: row !important; }

    .cky-btn-reject.cky-btn-reject,
    .cky-btn-preferences.cky-btn-preferences,
    .cky-btn-customize.cky-btn-customize {
        width: auto !important;
        font-size: 11px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        letter-spacing: 0.04em !important;
    }
}

/* WAGA WIZUALNA (zmiana 2026-07-09, odejscie od pelnej symetrii B4):
   Akceptuj = wypelniony orange. Odrzuc + Customizuj = samo obramowanie
   (outline paper na navy), bez wypelnienia.
   FLAGA COMPLIANCE: to czyni Akceptuj wizualnie mocniejszym niz Odrzuc —
   pod PKE art. 361 / RODO odrzucenie zgody nie powinno byc mniej prominentne.
   Poprzednia wersja (oba solidne) byla bezpieczniejsza. Swiadoma decyzja S. */
.cky-btn-accept.cky-btn-accept {
    background: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-white-clean) !important;
}
.cky-btn-reject.cky-btn-reject {
    background: transparent !important;
    border-color: var(--color-paper) !important;
    color: var(--color-paper) !important;
}
.cky-btn-accept.cky-btn-accept:hover,
.cky-btn-reject.cky-btn-reject:hover {
    filter: brightness(1.08) !important;
}

/* „Dostosuj/Preferencje" — tertiary, ale czytelny outline (nie szary ghost) */
.cky-btn-preferences.cky-btn-preferences,
.cky-btn-customize.cky-btn-customize {
    background: transparent !important;
    border-color: var(--color-paper) !important;
    color: var(--color-paper) !important;
}

/* Widget „revisit" (ponowne otwarcie zgody) — UKRYTY site-wide (2026-07-11):
   ikona CookieYes to niebieskie kolko (obrazek, nie do przemalowania CSS-em),
   gryzlo sie z brandem i nachodzilo na tresc na mobile. W zamian trigger
   tekstowy "Preferencje cookies" w stopce motywu (footer.php) oraz w stopce
   /linki — .cky-banner-element to oficjalny mechanizm CookieYes. */
.cky-btn-revisit-wrapper.cky-btn-revisit-wrapper { display: none !important; }

/* ------------------------------------------------------------
   MODAL PREFERENCJI („Dostosuj") — zgranie z banerem (2026-07-09)
   Computed styles z zywej strony: .cky-preference-center miala
   background-color:#121212 (czern) inline, a .cky-modal (wrapper) #fff —
   stad bialy pasek pod przyciskami. Naglowki (tytul + nazwy kategorii)
   dziedziczyly Literata serif ze strony zamiast Switzer jak w banerze.
   Podkomponenty (header/body/footer/separator) maja tlo transparent,
   wiec przemalowanie panelu + wrappera wystarcza. Wyjatek: pasek „Powered
   by CookieYes" (bezklasowy div, last-child footera) ma wlasne tlo #ededed —
   dociagniety osobno do navy + jasny tekst (logo pozostaje czytelne).
   Tekst #d0d0d0 zostaje — czytelny na navy. Toggle i zielone „Zawsze aktywne"
   = default CookieYes, swiadomie nie ruszane (poza zakresem zgloszenia).
   Weryfikowane na zywym modalu przez injection + screenshot 2026-07-09.
   ------------------------------------------------------------ */
.cky-modal.cky-modal,
.cky-preference-center.cky-preference-center {
    background-color: var(--color-navy) !important;
    border-color: transparent !important;
}
.cky-preference-title.cky-preference-title,
.cky-accordion-btn.cky-accordion-btn {
    font-family: var(--font-display) !important;
}
.cky-footer-wrapper > div:last-child {
    background-color: var(--color-navy) !important;
    color: var(--color-paper) !important;
}

/* ============================================================
   LANDINGI REKLAMOWE — punkty kontaktu
   Audyt 2026-07-25: 94% klikniec z Ads to telefony, a na landingu
   nie bylo ani klikalnego numeru, ani formularza. Patrz inc/landing-kontakt.php.
   ============================================================ */

/* Telefon + WhatsApp w pierwszym ekranie */
.sp-lp-quick {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--color-ink-soft);
    margin: 20px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.sp-lp-quick-link {
    color: var(--color-orange);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    /* Cel dotykowy — 44px wysokosci strefy klikalnej bez rozpychania linii */
    padding: 11px 0;
    font-weight: 600;
    white-space: nowrap;
}

.sp-lp-quick-link:hover,
.sp-lp-quick-link:focus-visible {
    color: var(--color-orange-deep);
}

.sp-lp-quick-sep { color: var(--color-paper-deeper); }

/* Wariant w hero na ciemnym tle (/wspolpraca/) */
.sp-hero-inner .sp-lp-quick { color: var(--color-paper-muted); }
.sp-hero-inner .sp-lp-quick-link { color: var(--color-paper); }
.sp-hero-inner .sp-lp-quick-link:hover { color: var(--color-orange); }

/* Sekcja z formularzem na landingu */
.sp-lp-form {
    background: var(--color-paper-dark);
    padding: 88px 0;
}

.sp-lp-form-inner {
    max-width: 720px;
}

.sp-lp-form-head {
    margin-bottom: 32px;
}

.sp-lp-form-h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.15;
    color: var(--color-navy);
    margin: 0 0 12px;
}

.sp-lp-form-lead {
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-ink-soft);
    margin: 0;
    max-width: 52ch;
}

.sp-lp-form-body .wpcf7 { margin-top: 0; }

/* Scope na .sp-lp-form zachowuje pytanie na /kontakt/ przy braku JS: klasa kreatora nie jest wystarczajaca.
   Wyjatek `--kreator`: landing, ktory swiadomie prowadzi pelny kreator 3-krokowy
   razem z pytaniem o forme wspolpracy (2026-08-06, /fizjoterapeuta-lodz/).
   Pozostale landingi zostaja jednoekranowe i pytania nie dostaja. */
.sp-lp-form:not(.sp-lp-form--kreator) .sp-cf7-step[data-sp-cf7-step="1"] {
    display: none;
}

.sp-lp-form .sp-cf7-step {
    grid-template-columns: minmax(0, 1fr);
}

.sp-lp-form .sp-cf7-step-num {
    display: none;
}

/* Naprawa `<p>` w akcjach ozywia `margin-left: auto` na przycisku wysylki. Na
   /kontakt/ to jest sens tej reguly — rozsuwa „Wstecz" i „Wyslij" na krawedzie.
   Tutaj przycisk jest jeden, wiec auto zepchneloby go na prawa strone i CTA
   landingu zmienialoby polozenie przy okazji naprawy mechaniki. Landingi to
   sciezka platnego ruchu; ich wyglad zostaje taki, jaki byl. */
.sp-lp-form .wpcf7-submit {
    margin-left: 0;
}

.sp-lp-quick--form {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--color-paper-deeper);
}

@media (max-width: 768px) {
    .sp-lp-form { padding: 56px 0; }
    .sp-lp-form-head { margin-bottom: 24px; }

    /* Na telefonie numer ma byc pierwszym wyborem, nie przypisem. Etykieta
       schodzi do wlasnej linii — inaczej "WhatsApp" laduje samotnie pod
       numerem i cala linijka wyglada na przypadkowa (zmierzone na 375px). */
    .sp-lp-quick { font-size: 14px; row-gap: 0; }
    .sp-lp-quick-label { flex-basis: 100%; }
    /* 44px to minimalny cel dotykowy — przy 8px paddingu wychodzilo 41px. */
    .sp-lp-quick-link { padding: 11px 0; }
}

/* Przyciski banera CookieYes — tekst wychodzil poza ramke (wygladalo jak
   przekreslenie). Przyczyna: przyciski sa flex-itemami w kolumnie i CookieYes
   ustawia im `min-height: 0`, wiec flex sciskal je do 28px przy 24px line-height
   i 24px paddingu. Zmierzone na 375px 2026-07-25: 28px wysokosci, scrollHeight 40.
   Naprawiamy sama minimalna wysokosc (44px = cel dotykowy) — bez ruszania
   flex-basis/grow, zeby nie zmienic ukladu przyciskow na szerokich ekranach. */
.cky-notice-btn-wrapper .cky-btn.cky-btn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.25 !important;
}