/* cmplz-general */
.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}
/* mdm-fonts */
/* Lokalne pliki Google Fonts: Instrument Serif i Montserrat (OFL).
   Polskie litery (ĄąĆćĘꣳŃńŚśŹźŻż) mają własne małe pliki *-polskie-znaki.woff2, wycięte z latin-ext
   (OSTATECZNY-AUDYT S2, 25.10.2026: Montserrat 70 → 7 KB). Pełny latin-ext zostaje tylko dla innych
   znaków rozszerzonej łaciny i pobiera się wyłącznie na stronie, która ich użyje. Zakresy unicode-range
   się nie nakładają — przy zmianie zestawu znaków poprawić oba. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/instrument-serif-regular-polskie-znaki.woff2") format("woff2");
  unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/instrument-serif-regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0103, U+0108-0117, U+011A-0140, U+0145-0159, U+015C-0178, U+017D-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/instrument-serif-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/instrument-serif-italic-polskie-znaki.woff2") format("woff2");
  unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0103, U+0108-0117, U+011A-0140, U+0145-0159, U+015C-0178, U+017D-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/montserrat-polskie-znaki.woff2") format("woff2");
  unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0103, U+0108-0117, U+011A-0140, U+0145-0159, U+015C-0178, U+017D-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/wp-content/themes/mdm-mentoring/assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* mdm-tokens */
/* MDM Mentoring Wizerunkowy — shared design tokens (see /DESIGN.md).
   Google Fonts (Instrument Serif + Montserrat) are loaded via
   <link rel="preconnect"> + <link rel="stylesheet"> in each page's
   <head> — not via @import here — so the request starts immediately
   in parallel with the rest of the page instead of waiting for this
   file to be fetched and parsed first. */

/* Fonty zastępcze dopasowane do szerokości właściwych krojów. Google Fonts
   ładuje się z display=swap, więc przez chwilę strona rysuje się fontem
   systemowym — Georgia jest ~30% szersza od wąskiego Instrument Serif, a
   Arial ~11% węższy od Montserrata, przez co nagłówki „skakały” z dużych na
   właściwe. size-adjust skaluje font zastępczy do tej samej szerokości
   (zmierzone w przeglądarce na „Zacznij zmianę na swoich zasadach”). */
@font-face{ font-family:'Instrument Serif Fallback'; font-style:normal; src:local('Georgia'); size-adjust:77%; }
@font-face{ font-family:'Instrument Serif Fallback'; font-style:italic; src:local('Georgia Italic'), local('Georgia-Italic'); size-adjust:89.7%; }
@font-face{ font-family:'Montserrat Fallback'; src:local('Arial'), local('ArialMT'); size-adjust:112.7%; }

:root{
  /* color */
  --canvas:#F7F5F0;
  --surface:#FFFFFF;
  --ink:#17120F;
  --muted:#726B63;
  --muted-on-blush:#655C53; /* darker than --muted, keeps ≥4.5:1 on --blush specifically */
  --border:#DEDACF;
  --field-border:#8A8278; /* form-field outlines: ≥3:1 on --surface and --canvas (WCAG 1.4.11, audit c2) */
  --burgundy:#5C0017;
  --burgundy-dark:#5C0017;
  --blush:#F5E9E6; /* light burgundy-tinted ground for the illustration-led hero */
  --olive:#36482E; /* minor/decorative accent only — small tags, illustration tint washes */
  --olive-tint:#EDEFE7;
  --navy:#000E21; /* minor/decorative accent only — never a full section background */
  --maroon:#430808;
  --cream-on-dark:#F4F1EA;

  /* type */
  --font-display:'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:Montserrat, 'Montserrat Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --size-hero: clamp(3.25rem, 7vw, 7.5rem);
  --size-section-heading:clamp(2.7rem, 5.2vw, 5.6rem);
  --size-h2: clamp(2.25rem, 4vw, 4rem);
  --size-h3: clamp(1.5rem, 2.5vw, 2.5rem);
  --size-h4: 1.625rem;
  --size-lead: 1.25rem;
  --size-body: 1rem;
  --size-small: 0.8125rem;
  --size-label: 0.75rem;
  --size-kicker:.75rem;
  --weight-kicker:600;
  --tracking-kicker:.14em;
  --gap-kicker:clamp(18px, 2vw, 26px);

  /* spacing */
  --space-xs:8px;
  --space-s:16px;
  --space-m:24px;
  --space-l:40px;
  --space-xl:64px;
  --space-2xl:96px;
  --space-3xl:128px;
  --space-4xl:160px;
  --section-pad: clamp(96px, 10vw, 180px);
  --page-pad: clamp(20px, 5vw, 64px);
  --frame-padding: 10px; /* biała rama wokół zdjęć w bordowych blokach — ujednolicona z hero (v1-hero-blaed) */
  --container-max: 1280px;
  --canvas-max: 1440px;
  /* Przyklejone menu: wysokość paska (kotwice lądują pod nim, patrz html). */
  --nav-height: 68px;
  /* Wyjście bloku spod krawędzi ekranu: bordowe prostokąty za zdjęciami
     zaczynają się przy samej krawędzi, nie przy marginesie strony —
     left/right: var(--bleed-x), a szerokość powiększona o var(--page-pad),
     żeby druga krawędź została na miejscu (DESIGN.md → Bleed). */
  --bleed-x: calc(-1 * var(--page-pad));

  /* motion */
  --ease-editorial: cubic-bezier(.22,1,.36,1);
  --dur-reveal: 700ms;
}

/* Polskie łamanie wierszy: dociążamy silnik przeglądarki, nie tylko JS
   (patrz shared.js) — text-wrap jest opt-in i cofa się bez efektu w
   przeglądarkach, które go nie znają. */
h1, h2, h3, h4, h5, h6{ text-wrap: balance; }
p{ text-wrap: pretty; }

*, *::before, *::after{ box-sizing:border-box; }
html{
  width:100%;
  max-width:100%;
  overscroll-behavior-x:none;
  scroll-behavior:smooth;
  /* Kotwice (#formularz, #porownanie…) lądują pod przyklejonym menu
     (68px) z 16px zapasu — wcześniej początek sekcji chował się pod
     menu (krok 1.11, E1). Jedna reguła dla wszystkich stron. */
  scroll-padding-top:calc(var(--nav-height) + 16px);
}
/* Tekst tylko dla czytników ekranu (np. „otwiera się w nowej karcie”,
   krok 1.11, D3) — niewidoczny, ale czytany. .screen-reader-text to ta sama klasa w konwencji
   WordPressa — używają jej wtyczki (np. Complianz w polityce cookies, 9.7c: bez niej tekst
   „Zgoda na usługę…” był widoczny i ściśnięty do kolumny szerokiej na literę). */
.sr-only,
.screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
body{
  margin:0;
  width:100%;
  max-width:100%;
  /* clip zamiast hidden, i tylko na body (nie html) — dwa "overflow inne
     niż visible" na obu robiły z body kontener przewijania, więc
     position:sticky (np. przyklejone menu) nie miał się do czego
     przykleić (audyt responsywności, sh-1). */
  overflow-x:clip;
  overscroll-behavior-x:none;
  position:relative;
  touch-action:pan-y pinch-zoom;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* viewport-fit=cover (meta viewport, wszystkie strony) każe stronie
     rysować się pod wycięciem/zaokrągleniem ekranu, ale bez tego nikt nie
     odsuwał treści od bezpiecznej strefy (audyt responsywności, sh-6).
     Padding na body — nie na --page-pad — żeby nie dotykać kalkulacji
     opartych na tym tokenie w dziesiątkach sekcji. env() to 0 na
     urządzeniach bez wycięcia, więc bez zmiany wyglądu gdzie indziej. */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
body > *{ max-width:100%; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--burgundy); color:var(--cream-on-dark); }

/* focus ring, themed not browser-default. Dwukolorowy: bordowy obrys widać na
   jasnych sekcjach, kremowa poświata (box-shadow) dodaje kontrast na bordowych/
   granatowych/oliwkowych tłach, gdzie samo bordo ma ~1:1 (WCAG c1). */
:focus-visible{
  outline:2px solid var(--burgundy);
  outline-offset:3px;
  box-shadow:0 0 0 5px var(--cream-on-dark);
}

/* scrollbar, themed (webkit) */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--canvas); }
::-webkit-scrollbar-thumb{ background:var(--border); border:3px solid var(--canvas); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--page-pad);
}

.canvas-bleed{
  max-width:var(--canvas-max);
  margin-inline:auto;
}

.section{ padding-block:var(--section-pad); }
.section--tight{ padding-block: calc(var(--section-pad) * 0.6); }

/* Dark sections stay in the burgundy family — burgundy is the site's main
   color besides the canvas, so navy/olive never carry a full section. */
.section--dark{
  background:var(--burgundy-dark);
  color:var(--cream-on-dark);
}
.section--deepest{
  background:var(--maroon);
  color:var(--cream-on-dark);
}
.section--olive{
  background:var(--olive-tint);
}
.section--blush{
  background:var(--blush);
}

/* Explicitly labeled placeholder for imagery/icons not present in the asset
   folder — dashed frame + a caption naming what real content belongs here. */
.placeholder-asset{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px dashed var(--burgundy);
  background:var(--olive-tint);
  color:var(--muted);
  padding:var(--space-l);
  min-height:100%;
}
.placeholder-asset__label{
  font-family:var(--font-sans);
  font-size:var(--size-small);
  line-height:1.5;
  max-width:26ch;
}
.placeholder-asset__label strong{
  display:block;
  color:var(--burgundy);
  font-size:var(--size-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.hr{
  border:none;
  border-top:1px solid var(--border);
  margin:0;
}
.section--dark .hr, .section--deepest .hr{
  border-top-color:rgba(244,241,234,.22);
}

/* type */
.display-hero{
  font-family:var(--font-display);
  font-size:var(--size-hero);
  font-weight:400;
  line-height:.92;
  letter-spacing:-0.02em;
  margin:0;
}
h2, .h2{
  font-family:var(--font-display);
  font-size:var(--size-h2);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-0.015em;
  margin:0;
}
h3, .h3{
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0;
}
h4, .h4{
  font-family:var(--font-sans);
  font-size:var(--size-h4);
  font-weight:500;
  line-height:1.2;
  margin:0;
}
.lead{
  font-size:var(--size-lead);
  line-height:1.45;
  color:var(--muted);
  max-width:62ch;
  margin:0;
}
.section--dark .lead, .section--deepest .lead{ color:rgba(244,241,234,.78); }

p{ max-width:70ch; margin:0; }
.small{ font-size:var(--size-small); color:var(--muted); }
.label{
  font-family:var(--font-sans);
  font-size:var(--size-label);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
/* --muted at .small/.label size fails contrast on the burgundy-family dark
   sections (~3.1:1) — route both to the same lighter treatment .lead already gets. */
.section--dark .small, .section--deepest .small,
.section--dark .label, .section--deepest .label{ color:rgba(244,241,234,.7); }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:50px;
  padding-inline:28px;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:1px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .25s var(--ease-editorial), color .25s var(--ease-editorial), border-color .25s var(--ease-editorial), transform .25s var(--ease-editorial), box-shadow .25s var(--ease-editorial);
}
.btn-primary{
  background:var(--burgundy);
  color:var(--cream-on-dark);
}
.btn-primary:hover{ background:var(--burgundy-dark); transform:translateY(-2px); box-shadow:0 14px 28px rgba(92,0,23,.24); }
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover{ transform:none; }
}
.btn-outline{
  background:transparent;
  border-color:currentColor;
  color:var(--ink);
}
.section--dark .btn-outline, .section--deepest .btn-outline{ color:var(--cream-on-dark); }
.btn-outline:hover{ background:rgba(23,18,15,.06); }
.section--dark .btn-outline:hover, .section--deepest .btn-outline:hover{ background:rgba(244,241,234,.1); }

.btn-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--burgundy);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:gap .25s var(--ease-editorial);
}
.btn-link:hover{ gap:12px; }
.btn-link svg{ width:14px; height:14px; }

/* small numeral label prefixing an item in a short list (e.g. "01" before
   a situation/step). Distinct from any large display-numeral component:
   this is a quiet inline index, not a headline element. */
.list-index{
  display:block;
  font-size:.75rem;
  margin-bottom:8px;
  opacity:.45;
  letter-spacing:.08em;
}

/* nav */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  padding-inline:var(--page-pad);
}
.site-nav__logo img{ height:26px; width:auto; }
.site-nav__links{
  display:flex;
  gap:var(--space-l);
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav__links a{
  font-family:Montserrat, 'Montserrat Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:var(--size-label);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  transition:color .2s var(--ease-editorial);
}
.site-nav__links a:hover{ color:var(--burgundy); }
.nav--on-dark .site-nav__links a,
.nav--on-dark .site-nav__logo img{ color:var(--cream-on-dark); }
.nav--on-dark .site-nav__links a:hover{ color:rgba(244,241,234,.7); }
.nav--on-dark .site-nav__logo img{ filter:invert(1); }
.site-nav__cta{ display:flex; align-items:center; gap:var(--space-s); }

/* .site-nav--centered: opt-in modifier that centers the link list in the
   bar instead of splitting logo/links/cta with space-between. Extracted
   from a local override in v1-hero-blaed.html. */
.site-nav--centered{ position:relative; }
.site-nav--centered .site-nav__links{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
/* Nad progiem hamburgera (>860px) lista nie może się łamać do 2-3 linii —
   "Warsztaty dla firm i instytucji" jest za długie na sztywny odstęp bez
   nowrap (WCAG/responsywność nav2). */
@media (min-width:861px){
  .site-nav--centered .site-nav__links{ width:max-content; max-width:none; }
  .site-nav--centered .site-nav__links a{ white-space:nowrap; }
}

/* mobile nav toggle — hidden on desktop, replaces the links list below 860px */
.site-nav__toggle{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--border);
  cursor:pointer;
  color:var(--ink);
}
.nav--on-dark .site-nav__toggle{ color:var(--cream-on-dark); border-color:rgba(244,241,234,.35); }

@media (max-width: 860px){
  .site-nav__toggle{ display:inline-flex; }
  /* Selektor zdublowany z ".site-nav--centered .site-nav__links" (ta sama
     specyficzność 0,2,0, ale niżej w pliku) — inaczej position:absolute i
     left:50% wariantu "centered" wygrywały nad position:fixed/inset tutaj,
     więc panel na telefonie/tablecie wychodził wyśrodkowany i wąski zamiast
     pełnej szerokości (nav3). Style ujednolicone dla wszystkich 5 stron —
     wcześniej tylko o-mnie.html miał tę wersję lokalnie. */
  .site-nav--centered .site-nav__links,
  .site-nav__links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-m);
    position:fixed;
    left:var(--page-pad);
    right:var(--page-pad);
    top:88px;
    bottom:auto;
    transform:translateY(-12px);
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:0 20px 40px rgba(23,18,15,.14);
    padding:var(--space-l);
    z-index:60;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s var(--ease-editorial), transform .2s var(--ease-editorial), visibility 0s linear .2s;
  }
  .site-nav--centered .site-nav__links a,
  .site-nav__links a{ display:block; width:100%; padding:12px 2px; border-top:1px solid var(--border); }
  .site-nav--centered .site-nav__links li:first-child a,
  .site-nav__links li:first-child a{ border-top:0; }
  .site-nav--centered .site-nav__links.is-open,
  .site-nav__links.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    transition:opacity .2s var(--ease-editorial), transform .2s var(--ease-editorial), visibility 0s linear 0s;
  }
  .site-nav__toggle[aria-expanded="true"]{ background:var(--burgundy); color:var(--cream-on-dark); border-color:var(--burgundy); }
}

/* CTA „Umów bezpłatną konsultację” w przyklejonym menu — jedno źródło
   stylu dla wszystkich 5 stron (ten sam znacznik w każdym <nav>, bez
   lokalnych nadpisań). Dwa elementy, bo na desktopie to przycisk po
   prawej stronie paska, a przy hamburgerze (≤860px) pozycja na końcu
   rozwijanej listy — pokazywany jest zawsze najwyżej jeden z nich.
   Selektory z prefiksem .site-nav (swoistość 0,2,0), bo lokalne .btn
   stron (np. oferta.html: inna czcionka, min-height, display) stoją w
   kaskadzie po tokens.css i przy 0,1,0 nadpisałyby wygląd i ukrywanie.
   margin-left:auto dosuwa przycisk do prawej także na stronie głównej,
   gdzie pasek nie ma logo (space-between z jednym elementem zostawiłby
   go po lewej). */
.site-nav .site-nav__cta-btn{
  margin-left:auto;
  height:40px;
  min-height:0;
  padding:0 20px;
  gap:10px;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  white-space:nowrap;
  border:1px solid var(--burgundy);
  border-radius:1px;
  background:var(--burgundy);
  color:var(--cream-on-dark);
  box-shadow:none;
  transform:none;
}
/* hover jak .btn-primary z tokens.css (lokalne .btn:hover stron ma inny) */
.site-nav .site-nav__cta-btn:hover{
  background:var(--burgundy-dark);
  border-color:var(--burgundy-dark);
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(92,0,23,.24);
}
@media (prefers-reduced-motion: reduce){
  .site-nav .site-nav__cta-btn:hover{ transform:none; }
}
.site-nav .site-nav__links-cta{ display:none; }
/* Miejsce w pasku (zmierzone 22.09.2026): linki 708px, przycisk 275px,
   logo 166px. Wyśrodkowane linki + przycisk mieszczą się od ~1440px
   (zapas → próg 1480). Niżej linki wracają do przepływu (logo → linki →
   przycisk) z ciaśniejszym odstępem — mieści się od ~1260px (zapas → 1300).
   Poniżej 1300px pasek nie ma miejsca na logo, 5 linków i przycisk naraz,
   więc do progu hamburgera przycisk jest schowany (CTA zostają w treści
   stron); od 860px w dół wraca jako pozycja w rozwijanym menu. */
@media (min-width:1300px) and (max-width:1479px){
  .site-nav--centered .site-nav__links{
    position:static;
    transform:none;
    margin-inline:auto;
    gap:24px;
  }
  /* bez trzeciego auto-marginesu linki stoją na środku między logo
     (lub lewą krawędzią na stronie głównej) a przyciskiem */
  .site-nav .site-nav__cta-btn{ margin-left:0; }
}
@media (max-width:1299px){
  .site-nav .site-nav__cta-btn{ display:none; }
}
@media (max-width:860px){
  /* separatory wszystkich pozycji na szerokość najdłuższej („Warsztaty dla
     firm i instytucji”): jedna kolumna max-content wyrównuje szerokość
     <li>; CTA rozpina się też na kolumnę 1fr, więc nie wlicza się do
     max-content i zostaje swojej szerokości (justify-self:start) */
  .site-nav--centered .site-nav__links,
  .site-nav__links{ display:grid; grid-template-columns:max-content 1fr; justify-items:stretch; align-content:start; }
  .site-nav__links > li{ grid-column:1; }
  .site-nav .site-nav__links .site-nav__links-cta{ grid-column:1 / -1; justify-self:start; }
  .site-nav .site-nav__links .site-nav__links-cta{ display:block; margin-top:var(--space-s); }
  .site-nav .site-nav__links .site-nav__links-cta a{
    justify-content:center;
    padding:14px 20px;
    border:0;
    background:var(--burgundy);
    color:var(--cream-on-dark);
    text-align:center;
  }
  .site-nav .site-nav__links .site-nav__links-cta a:hover{ color:var(--cream-on-dark); background:var(--burgundy-dark); }
}

/* Przyklejone menu główne (na życzenie, po audycie responsywności — nav5:
   strony są długie, 8-14 tys. px na telefonie, powrót do menu wymagał
   przewinięcia na sam początek). Rozmyte, półprzezroczyste tło działa nad
   dowolną treścią scrollującą pod spodem, bez dobierania koloru osobno dla
   każdej strony. Dotyczy 4 stron z gołym <header> (kontakt, oferta,
   warsztaty, o-mnie) — v1-hero-blaed.html ma nawigację wbudowaną w hero,
   więc przykleja ją lokalnie: position:fixed na desktopie, sticky na
   telefonie/tablecie (≤900px), gdzie <header> wraca do normalnego
   przepływu — patrz lokalne style w tym pliku. */
header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(247,245,240,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
@media (prefers-reduced-motion: no-preference){
  header{ transition:box-shadow .25s ease; }
}

/* skip-to-content link, visible only on keyboard focus */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--burgundy);
  color:var(--cream-on-dark);
  padding:14px 22px;
  font-size:var(--size-small);
  text-decoration:none;
}
.skip-link:focus{
  left:var(--page-pad);
  top:var(--space-s);
}

/* fashion card */
.fashion-card{ display:flex; flex-direction:column; }
.fashion-card__media{
  aspect-ratio: 4 / 5;
  overflow:hidden;
  background:var(--olive-tint);
}
.fashion-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-editorial); }
.fashion-card:hover .fashion-card__media img{ transform:scale(1.025); }
.fashion-card__label{
  margin-top:20px;
  font-size:var(--size-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--burgundy);
}
.fashion-card__title{
  margin-top:8px;
  font-family:var(--font-display);
  font-size:1.5rem;
}
.fashion-card__desc{
  margin-top:10px;
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.55;
}

/* decorative illustration watermark — for dekoracja-*.png used behind a
   section, never as literal card/content imagery */
.deco-watermark{
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.14;
  filter:grayscale(1);
}
.section--dark .deco-watermark, .section--deepest .deco-watermark{
  opacity:.16;
  filter:grayscale(1) brightness(3);
}

/* Wspólny system ruchu podstron. Elementy pozostają widoczne bez JS;
   stan początkowy jest włączany dopiero po przypisaniu całej sekwencji. */
html.mdm-motion-ready [data-mdm-motion]{
  --mdm-delay:0ms;
  opacity:0;
  transition:
    opacity .62s var(--ease-editorial) var(--mdm-delay),
    transform .74s var(--ease-editorial) var(--mdm-delay),
    clip-path .78s var(--ease-editorial) var(--mdm-delay),
    filter .62s var(--ease-editorial) var(--mdm-delay);
  will-change:opacity,transform,clip-path;
}
html.mdm-motion-ready [data-mdm-motion="rise"]{transform:translate3d(0,30px,0);filter:blur(2px)}
html.mdm-motion-ready [data-mdm-motion="left"]{transform:translate3d(-34px,0,0)}
html.mdm-motion-ready [data-mdm-motion="right"]{transform:translate3d(34px,0,0)}
html.mdm-motion-ready [data-mdm-motion="wipe"]{clip-path:inset(0 100% 0 0);transform:translate3d(-10px,0,0)}
/* to samo odsłonięcie, ale od prawej do lewej — dla bloków wychodzących
   spod prawej krawędzi ekranu (np. rozdziały „O mnie” bez --flip) */
html.mdm-motion-ready [data-mdm-motion="wipe-rtl"]{clip-path:inset(0 0 0 100%);transform:translate3d(10px,0,0)}
/* Maska nagłówka ma zapas na boki i w pionie: kursywa Instrument Serif
   wystaje ostatnią literą poza ramkę elementu (np. „zasadach” w ofercie)
   i przy inset(0) była ucinana, dopóki skrypt nie zdjął animacji (~1,45 s). */
html.mdm-motion-ready [data-mdm-motion="headline"]{clip-path:inset(0 -1em 100% -1em);transform:translate3d(0,22px,0)}
/* Proste pojawienie się bez przesunięcia, skali, maski ani filtra. */
html.mdm-motion-ready [data-mdm-motion="fade"]{opacity:0}
html.mdm-motion-ready [data-mdm-motion="frame"]{clip-path:inset(7%);transform:scale(.95);filter:saturate(.78)}
html.mdm-motion-ready [data-mdm-motion="grow"]{transform:translate3d(0,20px,0) scaleY(.86);transform-origin:top center}
html.mdm-motion-ready .is-mdm-visible [data-mdm-motion]{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  /* bez przycinania: rise/left/right/grow nie używają clip-path, a inset(0)
     ucinało wszystko, co wystaje poza element — np. bordowy blok wychodzący
     spod krawędzi ekranu (kontakt „Ważne informacje”) miał 20px marginesu,
     dopóki skrypt nie zdjął animacji (~1,45 s) */
  clip-path:none;
  filter:none;
}
/* przycinanie zostaje tylko tam, gdzie animacja go używa */
html.mdm-motion-ready .is-mdm-visible [data-mdm-motion="wipe"],
html.mdm-motion-ready .is-mdm-visible [data-mdm-motion="wipe-rtl"],
html.mdm-motion-ready .is-mdm-visible [data-mdm-motion="frame"]{ clip-path:inset(0); }
html.mdm-motion-ready .is-mdm-visible [data-mdm-motion="headline"]{clip-path:inset(-.25em -1em -.25em -1em)}
/* sekcja odsłonięta fokusem z klawiatury — od razu, bez przejścia (8.2) */
html.mdm-motion-ready .is-mdm-instant [data-mdm-motion]{transition:none}
@media(prefers-reduced-motion:reduce){
  html.mdm-motion-ready [data-mdm-motion]{opacity:1;transform:none;clip-path:none;filter:none;transition:none}
}

/* ============================================================
   FOOTER — jedno zrodlo dla wszystkich 5 podstron (wczesniej ten sam
   blok byl kopiowany do <style> kazdej strony).
   Kolejnosc regul jest istotna: `.site-footer a` (0,1,1) stoi przed
   `__contact a` / `__nav a` / `__bottom a` o tej samej specyficznosci,
   zeby te ostatnie nadpisywaly przejscia.
   ============================================================ */
.site-footer{
  position:relative;
  overflow:hidden;
  background:var(--burgundy-dark);
  color:var(--cream-on-dark);
  padding:clamp(96px, 8vw, 140px) var(--page-pad) 28px;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  right:clamp(28px, 6vw, 96px);
  width:clamp(120px, 16vw, 240px);
  height:1px;
  background:rgba(244,241,234,.7);
}
.site-footer a{ text-decoration:none; transition:opacity .2s var(--ease-editorial); }
.site-footer a:hover{ opacity:.7; }
.site-footer__grid{
  position:relative;
  display:grid;
  /* Kolumny boczne rowne (1fr), menu w srodku (auto) — menu stoi na osi
     strony, a nie przesuniete w prawo. Szerokosc jak tresc sekcji: cala
     szerokosc minus --page-pad (bez dawnego limitu 1440px). */
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  gap:clamp(48px, 7vw, 112px);
  /* Kolumny rozciagniete do wspolnej wysokosci, a tresc kazdej rozlozona
     od gory do dolu — gorne i dolne krawedzie trzech kolumn sa w linii. */
  align-items:stretch;
}
.site-footer__brand,
.site-footer__close{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }
.site-footer__brand{ max-width:540px; }
.site-footer__logo{ display:block; width:min(100%, 360px); height:auto; filter:invert(1); }
.site-footer__contact{
  display:grid;
  gap:9px;
  margin:28px 0 0;
  color:rgba(244,241,234,.74);
  font-family:var(--font-sans);
  font-size:.94rem;
  line-height:1.5;
}
.site-footer__contact a{
  width:max-content;
  color:var(--cream-on-dark);
  text-decoration:none;
  border-bottom:1px solid rgba(244,241,234,.38);
  transition:border-color .25s ease, color .25s ease;
}
.site-footer__contact a:hover{ border-color:var(--cream-on-dark); }
.site-footer__contact a:focus-visible,
.site-footer__cta:focus-visible,
.site-footer__bottom a:focus-visible{
  outline:2px solid var(--cream-on-dark);
  outline-offset:6px;
}
.site-footer__socials{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:28px; }
.site-footer__social{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--cream-on-dark);
  font-family:var(--font-sans);
  font-size:.94rem;
  line-height:1.5;
  text-decoration:none;
}
.site-footer__social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:46px;
  height:46px;
  border:1px solid rgba(244,241,234,.34);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.site-footer__social:hover{ opacity:1; }
.site-footer__social:hover .site-footer__social-icon,
.site-footer__social:focus-visible .site-footer__social-icon{
  background:var(--cream-on-dark);
  color:var(--burgundy-dark);
  border-color:var(--cream-on-dark);
}
.site-footer__social:focus-visible{ outline:2px solid var(--cream-on-dark); outline-offset:6px; }
.site-footer__social svg{ width:20px; height:20px; }
.site-footer__nav{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:0; margin-block:-11px; /* padding linkow nie odsuwa tekstu od krawedzi kolumny */ }
.site-footer__nav a{
  position:relative;
  padding-block:11px; /* linki miały tylko 15px wysokości (WCAG 2.5.8);
    gap na .site-footer__nav skasowany, żeby padding nie podwoił odstępu
    (audyt responsywności, ty-1). */
  color:var(--cream-on-dark);
  font-family:var(--font-sans);
  font-size:.77rem;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.25;
  text-decoration:none;
  text-transform:uppercase;
}
.site-footer__nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-6px;
  height:1px;
  background:currentColor;
  transition:right .3s cubic-bezier(.22,1,.36,1);
}
.site-footer__nav a:hover::after,
.site-footer__nav a:focus-visible::after{ right:0; }
.site-footer__close{ justify-self:end; }
.site-footer__close-title{
  margin:0 0 20px;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:clamp(2rem, 3vw, 3.5rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.03em;
}
.site-footer__close-copy{
  max-width:36ch;
  margin:0 0 28px;
  color:rgba(244,241,234,.72);
  font-family:var(--font-sans);
  font-size:.95rem;
  line-height:1.6;
}
.site-footer__cta{
  display:inline-flex;
  align-items:center;
  gap:22px;
  padding:15px 0 11px;
  color:var(--cream-on-dark);
  border-bottom:1px solid rgba(244,241,234,.65);
  font-family:var(--font-sans);
  font-size:.76rem;
  font-weight:650;
  letter-spacing:.09em;
  text-decoration:none;
  text-transform:uppercase;
  transition:gap .3s cubic-bezier(.22,1,.36,1), border-color .25s ease;
}
.site-footer__cta:hover{ gap:32px; border-color:var(--cream-on-dark); }
.site-footer__cta svg{ width:18px; height:18px; }
.site-footer__bottom{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  margin:clamp(64px, 8vw, 112px) 0 0;
  padding-top:22px;
  border-top:1px solid rgba(244,241,234,.2);
  color:rgba(244,241,234,.72);
  font-family:var(--font-sans);
  font-size:.75rem; /* było .72rem (11,52px) — poniżej minimum 12px (audyt
    responsywności, ty-5); dotyczy stopki wszystkich 5 stron. */
  letter-spacing:.04em;
}
.site-footer__legal{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
/* Polityka prywatności, Cookies i Ustawienia cookies jako jedna grupa przy prawej krawędzi
   (25.10.2026: przycisk ustawień spadał do nowego wiersza na środek). */
.site-footer__links{
  grid-column:-2 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:12px 28px;
}
.site-footer__bottom a{ color:inherit; text-underline-offset:4px; transition:color .25s ease; }
.site-footer__bottom a:hover{ color:var(--cream-on-dark); }
/* Do 1199px trzy kolumny nie mieszcza tytulu „Zacznijmy od rozmowy.”
   w jednej linii — przechodzimy na dwie (marka nad menu + zamkniecie). */
@media (max-width:1199px){
  .site-footer__grid{ grid-template-columns:1fr 1fr; gap:56px 32px; }
  .site-footer__close{ justify-self:start; }
  .site-footer__brand{ grid-column:1 / -1; }
  .site-footer__logo{ width:min(100%, 310px); }
  .site-footer__bottom{ grid-template-columns:1fr auto; }
  .site-footer__legal{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .site-footer{ padding-top:56px; }
  .site-footer__grid{ grid-template-columns:1fr; gap:52px; }
  .site-footer__brand{ grid-column:auto; }
  .site-footer__close-title{ white-space:normal; }
  .site-footer__bottom{ grid-template-columns:1fr; gap:12px; margin-top:64px; }
  .site-footer__legal{ grid-column:auto; }
}
@media (max-width:767px){
  .site-footer__links{ justify-content:flex-start; }
}
.cookie-note{
  position:fixed;
  left:var(--page-pad);
  right:var(--page-pad);
  bottom:var(--space-m);
  max-width:640px;
  background:var(--ink);
  color:var(--cream-on-dark);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:16px;
  z-index:40;
  font-size:.875rem;
}
.cookie-note button{
  flex-shrink:0;
}

@media (max-width: 640px){
  .container{ padding-inline:var(--page-pad); }
}

/* mdm-components */
/* Wspólne komponenty wydzielone ze statycznego projektu. */

/* ============================================================
   OPINIE — jeden komponent dla wszystkich stron (v1, o-mnie, warsztaty).
   Wygląd: sekcja „Głos klientki” z o-mnie (wyśrodkowany cytat, znak
   cudzysłowu, podpis kapitalikami). Jedna opinia naraz; przy kilku —
   automatyczna zmiana z fade, pauza na hover / fokus z klawiatury / po
   rozwinięciu, plus przycisk pauzy i kropki (WCAG 2.2.2). „Czytaj więcej”
   pojawia się tylko, gdy cytat nie mieści się w limicie linii.
   Zachowanie: opinions.js. Markup: [data-opinions] > [data-opinion]…
   ============================================================ */
.opinions{ padding-block:clamp(80px, 8vw, 128px); background:var(--canvas); }
.opinions [hidden]{ display:none !important; }

.opinions__title{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:400;
  color:var(--ink);
}

.opinions__inner{ position:relative; max-width:820px; margin-inline:auto; padding-inline:var(--page-pad); text-align:center; }
.opinions__mark{ display:block; width:32px; height:24px; margin-inline:auto; color:var(--burgundy); opacity:.5; }

/* Wszystkie opinie leżą w jednej komórce siatki: wysokość sekcji = wysokość
   najwyższej, więc zmiana opinii nie przesuwa reszty strony. */
.opinions__stage{ display:grid; margin-top:20px; }
.opinion{
  grid-area:1 / 1;
  margin:0;
  opacity:0;
  visibility:hidden;
  /* wychodząca gaśnie, dopiero potem wchodzi nowa */
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.opinion.is-active{
  opacity:1;
  visibility:visible;
  transition:opacity .6s ease .45s, visibility 0s linear 0s;
}

.opinion__text{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.5rem, 2.2vw, 2rem);
  line-height:1.35;
  color:var(--ink);
  text-wrap:pretty;
}
/* limit linii tylko po uruchomieniu skryptu (bez JS tekst jest pełny) */
.opinions.is-enhanced .opinion__text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  line-clamp:5;
  overflow:hidden;
}
.opinions.is-enhanced .opinion.is-expanded .opinion__text{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}

.opinion__more{
  display:block;
  width:max-content;
  margin-top:16px;
  margin-inline-start:auto;
  margin-inline-end:0;
  padding:6px 2px;
  border:0;
  border-bottom:1px solid currentColor;
  background:none;
  font-family:var(--font-sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--burgundy);
  cursor:pointer;
  transition:color .25s ease;
}
.opinion__more:hover{ color:var(--ink); }

.opinion__cite{
  display:block;
  margin-top:20px;
  font-family:var(--font-sans);
  font-style:normal;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.opinion__more:not([hidden]) + .opinion__cite{ margin-top:14px; }

/* Sterowanie: tylko przy 2+ opiniach */
.opinions__controls{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:36px; }
.opinions__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  border:1px solid var(--border); border-radius:0; background:none;
  color:var(--muted); cursor:pointer;
  transition:color .25s ease, border-color .25s ease;
}
.opinions__toggle:hover{ color:var(--burgundy); border-color:var(--burgundy); }
.opinions__icon{ width:14px; height:14px; }
.opinions__toggle .opinions__icon--play{ display:none; }
.opinions__toggle.is-paused .opinions__icon--pause{ display:none; }
.opinions__toggle.is-paused .opinions__icon--play{ display:block; }

.opinions__dots{ display:flex; align-items:center; }
.opinions__dot{
  position:relative; width:32px; height:32px; padding:0;
  border:0; background:none; cursor:pointer;
}
.opinions__dot::before{
  content:""; position:absolute; left:5px; right:5px; top:50%; height:2px; margin-top:-1px;
  background:var(--border); transition:background-color .3s ease;
}
.opinions__dot:hover::before{ background:var(--muted); }
.opinions__dot[aria-current="true"]::before{ background:var(--burgundy); }

@media (max-width:767px){
  /* Na telefonie opinie zmienia się przesunięciem palca lub kropkami. */
  .opinions__stage{ touch-action:pan-y; }
  .opinions__toggle{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .opinion, .opinion.is-active{ transition:none; }
}

/* Makieta banera cookies. Docelowe zgody i blokowanie skryptów: Complianz. */


/* mdm-page-home */
/* Source: variants/v1-hero-blaed.html */

/* Nagłówki: Switzer -> Instrument Serif. Body/teksty: Switzer -> Montserrat.
     Rozmiary skalowane, nie tylko podmienione 1:1 — Instrument Serif ma
     jedną wagę (400, bez pogrubienia) i cieńszą, delikatną kreskę niż
     Switzer 500, więc same nagłówki dostały ok. +12% do font-size (żeby
     zająć podobną objętość/"ciężar" na stronie, zamiast wizualnie
     "schudnąć"), o połowę mniejszy (mniej ujemny) letter-spacing (ciasny
     tracking dobry dla groteskowego sans zaczyna zlepiać szeryfy) i lekko
     podniesiony line-height. Montserrat w body ma nieco większą wysokość
     x-height/szerokość znaków niż Switzer przy tym samym rozmiarze, więc
     dostał ok. -5% do font-size, żeby objętościowo/w łamaniu wierszy
     wypadł podobnie — line-height i letter-spacing zostały bez zmian
     (różnica między dwoma sansami jest dużo mniejsza niż przy szeryfie).
     To szacunek policzony na podstawie znanych proporcji tych krojów, nie
     sprawdzony wizualnie w przeglądarce — może wymagać doprecyzowania po
     realnym podglądzie. Fonty ładowane raz, centralnie w tokens.css. */

  :root{
    --font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif;
    --font-sans: Montserrat, 'Montserrat Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --hero-light: #F8F6F1;
  }

  /* ============ HERO "BLAED" ============ */
  .hero-blaed{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    background:var(--hero-light);
    display:grid;
    grid-template-columns:55% 45%;
    overflow:hidden;
  }

  .hero-blaed__left{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:var(--nav-height) var(--page-pad) var(--space-2xl);
  }

  /* Nawigacja jest teraz całkowicie niezależna od napisu
     "Mentoring Wizerunkowy". Na desktopie przyklejona do okna (fixed —
     sticky nie zadziała, bo <header> siedzi w .hero-blaed i przykleiłby się
     tylko w obrębie hero), jak na pozostałych stronach; poza przepływem
     tak samo jak wcześniej absolute, więc układ hero się nie zmienia
     (.hero-blaed__left i tak ma padding-top = --nav-height). Tło i rozmycie
     jak w tokens.css dla <header> pozostałych stron. */
  .hero-blaed__topbar{
    position:fixed;
    top:0;
    left:0;
    z-index:80;
    width:100%;
    background:rgba(248,246,241,.86); /* --hero-light */
    display:flex;
    flex-direction:column;
  }

  /* WordPress przy zalogowanym użytkowniku dokłada stały pasek u góry.
     Nagłówek strony musi zaczynać się pod nim, inaczej jego górna część
     zostaje zasłonięta. Dla odwiedzających ta reguła nie działa. */
  body.admin-bar .hero-blaed__topbar{
    top:var(--wp-admin--admin-bar--height, 32px);
  }

  .hero-blaed__topbar .site-nav{
    height:var(--nav-height);
    padding-inline:var(--page-pad);
  }

  .hero-blaed__nav-logo{ display:none; }

  .hero-blaed__topbar .site-nav__links a{
    font-family:var(--font-sans);
  }

  .site-nav__links a[aria-current="page"]{
    color:var(--burgundy);
  }

  /* "Mentoring Wizerunkowy" jest teraz elementem lewej kolumny. */
  .hero-blaed__wordmark{
    display:block;
    width:100%;
    padding:var(--space-s) 0;
    font-family:var(--font-sans);
    font-weight:800;
    font-size:clamp(1.5rem, 4.6vw, 3.5rem);
    line-height:1;
    letter-spacing:0.03em;
    text-align:left;
    text-transform:uppercase;
    color:var(--ink);
    margin:0;
  }

  .hero-blaed__wordmark img{
    display:block;
    width:clamp(240px, 28vw, 420px);
    max-width:100%;
    height:auto;
  }

  /* ---- infinite marquee ticker ---- */
  .hero-blaed__ticker-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:var(--space-s);
    border-top:1px solid var(--border);
  }
  .hero-blaed__ticker-viewport{
    flex:1;
    min-width:0;
    overflow:hidden;
  }
  /* WCAG 2.2.2 k1: pauza na hover/fokus w obrębie taśmy — dla myszy
     i klawiatury; na telefonie pauzę daje dotknięcie taśmy (skrypt niżej).
     Osobny przycisk pauzy/wznów usunięty na życzenie. */
  .hero-blaed__ticker-viewport:hover .hero-blaed__ticker,
  .hero-blaed__ticker-viewport:focus-within .hero-blaed__ticker,
  .hero-blaed__ticker.is-paused{
    animation-play-state:paused;
  }
  .hero-blaed__ticker{
    display:flex;
    width:max-content;
    animation:blaedMarquee 44s linear infinite;
  }

  .hero-blaed__ticker-track{
    display:flex;
    align-items:center;
    gap:10px;
    padding-right:10px;
    flex-shrink:0;
    font-family:var(--font-sans);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    white-space:nowrap;
  }

  .hero-blaed__ticker-track span:nth-child(even){
    opacity:.5;
  }

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

  @media (prefers-reduced-motion: reduce){
    .hero-blaed__ticker{
      animation:none;
    }
  }
  /* Menu mobilne: wzorzec z tokens.css (dopasowana swoistość selektora
     ".site-nav--centered .site-nav__links" w bloku ≤860px) jest teraz
     wspólny dla wszystkich 5 stron — lokalna łatka, która kiedyś tu była,
     stała się zbędna i dublowała regułę (bez stanu is-open/visibility). */
  .site-nav__toggle-icon{ width:22px; height:22px; }
  .site-nav__toggle-icon--close{ display:none; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon--open{ display:none; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon--close{ display:block; }

  @media (max-width:900px){
    .hero-blaed__left{
      padding-top:0;
    }

    /* Topbar zostaje position:fixed jak na desktopie — sticky tu nie
       działał: <header> siedzi w .hero-blaed (overflow:hidden), więc
       przyklejał się tylko w obrębie hero i znikał razem z nim (nav5 —
       przyklejone menu na życzenie). Miejsce, które zajmował w przepływie,
       odtwarza padding-top hero o tej samej, stałej wysokości paska. */
    .hero-blaed{
      padding-top:80px;
    }

    .hero-blaed__topbar .site-nav{
      height:80px;
    }

    .hero-blaed__wordmark{
      padding:var(--space-m) 0 0;
      font-size:clamp(2.25rem, 9vw, 3.5rem);
      text-align:left;
      text-align-last:left;
    }
  }

  /* headline */
  .hero-blaed__headline{
    margin-top:auto;
    margin-bottom:0;
    padding-top:var(--space-2xl);
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(2.5rem, 7.8vw, 7rem);
    line-height:1.02;
    letter-spacing:-0.02em;
    text-transform:uppercase;
    color:var(--ink);
    max-width:13ch;
  }

  .hero-blaed__headline .accent{
    color:var(--burgundy);
  }

  .hero-blaed__actions{
    margin-top:var(--space-l);
    display:flex;
    align-items:stretch;
    gap:var(--space-m);
    flex-wrap:wrap;
  }

  .hero-blaed__actions .btn{
    font-family:var(--font-sans);
  }

  .hero-blaed__secondary-button{
    background:transparent;
    color:var(--burgundy);
    border:0;
    border-bottom:1px solid currentColor;
    border-radius:0;
  }

  .hero-blaed__secondary-button:hover{
    background:transparent;
    color:var(--burgundy-dark);
  }

  .hero-blaed__secondary-button .icon{
    width:14px;
    height:14px;
    transition:transform .25s var(--ease-editorial);
  }

  .hero-blaed__secondary-button:hover .icon{ transform:translateX(4px); }

  /* ten sam bordowy podniesiony hover co reszta głównych CTA na stronie —
     tokens.css samo w sobie zostaje nietknięte (to plik współdzielony z
     innymi wariantami), więc dostrajam tylko lokalnie, dla przycisku
     w hero */
  .hero-blaed__actions .btn-primary{
    transition:background .3s ease, transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s cubic-bezier(.19,1,.22,1);
  }
  .hero-blaed__actions .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(92,0,23,.24);
  }

  @media (prefers-reduced-motion: reduce){
    .hero-blaed__actions .btn-primary:hover{ transform:none; }
  }

  /* Prawa ilustracja: margin-top współdzieli --nav-height z topbarem i
     lewą kolumną, dlatego ilustracja zaczyna się pod menu, razem z lewą
     zawartością. */
  .hero-blaed__right{
    position:relative;
    background:var(--maroon);
    overflow:hidden;
    margin-top:var(--nav-height);
  }

  .hero-blaed__right img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1.2s ease;
  }

  .hero-blaed__right img.is-active{
    opacity:1;
  }

  /* Desktop: całe hero, razem z nawigacją, mieści się dokładnie w jednym
     widoku. Wysokość nie ma sztucznego minimum, które wypychałoby koniec
     sekcji poniżej dolnej krawędzi niższych ekranów. Warunek min-height —
     bez niego telefon w poziomie (np. 932×430) i przypięte pół ekranu na
     laptopie (960×540) dostawały to samo 100svh co desktop, więc treść
     dwóch kolumn (nawigacja, nagłówek, CTA) nie mieściła się w wysokości
     okna i wychodziła poza kadr (audyt responsywności, hero1). */
  @media (min-width:901px) and (min-height:640px){
    .hero-blaed{
      height:100vh;
      height:100svh;
      min-height:0;
    }

    /* Pasek administracyjny WordPressa zajmuje część widoku zalogowanego
       użytkownika. Odejmujemy jego rzeczywistą wysokość, żeby hero nadal
       kończyło się dokładnie przy dolnej krawędzi ekranu. */
    body.admin-bar .hero-blaed{
      height:calc(100vh - var(--wp-admin--admin-bar--height, 32px));
      height:calc(100svh - var(--wp-admin--admin-bar--height, 32px));
    }

    .hero-blaed__left{
      padding-bottom:clamp(32px, 4vh, 48px);
    }

    .hero-blaed__wordmark{
      padding-block:clamp(10px, 1.6vh, 16px);
    }

    .hero-blaed__ticker-row{
      padding-top:clamp(8px, 1.2vh, 12px);
    }

    .hero-blaed__headline{
      padding-top:clamp(20px, 3vh, 34px);
      max-width:min(12ch, calc(100% - clamp(56px, 5vw, 96px)));
      font-size:clamp(3.25rem, min(6.7vw, 11.5vh), 6rem);
      line-height:1.02;
    }

    .hero-blaed__actions{
      margin-top:clamp(16px, 2.5vh, 24px);
    }

  }

  /* 901px+ ale niski ekran (telefon w poziomie ≥ 901px, okno przypięte do
     połowy laptopa) — bez sztywnej wysokości 100svh, żeby dwie kolumny
     hero miały miejsce na treść (audyt responsywności, hero1: CTA i
     rozłożone menu wychodziły poza kadr przy 932×430 i 960×540). */
  @media (min-width:901px) and (max-height:639px){
    .hero-blaed{
      height:auto;
      min-height:0;
    }
    .hero-blaed__left{
      padding-block:clamp(24px, 4vh, 40px);
    }
    .hero-blaed__right{
      min-height:280px;
    }
  }

  @media (max-width:900px){
    .hero-blaed{
      grid-template-columns:1fr;
    }

    .hero-blaed__right{
      height:52vh;
      height:52svh;
      order:-1;
      margin-top:0;
    }

    .hero-blaed__wordmark{
      font-size:clamp(2.75rem, 15vw, 4.5rem);
    }

    .hero-blaed__headline{
      margin-top:var(--space-xl);
      font-size:clamp(2.25rem, 11vw, 4rem);
    }
  }

  /* Hasło jest teraz nagłówkiem h1, więc responsive.css (h1 + !important) nadpisałby
     jego rozmiar na telefonach. Ten override zachowuje dotychczasowy wygląd. */
  @media (max-width:767px){
    .hero-blaed .hero-blaed__headline{
      font-size:clamp(2.25rem, 11vw, 4rem) !important;
      line-height:1.03 !important;
    }
  }

  /* logo w topbarze hero: subtelny hover, dodany lokalnie w tym pliku —
     tokens.css zostaje nietknięty, bo jest współdzielony z innymi wariantami */
  .hero-blaed__topbar .site-nav__logo{ transition:opacity .25s ease; }
  .hero-blaed__topbar .site-nav__logo:hover{ opacity:.7; }

  .icon{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.6;
  }

  /* ============ PROBLEM SECTION ============ */
  .problem{
    background:var(--hero-light);
    padding-block:clamp(56px, 6vw, 96px);
    margin-top:clamp(24px, 4vw, 64px);
  }

  .problem__headline-row{
    padding-inline:var(--page-pad);
  }

  .problem__headline{
    max-width:19ch;
    margin:0;
  }

  .problem__grid{
    margin-top:clamp(28px, 3vw, 48px);
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:var(--space-3xl);
    padding-inline:var(--page-pad);
    align-items:start;
  }

  .problem__left{
    position:relative;
    height:clamp(500px, 42vw, 620px);
  }

  /* navy panel: flush to the column's left edge (lines up with the
     headline above it), stops short of the list column to the right.
     Text sits top-right, clear of the bottom-anchored illustration. */
  .problem__panel{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    max-width:none;
    height:calc(100% - clamp(128px, 9vw, 160px));
    background:var(--burgundy-dark);
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    /* tekst ma stać ciasno w prawym dolnym rogu — tylko 10px odstępu od
       dolnej i prawej krawędzi prostokąta, żeby był lekko oderwany, nie
       przyklejony; góra/lewo bez znaczenia (blok jest zaczepiony w
       prawym dolnym rogu przez flex, więc te dwie wartości go nie ruszają) */
    padding:clamp(32px, 4vw, 64px) 10px 10px clamp(30px, 4.5vw, 76px);
    /* wejście: prostokąt wjeżdża z lewej na scrollu */
    transform:none;
    transition:none;
  }
  .problem.is-revealed .problem__panel{ transform:translateX(0); }

  /* illustration przy lewej krawędzi bordowego prostokąta — left:0 zamiast
     transform, bo transform na tym elemencie jest też używany przez GSAP
     (reveal x:-32 → 0 przy wejściu w viewport, patrz initGsapMotion); dwa
     transformy na tej samej właściwości gryzłyby się ze sobą. */
  .problem__illustration{
    position:absolute;
    left:0;
    bottom:0;
    width:min(650px, 74%);
    height:100%;
    z-index:2;
    pointer-events:none;
    /* wejście: zwykły fade na scrollu */
    opacity:1;
    transition:none;
  }
  .problem.is-revealed .problem__illustration{ opacity:1; }

  .problem__illustration img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:bottom left;
    display:block;
  }

  /* Granatowy akcent: druga warstwa koloru, przesunięta za bordowy blok —
     dokładnie ta rola, jaką --navy ma pełnić w tokens.css ("drobny akcent
     dekoracyjny, nigdy tło całej sekcji"). Wystaje wąskim pasem wzdłuż
     góry i prawej krawędzi bordowego prostokąta; statyczny, bez własnego
     wejścia — nie koliduje z animacją prostokąta/ilustracji nad nim. */
  .problem__navy-accent{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:calc(100% - clamp(128px, 9vw, 160px));
    background:var(--navy);
    z-index:0;
    transform:translate(16px, -16px);
    pointer-events:none;
  }

  .problem__right{
    margin-top:0;
  }

  .problem__list-label{
    margin:0 0 var(--space-m);
    font-family:var(--font-display);
    font-size:clamp(1.5rem, 2.1vw, 2rem);
    font-weight:500;
    line-height:1.15;
    letter-spacing:-.01em;
    color:var(--ink);
  }

  .problem__list{
    list-style:none;
    margin:0;
    padding:0;
  }

  .problem__list li{
    padding-block:clamp(14px, 1.6vw, 22px);
    border-top:1px solid var(--border);
    font-family:var(--font-sans);
    font-weight:500;
    font-size:clamp(.9rem, 1.05vw, 1.15rem);
    line-height:1.35;
    color:var(--ink);
    /* wejście: punkty listy wchodzą jeden po drugim na scrollu */
    opacity:1;
    transform:none;
    transition:none;
  }
  .problem__list li:nth-child(1),
  .problem__list li:nth-child(2),
  .problem__list li:nth-child(3),
  .problem__list li:nth-child(4){ transition-delay:0s; }
  .problem.is-revealed .problem__list li{ opacity:1; transform:translateY(0); }

  .problem__list li:last-child{
    border-bottom:1px solid var(--border);
  }

  @media (max-width:860px){
    .problem__list .desktop-break{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .problem__headline{ color:var(--ink); transform:none; transition:none; }
    .problem__panel,
    .problem__left::before{ transform:none; transition:none; }
    .problem__illustration{ opacity:1; transition:none; }
    .problem__list li{ opacity:1; transform:none; transition:none; }
  }

  @media (max-width:860px){
    .problem__grid{
      grid-template-columns:1fr;
      gap:var(--space-xl);
    }

    .problem__left{
      height:clamp(280px, 68vw, 360px);
    }

    /* mobile: bordowy prostokąt (i granatowy akcent za nim) wychodzi spod
       lewej krawędzi ekranu — cofamy go o --page-pad gridu i o tyle samo
       poszerzamy, prawa krawędź zostaje tam, gdzie była */
    .problem__panel{
      left:var(--bleed-x);
      width:calc(100% + var(--page-pad));
      max-width:none;
      height:88%;
      padding-inline:var(--space-m);
      padding-block-start:var(--space-l);
    }

    .problem__navy-accent{
      left:var(--bleed-x);
      width:calc(100% + var(--page-pad));
      height:88%;
      transform:translate(12px, -12px);
    }

    .problem__illustration{
      width:min(280px, 58%);
      height:112%;
      top:-16px;
      bottom:-16px;
    }

    .problem__right{
      margin-top:var(--space-l);
    }
  }

  /* Desktop: cała sekcja mieści się w jednym widoku laptopa. Obie kolumny
     mają wspólną wysokość, dlatego 25% wysokości listy jest jednocześnie
     dokładną pozycją kreski nad punktem 02 i górą bordowego pola. */
  @media (min-width:861px){
    .problem{
      box-sizing:border-box;
      height:clamp(680px, 100svh, 900px);
      padding-block:clamp(24px, 3vh, 40px);
      display:grid;
      grid-template-rows:auto minmax(0, 1fr);
    }

    .problem__grid{
      min-height:0;
      height:auto;
      margin-top:clamp(18px, 2.5vh, 28px);
      align-items:stretch;
    }

    .problem__left{
      height:auto;
      min-height:0;
    }

    .problem__left::before{
      content:"";
      position:absolute;
      inset:25% 0 0 var(--bleed-x); /* od lewej krawędzi ekranu */
      z-index:1;
      background:var(--burgundy-dark);
      /* to jest FAKTYCZNIE widoczny prostokąt na desktopie (.problem__panel
         staje się przezroczysty niżej — trzyma tylko tekst) — wejście
         musi animować TEN element, inaczej tylko niewidoczny kontener z
         tekstem się przesuwa, a sam prostokąt stoi w miejscu */
      transform:translateX(-60px);
      transition:transform .8s cubic-bezier(.19,1,.22,1);
    }
    .problem.is-revealed .problem__left::before{ transform:translateX(0); }

    .problem__navy-accent{
      inset:25% 0 0 var(--bleed-x);
      width:auto;
      height:auto;
      transform:translate(18px, -18px);
    }

    .problem__panel{
      top:25%;
      bottom:0;
      height:auto;
      z-index:3;
      background:transparent;
    }

    .problem__illustration{
      width:min(590px, 94%);
      height:100%;
    }

    .problem__right{
      height:100%;
      min-height:0;
      display:flex;
      flex-direction:column;
    }

    .problem__list-label{
      flex-shrink:0;
    }

    .problem__list{
      flex:1;
      min-height:0;
      display:grid;
      grid-template-rows:repeat(4, minmax(0, 1fr));
    }

    .problem__list li{
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding-block:clamp(10px, 1.4vh, 18px);
      padding-right:clamp(12px, 3vw, 48px);
      font-size:clamp(.9rem, 1.05vw, 1.15rem);
      line-height:1.28;
      letter-spacing:-.015em;
    }
  }

  /* Wyśrodkowanie linków nawigacji: teraz .site-nav--centered w tokens.css */

  /* ============ SERVICES SECTION (sekcja 3) ============ */
  .services{
    background:var(--hero-light);
    padding-block:clamp(56px, 6vw, 96px);
  }

  .services__headline-row{
    padding-inline:var(--page-pad);
    text-align:center;
  }

  .services__headline{
    margin:0 auto;
    max-width:none;
  }

  .services__headline-line{
    display:block;
  }

  .services__headline .accent{
    color:var(--burgundy);
  }

  .services__grid{
    margin-top:clamp(48px, 6vw, 88px);
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-2xl);
    padding-inline:var(--page-pad);
  }

  .services__col{
    padding-top:var(--space-m);
    border-top:1px solid var(--border);
  }

  .services__col-title{
    margin:0 0 var(--space-s);
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.45rem, 2vw, 1.9rem);
    line-height:1.18;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .services__col-text{
    margin:0;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:clamp(.9rem, 1.05vw, 1.05rem);
    line-height:1.55;
    color:var(--muted);
  }

  @media (max-width:860px){
    .services__headline{
      max-width:12ch;
    }
  }
  /* telefon: nagłówek do lewej (03.10.2026) */
  @media (max-width:767px){
    .services__headline-row{ text-align:left; }
    .services__headline{ margin-left:0; }
  }
  @media (max-width:860px){

    .services__grid{
      grid-template-columns:1fr;
      gap:var(--space-xl);
    }
  }

  @media (min-width:861px){
    .services__headline-line{
      white-space:nowrap;
    }

    .services__grid{
      margin-top:clamp(48px, 6vw, 88px);
      gap:var(--space-2xl);
      padding-inline:var(--page-pad);
    }

    .services__col{
      min-width:0;
      padding-top:clamp(18px, 2vw, 26px);
      border-top:1px solid var(--border);
    }

    .services__col-title{
      max-width:none;
      margin-bottom:clamp(14px, 1.6vw, 22px);
      font-size:clamp(1.35rem, 1.65vw, 1.8rem);
      line-height:1.12;
      letter-spacing:-.025em;
      color:var(--ink);
    }

    .services__col-text{
      max-width:34ch;
      font-size:clamp(1rem, 1.1vw, 1.14rem);
      line-height:1.52;
      color:var(--muted);
    }
  }

  @media (min-width:1100px){
    .services__col-title{
      white-space:nowrap;
    }

  }

  /* ============ TRANSFORM — sekcja 4, wersja scalona z 2 wariantów ============
     Nagłówek zostaje z wariantu A (Sticky Transformation). Ciało sekcji
     jest zbudowane na wzorze pasów z wariantu B (Typographic Runway),
     przełożone na prostszy, naprzemienny układ 4 rzędów wskazany w tej
     turze poprawek. Sylwetka-cutout z wcześniejszej wersji finału zniknęła
     na rzecz 3 prawdziwych zdjęć w białej ramie hero — nie potrzeba już
     tłumaczyć braku narzędzia do wycinania alfa-maski. */
  .transform{ background:var(--hero-light); }

  .transform__photo-frame{
    position:relative;
    background:var(--surface);
    padding:var(--frame-padding);
    box-shadow:0 30px 60px rgba(0,0,0,.28);
  }

  .transform__photo-frame img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    display:block;
  }

  /* Maska pozostaje potrzebna do animacji wejścia, ale jej pole musi
     uwzględniać ogonki i boczne szeryfy Instrument Serif. Padding zwiększa
     obszar przycinania, a ujemny margin zachowuje dotychczasowy rytm linii. */
  .transform__mask{
    overflow:hidden;
    display:block;
    padding:.06em .45em .28em .2em;
    margin:-.06em -.45em -.28em -.2em;
  }
  .transform__mask-inner{ display:block; }

  /* ---- nagłówek (z wariantu A) ---- */
  .transform-a{ position:relative; padding-top:clamp(56px, 6vw, 96px); }

  .transform-a__intro{
    padding-inline:var(--page-pad);
    padding-bottom:clamp(48px, 6vw, 88px);
    display:flex;
    justify-content:flex-start;
  }

  .transform-a__headline{
    margin:0;
    max-width:1280px;
    width:100%;
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(3.9rem, 6vw, 6rem);
    line-height:.96;
    letter-spacing:-.02em;
    text-align:left;
    color:var(--ink);
    padding-right:.22em;
    padding-bottom:.28em;
    margin-right:-.22em;
    margin-bottom:-.28em;
  }

  .transform-a__headline .accent{ color:var(--burgundy-dark); }

  @media (max-width:900px){
    .transform-a__headline{ max-width:100%; font-size:clamp(3rem, 14vw, 4.5rem); }
  }

  /* ---- ciało (na wzorze pasów wariantu B) ---- */
  .transform-b{ position:relative; padding-block:0 clamp(56px, 6vw, 96px); }

  .transform-b__strips{ display:flex; flex-direction:column; }

  /* ---- kroki 01–03: numer w tle | tekst | ilustracja, na przemian ---- */
  .transform-step{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,10fr) minmax(0,45fr) minmax(0,45fr); /* procenty
      nie uwzględniały column-gap — siatka była szersza niż kontener o jego
      wartość i przycinała obraz o 13-17px przy 901-1023px (audyt
      responsywności, v1-2). */
    column-gap:clamp(24px, 3vw, 56px);
    align-items:center;
    min-height:clamp(480px, 65svh, 650px);
    padding-block:clamp(42px, 5vw, 72px);
    padding-inline:var(--page-pad);
    border-top:1px solid var(--border);
    overflow:hidden;
  }

  .transform-step:first-child{ border-top:none; }

  .transform-step__number{
    grid-column:1;
    grid-row:1;
    align-self:stretch;
    display:flex;
    align-items:center;
  }

  .transform-step__number span{
    font-family:var(--font-display);
    font-size:clamp(5.6rem, 9vw, 11.2rem);
    font-weight:500;
    line-height:.8;
    letter-spacing:-.04em;
    color:var(--ink);
    opacity:.045;
  }

  .transform-step__visual{
    grid-column:2;
    grid-row:1;
    position:relative;
    z-index:1;
  }

  .transform-step__visual img{
    display:block;
    width:min(100%, 460px);
    max-height:460px;
    margin-inline:auto;
    object-fit:contain;
    transition:transform .6s cubic-bezier(.19,1,.22,1);
  }

  .transform-step__content{
    grid-column:3;
    grid-row:1;
    position:relative;
    z-index:1;
    padding-inline:clamp(20px, 2.2vw, 40px);
  }

  .transform-step__title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(3.15rem, 4.9vw, 5.8rem);
    font-weight:500;
    line-height:1.02;
    letter-spacing:-.02em;
    color:var(--ink);
    transition:color .3s ease;
  }

  .transform-step:hover .transform-step__title{ color:var(--burgundy-dark); }
  .transform-step:hover .transform-step__visual img{ transform:scale(1.03); }

  @media (prefers-reduced-motion: reduce){
    .transform-step:hover .transform-step__visual img{ transform:none; }
  }

  /* krok 02: odwrócony (numer | ilustracja | tekst), tytuł od razu bordowy */
  .transform-step--2 .transform-step__title{ color:var(--burgundy-dark); }
  .transform-step--2:hover .transform-step__title{ color:var(--ink); }

  /* kolejność odwrócona względem poprzedniej wersji: 01 i 03 mają teraz
     tekst | ilustracja (ten sam układ, więc oba teksty lądują w tej samej
     kolumnie siatki i są wyrównane w poziomie), 02 zostaje jedynym
     odwróconym krokiem — ilustracja | tekst */
  @media (min-width:901px){
    .transform-step--1 .transform-step__content,
    .transform-step--3 .transform-step__content{ grid-column:2; }
    .transform-step--1 .transform-step__visual,
    .transform-step--3 .transform-step__visual{ grid-column:3; }

    .transform-step--1 .transform__mask-inner{
      white-space:nowrap;
    }
  }

  @media (max-width:900px){
    .transform-step{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      min-height:auto;
      padding-block:clamp(32px, 8vw, 48px);
    }

    .transform-step__number{
      position:absolute;
      top:clamp(20px, 4vw, 32px);
      left:var(--page-pad);
    }

    .transform-step__number span{ font-size:4.5rem; }

    .transform-step__visual{
      order:1;
      width:min(78vw, 300px);
      margin:20px auto 24px;
    }

    .transform-step__content{ order:2; padding-inline:0; }

    .transform-step__title{ font-size:clamp(2.1rem, 10vw, 3.2rem); }
  }

  /* ---- krok 04: finał, pełne bordo, bez numeru, 3 zdjęcia + tekst ---- */
  .transform-b__strip--4{
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    align-items:center;
    gap:clamp(32px, 4vw, 72px);
    min-height:clamp(500px, 62svh, 620px);
    padding:clamp(52px, 5vw, 84px) var(--page-pad);
    background:var(--navy);
    border-top:none;
  }

  .transform-b__strip-gallery{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:420px;
  }

  .transform-b__strip--4 .transform__photo-frame{
    position:relative;
    flex-shrink:0;
    padding:var(--frame-padding);
    background:var(--hero-light);
    box-shadow:0 24px 52px rgba(0,0,0,.3);
    transition:transform .7s cubic-bezier(.19,1,.22,1);
  }

  .transform-b__gallery-photo{
    width:clamp(150px, 12vw, 210px);
    transform:translate(16%, 8%);
    z-index:1;
  }

  .transform-b__gallery-photo--2{
    width:clamp(210px, 16vw, 285px);
    transform:translateY(-5%);
    z-index:3;
  }

  .transform-b__gallery-photo--3{
    width:clamp(140px, 11vw, 195px);
    transform:translate(-16%, 5%);
    z-index:2;
  }

  @media (hover: hover){
    .transform-b__strip--4:hover .transform-b__gallery-photo{ transform:translate(10%, 5%) rotate(-1deg); }
    .transform-b__strip--4:hover .transform-b__gallery-photo--2{ transform:translateY(-8%); }
    .transform-b__strip--4:hover .transform-b__gallery-photo--3{ transform:translate(-10%, 2%) rotate(1deg); }
  }

  @media (prefers-reduced-motion: reduce){
    .transform-b__strip--4:hover .transform-b__gallery-photo,
    .transform-b__strip--4:hover .transform-b__gallery-photo--2,
    .transform-b__strip--4:hover .transform-b__gallery-photo--3{ transform:none; }
  }

  .transform-b__strip-text{
    position:relative;
    z-index:4;
    width:100%;
    max-width:none;
  }

  .transform-b__strip-title{
    margin:0;
    max-width:none;
    font-family:var(--font-display);
    font-size:clamp(3.7rem, 5.3vw, 6.4rem);
    font-weight:500;
    line-height:1;
    letter-spacing:-.025em;
    color:var(--cream-on-dark);
  }

  /* najechanie na finałowy krok nie wolno przełączać koloru tytułu na
     bordowy — wcześniej dziedziczyło to z ogólnej reguły hover i tekst
     znikał na bordowym tle */
  .transform-b__strip--4:hover .transform-b__strip-title{ color:var(--cream-on-dark); }

  @media (min-width:901px){
    .transform-b__strip--4 .transform__mask-inner{
      white-space:nowrap;
    }
  }

  @media (max-width:900px){
    .transform-b__strip--4{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:40px;
      min-height:auto;
      padding-block:clamp(48px, 10vw, 64px);
    }

    .transform-b__strip-gallery{ min-height:220px; }
    .transform-b__gallery-photo{ width:min(32vw, 120px); }
    .transform-b__gallery-photo--2{ width:min(40vw, 150px); }
    .transform-b__gallery-photo--3{ width:min(29vw, 108px); }

    .transform-b__strip-text{ max-width:100%; }
    .transform-b__strip-title{ max-width:100%; font-size:clamp(2.1rem, 10vw, 3.2rem); }
  }

  /* ============ OFERTA — 2 warianty (desktop only) ============
     Trzy równoległe ścieżki (ebook / pełny proces / konsultacja) obok
     siebie w jednym rzędzie kolumn — bez numerów w tle: to wybór, nie
     sekwencja kroków, więc numeracja z sekcji "Jak wygląda współpraca"
     tu wprowadzałaby fałszywą kolejność. Pionowe kreski między kolumnami
     i pozioma kreska nad rzędem to te same cienkie linie co gdzie indziej
     w tym systemie, tylko bez rysowanej animacji z kropkami (ten zabieg
     zarezerwowany dla sekwencji kroków). Środkowa kolumna (najpełniejsze
     wsparcie) wypełniona na bordowo — ten sam zabieg "jeden podświetlony
     wybór", co aktywna kolumna w sekcji "Jak wygląda współpraca". Zakres
     każdej ścieżki jest zawsze widoczny (nie chowany pod hover) — to
     porównanie ofert, nie indeks do przeglądania, więc czytelność wygrywa
     z interakcją. Warsztaty i wystąpienia zostają jako osobny, pełnej
     szerokości rząd pod trzema kolumnami — inna kategoria klienta (firmy),
     więc nie rywalizuje z trzema ścieżkami B2C o miejsce w siatce.
     Etykieta sekcji "Wybierz swoją ścieżkę" jest złożona jako mniejsza,
     pierwsza linia głównego nagłówka (zakaz kickerów w tym projekcie jest
     bezwzględny). */
  .offer{ background:var(--hero-light); }

  /* wspólna reguła dla wszystkich etykiet-kickerów w pliku (offer, about,
     wsp, quotes, cta-final) — wcześniej każda sekcja miała osobną,
     prawie identyczną deklarację, z drobnym rozjazdem w margin-bottom
     (.32em vs clamp(12-20px)) i brakiem jawnego font-family w kilku z
     nich; teraz jest jedno źródło prawdy, więc nie mogą się już rozjechać */
  .offer__kicker,
  .about__kicker,
  .wsp__kicker,
  .cta-final__kicker{
    display:block;
    margin-top:0;
    margin-bottom:var(--gap-kicker);
    line-height:1;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:var(--weight-kicker);
    letter-spacing:var(--tracking-kicker);
    text-transform:uppercase;
    color:var(--burgundy);
  }

  /* wspólny styl typograficzny dla wszystkich 6 głównych nagłówków sekcji —
     Problem, Usługi, Oferta, O mnie, Współpraca, Finalne CTA. Od dzisiejszej
     zmiany czcionek (Instrument Serif) wszystkie sześć miało już identyczny
     font-family/font-weight/font-size/line-height/letter-spacing/color, więc
     to jeden byt typograficzny ("nagłówek sekcji"), nie sześć osobnych
     deklaracji, które musiałyby być ręcznie utrzymywane w synchronizacji.
     Poszczególne sekcje zostawiają sobie tylko layout (margin/max-width/
     grid-column) — patrz .about-a__intro niżej po przykład sekcji, która
     NADAL nadpisuje kolor lokalnie (celowo), żeby zobaczyć, dlaczego
     kolejność reguł ma znaczenie: wspólna reguła musi być PRZED regułami
     poszczególnych sekcji, inaczej nadpisania koloru by nie zadziałały. */
  .problem__headline,
  .services__headline,
  .offer-a__headline,
  .about-a__headline,
  .wsp-a__headline,
  .cta-final-b__headline,
  .lead-magnet__headline{
    font-family:var(--font-display);
    font-weight:500;
    font-size:var(--size-section-heading);
    line-height:.98;
    letter-spacing:-.02em;
    color:var(--ink);
  }

  /* Polska typografia responsywna: nagłówki układają się optycznie,
     a tekst ciągły unika samotnych krótkich końcówek. Nierozdzielające
     spacje po jednoliterowych wyrazach dodaje skrypt na końcu dokumentu,
     więc reguła działa przy każdej szerokości ekranu. */
  main :is(h1,h2,h3){ text-wrap:balance; }
  main :is(p,li){ text-wrap:pretty; }

  @media (max-width:900px){
    .type-break{ display:none; }
  }

  /* wspólny styl dla akapitów wprowadzających sekcje — Oferta, Współpraca,
     Finalne CTA (kolor var(--muted)) i O mnie (kolor var(--ink), celowo
     nadpisany niżej — to jedyny wstęp sekcji, który ma być tak samo
     wyrazisty jak reszta treści, nie przygaszony). */
  .offer-a__intro,
  .about-a__intro,
  .wsp-a__intro,
  .cta-final-b__desc{
    font-family:var(--font-sans);
    font-weight:500;
    font-size:1rem;
    line-height:1.55;
    color:var(--muted);
  }

  .offer__index{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
  .offer__tag{
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .offer__cta{
    display:inline-flex;
    align-items:center;
    min-height:44px; /* było 19px — poniżej minimum WCAG 2.5.8 (audyt
      responsywności, ty-2); to główne CTA trzech ścieżek oferty. */
    gap:10px;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:inherit;
    text-decoration:none;
  }
  .offer__cta svg{ width:16px; height:16px; transition:transform .3s ease; }
  .offer__cta:hover svg{ transform:translateX(5px); }

  /* ---- Wariant A: trzy ścieżki obok siebie + warsztaty pełnej szerokości ---- */
  .offer-a{ padding-block:clamp(56px, 6vw, 96px); }

  .offer-a__header{
    padding-inline:var(--page-pad);
    padding-bottom:clamp(48px, 5vw, 80px);
  }

  .offer-a__headline{
    margin:0;
  }

  .offer-a__intro{
    margin:clamp(20px, 2.4vw, 32px) 0 0;
    max-width:60ch;
  }

  /* Trzy równoległe ścieżki jako osobne, odstępione karty (nie zrośnięta
     siatka z cienkimi liniami jak poprzednio) — każda ma własną krawędź
     i górny bordowy akcent, karta "najpełniejsze wsparcie" unosi się
     nad resztą (ujemny margines + miękki cień, ten sam neutralny cień co
     .about__photo-frame w tym pliku), żeby sekcja czytała się jako
     świadomie zaprojektowany wybór planów, nie domyślny szablon
     trzech równych kolumn. Bez numerów w tle: to wybór, nie sekwencja
     kroków, więc numeracja z sekcji "Jak wygląda współpraca" tu
     wprowadzałaby fałszywą kolejność. Zakres każdej ścieżki jest zawsze
     widoczny (nie chowany pod hover) — to porównanie ofert, nie indeks
     do przeglądania, więc czytelność wygrywa z interakcją. */
  .offer-a__cols{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)); /* "1fr" samo = minmax(auto,1fr) —
      kolumny nie zwężały się poniżej szerokości treści karty i wystawały
      poza ekran tuż nad progiem zwijania (audyt responsywności, v1-2). */
    gap:clamp(28px, 3vw, 44px);
    padding-inline:var(--page-pad);
  }
  @media (max-width:1023px){
    .offer-a__cols{ grid-template-columns:1fr; }
  }

  .offer-col{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    padding:clamp(36px, 3.6vw, 48px) clamp(28px, 2.8vw, 40px) clamp(32px, 3.2vw, 44px);
    background:var(--surface);
    border:1px solid var(--border);
  }

  .offer__tag{
    display:inline-block;
    width:fit-content;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--burgundy);
  }

  .offer-col__name{
    margin:var(--space-s) 0 0;
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.9rem, 2.5vw, 2.5rem);
    line-height:1.1;
    letter-spacing:-.01em;
    color:var(--ink);
  }

  .offer-col__desc{
    margin:var(--space-s) 0 0;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:.9rem;
    line-height:1.55;
    color:var(--muted);
    flex:1;
  }

  .offer-col__scope{
    list-style:none;
    margin:clamp(20px, 2vw, 28px) 0 clamp(28px, 2.8vw, 36px);
    padding:0;
  }
  .offer-col__scope li{
    padding-block:7px;
    border-top:1px solid var(--border);
    font-family:var(--font-sans);
    font-size:.85rem;
    color:var(--ink);
  }
  .offer-col__scope li:first-child{ border-top:none; }
  .offer-col__scope li::before{ content:"✓ "; color:var(--burgundy); }

  .offer-col--highlight{
    background:var(--burgundy-dark);
    border-color:var(--burgundy-dark);
    transform:translateY(-20px);
    /* cień krótki w dół (ok. 8–9px) — wcześniej 0 32px 64px wchodził na
       linię nad rzędem „Warsztaty i wystąpienia” (13px pod kartą) */
    box-shadow:0 4px 30px -10px rgba(23,18,15,.22), 0 10px 24px -14px rgba(23,18,15,.3);
  }
  .offer-col--highlight .offer__tag{ color:rgba(244,241,234,.85); }
  .offer-col--highlight .offer-col__name{ color:var(--cream-on-dark); }
  .offer-col--highlight .offer-col__desc{ color:rgba(244,241,234,.75); }
  .offer-col--highlight .offer-col__scope li{ color:var(--cream-on-dark); border-top-color:rgba(244,241,234,.2); }
  .offer-col--highlight .offer-col__scope li::before{ color:var(--cream-on-dark); }
  .offer-col--highlight .offer__cta{ color:var(--cream-on-dark); }

  /* Karty bez ruchu na hover — rusza się tylko CTA (strzałka w .offer__cta). */

  /* Warsztaty i wystąpienia: osobna kategoria klienta (firmy, nie B2C),
     więc zostaje jako pełnej szerokości rząd pod trzema ścieżkami, nie
     czwarta kolumna w tej samej siatce. */
  .offer-rows{ display:flex; flex-direction:column; }

  .offer-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:clamp(28px, 3vw, 56px);
    padding:clamp(32px, 3.6vw, 56px) var(--page-pad);
    border-top:1px solid var(--border);
  }
  .offer-rows > .offer-row:last-child{ border-bottom:1px solid var(--border); }

  .offer-row__body{ flex:1; min-width:0; }

  .offer-row__name{
    margin:0;
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(2.4rem, 3.4vw, 3.4rem);
    line-height:1.05;
    letter-spacing:-.015em;
    color:var(--ink);
  }

  .offer-row__desc{
    margin:var(--space-s) 0 0;
    max-width:52ch;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:.95rem;
    line-height:1.5;
    color:var(--muted);
  }

  @media (max-width:900px){
    .offer-a__cols{ grid-template-columns:1fr; }
    .offer-col--highlight{ transform:none; box-shadow:0 4px 30px -10px rgba(23,18,15,.22), 0 10px 24px -14px rgba(23,18,15,.3); }
    .offer-row{ flex-direction:column; align-items:flex-start; gap:var(--space-m); }
    /* mobile: wszystkie CTA na stronie wycentrowane */
    .offer-col .offer__cta{ justify-content:center; }
    .offer-row .offer__cta{ align-self:center; }
  }

  /* Pasek etykiety do porównania trzech wariantów sekcji oferty —
     roboczy, znika po wybraniu jednego wariantu i usunięciu pozostałych. */
  .review-strip{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:24px;
    padding:14px var(--page-pad);
    background:var(--canvas);
    border-top:1px dashed rgba(92,0,23,.4);
    border-bottom:1px dashed rgba(92,0,23,.4);
    font-family:var(--font-sans);
  }
  .review-strip__name{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--burgundy); }
  .review-strip__note{ font-size:.6875rem; letter-spacing:.02em; color:var(--muted); }

  /* ============ O MNIE — 2 warianty (desktop, 1920x1080) ============
     "POZNAJMY SIĘ" jest w briefie osobną etykietą nad/obok nagłówka —
     ten sam bezwzględny zakaz kickera z reguł projektu, więc jest złożona
     jako mniejsza pierwsza linia tego samego <h2>, tak jak w poprzednich
     sekcjach. Wariant B: przejście koloru nagłówka z jasnego na bordowe
     pole nie jest realizowane przez dokładne warstwy/clip-path dopasowane
     pikselowo do bordowego pola (bez przeglądarki nie da się tego
     bezpiecznie zweryfikować przy responsywnych wymiarach) — fragment,
     który ma "wejść" na bordo, dostaje własne bordowe tło (ten sam,
     sprawdzony zabieg co w sekcji "Zobacz, co się zmienia"). Zdjęcia:
     IMG_1985 (główne), IMG_2658 i IMG_2656 — żadne nie były jeszcze użyte
     w tym pliku. Brak wersji mobilnej, zgodnie z briefem. */
  .about{ background:var(--hero-light); overflow:hidden; }

  .about__photo-frame{
    background:var(--surface);
    display:block;
    box-shadow:0 30px 60px rgba(0,0,0,.28);
  }
  .about__photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* .about__cta i .wsp__cta były dwiema prawie identycznymi deklaracjami
     tego samego bordowego przycisku — teraz jedna wspólna reguła, plus
     delikatne uniesienie i bordowy (nie czarny) cień na hover, żeby
     przycisk czuł się jak jeden dopracowany, markowy element, nie płaski
     prostokąt koloru */
  .about__cta,
  .wsp__cta,
  .services__cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    height:54px;
    padding-inline:28px;
    background:var(--burgundy);
    color:var(--cream-on-dark);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .3s ease, transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s cubic-bezier(.19,1,.22,1);
  }
  .about__cta svg,
  .wsp__cta svg,
  .services__cta svg{ width:16px; height:16px; transition:transform .3s ease; }
  .about__cta:hover,
  .wsp__cta:hover,
  .services__cta:hover{
    background:var(--ink);
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(92,0,23,.22);
  }
  .about__cta:hover svg,
  .wsp__cta:hover svg,
  .services__cta:hover svg{ transform:translateX(5px); }

  @media (prefers-reduced-motion: reduce){
    .about__cta:hover,
    .wsp__cta:hover,
    .services__cta:hover{ transform:none; }
  }

  .services__footer{
    display:flex;
    justify-content:center;
    padding-top:clamp(40px, 4.5vw, 64px);
  }

  /* ---- Wariant A: "Editorial Portrait" ---- */
  .about-a{
    position:relative;
    width:100%;
    min-height:clamp(720px, 94vh, 920px);
    padding-block:clamp(56px, 6vw, 96px);
    padding-inline:var(--page-pad);
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    column-gap:clamp(24px, 2vw, 40px);
  }

  /* wyrównane do lewej krawędzi tak samo jak nagłówki wszystkich sekcji
     wyżej (var(--page-pad)), zamiast wcięcia do kolumny 3 siatki. */
  /* kicker + H2 w jednym opakowaniu (krok 1.9, D1 — kicker poza
     nagłówkiem), które zajmuje dawne miejsce nagłówka w siatce */
  .about-a__heading{
    grid-column:1 / 12;
    grid-row:1;
    align-self:start;
    max-width:1050px;
  }
  .about-a__headline{
    margin:0;
  }
  .about-a__headline .accent{ color:var(--burgundy); }

  /* rozciąga się do prawdziwej lewej krawędzi ekranu (grid-column:1 minus
     padding sekcji), a po prawej kończy się dokładnie tam, gdzie zaczyna
     się kolumna 7 — czyli tam, gdzie kończy się galeria zdjęć. Ten sam
     wiersz siatki co galeria, więc wyrównanie jest policzone przez grid,
     nie zgadywane w px. */
  .about-a__block{
    grid-column:1 / 7;
    grid-row:2;
    align-self:end;
    margin-left:var(--bleed-x);
    height:510px;
    background:var(--burgundy-dark);
    z-index:0;
  }

  .about-a__gallery{
    grid-column:2 / 7;
    grid-row:2;
    position:relative;
    margin-top:clamp(32px, 3.5vw, 56px);
    height:520px;
    z-index:1;
  }

  .about-a__photo-main{
    position:relative;
    z-index:1;
    width:440px;
    height:520px;
    padding:var(--frame-padding);
  }

  .about-a__content{ grid-column:8 / 13; grid-row:2; align-self:start; }

  .about-a__intro{
    max-width:540px;
    margin:clamp(24px, 3vw, 40px) 0 32px;
    color:var(--ink);
  }

  .about-a__principles{ display:flex; flex-direction:column; }

  .about-a__principle{
    display:flex;
    gap:24px;
    padding-block:20px 24px;
    border-top:1px solid var(--border);
  }
  .about-a__principle:last-child{ border-bottom:1px solid var(--border); }

  .about-a__principle-num{
    flex:0 0 50px;
    font-family:var(--font-sans);
    font-size:12px;
    letter-spacing:.06em;
    color:var(--burgundy);
    padding-top:4px;
  }

  .about-a__principle-title{
    margin:0 0 10px;
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.8rem, 2.1vw, 2.1rem);
    line-height:1.14;
    letter-spacing:-.012em;
    color:var(--ink);
  }

  .about-a__principle-desc{
    margin:0;
    max-width:470px;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:.95rem;
    line-height:1.5;
    color:rgba(16,15,14,.68);
  }

  .about-a__cta{ margin-top:40px; }

  /* Mobile: układ opiera się na siatce 12 kolumn i pikselowych wymiarach
     głównego portretu dopasowanych do szerokiego ekranu — poniżej 900px
     przechodzimy na prosty, pionowy stos. Bordowy blok za galerią znika,
     a pojedyncze zdjęcie wykorzystuje pełną szerokość dostępnej kolumny. */
  @media (max-width:900px){
    .about-a{
      display:block;
      min-height:0;
      padding-block:clamp(56px, 10vw, 96px);
    }
    .about-a__heading{ max-width:100%; }
    .about-a__block{ display:none; }
    .about-a__gallery{
      position:relative;
      margin:clamp(32px, 8vw, 48px) 0 0;
      width:100%;
      height:auto;
      aspect-ratio:4 / 5;
      max-width:420px;
    }
    .about-a__photo-main{
      width:100%;
      height:100%;
    }
    .about-a__content{ margin-top:clamp(56px, 10vw, 72px); }
    .about-a__intro{ max-width:100%; }
  }

  /* ============ WSPÓŁPRACA — 2 warianty, 4 kolumny poziomo (desktop) ============
     "JAK WYGLĄDA WSPÓŁPRACA?" jako etykieta nad nagłówkiem to znów kicker
     — złożona jako mniejsza pierwsza linia <h2>, jak wszędzie wcześniej.
     Zdjęcie przy kroku 03 w wariancie B: magdalena-przy-maszynie-do-szycia.webp (proces pracy w
     pracowni), jeszcze nie użyte w tym pliku. */
  .wsp{ background:var(--hero-light); }

  /* ---- Wariant A: "Four Column Process" ---- */
  .wsp-a{ padding-block:clamp(56px, 6vw, 96px); }

  .wsp-a__header{
    display:grid;
    grid-template-columns:65% 1fr;
    gap:clamp(32px, 4vw, 56px);
    align-items:end;
    padding-inline:var(--page-pad);
    padding-bottom:clamp(40px, 5vw, 64px);
  }

  .wsp-a__headline{
    margin:0;
  }

  .wsp-a__intro{
    margin:0;
    max-width:480px;
  }

  .wsp-a__row{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    padding-inline:var(--page-pad);
    border-top:0;
  }

  .wsp-a__col{
    position:relative;
    min-height:390px;
    padding:156px 28px 24px;
    border-left:1px solid var(--border);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .wsp-a__row > .wsp-a__col:nth-child(2){ border-left:none; }

  .wsp-a__num{
    position:absolute;
    top:clamp(14px, 1.4vw, 22px);
    left:clamp(34px, 2.5vw, 48px);
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(7.3rem, 9vw, 10.1rem);
    line-height:.85;
    color:var(--ink);
    opacity:.07;
    pointer-events:none;
    transition:color .3s ease, opacity .3s ease;
  }

  /* hover: liczba w tle koloruje się na bordowo na jasnym tle, na biało
     na bordowym tle (kolumna aktywna) */
  .wsp-a__col:hover .wsp-a__num{ color:var(--burgundy); opacity:.35; }
  .wsp-a__col--active:hover .wsp-a__num{ color:var(--cream-on-dark); opacity:.4; }

  .wsp-a__title{
    position:relative;
    margin:0 0 var(--space-s);
    max-width:16ch;
    min-height:2.16em;
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.8rem, 2.25vw, 2.25rem);
    line-height:1.12;
    color:var(--ink);
  }

  .wsp-a__desc{
    position:relative;
    margin:0;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:.95rem;
    line-height:1.55;
    color:var(--muted);
  }

  .wsp-a__col--active{ background:var(--burgundy-dark); border-left-color:transparent; }
  .wsp-a__col--active + .wsp-a__col{ border-left-color:transparent; }
  .wsp-a__col--active .wsp-a__num{ color:var(--cream-on-dark); opacity:.16; }
  .wsp-a__col--active .wsp-a__title,
  .wsp-a__col--active .wsp-a__desc{ color:var(--cream-on-dark); }
  .wsp-a__col--active .wsp-a__desc{ color:rgba(244,241,234,.75); }

  .wsp-a__line{
    display:none;
  }

  .wsp-a__dot{
    position:absolute;
    top:-3px;
    width:8px;
    height:8px;
    background:var(--burgundy);
  }

  .wsp-a__footer{
    padding-inline:var(--page-pad);
    padding-top:clamp(32px, 4vw, 48px);
    display:flex;
    justify-content:flex-end;
  }

  /* Mobile: 4 kolumny poziome z rysowaną linią nad wierszem i gigantycznym
     numerem w tle nie mieszczą się poniżej 900px — przechodzimy na
     pionowy stos (ten sam zabieg co w analogicznej sekcji kroków na
     podstronie warsztaty), numer wraca jako mniejszy, boczny element
     zamiast wielkiego tła, a rysowana linia znika (nie da się jej
     sensownie rozciągnąć na pionowy stos). */
  @media (max-width:900px){
    .wsp-a__header{ grid-template-columns:1fr; gap:var(--space-m); }
    .wsp-a__intro{ max-width:100%; }
    .wsp-a__row{ grid-template-columns:1fr; row-gap:8px; }
    .wsp-a__line, .wsp-a__dot{ display:none; }
    .wsp-a__col{
      min-height:0;
      padding:0 4px 0 76px;
      border-left:none;
      border-top:1px solid var(--border);
      padding-top:20px;
      padding-bottom:20px;
    }
    .wsp-a__row > .wsp-a__col:nth-child(2){ border-top:none; }
    .wsp-a__num{ top:18px; left:0; font-size:3rem; }
    .wsp-a__title{
      min-height:0;
      max-width:100%;
      font-size:clamp(1.65rem, 7vw, 1.8rem);
      text-wrap:normal;
      overflow-wrap:normal;
    }
    .wsp-a__col--active{
      isolation:isolate;
      margin-inline:0;
      padding:20px 4px 20px 76px;
      background:transparent;
      border-top-color:transparent;
    }
    .wsp-a__col--active::before{
      content:"";
      position:absolute;
      z-index:-1;
      inset:0 var(--bleed-x);
      background:var(--burgundy-dark);
    }
    .wsp-a__footer{ justify-content:center; }
    /* tu, a nie przy .offer-row — bazowe .about__cta/.about-a__cta stoją
       niżej w pliku i nadpisałyby wcześniejszą regułę */
    .about-a__cta{ display:flex; width:fit-content; margin-inline:auto; }
  }

  /* ============ LEAD MAGNET — email → PDF (krok 1.4) ============
     Cała sekcja na bordowym tle (ten sam --burgundy-dark co stopka),
     dwie kolumny: tekst + formularz po lewej, dwa białe prostokąty
     (okładka + agenda PDF) po prawej — miejsce na wklejenie właściwej
     grafiki, gdy powstanie (krok 0.14). Formularz w plikach statycznych
     jest tylko wyglądem (patrz PRODUCT.md); stany błędu/ładowania/sukcesu
     są tu zasymulowane w JS na dole strony, żeby dało się je ocenić przed
     wdrożeniem Fluent Forms (krok 6.3). Zgoda marketingowa jest osobnym,
     opcjonalnym polem — PDF dostaje każdy niezależnie od zaznaczenia
     (decyzja z PRODUCT.md, odp. 40). */
  .lead-magnet{
    background:var(--burgundy-dark);
    color:var(--cream-on-dark);
    padding-block:clamp(80px, 8vw, 128px);
  }
  .lead-magnet__grid{
    padding-inline:var(--page-pad);
    display:grid;
    grid-template-columns:minmax(560px, .92fr) minmax(700px, 1.08fr);
    align-items:center;
    gap:clamp(40px, 4vw, 72px);
  }
  .lead-magnet__intro{
    width:100%;
    max-width:760px;
  }
  .lead-magnet__kicker{
    display:block;
    margin-bottom:clamp(16px, 2vw, 22px);
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:var(--weight-kicker);
    letter-spacing:var(--tracking-kicker);
    text-transform:uppercase;
    color:rgba(244,241,234,.75);
  }
  .lead-magnet__headline{
    color:var(--cream-on-dark);
    margin:0;
    max-width:15ch;
    font-size:clamp(3.25rem, 4.25vw, 4.75rem);
    line-height:.96;
  }
  .lead-magnet__headline-line{
    display:block;
    white-space:nowrap;
  }
  .lead-magnet__desc{
    margin-top:22px;
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.6;
    color:rgba(244,241,234,.8);
    max-width:58ch;
  }

  .lead-magnet__row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:nowrap; }

  .lead-magnet__error{
    margin:0;
    font-family:var(--font-sans);
    font-size:.8125rem;
    color:#F3C969;
  }

  .lead-magnet__submit{
    position:relative;
    flex:0 0 auto;
    height:50px;
    background:var(--surface);
    color:var(--burgundy-dark);
    border-color:var(--surface);
    font-size:10px;
    letter-spacing:.05em;
    padding-inline:18px;
    white-space:nowrap;
  }
  .lead-magnet__submit:hover{
    background:var(--cream-on-dark);
    color:var(--burgundy-dark);
    box-shadow:0 14px 28px rgba(0,0,0,.28);
  }
  .lead-magnet__spinner{ display:none; width:16px; height:16px; animation:lm-spin .8s linear infinite; }

  @keyframes lm-spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce){ .lead-magnet__spinner{ animation:none; } }

  .lead-magnet__consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    font-family:var(--font-sans);
    font-size:.8125rem;
    line-height:1.5;
    color:rgba(244,241,234,.8);
    cursor:pointer;
  }
  .lead-magnet__consent input[type="checkbox"]{
    margin-top:3px;
    width:16px;
    height:16px;
    flex-shrink:0;
    accent-color:var(--burgundy);
  }
  .lead-magnet__consent span{ max-width:56ch; }
  .lead-magnet__consent em{ font-style:normal; color:rgba(244,241,234,.62); }

  .lead-magnet__fineprint{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:.75rem;
    line-height:1.5;
    color:rgba(244,241,234,.62);
    max-width:58ch;
  }
  .lead-magnet__fineprint a{ color:rgba(244,241,234,.85); text-underline-offset:2px; }
  .lead-magnet__fineprint a:hover{ color:var(--cream-on-dark); }

  .lead-magnet__status{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:.875rem;
    font-weight:600;
    color:var(--cream-on-dark);
  }

  .lead-magnet__art{
    position:relative;
    justify-self:center;
    width:100%;
    max-width:860px;
    aspect-ratio:1.45 / 1;
  }
  .lead-magnet__mock{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:48%;
    aspect-ratio:3 / 4;
    background:var(--surface);
    box-shadow:0 30px 60px rgba(0,0,0,.3);
    overflow:hidden;
    transition:top .5s var(--ease-editorial), left .5s var(--ease-editorial), width .5s var(--ease-editorial), transform .5s var(--ease-editorial);
  }
  .lead-magnet__mock img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .lead-magnet__mock-label{
    padding:var(--space-m);
    font-family:var(--font-sans);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    line-height:1.5;
    color:var(--muted);
  }
  .lead-magnet__mock--agenda{ top:1%; left:42%; transform:rotate(3deg); z-index:1; }
  .lead-magnet__mock--cover{ top:9%; left:13%; transform:rotate(-3deg); z-index:2; }

  @media (hover:hover) and (prefers-reduced-motion: no-preference){
    .lead-magnet__art:hover .lead-magnet__mock--agenda{
      top:4%; left:51%; transform:rotate(0deg);
    }
    .lead-magnet__art:hover .lead-magnet__mock--cover{
      top:4%; left:1%; transform:rotate(0deg);
    }
  }

  @media (max-width:1380px){
    .lead-magnet__grid{
      grid-template-columns:minmax(480px, .95fr) minmax(580px, 1.05fr);
      gap:clamp(32px, 3vw, 48px);
    }
    .lead-magnet__headline{ font-size:clamp(3rem, 4.5vw, 4.25rem); }
  }
  @media (max-width:1280px){
    .lead-magnet__grid{ grid-template-columns:1fr; }
    .lead-magnet__intro{ max-width:none; }
    .lead-magnet__headline{ max-width:14ch; }

    .lead-magnet__art{ margin-top:clamp(40px, 6vw, 64px); max-width:700px; }
  }
  @media (max-width:560px){
    .lead-magnet__headline-line{ white-space:normal; }
    .lead-magnet__row{ flex-direction:column; align-items:stretch; }

    .lead-magnet__submit{ justify-content:center; width:100%; }
    .lead-magnet__art{
      max-width:420px;
      aspect-ratio:4 / 3;
    }
    .lead-magnet__mock{ width:54%; }
    .lead-magnet__mock--agenda{ left:39%; }
    .lead-magnet__mock--cover{ left:8%; }
  }

  /* ============ FINALNE CTA — 2 warianty (desktop) ============
     "PIERWSZY KROK" jako etykieta nad nagłówkiem — znów kicker, złożona
     jako mniejsza pierwsza linia <h2>. Link do WhatsAppa prowadzi do wa.me z numerem z PRODUCT.md
     i wiadomością wstępną. Zdjęcie w wariancie B: IMG_1985 (to samo,
     co w sekcji "O mnie" — świadome domknięcie, nie pomyłka). */
  .cta-final{ background:var(--hero-light); }

  .cta-final__whatsapp-icon{ width:20px; height:20px; flex-shrink:0; }

  /* ---- Portrait and Contact Desk ---- */
  .cta-final-b{ padding-block:clamp(56px, 6vw, 96px); }

  .cta-final-b__grid{
    display:grid;
    grid-template-columns:minmax(0,45fr) minmax(0,55fr); /* procenty nie
      uwzględniały gap — siatka była szersza niż kontener (audyt
      responsywności, of-1). */
    gap:clamp(40px, 5vw, 72px);
    padding-inline:var(--page-pad);
    align-items:center;
  }

  .cta-final-b__photo-wrap{ position:relative; height:700px; }
  .cta-final-b__block{
    position:absolute;
    /* wychodzi spod lewej krawędzi ekranu (bez marginesu strony); prawa
       krawędź tam, gdzie wcześniej (87% − 40px) */
    left:var(--bleed-x);
    bottom:-30px;
    width:calc(87% - 40px + var(--page-pad));
    height:80%;
    background:var(--burgundy-dark);
    z-index:0;
  }
  .cta-final-b__photo{
    position:relative;
    top:3%;
    z-index:1;
    width:min(430px, 88%);
    height:94%;
    margin-left:0;
    background:var(--surface);
    padding:var(--frame-padding);
    box-shadow:0 34px 68px rgba(0,0,0,.3);
  }
  .cta-final-b__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

  .cta-final-b__headline{
    margin:0 0 var(--space-m);
    max-width:800px;
  }
  .cta-final-b__headline .accent{ color:var(--burgundy); }

  .cta-final-b__desc{
    margin:0 0 clamp(32px, 4vw, 48px);
    max-width:52ch;
  }

  .cta-final-b__rows{ display:flex; flex-direction:column; }

  .cta-final-b__row{
    position:relative;
    display:flex;
    align-items:center;
    gap:24px;
    padding-block:clamp(24px, 3vw, 34px);
    border-top:1px solid var(--border);
    text-decoration:none;
    color:var(--ink);
    overflow:hidden;
    isolation:isolate;
  }
  .cta-final-b__rows > .cta-final-b__row:last-child{ border-bottom:1px solid var(--border); }

  .cta-final-b__row::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--burgundy-dark);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.19,1,.22,1);
  }
  .cta-final-b__row:hover::before{ transform:scaleX(1); }
  .cta-final-b__row:hover{ color:var(--cream-on-dark); }
  .cta-final-b__row:hover .cta-final-b__row-desc{ color:rgba(244,241,234,.75); }
  .cta-final-b__row:hover .cta-final-b__row-num{ color:var(--cream-on-dark); }
  .cta-final-b__row:hover .cta-final-b__row-arrow{ transform:translateX(6px); color:var(--cream-on-dark); }

  .cta-final-b__row--primary{ border-top-color:var(--burgundy); border-top-width:2px; }

  .cta-final-b__row-num{
    flex:0 0 40px;
    font-family:var(--font-sans);
    font-size:.85rem;
    color:var(--burgundy);
    transition:color .3s ease;
  }

  .cta-final-b__row-body{ flex:1; min-width:0; }

  .cta-final-b__row-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(2rem, 2.7vw, 2.55rem);
    letter-spacing:-.01em;
  }

  .cta-final-b__row-desc{
    margin:6px 0 0;
    max-width:48ch;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:.9rem;
    line-height:1.5;
    color:var(--muted);
    transition:color .3s ease;
  }

  .cta-final-b__row-arrow{
    flex-shrink:0;
    width:20px;
    height:20px;
    color:var(--ink);
    transition:transform .3s ease, color .3s ease;
  }

  .cta-final-b__note{
    margin-top:clamp(20px, 2.4vw, 28px);
    font-family:var(--font-sans);
    font-size:.85rem;
    color:var(--muted);
  }

  @media (max-width:900px){
    /* bordowy prostokąt wystaje 30px pod zdjęcie (bottom:-30px), więc przy
       zwykłym gap 40px „Pierwszy krok” stało ~10px pod nim — row-gap 80px
       daje ok. 50px realnego odstępu */
    .cta-final-b__grid{ grid-template-columns:1fr; row-gap:80px; }
    .cta-final-b__photo-wrap{ height:min(70vh, 480px); height:min(70svh, 480px); order:-1; }
    .cta-final-b__block{ left:var(--bleed-x); width:calc(87% - 20px + var(--page-pad)); }
    .cta-final-b__photo{ width:min(360px, 84%); }
    .cta-final-b__row{ flex-wrap:wrap; }
    .cta-final-b__row-title{ font-size:clamp(1.75rem, 8vw, 2.2rem); }
  }
  /* ≤767: siatka sekcji ma wymuszone 20px (responsive.css), także przy
     --page-pad:16px poniżej 350px — blok zawsze od samej krawędzi */
  @media (max-width:767px){ .cta-final-b__block{ left:-20px; width:calc(87% + 0px); } }

  /* Pełnoekranowa historia ze sterowaniem przewijaniem tylko na desktopie.
     Telefon i tablet zachowują naturalny układ kolejnych kroków. */
  @media (min-width:1180px) and (hover:hover) and (pointer:fine){
    html.motion-gsap .transform-story,
    html.motion-gsap .transform-story__pin{
      position:relative;
      height:100svh;
      min-height:680px;
      overflow:hidden;
      background:var(--hero-light);
    }
    html.motion-gsap .transform-story{
      z-index:4;
      margin-top:65svh;
      box-shadow:0 -24px 54px rgba(20,13,10,.1);
    }
    html.motion-gsap .transform-story .transform-a,
    html.motion-gsap .transform-story .transform-b{
      position:absolute;
      inset:0;
      padding:0;
    }
    html.motion-gsap .transform-story .transform-a{
      z-index:1;
      display:flex;
      align-items:center;
    }
    html.motion-gsap .transform-story .transform-a__intro{
      width:100%;
      padding-block:0;
      opacity:1 !important;
      overflow:visible;
    }
    html.motion-gsap .transform-story .transform-b{
      z-index:2;
      pointer-events:none;
      background:transparent;
    }
    html.motion-gsap .transform-story .transform-b__strips{
      position:relative;
      display:block;
      width:100%;
      height:100%;
    }
    html.motion-gsap .transform-story .transform-step,
    html.motion-gsap .transform-story .transform-b__strip--4{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      min-height:0;
      border:0;
      background:var(--hero-light);
      visibility:hidden;
      will-change:transform, clip-path;
    }
    html.motion-gsap .transform-story .transform-b__strip--4{
      background:#021126;
    }
  }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .hero-blaed__ticker{ animation:none !important; }
  }

  /* Opinie — nagłówek sekcji większy i z większym odstępem od cudzysłowu
     niż we wspólnym opinions.css (tak samo jak w warsztaty.html). */
  .opinions__title{
    margin-bottom:clamp(32px, 4vw, 48px);
    font-size:clamp(2.25rem, 4.4vw, 4.25rem);
    line-height:1.15;
  }
  /* Od tabletu w górę w jednej linii: tytuł jest szerszy niż 820px kolumny
     opinii, więc wychodzi poza nią symetrycznie (środek zostaje na osi),
     a rozmiar w vw pilnuje, żeby zmieścił się w oknie. Na telefonie łamie się. */
  @media (min-width:768px){
    .opinions__title{
      position:relative;
      left:50%;
      width:max-content;
      transform:translateX(-50%);
      white-space:nowrap;
    }
  }

  /* Telefon: znak i taśma poprzedzają krótszą ilustrację, a treść hero
     pozostaje pod nią. */
  @media (max-width:767px){
    .hero-blaed{ padding-top:56px; }
    .hero-blaed__topbar{ height:56px; }
    .hero-blaed__topbar .site-nav{
      height:56px;
      padding-inline:20px;
      justify-content:space-between;
    }
    .hero-blaed__nav-logo{ display:block; flex:0 1 auto; min-width:0; }
    .hero-blaed__nav-logo img{ display:block; width:min(48vw,170px); height:auto; }
    .hero-blaed__topbar .site-nav__toggle{
      display:inline-flex;
      position:relative;
      z-index:81;
      margin-left:auto;
    }
    .hero-blaed__left{ display:contents; }
    .hero-blaed__wordmark{ display:none; }
    .hero-blaed__ticker-row{
      order:1;
      margin-inline:20px;
      padding-block:12px;
    }
    .hero-blaed__ticker-viewport{ cursor:pointer; }
    .hero-blaed__ticker-viewport:focus-visible{ outline:2px solid var(--burgundy); outline-offset:3px; }
    .hero-blaed__right{
      order:3;
      margin:0;
      height:clamp(260px, 41svh, 380px);
    }
    .hero-blaed__headline{
      order:4;
      margin:0;
      padding:40px 20px 0;
      max-width:none;
      overflow-wrap:normal;
    }
    .hero-blaed .hero-blaed__headline{
      font-size:clamp(2.2rem, 9vw, 3rem) !important;
    }
    .hero-blaed__actions{
      order:5;
      margin:0;
      padding:38px 20px 64px;
    }
    .problem__illustration{
      top:12%;
      bottom:0;
      height:88%;
    }

    .transform-a{ padding-top:96px; }
    .transform-a__intro{ padding-bottom:96px; }
    .transform-step{ padding-block:72px 84px; }
    .transform-step__number{ top:44px; }
    .transform-step__visual{
      width:min(100%, 390px);
      min-height:290px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:36px auto 30px;
    }
    .transform-step__visual img{
      width:100%;
      max-height:380px;
    }
    .transform-step--1 .transform-step__visual img,
    .transform-step--3 .transform-step__visual img{
      width:110%;
      max-width:none;
    }
    .transform-step__title{ font-size:clamp(2.55rem, 11.5vw, 3.65rem); }
    .transform-b__strip-title{ font-size:clamp(2.8rem, 12.5vw, 4rem); }

    .offer-rows{ padding-inline:var(--page-pad); }
    .offer-row{
      margin-top:20px;
      padding:32px 0 !important;
    }

    .cta-final-b__headline{
      font-size:clamp(3.1rem, 12vw, 4.3rem) !important;
      line-height:.98;
    }
  }

/* Komputer: do chwili doczytania GSAP (mdm_home_gsap_loader, 9.7d) elementy intro hero są ukryte,
   żeby nie mignęły przed animacją wejścia. home.js zdejmuje klasę, a po 4 s także przy błędzie sieci. */
html.mdm-gsap-pending .site-nav,
html.mdm-gsap-pending .hero-blaed__wordmark,
html.mdm-gsap-pending .hero-blaed__ticker-viewport,
html.mdm-gsap-pending .hero-blaed__headline > span,
html.mdm-gsap-pending .hero-blaed__actions > *{ opacity:0; }

/* mdm-responsive */
/* Wspólne reguły responsywne. */

/* Final responsive layer for every page in /variants.
   Phone: 0-767px, tablet: 768-1023px, desktop: 1024px+. */

html{width:100%;max-width:100%;overscroll-behavior-x:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* clip (nie hidden/!important) i tylko na body — patrz tokens.css: oba na
   html+body robiły z body kontener przewijania, więc position:sticky nie
   miał się do czego przykleić (audyt responsywności, sh-1). */
body{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none;position:relative;touch-action:pan-y pinch-zoom}
body>*{max-width:100%}
img,svg,video,canvas,iframe{max-width:100%}
img,video{height:auto}
input,select,textarea,button{max-width:100%;font:inherit}
textarea{resize:vertical}
[hidden]{display:none!important}

@media (max-width:1023px){
  :root{--page-pad:clamp(24px,4.5vw,44px);--pad:clamp(24px,4.5vw,44px);--section-pad:clamp(72px,9vw,104px)}
  section>*,header>*,footer>*,main>*,nav>*,form>*,[class*="grid"]>*,[class*="row"]>*{min-width:0}
  section,header,footer,main,nav,form,figure{max-width:100%}
  figure{margin-inline:0}
  h1,h2,h3,h4,h5,h6,p,li,a,button,label,span{overflow-wrap:break-word}
  [class*="headline"],[class*="title-line"],.wz-steps-a__headline,.wz-topics-a__headline{white-space:normal!important}
  .btn,button,input,select,textarea{min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-height:0}
  .btn{max-width:100%;height:auto;min-height:48px;padding:13px 20px;white-space:normal!important;text-align:center;justify-content:center}
  .site-nav{width:100%;max-width:100%}
  .site-nav__links{max-width:calc(100vw - (2 * var(--page-pad,24px)))}
  .site-footer__grid,.site-footer__bottom{min-width:0}

  .hero-blaed,.hero-blaed__left,.hero-blaed__right,.problem,.transform,.services,.offer-a,.wsp-a,.ebook-preview,.cta-final-b,
  .hero,.chooser,.compare,.ebook,.mentoring,.consultation,.preview,.faq,.final-cta,
  .om-hero,.om-story,.om-chapter,.om-approach,.opinions,.cta-final,
  .wz-hero-a,.wz-audience-b,.wz-topics-a,.wz-give-a,.wz-steps-a,.wz-price-b,.wz-partner-a,.wz-lead-a,
  .kt-hero-a,.kt-steps-a,.kt-paths-b,.kt-lead-b,.kt-faq-a{max-width:100%;overflow-x:hidden}
  .services__visual,.services__visual-main,.services__visual-small,.transform__visual,.problem__visual,
  .cta-final-b__photo,.ebook-preview__sheet,.hero__visual,.ebook__visual,.mentoring__visual,
  .consultation__visual,.preview__visual,.om-chapter__visual,.om-chapter__photo,.cta-final-b__photo-wrap{max-width:100%}
  .hero__title-line,.om-hero__headline-line,.wz-hero-a__headline-line,.kt-hero-a__headline-line{white-space:normal!important}
  .ebook h2,.process h2,.process__fit h3,.consult__copy h2,.wz-topics-b__banner .btn{white-space:normal!important}
  .compare__grid>*{min-width:0}
  .wz-give-a__title{width:auto!important;max-width:100%}
  .wz-topics-a__banner{min-width:0}
  .wz-topics-a__banner .btn{white-space:normal!important}

}

@media (min-width:768px) and (max-width:1023px){
  .hero-blaed,.wz-hero-a,.kt-hero-a,.om-hero,.hero{min-height:0}
  .compare__grid,.wz-audience-b__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .compare__grid>*:last-child,.wz-audience-b__grid>*:last-child{grid-column:1/-1}
  .wz-steps-a__list,.kt-steps-a__row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .site-footer__bottom{grid-template-columns:1fr auto!important}
}

@media (max-width:767px){
  :root{--page-pad:20px;--pad:20px;--section-pad:72px;--space-2xl:72px;--space-3xl:88px}
  body{font-size:16px}.page{width:100%;max-width:100%}
  .site-nav{padding-inline:20px}
  .site-nav__logo img{max-width:170px;height:auto;max-height:30px}
  .site-nav__links{inset:68px 16px auto 16px!important;width:auto!important;max-width:none;padding:24px!important;gap:0!important}
  .site-nav__links a{display:flex;align-items:center;min-height:48px;width:100%}
  h1,[class*="hero"] h1{font-size:clamp(2.6rem,13vw,4rem)!important;line-height:.96!important}
  h2,[class*="headline"],p{max-width:100%}
  .btn{width:100%}.btn-link{min-height:44px;align-items:center}
  input,select,textarea{width:100%;font-size:16px!important}

  .hero-blaed{height:auto!important;min-height:0!important;grid-template-columns:1fr!important}
  .hero-blaed__content{padding:48px 20px!important}.hero-blaed__visual{min-height:62svh;overflow:hidden}
  .hero-blaed__ticker-viewport{width:100%;max-width:100%;overflow:hidden!important;contain:inline-size}
  .hero-blaed__ticker{max-width:none;overflow:visible}
  .problem__inner,.transform__inner,.services__inner,.offer-a__cols,.wsp-a__header,.ebook-preview__inner,.cta-final-b__grid{grid-template-columns:1fr!important}
  .services__visual{width:100%!important;min-height:430px!important}.services__visual-main{width:min(78%,340px)!important}.services__visual-small{width:min(46%,190px)!important}
  .offer-a__cols,.wsp-a__row{gap:0!important}.offer-row{padding-inline:0!important}.wsp-a__row{grid-template-columns:1fr!important}
  .ebook-preview__viewer{min-height:520px!important}.cta-final-b__photo-wrap{height:min(72svh,520px)!important}.cta-final-b__photo{width:min(92%,380px)!important}

  .hero,.chooser,.ebook,.mentoring,.consultation,.preview,.faq,.final-cta{padding-left:20px!important;padding-right:20px!important;grid-template-columns:1fr!important}
  .hero{height:auto!important;min-height:0!important;gap:40px!important}.hero__copy{max-width:100%!important}.hero__visual{min-height:520px!important}
  .chooser{gap:40px!important}.compare{padding-left:20px!important;padding-right:20px!important}.compare__head,.compare__grid{grid-template-columns:1fr!important}.compare__grid>*:last-child{grid-column:auto}
  .ebook,.consultation{gap:48px!important}.ebook__visual,.consultation__visual{min-height:500px!important}
  .mentoring__top,.mentoring__grid,.preview__inner,.faq__inner,.final-cta__inner{grid-template-columns:1fr!important}.preview__viewer{min-height:540px!important}

  .om-hero{height:auto!important;grid-template-columns:1fr!important}.om-hero__right{height:58svh!important;min-height:420px!important}.om-hero__left{padding:48px 20px!important}
  .om-chapter{padding-block:72px!important}.om-chapter__grid,.om-chapter--flip .om-chapter__grid{grid-template-columns:1fr!important;padding-inline:20px!important;gap:44px!important}
  .om-chapter__visual{height:520px!important;overflow:hidden}.om-chapter__photo{max-width:92%!important}
  .om-approach__intro,.om-approach__grid,.opinions__inner,.cta-final-b__grid{padding-inline:20px!important}.om-approach__grid{grid-template-columns:1fr!important}

  .wz-hero-a{height:auto!important;grid-template-columns:1fr!important}.wz-hero-a__inner{padding:48px 20px!important}.wz-hero-a__visual{height:58svh!important;min-height:420px}
  .wz-audience-b__intro,.wz-audience-b__grid,.wz-topics-a__grid,.wz-steps-a__header,.wz-steps-a__list,.wz-price-b__grid,.wz-partner-a__grid{padding-left:20px!important;padding-right:20px!important}
  .wz-audience-b__grid,.wz-topics-a__grid,.wz-topics-list,.wz-give-a,.wz-steps-a__list,.wz-price-b__grid,.wz-price-b__list,.wz-partner-a__grid,.wz-lead-a{grid-template-columns:1fr!important}
  .wz-audience-b__grid>*:last-child{grid-column:auto}.wz-topics-a__headline br{display:none}
  .wz-topics-a__visual{height:500px!important;max-width:100%!important;margin-bottom:56px!important}.wz-topics-a__banner{flex-direction:column!important;align-items:stretch!important}
  .wz-give-a__head,.wz-give-a__item{padding-left:20px!important;padding-right:20px!important}.wz-steps-a__list{display:grid!important;transform:none!important}.wz-steps-a__step{min-width:0} /* karta węższa niż jej treść przy 320 px (8.2) */
  .wz-steps-a__step{width:100%!important;min-height:0!important;transform:none!important}.wz-price-b__panel{padding:32px 20px!important}.wz-lead-a__intro,.wz-lead-a__form-wrap{padding:48px 20px!important}

  .kt-hero-a{height:auto!important;min-height:0!important;grid-template-columns:1fr!important}.kt-hero-a__inner{padding:48px 20px!important}.kt-hero-a__visual{height:58svh!important;min-height:420px;overflow:hidden!important}
  .kt-hero-a__visual-photo{left:50%!important;top:50%!important;width:min(72vw,280px)!important}
  .kt-steps-a__intro,.kt-steps-a__row,.kt-paths-b__intro,.kt-paths-b__grid,.kt-faq-a__grid{padding-left:20px!important;padding-right:20px!important}
  .kt-steps-a__row,.kt-paths-b__grid,.kt-lead-b,.kt-faq-a__grid{grid-template-columns:1fr!important}.kt-steps-a__col{padding:72px 20px 28px!important}.kt-paths-b__col{padding:36px 24px!important}
  .kt-lead-b__intro,.kt-lead-b__form-wrap{padding:48px 20px!important}.kt-faq-a__visual{height:460px!important;max-width:100%!important}

  .site-footer{padding:72px 20px 24px!important;overflow:hidden}.site-footer__grid,.site-footer__bottom{grid-template-columns:1fr!important;gap:40px!important}.site-footer__bottom{margin-top:56px!important}
  .wrap{width:100%!important;max-width:100%!important;padding-left:20px!important;padding-right:20px!important}.swap{grid-template-columns:1fr!important}.swap__arrow{transform:rotate(90deg)}
}

@media (max-width:349px){
  :root{--page-pad:16px;--pad:16px}
  .site-nav{padding-inline:16px}h1,[class*="hero"] h1{font-size:clamp(2.35rem,12.5vw,3.15rem)!important}
  .btn{padding-inline:16px;font-size:11px;letter-spacing:.045em}
  .site-footer,.om-hero__left,.wz-hero-a__inner,.kt-hero-a__inner{padding-left:16px!important;padding-right:16px!important}
  /* kroki warsztatów: numer nad tekstem jak na tablecie — przy 104 px wcięcia kolumna tekstu
     miała 135 px i wyrazy łamały się w środku (8.2, powiększenie 400%) */
  .wz-steps-a__step,.wz-steps-a__step--top,.wz-steps-a__step--bottom{padding:76px 20px 20px!important}.wz-steps-a__num{top:14px;left:20px}
}

@media (hover:none),(pointer:coarse){
  a,button,input,select,textarea,label{touch-action:manipulation}
  .btn:hover,.btn-primary:hover,[class*="row"]:hover{transform:none!important}
  /* Pole 16px zapobiega przybliżeniu strony przy fokusie w Safari — warunek
     dotyku, nie szerokości ekranu, bo iPad i telefon w poziomie (> 767px)
     miały tylko 15px (audyt responsywności, ty-7). */
  input,select,textarea{font-size:16px!important}
}

@media (orientation:landscape) and (max-height:560px) and (max-width:1023px){
  .hero-blaed__right,.wz-hero-a__visual,.kt-hero-a__visual,.om-hero__right{min-height:200px!important;height:45svh!important}
}

/* W mobilnych i tabletowych hero treść z działaniem poprzedza obraz. */
@media (max-width:900px){
  .hero-blaed__left,.om-hero__left,.wz-hero-a__inner,.kt-hero-a__inner{order:1}
  .hero-blaed__right,.om-hero__right,.wz-hero-a__visual,.kt-hero-a__visual{order:2}
}
@media (max-width:767px){
  .hero-blaed__headline{order:3}
  .hero-blaed__actions{order:4}
  .hero-blaed__right{order:5}
}

/* Wspólna oś CTA na telefonach i tabletach, z wyjątkiem przycisku menu. */
@media (max-width:1023px){
  .btn:not(.site-nav__cta-btn),.btn-link,.text-link{
    display:flex;
    justify-content:center;
    text-align:center;
    margin-inline:auto;
  }
  .btn-link,.text-link{width:max-content;max-width:100%}
}

/* mdm-theme */
/*
Theme Name: MDM Mentoring Wizerunkowy
Theme URI: https://mentorkawizerunku.pl/
Author: MDM Mentoring Wizerunkowy
Description: Autorski motyw dla strony MDM Mentoring Wizerunkowy.
Version: 0.1.0
Requires at least: 6.9
Requires PHP: 8.3
Text Domain: mdm-mentoring
*/


/* mdm-page-home-late */
/* Source: variants/v1-hero-blaed.html, drugi blok <style> — w projekcie ładowany PO responsive.css, a PRZED tablet.css (8.3). */

@media (max-width:767px){
    /* Wariant próbny: taśma zostaje nad ilustracją, a hasło oraz
       działania leżą na jej dolnej, przyciemnionej części. */
    .hero-blaed{
      min-height:0 !important;
      height:100svh !important;
      grid-template-columns:minmax(0,1fr) !important;
      grid-template-rows:auto minmax(0,1fr);
      padding-top:56px;
    }
    body.admin-bar .hero-blaed{
      height:calc(100svh - var(--wp-admin--admin-bar--height, 46px)) !important;
    }
    .hero-blaed__ticker-row{grid-column:1;grid-row:1;order:1}
    .hero-blaed__right{
      grid-column:1;
      grid-row:2;
      order:2;
      z-index:0;
      height:auto !important;
      min-height:0;
      margin:0;
    }
    .hero-blaed__right img{object-position:center top}
    .hero-blaed__right::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      background:linear-gradient(to bottom,
        rgba(24,0,10,0) 15%,
        rgba(24,0,10,.32) 35%,
        rgba(24,0,10,.82) 55%,
        rgba(19,0,8,.97) 100%);
    }
    .hero-blaed__headline{
      grid-column:1;
      grid-row:2;
      order:3;
      align-self:end;
      position:relative;
      z-index:2;
      margin:0 12px 154px;
      padding:0;
      color:var(--cream-on-dark);
      text-shadow:0 2px 12px rgba(0,0,0,.35);
    }
    .hero-blaed__headline .accent{color:inherit}
    .hero-blaed__headline .hero-blaed__line{
      display:block;
      white-space:nowrap;
      overflow-wrap:normal;
    }
    .hero-blaed .hero-blaed__headline{
      font-size:clamp(2.15rem,10.5vw,3.4rem) !important;
      line-height:1.03 !important;
      letter-spacing:-.04em;
    }
    .hero-blaed__actions{
      grid-column:1;
      grid-row:2;
      order:4;
      align-self:end;
      position:relative;
      z-index:2;
      display:flex;
      flex-direction:column;
      gap:10px;
      margin:0;
      padding:0 20px 22px;
    }
    .hero-blaed__actions .btn{min-height:48px}
    .hero-blaed__actions .btn-primary{
      background:var(--cream-on-dark);
      border-color:var(--cream-on-dark);
      color:var(--burgundy-dark);
    }
    .hero-blaed__actions .hero-blaed__secondary-button{
      color:var(--cream-on-dark);
      border-color:rgba(244,241,234,.8);
    }
    /* Ostateczna siatka ofert po współdzielonym responsive.css. */
    .offer-a__cols{
      grid-template-columns:minmax(0, 1fr) !important;
      gap:20px !important;
    }
    .offer-col{ min-width:0; }
    .offer-col__name{
      font-size:clamp(1.7rem, 7vw, 2rem);
      overflow-wrap:normal;
    }

  }
  @media (max-width:767px) and (max-height:700px){
    .hero-blaed__headline{margin-bottom:136px}
    .hero-blaed .hero-blaed__headline{font-size:clamp(2rem,9.6vw,3.1rem) !important}
    .hero-blaed__actions{gap:8px;padding-bottom:12px}
    .hero-blaed__actions .btn{min-height:44px}
  }
  /* Ostateczna geometria CTA musi być zadeklarowana po responsive.css,
     który zmienia bazowy .btn przy węższych viewportach i przy zoomie. */
  @media (min-width:901px){
    .hero-blaed__actions > .btn{
      display:inline-flex !important;
      align-items:center !important;
      align-self:stretch !important;
      height:50px !important;
      min-height:50px !important;
      padding-block:0 !important;
      margin:0 !important;
      box-sizing:border-box !important;
      line-height:1.2;
    }

    .hero-blaed__actions > .hero-blaed__secondary-button{
      flex:0 0 auto;
      justify-content:center !important;
      position:static;
      padding-inline:28px !important;
      background:transparent !important;
      border:0 !important;
      border-bottom:1px solid currentColor !important;
      border-radius:0 !important;
    }
  }

/* mdm-tablet */
/* Source: variants/tablet.css — w projekcie ładowany NA KOŃCU, po wszystkich stylach strony (8.3). */

/* Tablet 768–1179 px: jeden kadr hero jak na telefonie, więcej oddechu w treści.
   Plik ładowany po lokalnych stylach stron i po responsive.css. */
@media (min-width:768px) and (max-width:1179px){
  :root{ --page-pad:clamp(32px,5vw,64px); }
  h1,h2,h3,h4,h5,h6{ overflow-wrap:normal; }

  /* Ścieżki wsparcia: na tablecie każda oferta zajmuje osobny rząd. */
  .offer-a__cols{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .offer-a__cols .offer-col{ min-width:0; }
  .offer-a__cols .offer-col--highlight{ transform:none; }

  /* Jeden próg nawigacji dla wszystkich siedmiu stron. */
  .site-nav{ height:68px; padding-inline:var(--page-pad); justify-content:space-between; }
  .site-nav__logo img{ max-width:210px; height:auto; max-height:34px; }
  .site-nav__toggle{ display:inline-flex; margin-left:auto; }
  .site-nav .site-nav__cta-btn{ display:none; }
  .site-nav--centered .site-nav__links,
  .site-nav__links{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
    position:fixed;
    inset:76px var(--page-pad) auto;
    width:auto;
    max-width:none;
    margin:0;
    padding:24px 28px;
    transform:translateY(-12px);
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:0 20px 40px rgba(23,18,15,.14);
    z-index:90;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s var(--ease-editorial),transform .2s var(--ease-editorial),visibility 0s linear .2s;
  }
  .site-nav--centered .site-nav__links.is-open,
  .site-nav__links.is-open{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:opacity .2s var(--ease-editorial),transform .2s var(--ease-editorial),visibility 0s linear 0s;
  }
  .site-nav__links>li{ grid-column:1; min-width:0; }
  .site-nav--centered .site-nav__links a,
  .site-nav__links a{ display:flex; align-items:center; min-height:48px; width:100%; padding:12px 2px; border-top:1px solid var(--border); white-space:normal; }
  .site-nav__links li:first-child a{ border-top:0; }
  .site-nav .site-nav__links .site-nav__links-cta{ display:block; margin-top:16px; justify-self:start; }
  .site-nav .site-nav__links .site-nav__links-cta a{ justify-content:center; padding:14px 20px; border:0; background:var(--burgundy); color:var(--cream-on-dark); }

  /* Strona główna: znak wraca do paska, a hasło i CTA na ilustrację. */
  .hero-blaed{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto minmax(clamp(650px,calc(100svh - 68px),880px),auto);
    height:auto !important;
    min-height:0 !important;
    padding-top:68px;
  }
  .hero-blaed__topbar,.hero-blaed__topbar .site-nav{ height:68px; }
  .hero-blaed__nav-logo{ display:block; flex:0 1 auto; min-width:0; }
  .hero-blaed__nav-logo img{ display:block; width:min(30vw,210px); height:auto; }
  .hero-blaed__left{ display:contents; }
  .hero-blaed__wordmark{ display:none; }
  .hero-blaed__ticker-row{ grid-column:1; grid-row:1; order:1; margin-inline:var(--page-pad); padding-block:16px; }
  .hero-blaed__right{ grid-column:1; grid-row:2; order:2; z-index:0; height:auto !important; min-height:clamp(650px,calc(100svh - 68px),880px); margin:0; }
  .hero-blaed__right img{ object-position:center top; }
  .hero-blaed__right::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom,rgba(24,0,10,0) 16%,rgba(24,0,10,.25) 35%,rgba(24,0,10,.8) 58%,rgba(19,0,8,.98) 100%);
  }
  .hero-blaed__headline{
    grid-column:1; grid-row:2; order:3; align-self:end; position:relative; z-index:2;
    max-width:none !important; margin:0 var(--page-pad) 124px; padding:0;
    color:var(--cream-on-dark); text-shadow:0 2px 12px rgba(0,0,0,.35);
  }
  .hero-blaed .hero-blaed__headline{ font-size:clamp(3.5rem,6.4vw,5.15rem) !important; line-height:1.03 !important; letter-spacing:-.035em; }
  .hero-blaed__headline .accent{ color:inherit; }
  .hero-blaed__headline .hero-blaed__line{ display:block; white-space:nowrap; overflow-wrap:normal; }
  .hero-blaed__actions{
    grid-column:1; grid-row:2; order:4; align-self:end; position:relative; z-index:2;
    display:flex; align-items:center; justify-content:flex-start; gap:20px;
    margin:0; padding:0 var(--page-pad) 28px;
  }
  .hero-blaed__actions>.btn{ margin:0 !important; }
  .hero-blaed__actions .btn-primary{ background:var(--cream-on-dark); border-color:var(--cream-on-dark); color:var(--burgundy-dark); }
  .hero-blaed__actions .hero-blaed__secondary-button{ color:var(--cream-on-dark); border-color:rgba(244,241,234,.8); }

  /* Cztery pozostałe hero korzystają z mobilnego układu warstwowego. */
  .om-hero,.wz-hero-a,.kt-hero-a,.hero{
    display:grid !important; grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(clamp(680px,calc(100svh - 68px),920px),auto);
    height:auto !important; min-height:0 !important; max-height:none !important;
    gap:0 !important; overflow:hidden;
  }
  .om-hero__right,.wz-hero-a__visual,.kt-hero-a__visual,.hero__media{
    grid-column:1; grid-row:1; order:1; z-index:0;
    height:auto !important; min-height:clamp(680px,calc(100svh - 68px),920px) !important;
    margin:0; overflow:hidden;
  }
  .om-hero__right::after,.wz-hero-a__visual::after,.kt-hero-a__visual::after,.hero__media::after{
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:linear-gradient(to bottom,rgba(24,0,10,0) 18%,rgba(24,0,10,.24) 35%,rgba(24,0,10,.78) 59%,rgba(19,0,8,.98) 100%);
  }
  .om-hero__left,.wz-hero-a__inner,.kt-hero-a__inner,.hero__copy{
    grid-column:1; grid-row:1; order:2; z-index:4; align-self:end;
    width:100%; max-width:none; min-height:0;
    padding:44px var(--page-pad) 30px !important;
  }
  .om-hero__left,.wz-hero-a__inner,.kt-hero-a__inner{ justify-content:flex-end; }
  .om-hero__content{ width:100%; padding:0; }
  .om-hero .om-hero__headline,
  .wz-hero-a .wz-hero-a__headline,
  .kt-hero-a .kt-hero-a__headline,
  .hero h1{
    max-width:16ch; color:var(--cream-on-dark); line-height:1.03 !important;
    letter-spacing:-.03em; text-shadow:0 2px 12px rgba(0,0,0,.3);
  }
  .om-hero .om-hero__headline{ font-size:clamp(3.25rem,6.2vw,5rem) !important; }
  .wz-hero-a .wz-hero-a__headline,
  .kt-hero-a .kt-hero-a__headline{ font-size:clamp(3.25rem,6.1vw,5rem) !important; }
  .hero h1{ font-size:clamp(3.5rem,6.6vw,5.3rem) !important; }
  .om-hero__headline .accent,.wz-hero-a__headline .accent,.kt-hero-a__headline .accent,.hero h1 .accent{ color:inherit; }
  .om-hero .om-hero__headline-line,.wz-hero-a__headline-line,.kt-hero-a__headline-line,.hero__title-line{ white-space:normal !important; }
  .om-hero__desc,.wz-hero-a .wz-hero-a__desc,.kt-hero-a .kt-hero-a__desc,.hero .hero__lead{
    max-width:60ch; color:var(--cream-on-dark); font-size:clamp(1rem,1.6vw,1.15rem);
  }
  .om-hero .om-hero__desc{ margin-top:20px; }
  .wz-hero-a .wz-kicker,.kt-hero-a .kt-kicker{ color:var(--cream-on-dark); }
  .om-hero__actions,.wz-hero-a__cta-col,.kt-hero-a__row,.hero__actions{ margin-top:22px; }
  .om-hero__cta,.wz-hero-a__cta,.kt-hero-a__cta,.hero__actions .btn{
    min-height:50px; height:auto; background:var(--cream-on-dark); border-color:var(--cream-on-dark);
    color:var(--burgundy-dark); text-align:center;
  }
  .hero__actions{ justify-content:flex-start; }
  .hero__actions .text-link{ color:var(--cream-on-dark); }
  .hero{ padding:0 !important; }
  .hero__portrait{ inset:0 !important; width:100%; height:100%; padding:0; background:transparent; box-shadow:none; }
  .hero__portrait-stage img{ object-position:center 42%; }
  .wz-hero-a__visual img{ height:78%; transform:none; object-position:center top; }
  .wz-hero-a__tags{ max-width:100%; flex-wrap:wrap; border-color:rgba(244,241,234,.35); }
  .wz-hero-a__tags span{ color:var(--cream-on-dark); }
  .kt-hero-a__visual-photo{
    inset:0 !important; left:0 !important; top:0 !important; width:100% !important;
    height:100%; aspect-ratio:auto; padding:0; background:transparent; box-shadow:none; transform:none;
  }
  .kt-hero-a__visual-photo img{ object-position:center 25%; }

  /* Pozostałe sekcje: tablet nie dziedziczy wąskich desktopowych kolumn. */
  .problem__headline{ max-width:none; text-align:left; }
  .wsp-a__header{ grid-template-columns:1fr; gap:24px; }
  .wsp-a__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wsp-a__col{ min-height:300px; padding:120px 28px 28px; }
  .wsp-a__col:nth-child(4){ border-left:0; border-top:1px solid var(--border); }
  .wsp-a__col:nth-child(5){ border-top:1px solid var(--border); }
  .wsp-a__line,.wsp-a__dot{ display:none; }
  .cta-final-b__grid{ grid-template-columns:1fr !important; }
  .cta-final-b__photo-wrap{ order:-1; height:min(65svh,540px); }
  .cta-final-b__photo{ width:min(430px,70%); margin-inline:0; }

  .om-story__spine{ display:none; }
  .om-chapter__grid,.om-chapter--flip .om-chapter__grid{ grid-template-columns:1fr !important; gap:40px; }
  .om-chapter__visual,.om-chapter--flip .om-chapter__visual{ order:1; height:clamp(400px,48vw,560px); }
  .om-chapter__text,.om-chapter--flip .om-chapter__text{ order:2; margin-left:0; }
  .om-chapter--a .om-chapter__visual-block,.om-chapter--motiv .om-chapter__visual-block,
  .om-chapter--b .om-chapter__visual-block,.om-chapter--work .om-chapter__visual-block,
  .om-chapter--c .om-chapter__visual-block{ width:76%; }
  /* Ramki zachowują oryginalne proporcje fotografii: cover wypełnia je bez cięcia. */
  .om-chapter .om-chapter__photo{ height:auto; }
  .om-chapter .om-chapter__photo img{ height:auto; object-fit:cover; }
  .om-chapter--a .om-chapter__visual{ height:clamp(620px,70vw,740px); }
  .om-chapter--a .om-chapter__photo--main{ top:12%; bottom:auto; left:4%; width:48%; }
  .om-chapter--a .om-chapter__photo--second{ top:-3%; bottom:auto; right:7%; width:40%; }
  .om-chapter--motiv .om-chapter__visual{ height:clamp(540px,62vw,650px); }
  .om-chapter--motiv .om-chapter__photo--main{ top:0; bottom:auto; left:0; right:auto; width:55%; }
  .om-chapter--motiv .om-chapter__photo--second{ top:54%; bottom:auto; left:auto; right:5%; width:52%; z-index:4; }
  .om-chapter--b .om-chapter__visual{ height:clamp(660px,76vw,820px); }
  .om-chapter--b .om-chapter__photo--main{ top:0; bottom:auto; left:12%; width:42%; }
  .om-chapter--b .om-chapter__photo--second{ top:25%; bottom:auto; right:3%; width:38%; }
  .om-chapter--work .om-chapter__visual{ height:clamp(620px,70vw,740px); }
  .om-chapter--work .om-chapter__photo--main{ top:16%; bottom:auto; right:4%; width:58%; }
  .om-chapter--work .om-chapter__photo--second{ top:0; bottom:auto; left:0; right:auto; width:31%; z-index:3; }
  .om-chapter--work .om-chapter__photo--third{ top:auto; bottom:0; left:19%; right:auto; width:30%; }
  .om-chapter--c .om-chapter__visual{ height:clamp(600px,70vw,740px); }
  .om-chapter--c .om-chapter__photo--main{ top:20%; bottom:auto; left:4%; width:45%; }
  .om-chapter--c .om-chapter__photo--second{ top:0; bottom:auto; right:10%; width:40%; }
  .om-approach__grid{ grid-template-columns:1fr; }

  .wz-topics-a__grid,.wz-partner-a__grid,.wz-price-b__grid{ grid-template-columns:1fr !important; }
  .wz-topics-a__headline{ max-width:22ch !important; white-space:normal !important; overflow-wrap:normal; }
  .wz-topics-a__visual{ height:clamp(340px,42vw,500px); max-width:650px; margin-bottom:48px; }
  .wz-topics-a__visual-block{ top:14%; height:72%; }
  .wz-topics-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wz-steps-a__list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:none; gap:16px; }
  .wz-steps-a__step,.wz-steps-a__step--top,.wz-steps-a__step--bottom{
    grid-column:auto !important; grid-row:auto !important; min-height:190px; margin-top:0;
    padding:64px 24px 24px; box-shadow:none; transform:none;
  }
  .wz-steps-a__num{ top:18px; left:24px; font-size:3rem; }
  .wz-partner-a__headline{ max-width:24ch; font-size:clamp(2.75rem,5vw,4rem); }
  .wz-steps-a__cta .btn{ width:auto; }

  .compare__grid{ grid-template-columns:minmax(0,1fr) !important; gap:16px; }
  .compare__grid>*:last-child{ grid-column:auto; }
  .offer-card,.offer-card--main{ margin:0; border:1px solid var(--border); }
  .preview__stage{ height:auto; min-height:0; display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px; }
  .preview__rail{ display:none; }
  .preview__main{ width:min(100%,430px); height:auto; max-height:none; aspect-ratio:210/297; touch-action:pan-y; user-select:none; }
  .preview__main img{ -webkit-user-drag:none; user-select:none; }
  .preview__mobile-nav{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; width:min(100%,430px); }
  .preview__arrow{ display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid rgba(244,241,234,.5); background:transparent; color:var(--cream-on-dark); cursor:pointer; }
  .preview__arrow svg{ width:24px; height:24px; }
  .preview__count{ font-size:.75rem; letter-spacing:.12em; color:var(--cream-on-dark); }
  .preview__swipe-hint{ position:relative; z-index:2; display:block; margin:0; text-align:center; font-size:.72rem; line-height:1.45; color:rgba(244,241,234,.78); }
  .offer-card li{ font-size:max(13px,.82rem); line-height:1.5; }
  .offer-card .btn,.hero .btn,.compare .text-link{ font-size:12px; }
  .process__scope-item,.process__fit li{ font-size:max(13px,.81rem); }

  .kt-steps-a__row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .kt-steps-a__title{ font-size:clamp(1.5rem,2.5vw,1.85rem); }
  .kt-faq-a__grid,.kt-lead-b{ grid-template-columns:1fr !important; }
  .kt-faq-a__visual-photo{ left:12% !important; right:auto !important; width:68%; max-width:520px; }
  .kt-lead-b__form-wrap{ padding:56px var(--page-pad); }

  #ktB-blocker::placeholder,#wzA-date::placeholder{ font-size:13px; }

  .btn:not(.site-nav__cta-btn),.btn-link,.text-link{ margin-inline:0; }
  .site-footer__bottom a,.site-footer__bottom button,.site-footer__nav a,
  .site-footer__contact a,.text-link,.btn-link{ display:inline-flex; align-items:center; min-height:44px; }
  .site-footer__bottom a,.site-footer__bottom button{ padding-block:10px; }
  .opinions button,.opinions a{ min-width:44px; min-height:44px; }
  .lead-magnet button{ font-size:12px; }
}

@media (min-width:768px) and (max-width:900px){
  /* Węższy tablet: jeden czytelny słupek zamiast ciasnych siatek. */
  .wsp-a__row,.wz-steps-a__list,.wz-topics-list{ grid-template-columns:1fr !important; }
  .wsp-a__col{ min-height:0; padding:24px 24px 24px 90px; border-left:0; border-top:1px solid var(--border); }
  .wsp-a__num{ top:18px; left:10px; font-size:3rem; }
  .wz-steps-a__step,.wz-steps-a__step--top,.wz-steps-a__step--bottom{ min-height:110px; padding:28px 24px 24px 100px; }
  .wz-steps-a__num{ top:24px; }
  .hero-blaed .hero-blaed__headline{ font-size:clamp(3.2rem,7.2vw,4rem) !important; }
}

@media (min-width:901px) and (max-width:1179px){
  /* Piąty krok zamyka dwukolumnową sekwencję na jej osi. */
  .wz-steps-a__step:nth-child(5){
    grid-column:1 / -1 !important;
    justify-self:center;
    width:calc((100% - 16px) / 2);
  }
}

@media (min-width:768px) and (max-width:1179px) and (max-height:680px){
  /* Tablet w poziomie: treść może wydłużyć kadr, niczego nie ucina 100svh. */
  .hero-blaed,.om-hero,.wz-hero-a,.kt-hero-a,.hero{ grid-template-rows:minmax(720px,auto); }
  .hero-blaed__right,.om-hero__right,.wz-hero-a__visual,.kt-hero-a__visual,.hero__media{ min-height:720px !important; }
}

@media (min-width:1180px) and (max-width:1439px){
  /* Na wąskim laptopie asymetryczne rozdziały nadal nachodziły na tekst.
     Utrzymujemy tu bezpieczną, editorialową kolumnę aż do 1440 px. */
  .om-chapter__grid,.om-chapter--flip .om-chapter__grid{ grid-template-columns:1fr; gap:48px; }
  .om-chapter__visual,.om-chapter--flip .om-chapter__visual{ order:1; height:560px; }
  .om-chapter__text,.om-chapter--flip .om-chapter__text{ order:2; margin-left:0; }
  .om-chapter--a .om-chapter__visual-block,.om-chapter--motiv .om-chapter__visual-block,
  .om-chapter--b .om-chapter__visual-block,.om-chapter--work .om-chapter__visual-block,
  .om-chapter--c .om-chapter__visual-block{ width:76%; }
  .om-chapter--a .om-chapter__photo--main{ top:auto; bottom:0; left:4%; width:60%; height:80%; }
  .om-chapter--motiv .om-chapter__photo--second{ top:auto; bottom:0; left:0; right:auto; width:40%; height:44%; }
  .om-chapter--b .om-chapter__photo--main{ top:0; bottom:auto; left:4%; width:60%; height:80%; }
}

/* 8.3 (24.10.2026): w jednej kolumnie zdjęcie nie może wchodzić na opis sekcji.
   Kontakt „Ważne informacje”: to samo przesunięcie co na telefonie (03.10.2026) —
   przy -45px ramka zachodziła na ostatnią linię opisu o 3–13 px w całym paśmie 768–1180. */
@media (min-width:768px) and (max-width:1180px){
  .kt-faq-a__visual-photo{ top:-25px; }
}
/* Warsztaty „Wiedza…”: ramka 390×483 px jest wyśrodkowana w pionie w bloku 340–416 px,
   więc wystawała 33–71 px nad blok i zasłaniała opis; przy 450 px wystaje ≤16 px. */
@media (min-width:768px) and (max-width:1023px){
  .wz-topics-a__visual{ height:450px; }
}

/* 8.3 (24.10.2026, decyzja: skrócić): telefon poziomo łapał regułę dla niskich tabletów
   (wiersze siatki ≥720 px) — na stronie głównej pusty wiersz taśmy 720 px, potem ilustracja
   720 px, a nagłówek dopiero ok. 1200 px w dół. Teraz taśma ma swoją wysokość, a ilustracja
   z nagłówkiem i przyciskami zajmuje mniej więcej jeden ekran, jak na telefonie w pionie. */
@media (min-width:768px) and (max-width:1179px) and (max-height:500px){
  .hero-blaed{ grid-template-rows:auto auto; }
  .hero-blaed__right{ min-height:max(360px, calc(100svh - 112px)) !important; }
}

/* mdm-forms */
/* ============================================================
   Formularze Fluent Forms (krok 6.1) — wygląd pól z makiet
   kontakt.html i warsztaty.html (.kt-field / .wz-field).
   Skórka wtyczki jest wyłączona (inc/forms.php); zostaje tylko jej
   arkusz układu (kolumny). Wymagania z audytu WCAG: c2 ramki pól
   ≥ 3:1 (--field-border), f1 grupa pól wyboru w fieldset/legend,
   f2 oznaczenie pól wymaganych i komunikaty błędów/sukcesu.
   ============================================================ */

/* Reguły bazowe przeniesione z fluent-forms-public.css (Fluent Forms 6.2.16), który nie jest
   już ładowany (OSTATECZNY-AUDYT W5, 25.10.2026: 44 KB, z czego ok. 2 KB używane). Tylko to,
   czego używają nasze trzy formularze, plus stany: ukryte i warunkowe pola, wysyłanie, sukces.
   Przy dodaniu do formularza nowego typu pola sprawdzić, czy nie potrzebuje reguł wtyczki. */
.fluentform *{box-sizing:border-box}
.fluentform .clearfix:after,.fluentform .clearfix:before,.fluentform .ff-el-group:after,.fluentform .ff-el-group:before{content:" ";display:table}
.fluentform .clearfix:after,.fluentform .ff-el-group:after{clear:both}
@media (min-width:768px){
  .frm-fluent-form .ff-t-container{display:flex;gap:15px;width:100%}
  .frm-fluent-form .ff-t-container.ff_cond_v{display:flex!important}
  .frm-fluent-form .ff-t-container.mobile:not(.ff_excluded){display:block!important}
  .frm-fluent-form .ff-t-cell{display:flex;flex-direction:column;vertical-align:inherit;width:100%}
  .frm-fluent-form .ff-t-cell:first-of-type{padding-left:0}
  .frm-fluent-form .ff-t-cell:last-of-type{flex-grow:1;padding-right:0}
}
@media (max-width:768px){ .ff-t-cell{margin-left:0!important} }
.fluentform .ff-el-group{margin-bottom:20px}
.fluentform .ff-el-input--label{display:inline-block;margin-bottom:5px;position:relative}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after{color:var(--fluentform-danger);content:" *";content:" *"/"";margin-left:3px}
.fluentform .ff-el-form-control{display:block;width:100%}
.fluentform .ff-el-form-control::placeholder{color:#868e96;opacity:1}
.fluentform .ff-el-is-error .text-danger{font-size:12px;margin-top:4px}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--fluentform-danger)}
.fluentform .ff-el-help-message{color:var(--fluentform-secondary);font-size:12px;font-style:italic;margin-top:5px}
.fluentform input[type=checkbox],.fluentform input[type=radio]{display:inline-block;margin:0}
.fluentform .text-danger{color:var(--fluentform-danger)}
.fluentform textarea{max-width:100%}
.fluentform .ff-el-form-check{margin-bottom:5px}
.fluentform .ff-el-form-check-label .ff-el-form-check-input{position:relative;top:-2px;vertical-align:middle}
.fluentform .ff-text-left{text-align:left}
.ff-errors-in-stack{display:none;margin-top:15px}
.fluentform .ff-el-group.ff-hpsf-container{display:none!important;position:absolute!important;transform:translateX(1000%)!important}
.fluentform .ff-hidden,.fluentform .hidden_field,.fluentform .ff_force_hide{display:none!important}
.fluentform .ff_force_hide{visibility:hidden!important}
.fluentform .has-conditions{display:none}
.fluentform .force-hide{border:0;display:block;height:0;margin:0;opacity:0;padding:0;visibility:hidden}
.fluentform .ff-screen-reader-element{clip:rect(0,0,0,0)!important;word-wrap:normal!important;border:0!important;height:1px!important;margin:0!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}
.fluentform div.ff-el-form-hide_label>.ff-el-input--label{display:none;visibility:hidden}
.ff-message-success{border:1px solid #ced4da;box-shadow:0 1px 5px rgba(0,0,0,.1);margin-top:10px;padding:15px;position:relative}
.fluentform .ff-btn.disabled{opacity:.65}
.fluentform .ff-btn.ff-working{position:relative;transition:all .3s ease}
.fluentform .ff-btn.ff-working:after{animation:ff-progress-anim 4s 0s infinite;background:hsla(0,0%,100%,.4);bottom:0;content:"";height:5px;left:0;position:absolute;right:0}
@keyframes ff-progress-anim{0%{width:0}5%{width:0}10%{width:15%}30%{width:40%}50%{width:55%}80%{width:100%}95%{width:100%}to{width:0}}
.fluentform .ff_submitting{pointer-events:none}

.mdm-form{ margin-top:clamp(28px, 3vw, 40px); }
.mdm-form--warsztaty{ margin-top:0; }

/* odstępy marginesem, nie gap — formularz zawiera ukryte pola (nonce, id strony) */
.mdm-form .fluentform .ff-el-group{ margin:0 0 22px; }
.mdm-form .fluentform .ff-t-container .ff-el-group{ margin-bottom:0; }
.mdm-form .fluentform .ff-t-container{ margin-bottom:22px; }
.mdm-form .ff-el-group::before, .mdm-form .ff-el-group::after{ content:none; }
.mdm-form .ff-t-container{ gap:20px; }
.mdm-form .ff-t-cell{ padding:0; }
.mdm-form .ff-t-cell .ff-el-group{ height:100%; display:flex; flex-direction:column; }
.mdm-form .ff-t-cell .ff-el-input--content{ margin-top:auto; }

/* etykiety */
.mdm-form fieldset.ff-el-group{ border:0; padding:0; min-width:0; }
.mdm-form .ff-el-input--label{ margin:0 0 8px; padding:0; }
.mdm-form .ff-el-input--label label,
.mdm-form legend.ff-el-input--label{
  display:block;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:.8125rem;
  line-height:1.4;
  color:var(--ink);
}
.mdm-form .ff-el-is-required label::after{ content:" *"; color:var(--burgundy); }
.mdm-form__hint{ font-weight:400; font-size:.75rem; color:var(--muted); }
.mdm-form .fluentform .ff-el-help-message{ margin-top:8px; font-family:var(--font-sans); font-size:.75rem; color:var(--muted); font-style:normal; }

/* pola */
.mdm-form .ff-el-form-control{
  display:block;
  width:100%;
  font-family:var(--font-sans);
  font-size:.9375rem;
  line-height:1.4;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--field-border);
  border-radius:0;
  padding:12px 14px;
  box-shadow:none;
  transition:border-color .2s var(--ease-editorial);
}
.mdm-form select.ff-el-form-control{
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2317120F' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  cursor:pointer;
}
.mdm-form .ff-el-form-control::placeholder{ color:var(--muted); opacity:1; }
.mdm-form .ff-el-form-control:hover{ border-color:var(--ink); }
.mdm-form .ff-el-form-control:focus{ outline:none; }
.mdm-form .ff-el-form-control:focus-visible{ outline:2px solid var(--burgundy); outline-offset:1px; border-color:var(--burgundy); }
.mdm-form textarea.ff-el-form-control{ resize:vertical; min-height:120px; }

/* pola wyboru */
.mdm-form .ff-el-form-check{ margin:0 0 10px; }
.mdm-form .ff-el-form-check:last-of-type{ margin-bottom:0; }
.mdm-form .ff-el-form-check-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:var(--font-sans);
  font-size:.9375rem;
  font-weight:500;
  line-height:1.45;
  color:var(--ink);
  cursor:pointer;
}
.mdm-form .ff-el-form-check-input{ margin:3px 0 0; width:16px; height:16px; accent-color:var(--burgundy); flex-shrink:0; }
.mdm-form .ff-el-form-check-input:focus-visible{ outline:2px solid var(--burgundy); outline-offset:2px; }

/* informacja o danych osobowych */
.mdm-form .mdm-form__notice{ margin:0; max-width:62ch; font-family:var(--font-sans); font-size:.75rem; line-height:1.6; color:var(--muted); }
.mdm-form .mdm-form__notice a{ color:var(--ink); text-underline-offset:2px; }
.mdm-form .mdm-form__notice a:hover{ color:var(--burgundy); }

/* przycisk: wygląd .btn.btn-primary z tokens.css */
.mdm-form .fluentform .ff_submit_btn_wrapper{ margin:8px 0 0; }
.mdm-form .ff-btn-submit{ border-radius:0; }
.mdm-form .ff-btn-submit::after{
  content:"";
  width:16px;
  height:16px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease-editorial);
}
.mdm-form .ff-btn-submit:hover::after{ transform:translateX(5px); }
.mdm-form .ff-btn-submit:disabled, .mdm-form .ff-working .ff-btn-submit{ opacity:.85; cursor:progress; }
.mdm-form .ff-btn-submit:focus-visible{ outline:2px solid var(--burgundy); outline-offset:3px; }

/* błędy (Fluent Forms dodaje role="alert" i aria-invalid) */
.mdm-form .fluentform .ff-el-is-error .ff-el-form-control{ border-color:var(--burgundy); border-width:2px; padding:11px 13px; }
.mdm-form .fluentform .ff-el-is-error select.ff-el-form-control{ padding-right:39px; }
.mdm-form .error.text-danger{
  display:flex;
  gap:6px;
  margin-top:8px;
  font-family:var(--font-sans);
  font-size:.8125rem;
  font-weight:500;
  line-height:1.4;
  color:var(--burgundy);
}
.mdm-form .error.text-danger::before{ content:"!"; flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:var(--burgundy); color:var(--cream-on-dark); font-size:.6875rem; font-weight:700; line-height:16px; text-align:center; margin-top:1px; }
.mdm-form .ff-errors-in-stack{ margin-top:16px; }
.mdm-form .ff-errors-in-stack:empty{ display:none; }
.mdm-form .error-clear{ display:none; }

/* sukces (role="status") */
.mdm-form .ff-message-success{
  padding:clamp(24px, 3vw, 36px);
  background:var(--surface);
  border-left:3px solid var(--burgundy);
  font-family:var(--font-sans);
  font-size:.9375rem;
  line-height:1.6;
  color:var(--ink);
}
.mdm-form .ff-message-success:focus{ outline:none; }
.mdm-form .ff-message-success p{ margin:0; }

/* Lead magnet na bordowym tle – zachowuje układ i kontrast pierwowzoru. */
.lead-magnet .mdm-form--lead-magnet{ margin-top:clamp(28px, 3vw, 40px); max-width:680px; }
.lead-magnet .mdm-form--lead-magnet .frm-fluent-form > fieldset{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:0 12px;
}
.lead-magnet .mdm-form--lead-magnet .mdm-lead-email{ grid-column:1; grid-row:1; margin-bottom:0; }
.lead-magnet .mdm-form--lead-magnet .ff_submit_btn_wrapper{ grid-column:2; grid-row:1; margin:0; }
.lead-magnet .mdm-form--lead-magnet .mdm-lead-consent,
.lead-magnet .mdm-form--lead-magnet .mdm-form__notice-wrap,
.lead-magnet .mdm-form--lead-magnet .ff-errors-in-stack{ grid-column:1 / -1; }
.lead-magnet .mdm-form--lead-magnet .mdm-lead-consent{ margin-top:18px; margin-bottom:0; }
.lead-magnet .mdm-form--lead-magnet .mdm-form__notice-wrap{ margin-top:16px; margin-bottom:0; }
.lead-magnet .mdm-form--lead-magnet .ff-el-input--label label,
.lead-magnet .mdm-form--lead-magnet legend.ff-el-input--label{ color:rgba(244,241,234,.82); }
.lead-magnet .mdm-form--lead-magnet .ff-el-form-control{
  height:50px;
  color:var(--cream-on-dark);
  background:rgba(244,241,234,.06);
  border-color:rgba(244,241,234,.58);
}
.lead-magnet .mdm-form--lead-magnet .ff-el-form-control::placeholder{ color:rgba(244,241,234,.66); }
.lead-magnet .mdm-form--lead-magnet .ff-el-form-control:hover{ border-color:var(--cream-on-dark); }
.lead-magnet .mdm-form--lead-magnet .ff-el-form-control:focus-visible{ outline-color:var(--cream-on-dark); border-color:var(--cream-on-dark); }
.lead-magnet .mdm-form--lead-magnet .ff-el-form-check-label{ color:rgba(244,241,234,.84); font-size:.8125rem; }
.lead-magnet .mdm-form--lead-magnet .ff-el-form-check-input{ accent-color:var(--cream-on-dark); }
.lead-magnet .mdm-form--lead-magnet .ff-el-form-check-input:focus-visible{ outline-color:var(--cream-on-dark); }
.lead-magnet .mdm-form--lead-magnet .mdm-form__notice{ color:rgba(244,241,234,.68); }
.lead-magnet .mdm-form--lead-magnet .mdm-form__notice a{ color:rgba(244,241,234,.9); }
.lead-magnet .mdm-form--lead-magnet .mdm-form__notice a:hover{ color:var(--cream-on-dark); }
.lead-magnet .mdm-form--lead-magnet .ff-btn-submit{
  min-height:50px;
  padding-inline:24px;
  color:var(--burgundy-dark);
  background:var(--surface);
  border-color:var(--surface);
  white-space:nowrap;
}
.lead-magnet .mdm-form--lead-magnet .ff-btn-submit:hover{ color:var(--burgundy-dark); background:var(--cream-on-dark); border-color:var(--cream-on-dark); }
.lead-magnet .mdm-form--lead-magnet .ff-btn-submit:focus-visible{ outline-color:var(--cream-on-dark); }
.lead-magnet .mdm-form--lead-magnet .error.text-danger{ color:#F3C969; }
.lead-magnet .mdm-form--lead-magnet .error.text-danger::before{ color:var(--burgundy-dark); background:#F3C969; }
.lead-magnet .mdm-form--lead-magnet .ff-message-success{ color:var(--ink); border-left-color:var(--cream-on-dark); }
.lead-magnet .mdm-form__missing{ margin-top:28px; color:var(--cream-on-dark); }

@media (max-width:960px){
  .mdm-form .ff-t-container{ display:grid; grid-template-columns:1fr; gap:22px; }
  .mdm-form .ff-t-cell{ flex-basis:auto !important; }
}

@media (max-width:860px){
  /* iOS Safari powiększa widok, gdy pole ma czcionkę < 16px. */
  .mdm-form .ff-el-form-control{ font-size:1rem; }
  .mdm-form .ff-el-input--label label, .mdm-form legend.ff-el-input--label{ font-size:.875rem; }
  .mdm-form .ff-el-form-check-label{ min-height:24px; }
}

@media (max-width:560px){
  .lead-magnet .mdm-form--lead-magnet .frm-fluent-form > fieldset{ grid-template-columns:1fr; gap:0; }
  .lead-magnet .mdm-form--lead-magnet .mdm-lead-email,
  .lead-magnet .mdm-form--lead-magnet .ff_submit_btn_wrapper{ grid-column:1; grid-row:auto; }
  .lead-magnet .mdm-form--lead-magnet .ff_submit_btn_wrapper{ margin-top:12px; }
  .lead-magnet .mdm-form--lead-magnet .ff-btn-submit{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .mdm-form .ff-btn-submit:hover::after{ transform:none; }
}

/* mdm-complianz */
/* ============================================================
   Baner zgody Complianz (krok 6.7) w wyglądzie projektu 1.13
   (variants/cookies.css, wersja zwarta 23.10.2026): karta 400 px
   wyśrodkowana przy dolnej krawędzi, kwadratowe rogi, bordowa linia u góry,
   nagłówek Instrument Serif, odmowa i zgoda o tej samej wadze.
   Selektory z #cmplz-cookiebanner-container, żeby wygrać z arkuszem
   generowanym przez Complianz bez !important.
   ============================================================ */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  left:50%;
  right:auto;
  top:auto;
  bottom:24px;
  translate:-50% 0;
  transform:none;
  width:min(400px, calc(100vw - 2 * var(--page-pad)));
  max-height:calc(100dvh - 48px);
  margin:0;
  padding:26px 26px 22px;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
  background:var(--canvas);
  border:0;
  border-top:3px solid var(--burgundy);
  border-radius:0;
  box-shadow:0 18px 48px rgba(23,18,15,.18), 0 2px 6px rgba(23,18,15,.06);
  color:var(--ink);
  font-family:var(--font-sans);
}
/* Nie nadpisuj stanu zamknięcia ustawianego przez Complianz po zapisaniu decyzji. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed{ display:none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner > *{ grid-column:1 / -1; }
#cmplz-cookiebanner-container .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-close{ display:none; }

/* nagłówek i treść */
#cmplz-cookiebanner-container .cmplz-header{ display:block; text-align:left; }
#cmplz-cookiebanner-container .cmplz-title{
  display:block;
  justify-self:start;
  margin:0;
  text-align:left;
  color:var(--burgundy);
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.01em;
}
#cmplz-cookiebanner-container .cmplz-body{ display:grid; gap:4px; width:100%; min-width:0; max-height:none; overflow:visible; }
#cmplz-cookiebanner-container .cmplz-message{
  width:auto;
  max-width:100%;
  margin:0;
  color:var(--ink);
  font-size:.8125rem;
  line-height:1.6;
}

/* kategorie (po „Wybierz ustawienia”) */
#cmplz-cookiebanner-container .cmplz-categories{ margin-top:10px; border-top:1px solid var(--border); }
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category{
  margin:0;
  padding:0;
  background:none;
  border-radius:0;
  border-bottom:1px solid var(--border);
}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header{
  grid-template-columns:1fr auto;
  gap:16px;
  padding:14px 0 4px;
}
#cmplz-cookiebanner-container .cmplz-category-title{
  color:var(--ink);
  font-size:.8125rem;
  font-weight:600;
}
#cmplz-cookiebanner-container .cmplz-always-active{
  color:var(--burgundy);
  font-size:.6875rem;
  font-weight:600;
}
#cmplz-cookiebanner-container .cmplz-always-active .cmplz-banner-checkbox{ display:none; }
/* Opisy kategorii widoczne od razu (jak w projekcie), bez rozwijania strzałką. */
#cmplz-cookiebanner-container .cmplz-category-toggle{ display:none; }
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-description{
  display:block;
  padding:0 0 14px;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.5;
}
#cmplz-cookiebanner-container .cmplz-description-statistics-anonymous{ display:none; }
/* Zwykły kwadratowy checkbox zamiast suwaka Complianz. */
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox{
  position:static;
  width:20px;
  height:20px;
  margin:0;
  opacity:1;
  appearance:auto;
  accent-color:var(--burgundy);
  filter:none;
  cursor:pointer;
}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before,
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after{ display:none; }

/* przyciski: Odrzuć | Akceptuj, pod spodem „Wybierz ustawienia” jako link */
#cmplz-cookiebanner-container .cmplz-buttons{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{
  min-height:46px;
  width:100%;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--burgundy);
  border-radius:0;
  background:var(--burgundy);
  color:var(--cream-on-dark);
  font-family:var(--font-sans);
  font-size:.6875rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:normal;
  transition:background-color .2s var(--ease-editorial), color .2s var(--ease-editorial);
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:hover{ background:var(--canvas); color:var(--burgundy); }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-deny{ order:1; }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept{ order:2; }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-save-preferences{ order:3; grid-column:1 / -1; }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences{
  order:4;
  grid-column:1 / -1;
  justify-self:start;
  width:auto;
  min-height:24px;
  padding:0;
  border:0;
  background:none;
  color:var(--burgundy);
  text-decoration:underline;
  text-underline-offset:4px;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences::after{ content:" +"; display:inline-block; margin-left:6px; text-decoration:none; }
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences:hover{ background:none; color:var(--ink); }

/* linki do dokumentów */
#cmplz-cookiebanner-container .cmplz-documents{ display:flex; justify-content:flex-start; }
#cmplz-cookiebanner-container .cmplz-documents ul{ display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:flex-start; margin:0; padding:0; }
#cmplz-cookiebanner-container .cmplz-links .cmplz-link{
  color:var(--burgundy);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.04em;
  text-decoration:underline;
  text-underline-offset:4px;
}
#cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover{ color:var(--ink); }

#cmplz-cookiebanner-container .cmplz-cookiebanner :focus-visible{ outline:2px solid var(--burgundy); outline-offset:3px; }

/* Domyślny pływający przycisk Complianz zastępuje link „Ustawienia cookies” w stopce. */
#cmplz-manage-consent .cmplz-manage-consent{ display:none; }

@media (max-width:767px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    left:50%;
    right:auto;
    bottom:max(12px, env(safe-area-inset-bottom));
    width:calc(100% - 24px);
    max-height:calc(100dvh - 24px);
    gap:14px;
    padding:20px 18px 16px;
  }
  #cmplz-cookiebanner-container .cmplz-title{ font-size:1.6rem; }
  /* Complianz ustawia tu 1 kolumnę z !important (<= 425 px); etykieta i stan zostają w jednym wierszu. */
  #cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header{ grid-template-columns:1fr auto !important; }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{ min-height:44px; }
}
/* Telefon poziomo (wysokość ≤ 400 px): Complianz pomniejsza tu baner przez zoom 0.6, a przyciski
   i linki przez zoom 0.5 (tekst ok. 6 px, linki 4 px wysokości). Przywracamy naturalną skalę;
   jeśli baner się nie mieści, przewija się w sobie (8.3). */
@media (max-height:400px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    zoom:1;
    height:auto;
    width:min(560px, calc(100% - 24px));
    max-height:calc(100dvh - 16px);
    bottom:8px;
    overflow-y:auto;
    padding:16px 20px 14px !important;
    gap:10px;
    display:grid;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header{ max-height:none; margin-bottom:0 !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{ margin-top:0 !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{ gap:10px !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{ zoom:1 !important; height:auto !important; min-height:44px !important; padding:10px 14px !important; font-size:.6875rem !important; line-height:1.3 !important; white-space:normal !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences{ padding-inline:0 !important; justify-self:start; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-information{ zoom:1 !important; }
  #cmplz-cookiebanner-container .cmplz-title{ font-size:1.4rem; }
}
@media (prefers-reduced-motion:reduce){
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{ transition:none; }
}

/* ---------- link w stopce ---------- */
.site-footer__cookie-settings{
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  transition:color .25s ease;
}
.site-footer__cookie-settings:hover{ color:var(--cream-on-dark); }
.site-footer__cookie-settings:focus-visible{ outline:2px solid var(--cream-on-dark); outline-offset:3px; }

/* ---------- polityka cookies z generatora Complianz (page.php) ---------- */
.privacy__layout--single{ grid-template-columns:minmax(0, 760px); }
.privacy--cookies .privacy__content h2{ font-size:clamp(2rem, 3.4vw, 3.2rem); }
.privacy--cookies .privacy__content h3,
.privacy--cookies .privacy__content h4{ margin:32px 0 14px; font:400 1.6rem/1.2 var(--font-display); color:var(--ink); }
.privacy--cookies .privacy__content table{ width:100%; margin:0 0 24px; border-collapse:collapse; font-size:.875rem; }
.privacy--cookies .privacy__content th,
.privacy--cookies .privacy__content td{ padding:10px 12px 10px 0; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.privacy--cookies .privacy__content details{ margin:0 0 12px; border-bottom:1px solid var(--border); }
.privacy--cookies .privacy__content summary{ padding:12px 0; cursor:pointer; font-weight:600; }
/* Sekcja 6 (usługi): nazwa i kategoria w jednej linii, strzałka pokazuje, że wpis się rozwija (9.7c). */
.privacy--cookies #cmplz-cookies-overview details > summary.cmplz-service-header{ list-style:none; display:flex; align-items:baseline; gap:16px; }
.privacy--cookies #cmplz-cookies-overview details > summary.cmplz-service-header::-webkit-details-marker{ display:none; }
.privacy--cookies #cmplz-cookies-overview details > summary.cmplz-service-header::after{
  content:""; flex:none; align-self:center; width:8px; height:8px; margin:0 4px 4px 0;
  border:solid var(--ink); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
  transition:transform .2s ease;
}
.privacy--cookies #cmplz-cookies-overview details[open] > summary.cmplz-service-header::after{ transform:rotate(-135deg); margin-bottom:-4px; }
.privacy--cookies .privacy__content details.cmplz-service-desc[open]{ padding-bottom:24px; }
.privacy--cookies #cmplz-cookies-overview details > summary.cmplz-service-header h3{ margin:0; flex:1; }
.privacy--cookies #cmplz-cookies-overview .cmplz-service-category{ margin:0; font-size:.875rem; font-weight:600; }
.privacy--cookies #cmplz-cookies-overview .cookies-per-purpose h5{ margin:0; }
@media (prefers-reduced-motion:reduce){ .privacy--cookies #cmplz-cookies-overview details > summary.cmplz-service-header::after{ transition:none; } }
.privacy--cookies .cmplz-manage-consent-container{ margin:0 0 24px; }

/* cmplz-banner-1-optin */
input[type="checkbox"].cmplz-category { width: initial; -webkit-appearance: checkbox;}input[type="checkbox"].cmplz-category:checked::before { content: '';}.cmplz-cookiebanner { box-sizing: border-box;}:root { --cmplz_banner_width: 400px; --cmplz_banner_background_color: #F7F5F0; --cmplz_banner_border_color: #5C0017; --cmplz_banner_border_width: 0px 0px 0px 0px ; --cmplz_banner_border_radius: 0px 0px 0px 0px; --cmplz_banner_margin: 10px; --cmplz_categories-height: 110px; --cmplz_title_font_size: 15px; --cmplz_text_line_height: calc(var(--cmplz_text_font_size) * 1.5); --cmplz_text_color: #17120F; --cmplz_hyperlink_color: #5C0017; --cmplz_text_font_size: 12px; --cmplz_link_font_size: 12px; --cmplz_category_body_font_size: 12px; --cmplz_button_accept_background_color: #5C0017; --cmplz_button_accept_border_color: #5C0017; --cmplz_button_accept_text_color: #F4F1EA; --cmplz_button_deny_background_color: #5C0017; --cmplz_button_deny_border_color: #5C0017; --cmplz_button_deny_text_color: #F4F1EA; --cmplz_button_settings_background_color: #F7F5F0; --cmplz_button_settings_border_color: #F7F5F0; --cmplz_button_settings_text_color: #5C0017; --cmplz_button_border_radius: 0px 0px 0px 0px; --cmplz_button_font_size: 15px; --cmplz_category_header_always_active_color: green; --cmplz_category_header_title_font_size: 14px; --cmplz_category_header_active_font_size: 12px; --cmplz-manage-consent-height: 50px; --cmplz-manage-consent-offset: -35px; --cmplz_slider_active_color: #5C0017; --cmplz_slider_inactive_color: #726B63; --cmplz_slider_bullet_color: #ffffff;}body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) { pointer-events: none !important; user-select: none !important;}.cmplz-cookiebanner * { pointer-events: auto !important; user-select: auto !important;}#cmplz-manage-consent .cmplz-manage-consent { margin: unset; z-index: 9998; color: var(--cmplz_text_color); background-color: var(--cmplz_banner_background_color); border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; line-height: initial; position: fixed; bottom: var(--cmplz-manage-consent-offset); min-width: 100px; height: var(--cmplz-manage-consent-height); right: 40px; padding: 15px; cursor: pointer; animation: mc_slideOut 0.5s forwards;}#cmplz-manage-consent .cmplz-manage-consent:active { outline: none; border: none;}#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed { display: none;}#cmplz-manage-consent .cmplz-manage-consent:hover,#cmplz-manage-consent .cmplz-manage-consent:focus { animation: mc_slideIn 0.5s forwards; animation-delay: 0;}@-webkit-keyframes mc_slideIn { 100% { bottom: 0; }}@keyframes mc_slideIn { 100% { bottom: 0; }}@-webkit-keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-header .cmplz-title { display: none; }}.cmplz-cookiebanner { max-height: calc(100vh - 20px); overflow-y: auto; position: fixed; height: auto; left: 50%; top: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); grid-template-rows: minmax(0, 1fr); z-index: 99999; background: var(--cmplz_banner_background_color);}.cmplz-cookiebanner a { transition: initial;}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn.tcf { display: none;}.cmplz-cookiebanner.cmplz-dismissed { display: none;}.cmplz-cookiebanner .cmplz-body { width: 100%; grid-column: span 3; overflow-y: auto; overflow-x: hidden; max-height: 55vh;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar { width: 5px; background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb { background-color: var(--cmplz_button_accept_background_color); border-radius: 10px;}@media (min-width: 350px) { .cmplz-cookiebanner .cmplz-body { min-width: 300px; }}@media (max-height: 400px) { .cmplz-cookiebanner { height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; gap: 1px; grid-row-gap: 1px; padding: 7px 12px !important; zoom: 0.6; } .cmplz-cookiebanner .cmplz-body { flex: 1; min-height: 0; overflow-y: auto; max-height: none; margin-top: 15px !important; } .cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-divider, .cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner .cmplz-buttons, .cmplz-cookiebanner .cmplz-documents { flex-shrink: 0; } .cmplz-cookiebanner .cmplz-header { margin-bottom: 15px !important; max-height: 10px; } .cmplz-close { zoom: 0.6 !important; } .cmplz-cookiebanner .cmplz-buttons { gap: 1px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: 15vh !important; min-height: unset !important; padding: 0 !important; white-space: nowrap !important; font-size: 1.1rem !important; line-height: 14px !important; zoom: 0.5 !important; } .cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-information { zoom: 0.5 !important; }}@media (max-height: 400px) and (max-width: 768px) { .cmplz-cookiebanner { gap: 1px; }}.cmplz-cookiebanner { border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); padding: 15px 20px; display: grid; grid-gap: 10px;}.cmplz-cookiebanner .cmplz-divider { margin-left: -20px; margin-right: -20px;}.cmplz-cookiebanner .cmplz-header { grid-template-columns: 100px 1fr 100px; align-items: center; display: grid; grid-column: span 3;}@media (max-width: 399px) { .cmplz-cookiebanner .cmplz-header { grid-template-columns: auto 1fr auto; }}.cmplz-cookiebanner .cmplz-logo svg { max-height: 35px; width: inherit;}.cmplz-cookiebanner .cmplz-logo img { max-height: 40px; width: inherit;}.cmplz-cookiebanner .cmplz-title { justify-self: center; grid-column-start: 2; font-size: var(--cmplz_title_font_size); color: var(--cmplz_text_color); font-weight: 500;}.cmplz-cookiebanner .cmplz-close { line-height: 20px; justify-self: end; grid-column-start: 3; font-size: 20px; cursor: pointer; width: 20px; height: 20px; color: var(--cmplz_text_color);}.cmplz-cookiebanner .cmplz-close svg { width: 20px; height: 20px;}.cmplz-cookiebanner .cmplz-close:hover { text-decoration: none; line-height: initial; font-size: 18px;}.cmplz-cookiebanner .cmplz-message { word-wrap: break-word; font-size: var(--cmplz_text_font_size); line-height: var(--cmplz_text_line_height); color: var(--cmplz_text_color); margin-bottom: 5px;}.cmplz-cookiebanner .cmplz-message a { color: var(--cmplz_hyperlink_color);}.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-links,.cmplz-cookiebanner .cmplz-buttons,.cmplz-cookiebanner .cmplz-divider { grid-column: span 3;}.cmplz-cookiebanner .cmplz-categories.cmplz-tcf .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto;}.cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(239, 239, 239, 0.5);}.cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { display: grid; grid-template-columns: 1fr auto 15px; grid-template-rows: minmax(0, 1fr); align-items: center; grid-gap: 10px; padding: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 500; grid-column-start: 1; justify-self: start; font-size: var(--cmplz_category_header_title_font_size); color: var(--cmplz_text_color); margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-size: var(--cmplz_category_header_active_font_size); font-weight: 500; color: var(--cmplz_category_header_always_active_color);}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox { display: flex; align-items: center; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input[data-category=cmplz_functional] { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { cursor: pointer; content: ''; transform: rotate(0deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-size: cover; height: 18px; width: 18px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-size: var(--cmplz_category_body_font_size); color: var(--cmplz_text_color); margin: 0; max-width: 100%; padding: 10px;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-category .cmplz-category-header { grid-template-columns: 1fr!important; }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-message { margin-right: 5px; }}.cmplz-cookiebanner .cmplz-buttons { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 45px; padding: 10px; margin: initial; width: 100%; white-space: nowrap; border-radius: var(--cmplz_button_border_radius); cursor: pointer; font-size: var(--cmplz_button_font_size); font-weight: 500; text-decoration: none; line-height: 20px; text-align: center; flex: initial;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { text-decoration: none;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: var(--cmplz_button_accept_background_color); border: 1px solid var(--cmplz_button_accept_border_color); color: var(--cmplz_button_accept_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { background-color: var(--cmplz_button_deny_background_color); border: 1px solid var(--cmplz_button_deny_border_color); color: var(--cmplz_button_deny_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn { display: flex; align-items: center; justify-content: center; padding: initial;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-links.cmplz-information { display: initial; text-align: center; }}.cmplz-cookiebanner .cmplz-links { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-links.cmplz-information { justify-content: space-between;}.cmplz-cookiebanner .cmplz-links.cmplz-documents { justify-content: center;}.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--cmplz_hyperlink_color); font-size: var(--cmplz_link_font_size); text-decoration: underline; margin: 0;}.cmplz-cookiebanner .cmplz-links .cmplz-link.cmplz-read-more-purposes { display: none;}.cmplz-cookiebanner .cmplz-links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--cmplz_banner_margin); justify-content: center;}.cmplz-categories .cmplz-category .cmplz-description-statistics-anonymous { display: none;}.cmplz-categories .cmplz-category .cmplz-description-statistics { display: block;}.cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-categories .cmplz-category .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon.cmplz-open { transform: rotate(180deg);}.cmplz-cookiebanner { top: initial; left: 10px; bottom: 10px; transform: initial;}@media (min-width: 768px) { .cmplz-cookiebanner { min-width: var(--cmplz_banner_width); max-width: 100%; display: grid; grid-row-gap: 10px; }}@media (max-width: 768px) { .cmplz-cookiebanner { left: initial; right: initial; bottom: 0; width: 100%; } .cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }}@media (min-width: 768px) { .cmplz-message, .cmplz-categories { width: calc(var(--cmplz_banner_width) - 42px); }}#cmplz-manage-consent .cmplz-manage-consent { left: 40px; right: initial;}.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-save-preferences,.cmplz-cookiebanner .cmplz-link.cmplz-manage-options,.cmplz-cookiebanner .cmplz-manage-vendors,.cmplz-cookiebanner .cmplz-read-more,.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { display: none;}.cmplz-cookiebanner .cmplz-categories.cmplz-fade-in { animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; display: block;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.cmplz-cookiebanner .cmplz-links.cmplz-information { display: none;}.cmplz-cookiebanner .cmplz-preferences,.cmplz-manage-consent-container .cmplz-preferences { display: none;}.cmplz-cookiebanner .cmplz-marketing:not(.cmplz-tcf),.cmplz-manage-consent-container .cmplz-marketing:not(.cmplz-tcf) { display: none;}@media (max-width: 768px) { #cmplz-manage-consent .cmplz-manage-consent { display: none; }}.cmplz-logo { display: none !important;}.cmplz-cookiebanner .cmplz-close { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox { position: relative;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { opacity: 0; margin: 0; margin-top: -10px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; position: absolute; z-index: 1; top: 0px; left: 0px; width: 40px; height: 20px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before { box-shadow: 0 0 0 2px #245fcc;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before { display: block; background-color: var(--cmplz_slider_active_color); content: ""; padding-left: 6px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after { left: 14px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative; padding-left: 30px; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before,.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { box-sizing: border-box; position: absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: background-color 0.3s, left 0.3s;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before { display: block; content: ""; color: #fff; box-sizing: border-box; font-family: 'FontAwesome', sans-serif; padding-left: 23px; font-size: 12px; line-height: 20px; background-color: var(--cmplz_slider_inactive_color); left: 0px; top: -7px; height: 15px; width: 28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { display: block; content: ""; letter-spacing: 20px; background: var(--cmplz_slider_bullet_color); left: 4px; top: -5px; height: 11px; width: 11px;}