/* =====================================================================
   Fizjoterapia Paweł Jędrasik, Inowrocław
   Jeden arkusz, zero zależności.

   ZASADY, KTÓRYCH PILNUJEMY:
   1. Odstępy wyłącznie ze skali --s1..--s10. Żadnych wartości "z palca".
   2. Podziały robimy kreską (hairline), nie ramką i nie cieniem.
   3. Jedno tło na całą stronę. Odcień i ciemny blok stosujemy oszczędnie.
   4. Treść jest widoczna domyślnie. Animacja to wyłącznie dodatek.
   ===================================================================== */

/* ---------------------------------------------------------------- FONTY */
/* ---------------------------------------------------------------- FONTY
   Dwa podzbiory na rodzine. Sam "latin-ext" nie zawiera O z kreska (U+00D3),
   przez co te litery lecialy na czcionke systemowa i naglowki mieszaly kroje. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------------------------------------------------------------- TOKENY */
:root {
  /* Skala odstępów: jedyne dozwolone wartości */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 7rem;
  --s10: 10rem;

  --gut: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --wrap: 1240px;
  --narrow: 720px;
  --sec: clamp(4.5rem, 3rem + 5vw, 7rem);
  --measure: 62ch;
  --rule: 1px;

  /* Kolory */
  --paper: #fbf9f5;
  --paper-a: #fbf9f5f2;
  --tint: #f3f0e9;
  --dark: #14120f;
  --ink: #23201c;
  --ink-strong: #14120f;
  --ink-soft: #6b655c;
  --line: #e2dcd0;
  --line-strong: #14120f;
  --accent: #1f4c3f;
  --accent-hi: #163828;
  --accent-on: #fbf9f5;
  --star: #b8860b;

  --font-dsp: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dsp-w: 400;
  --dsp-track: -0.015em;
  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);

  color-scheme: light;
}

/* ---------------------------------------------------------------- RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
img,
picture,
svg,
iframe {
  display: block;
  max-inline-size: 100%;
}
img {
  block-size: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
}
dialog {
  max-inline-size: 100%;
  max-block-size: 100%;
  border: 0;
  padding: 0;
  background: transparent;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--s8);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------- BAZA */
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.14vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  letter-spacing: var(--dsp-track);
  line-height: 1.06;
  color: var(--ink-strong);
  text-wrap: balance;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
}
h1 {
  font-size: clamp(2.4rem, 1.3rem + 4vw, 4.2rem);
}
h2 {
  font-size: clamp(1.95rem, 1.35rem + 2.3vw, 3rem);
  line-height: 1.1;
}
h3 {
  font-size: clamp(1.12rem, 1.04rem + 0.35vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 14;
}
h4 {
  font-size: 1.05rem;
  line-height: 1.35;
}
p {
  text-wrap: pretty;
}
strong,
b {
  font-weight: 600;
}
em {
  font-style: italic;
}
::selection {
  background: var(--accent);
  color: var(--accent-on);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.on-dark :focus-visible {
  outline-color: #cfe0d6;
}

/* ---------------------------------------------------------------- UKŁAD */
.wrap {
  inline-size: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
}
.wrap-narrow {
  inline-size: min(100% - var(--gut) * 2, var(--narrow));
  margin-inline: auto;
}
.section {
  padding-block: var(--sec);
}
.section-tight {
  padding-block: var(--s8);
}
.on-tint {
  background: var(--tint);
}
.on-dark {
  background: var(--dark);
  color: #e8e3da;
}
.on-dark :is(h1, h2, h3, h4) {
  color: #fff;
}
.on-dark p {
  color: #a9a296;
}

.grid {
  display: grid;
  gap: var(--s7);
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}
:is(.grid, .split, .steps, .stat-strip) > * {
  min-inline-size: 0;
}

.stack > * + * {
  margin-block-start: var(--stack-gap, var(--s4));
}
.stack-s {
  --stack-gap: var(--s2);
}
.stack-l {
  --stack-gap: var(--s5);
}

.split {
  display: grid;
  gap: var(--s7);
  align-items: center;
}
@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s8);
  }
  .split-wide-start {
    grid-template-columns: 1.15fr 1fr;
  }
  .split-wide-end {
    grid-template-columns: 1fr 1.15fr;
  }
  .split-top {
    align-items: start;
  }
}

.section-head {
  max-inline-size: 48ch;
}
.section-head .lead,
.section-head p {
  margin-block-start: var(--s5);
}
.section-head.text-center {
  margin-inline: auto;
}

/* ---------------------------------------------------------------- ETYKIETY */
.eyebrow {
  display: block;
  margin-block-end: var(--s4);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.on-dark .eyebrow {
  color: #9bbba9;
}
.lead {
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.on-dark .lead,
.on-dark .muted {
  color: #a9a296;
}
.muted {
  color: var(--ink-soft);
}
.note {
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.text-center {
  text-align: center;
}
.measure {
  max-inline-size: var(--measure);
}
.measure-center {
  max-inline-size: var(--measure);
  margin-inline: auto;
}
.mt-l {
  margin-block-start: var(--s8);
}
.mt-m {
  margin-block-start: var(--s6);
}
.no-underline {
  text-decoration: none;
}
.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  block-size: 1px;
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- PRZYCISKI */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-block-size: 3.25rem;
  padding-inline: var(--s6);
  border: var(--rule) solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.btn svg {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
}
.btn-accent {
  background: var(--accent);
  color: var(--accent-on);
}
.btn-accent:hover {
  background: var(--accent-hi);
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink-strong);
}
.btn-ghost:hover {
  background: var(--ink-strong);
  color: var(--paper);
}
.on-dark .btn-accent {
  background: #efeae1;
  color: var(--dark);
}
.on-dark .btn-accent:hover {
  background: #fff;
}
.on-dark .btn-ghost {
  border-color: #ffffff3d;
  color: #fff;
}
.on-dark .btn-ghost:hover {
  background: #ffffff14;
  border-color: #fff;
}
.btn-sm {
  min-block-size: 2.6rem;
  padding-inline: var(--s4);
  font-size: 0.92rem;
}
.btn-lg {
  min-block-size: 3.5rem;
  padding-inline: var(--s7);
}

/* ---------------------------------------------------------------- NAGŁÓWEK */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--paper-a);
  backdrop-filter: blur(12px);
  border-block-end: var(--rule) solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) {
  .site-header {
    background: var(--paper);
  }
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-block-size: 4.75rem;
}
.logo {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-inline-end: auto;
  text-decoration: none;
}
.logo-mark {
  display: none;
}
.logo-text {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1.22rem;
  letter-spacing: var(--dsp-track);
  color: var(--ink-strong);
  white-space: nowrap;
}
.logo-text small {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.nav-list a {
  display: inline-block;
  padding-block: var(--s2);
  font-size: 0.93rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--ink-strong);
}
.nav-list a[aria-current="page"] {
  font-weight: 600;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1.02rem;
  letter-spacing: var(--dsp-track);
  color: var(--ink-strong);
  text-decoration: none;
  background: none;
  border: 0;
  min-block-size: auto;
  padding: 0;
  border-radius: 0;
}
.header-cta:hover {
  background: none;
  color: var(--accent);
}
.header-cta svg {
  color: var(--accent);
}
.nav-cta {
  display: none;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  background: none;
  border: var(--rule) solid var(--line-strong);
  cursor: pointer;
}
.nav-toggle svg {
  inline-size: 1.3rem;
  block-size: 1.3rem;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

@media (max-width: 64rem) {
  .nav-toggle {
    display: inline-flex;
  }
  .header-cta {
    display: none;
  }
  .site-nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    max-block-size: calc(100dvh - 4.75rem);
    overflow-y: auto;
    padding: var(--s2) var(--gut) var(--s6);
    background: var(--paper);
    border-block-end: var(--rule) solid var(--line);
    display: grid;
    opacity: 0;
    translate: 0 -0.5rem;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), translate 0.25s var(--ease),
      display 0.25s allow-discrete;
  }
  .site-nav[hidden] {
    display: none;
  }
  .site-nav:not([hidden]) {
    opacity: 1;
    translate: 0;
    pointer-events: auto;
  }
  @starting-style {
    .site-nav:not([hidden]) {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list li + li {
    border-block-start: var(--rule) solid var(--line);
  }
  .nav-list a {
    padding-block: var(--s4);
    font-family: var(--font-dsp);
    font-size: 1.2rem;
    color: var(--ink-strong);
  }
  .nav-cta {
    display: inline-flex;
    margin-block-start: var(--s5);
  }
}

/* ---------------------------------------------------------------- HERO */
.hero {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) var(--s8);
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero-inner {
  display: block;
}
.hero-text > * + * {
  margin-block-start: var(--s6);
}
.hero-lead {
  max-inline-size: 34ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.hero-grid {
  display: grid;
  gap: var(--s7);
  margin-block-start: var(--s8);
  align-items: start;
}
@media (min-width: 56rem) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s8);
  }
}
.hero-points {
  display: grid;
  gap: var(--s3);
}
.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero-points svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  flex: none;
  margin-block-start: 0.2rem;
  color: var(--accent);
}
.on-dark .hero-points li {
  color: #cfc9be;
}

/* Wizytówka autora przy nagłówku */
.byline {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-block-start: var(--s6);
  border-block-start: var(--rule) solid var(--line);
}
.byline picture,
.byline img {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tint);
}
.byline p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.byline b {
  display: block;
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1.02rem;
  color: var(--ink-strong);
}

.hero-points li.hero-review {
  padding-block-start: var(--s3);
  border-block-start: var(--rule) solid var(--line);
  margin-block-start: var(--s2);
}

/* Ocena, dyskretnie */
.hero-card {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.hero-card .stars {
  color: var(--star);
  letter-spacing: 0.05em;
}
.hero-card strong {
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1.02rem;
  color: var(--ink-strong);
}
.hero-card small {
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------- FAKTY */
.trustbar {
  padding-block: var(--s6) 0;
}
.trustbar ul {
  display: grid;
  gap: var(--s5);
  padding-block-start: var(--s6);
  border-block-start: var(--rule) solid var(--line);
}
@media (min-width: 46rem) {
  .trustbar ul {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .trustbar li {
    padding-inline: var(--s5);
  }
  .trustbar li:first-child {
    padding-inline-start: 0;
  }
  .trustbar li + li {
    border-inline-start: var(--rule) solid var(--line);
  }
}
.trustbar svg {
  display: none;
}
.trustbar b {
  display: block;
  margin-block-end: var(--s1);
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1.05rem;
  letter-spacing: var(--dsp-track);
  color: var(--ink-strong);
}
.trustbar span {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.on-dark .trustbar b {
  color: #fff;
}
.on-dark .trustbar span {
  color: #a9a296;
}

/* ---------------------------------------------------------------- KARTY (bez ramek) */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) 0 0;
  border-block-start: var(--rule) solid var(--line-strong);
  position: relative;
  background: none;
}
.card h3 {
  margin: 0;
}
.card h3 a {
  text-decoration: none;
}
.card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.card-icon {
  display: none;
}
.card-price {
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1rem;
  color: var(--accent) !important;
  letter-spacing: var(--dsp-track);
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-more {
  margin-block-start: auto;
  padding-block-start: var(--s3);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.card-more svg {
  inline-size: 1em;
  block-size: 1em;
  transition: translate 0.2s var(--ease);
}
.card:hover .card-more svg {
  translate: 0.25rem 0;
}
.on-dark .card {
  border-block-start-color: #ffffff33;
}
.on-dark .card p {
  color: #a9a296;
}
.on-dark .card-more,
.on-dark .card-price {
  color: #b9d3c4 !important;
}
a.card {
  text-decoration: none;
}
a.card:hover h3 {
  color: var(--accent);
}
.card-tap .stars {
  color: var(--star);
}

/* ---------------------------------------------------------------- LISTY */
.ticks {
  display: grid;
  gap: var(--s2);
}
.ticks li {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ticks-dark li,
.on-dark .ticks li {
  color: #a9a296;
}

.chips {
  display: grid;
  gap: var(--s2);
}
@media (min-width: 40rem) {
  .chips {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s7);
  }
}
@media (min-width: 64rem) {
  .chips {
    grid-template-columns: repeat(3, 1fr);
  }
}
.chips li {
  padding-block: var(--s2);
  border-block-end: var(--rule) solid var(--line);
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.on-dark .chips li {
  border-block-end-color: #ffffff1f;
  color: #a9a296;
}

/* ---------------------------------------------------------------- KROKI */
.steps {
  display: grid;
  gap: var(--s7);
  counter-reset: step;
}
@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s6);
  }
}
.steps > li {
  counter-increment: step;
  padding-block-start: var(--s4);
  border-block-start: var(--rule) solid var(--line-strong);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--s3);
  font-family: var(--font-dsp);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.steps h3 {
  margin-block-end: var(--s3);
}
.steps p {
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.steps .cert-meta {
  margin-block-end: var(--s2);
}
.on-dark .steps > li {
  border-block-start-color: #ffffff33;
}
.on-dark .steps > li::before {
  color: #9bbba9;
}
.on-dark .steps p {
  color: #a9a296;
}

/* ---------------------------------------------------------------- CENNIK / WIERSZE */
.pricing {
  display: grid;
  border-block-start: var(--rule) solid var(--line);
}
.price-row {
  display: grid;
  gap: var(--s1) var(--s6);
  padding-block: var(--s4);
  border-block-end: var(--rule) solid var(--line);
  align-items: baseline;
}
@media (min-width: 34rem) {
  .price-row {
    grid-template-columns: 1fr auto;
  }
}
.price-row dt {
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1.08rem;
  color: var(--ink-strong);
}
.price-row dt span {
  display: block;
  margin-block-start: var(--s1);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.price-row dd {
  margin: 0;
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: 1.05rem;
  letter-spacing: var(--dsp-track);
  color: var(--accent);
  white-space: nowrap;
}
.price-row dd small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-inline-end: var(--s1);
}
.on-dark .pricing,
.on-dark .price-row {
  border-color: #ffffff1f;
}
.on-dark .price-row dt {
  color: #fff;
}
.on-dark .price-row dd {
  color: #b9d3c4;
}
.on-dark .price-row :is(dt span, dd small) {
  color: #a9a296;
}

/* ---------------------------------------------------------------- FAQ */
.faq {
  border-block-start: var(--rule) solid var(--line);
}
.faq details {
  border-block-end: var(--rule) solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem);
  line-height: 1.35;
  color: var(--ink-strong);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.35rem;
  background: var(--accent);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="black" stroke-width="2" stroke-linecap="round" fill="none"/></svg>')
    center / contain no-repeat;
  transition: rotate 0.3s var(--ease);
}
.faq details[open] summary::after {
  rotate: 135deg;
}
.faq details > div {
  padding-block-end: var(--s5);
  max-inline-size: var(--measure);
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.faq details > div > * + * {
  margin-block-start: var(--s3);
}
.faq a {
  color: var(--accent);
  font-weight: 500;
}
.on-dark .faq,
.on-dark .faq details {
  border-color: #ffffff1f;
}
.on-dark .faq summary {
  color: #fff;
}
.on-dark .faq summary::after {
  background: #9bbba9;
}
.on-dark .faq details > div {
  color: #a9a296;
}
.on-dark .faq a {
  color: #b9d3c4;
}

/* ---------------------------------------------------------------- OBRAZY */
.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--tint);
}
.media-frame picture {
  display: block;
  block-size: 100%;
}
.media-frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}
.ratio-4-5 {
  aspect-ratio: 4 / 5;
}
.ratio-3-2 {
  aspect-ratio: 3 / 2;
}
.ratio-1-1 {
  aspect-ratio: 1;
}
.band img {
  inline-size: 100%;
  block-size: clamp(16rem, 12rem + 18vw, 28rem);
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}

.portrait-block {
  display: grid;
  place-items: center;
}
.portrait-img {
  display: block;
  inline-size: min(100%, 18rem);
  border-radius: 50%;
  overflow: hidden;
  background: var(--tint);
}
.portrait-img img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* ---------------------------------------------------------------- STATYSTYKI */
.stat-strip {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 40rem) {
  .stat-strip {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  }
}
.stack > .stat-strip {
  margin-block-start: var(--s6);
}
.stat-strip li {
  padding-block-start: var(--s3);
  border-block-start: var(--rule) solid var(--line);
}
.stat-strip b {
  display: block;
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2.2rem);
  line-height: 1;
  letter-spacing: var(--dsp-track);
  color: var(--accent);
}
.stat-strip span {
  display: block;
  margin-block-start: var(--s2);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.on-dark .stat-strip li {
  border-block-start-color: #ffffff33;
}
.on-dark .stat-strip b {
  color: #b9d3c4;
}
.on-dark .stat-strip span {
  color: #a9a296;
}

/* ---------------------------------------------------------------- CERTYFIKATY */
.cert-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  gap: var(--s4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block-end: var(--s3);
  scrollbar-width: thin;
}
.cert-strip li {
  position: relative;
}
.cert-strip img {
  inline-size: 100%;
  aspect-ratio: 367 / 470;
  object-fit: cover;
  object-position: top;
  background: #fff;
  border: var(--rule) solid var(--line);
}
.cert-strip span {
  display: block;
  margin-block-start: var(--s2);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--s6) var(--s5);
}
.cert-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.cert-thumb {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: var(--rule) solid var(--line);
  background: #fff;
  cursor: zoom-in;
  position: relative;
  transition: border-color 0.25s var(--ease);
}
.cert-thumb:hover {
  border-color: var(--accent);
}
.cert-thumb img {
  inline-size: 100%;
  aspect-ratio: 367 / 470;
  object-fit: cover;
  object-position: top center;
}
.cert-body {
  display: grid;
  gap: var(--s2);
}
.cert-body h3 {
  font-size: 0.98rem;
  line-height: 1.35;
}
.cert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.cert-meta b {
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  color: var(--accent);
}
.cert-body p {
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.on-dark .cert-meta,
.on-dark .cert-body p {
  color: #a9a296;
}

.lightbox::backdrop {
  background: #14120fee;
}
.lightbox-inner {
  display: grid;
  gap: var(--s4);
  place-items: center;
  align-content: center;
  min-block-size: 100dvh;
  inline-size: 100dvw;
  padding: var(--s6);
}
.lightbox img {
  max-block-size: 78dvh;
  max-inline-size: min(100%, 54rem);
  inline-size: auto;
  background: #fff;
}
.lightbox figcaption {
  max-inline-size: 44rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #d8d2c8;
}
.lightbox-close {
  position: fixed;
  inset-block-start: var(--s4);
  inset-inline-end: var(--s4);
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border: var(--rule) solid #ffffff3d;
  background: #ffffff14;
  color: #fff;
  cursor: pointer;
}
.lightbox-close:hover {
  background: #ffffff2b;
}
.lightbox-close svg {
  inline-size: 1.3rem;
  block-size: 1.3rem;
}

/* ---------------------------------------------------------------- CTA */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding: var(--s8) var(--gut);
  background: var(--dark);
  color: #e8e3da;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
}
.cta-band p {
  margin-block-start: var(--s4);
  max-inline-size: 48ch;
  color: #a9a296;
}
.cta-text {
  flex: 1 1 24rem;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.cta-band .btn-accent {
  background: #efeae1;
  color: var(--dark);
}
.cta-band .btn-accent:hover {
  background: #fff;
}
.cta-band .btn-ghost {
  border-color: #ffffff3d;
  color: #fff;
}
.cta-band .btn-ghost:hover {
  background: #ffffff14;
  border-color: #fff;
}

/* ---------------------------------------------------------------- KONTAKT */
.contact-list {
  display: grid;
  gap: var(--s5);
}
.contact-list li {
  display: grid;
  gap: var(--s1);
  padding-block-start: var(--s3);
  border-block-start: var(--rule) solid var(--line);
}
.contact-list svg {
  display: none;
}
.contact-list b {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-list a {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  font-family: var(--font-dsp);
  font-weight: var(--dsp-w);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: var(--dsp-track);
  color: var(--ink-strong);
  text-decoration: none;
  line-height: 1.35;
}
.contact-list a:hover {
  color: var(--accent);
}
.on-dark .contact-list li {
  border-block-start-color: #ffffff33;
}
.on-dark .contact-list a {
  color: #fff;
}
.on-dark .contact-list b {
  color: #a9a296;
}

.hours {
  display: grid;
}
.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s3);
  border-block-end: var(--rule) solid var(--line);
  font-size: 0.95rem;
}
.hours dt {
  color: var(--ink-soft);
}
.hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.on-dark .hours div {
  border-block-end-color: #ffffff1f;
}
.on-dark .hours dt {
  color: #a9a296;
}
.on-dark .hours dd {
  color: #fff;
}

.map-frame {
  aspect-ratio: 16 / 12;
  background: var(--tint);
  border: var(--rule) solid var(--line);
  overflow: hidden;
}
.map-frame iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* ---------------------------------------------------------------- OKRUSZKI + NAGŁÓWEK PODSTRONY */
.crumbs {
  padding-block-start: var(--s5);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.crumbs li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--s2);
  color: var(--line);
}
.crumbs a {
  display: inline-block;
  min-block-size: 1.5rem;
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.page-head {
  padding-block: var(--s7) var(--s8);
  border-block-end: var(--rule) solid var(--line);
}
.page-head h1 {
  max-inline-size: 18ch;
}
.page-head p {
  margin-block-start: var(--s5);
  max-inline-size: 52ch;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- SPIS TREŚCI */
.toc {
  padding-block-start: var(--s4);
  border-block-start: var(--rule) solid var(--line-strong);
}
.toc h2 {
  margin-block-end: var(--s4);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.toc ol {
  display: grid;
  gap: var(--s2);
  font-size: 0.94rem;
  counter-reset: toc;
}
.toc li {
  counter-increment: toc;
}
.toc li::before {
  content: counter(toc, decimal-leading-zero) " ";
  margin-inline-end: var(--s2);
  font-family: var(--font-dsp);
  font-size: 0.8rem;
  color: var(--accent);
}
.toc a {
  color: var(--ink-soft);
  text-decoration: none;
}
.toc a:hover {
  color: var(--accent);
}

/* ---------------------------------------------------------------- PROZA */
.prose {
  max-inline-size: var(--measure);
}
.prose > * + * {
  margin-block-start: var(--s4);
}
.prose h2 {
  margin-block-start: var(--s7);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
}
.prose h3 {
  margin-block-start: var(--s6);
}
.prose ul,
.prose ol {
  display: grid;
  gap: var(--s2);
}
.prose li {
  position: relative;
  padding-inline-start: var(--s5);
  color: var(--ink-soft);
}
.prose li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.7em;
  inset-inline-start: 0;
  inline-size: var(--s3);
  block-size: var(--rule);
  background: var(--accent);
}
.prose a {
  color: var(--accent);
  font-weight: 500;
}
.prose .callout {
  padding: var(--s5);
  background: var(--tint);
  border-inline-start: 2px solid var(--accent);
}
.prose .callout > * + * {
  margin-block-start: var(--s3);
}
.on-dark .prose .callout {
  background: #ffffff0d;
}
.on-dark .prose,
.on-dark .prose li {
  color: #a9a296;
}
.on-dark .prose a {
  color: #b9d3c4;
}

/* ---------------------------------------------------------------- STOPKA */
.site-footer {
  padding-block: var(--s8) var(--s6);
  border-block-start: var(--rule) solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--accent);
}
.footer-grid {
  display: grid;
  gap: var(--s7);
}
@media (min-width: 46rem) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s6);
  }
}
.footer-grid h2 {
  margin-block-end: var(--s4);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.footer-grid ul {
  display: grid;
  gap: var(--s2);
}
.footer-grid ul :is(a, li) {
  display: inline-block;
  min-block-size: 1.6rem;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  justify-content: space-between;
  margin-block-start: var(--s8);
  padding-block-start: var(--s5);
  border-block-start: var(--rule) solid var(--line);
  font-size: 0.82rem;
}
.footer-bottom a {
  display: inline-block;
  min-block-size: 1.6rem;
}
.social {
  display: flex;
  gap: var(--s4);
  margin-block-start: var(--s5);
}
.social a {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: var(--rule) solid var(--line);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.social a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.social svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

/* ---------------------------------------------------------------- PASEK TELEFONU */
.call-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 90;
  display: none;
  gap: var(--s2);
  padding: var(--s2) var(--gut) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--paper-a);
  backdrop-filter: blur(12px);
  border-block-start: var(--rule) solid var(--line);
}
.call-bar .btn {
  flex: 1;
  min-block-size: 2.9rem;
}
@media (max-width: 48rem) {
  .call-bar {
    display: flex;
  }
  body {
    padding-block-end: 4.4rem;
  }
}

/* ---------------------------------------------------------------- SKIP LINK */
.skip-link {
  position: absolute;
  inset-block-start: var(--s2);
  inset-inline-start: var(--s2);
  z-index: 999;
  padding: var(--s3) var(--s5);
  background: var(--ink-strong);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -180%;
  transition: translate 0.2s var(--ease);
}
.skip-link:focus-visible {
  translate: 0 0;
}

/* ---------------------------------------------------------------- ANIMACJE
   Treść jest domyślnie widoczna. Ukrywamy ją tylko wtedy, gdy JavaScript
   zdążył dopisać .reveal-on do <html>, a i wtedy trzy bezpieczniki
   odsłaniają wszystko niezależnie od okoliczności. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal:not(.is-in) {
    opacity: 0;
    translate: 0 0.75rem;
  }
  .reveal-on .reveal {
    transition: opacity 0.5s var(--ease), translate 0.5s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }
}

@media (forced-colors: active) {
  .btn,
  .cert-thumb,
  .nav-toggle {
    border: 1px solid ButtonText;
  }
  .faq summary::after,
  .prose li::before {
    background: ButtonText;
  }
}

@media print {
  .reveal {
    opacity: 1 !important;
    translate: none !important;
  }
  .site-header,
  .call-bar,
  .cta-band,
  .map-frame,
  .crumbs {
    display: none !important;
  }
  body {
    padding: 0;
    color: #000;
    background: #fff;
  }
  .on-dark {
    background: #fff !important;
    color: #000 !important;
  }
  .on-dark :is(h1, h2, h3, h4, p) {
    color: #000 !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* =====================================================================
   WARSTWA 5 - nowy język wizualny (papier + serif, gęsto)
   Dopisana na końcu, więc nadpisuje wcześniejsze reguły w kaskadzie.
   Zasady: 1 skala odstępów, 1 krój dyspozycyjny, 3 kolory akcentu.
   ===================================================================== */
:root {
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;
  --gut: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --wrap: 1520px;
  --sec: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  --paper: #efebe1;
  --paper-a: #efebe1f2;
  --tint: #f7f4ec;
  --card: #f7f4ec;
  --dark: #141310;
  --ink: #23201c;
  --ink-2: #2a2822;
  --ink-strong: #141310;
  --ink-soft: #6c675c;
  --line: #d5cebe;
  --line-strong: #141310;
  --accent: #1b4b3c;
  --accent-hi: #143a2e;
  --accent-on: #efebe1;
  --green: #1b4b3c;
  --green-lo: #dce5dc;
  --clay: #c2603a;
  --sand: #e4d9c2;
  --star: #b8860b;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body { background: var(--paper); }

/* --- typografia --- */
h1, h2, h3, .dsp {
  font-family: var(--font-dsp);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.6rem); }
h2 { font-size: clamp(2rem, 1.1rem + 3.6vw, 4.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.7rem); line-height: 1.05; letter-spacing: -0.025em; }
h4 { font-family: var(--font-dsp); font-weight: 400; letter-spacing: -0.02em; }
.lead { font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.28rem); line-height: 1.45; color: var(--ink-2); }

.eyebrow, .lbl {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before, .lbl::before {
  content: "";
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
  background: var(--clay);
  flex: none;
}
.on-dark .eyebrow, .on-dark .lbl, .cta-band .eyebrow { color: #8b857a; }

/* --- nagłówek strony --- */
.site-header { background: var(--paper-a); border-block-end: var(--rule) solid var(--line); }
.header-inner { min-block-size: 4rem; }
.logo-text { font-family: var(--font-dsp); font-size: 1.22rem; letter-spacing: -0.035em; line-height: 1.1; }
.logo-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-list a { font-size: 0.8rem; color: var(--ink-soft); }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--ink-strong); }

/* --- przyciski --- */
.btn {
  position: relative;
  min-block-size: 3.25rem;
  padding-inline: var(--s5);
  border: var(--rule) solid var(--ink-strong);
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.94rem;
  overflow: hidden;
  isolation: isolate;
}
.btn > * { position: relative; z-index: 2; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ink-strong);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--paper); }
.btn-accent { background: var(--ink-strong); color: var(--paper); border-color: var(--ink-strong); }
.btn-accent::before { background: var(--clay); }
.btn-accent:hover { color: var(--paper); border-color: var(--clay); }
.btn-sm { min-block-size: 2.6rem; padding-inline: var(--s4); font-size: 0.85rem; }
:is(.on-dark, .cta-band, .site-footer) .btn { border-color: #ffffff59; color: var(--paper); }
:is(.on-dark, .cta-band, .site-footer) .btn::before { background: var(--paper); }
:is(.on-dark, .cta-band, .site-footer) .btn:hover { color: var(--ink-strong); }
:is(.on-dark, .cta-band, .site-footer) .btn-accent { background: var(--paper); color: var(--ink-strong); border-color: var(--paper); }
:is(.on-dark, .cta-band, .site-footer) .btn-accent::before { background: var(--clay); }
:is(.on-dark, .cta-band, .site-footer) .btn-accent:hover { color: var(--paper); }

/* --- karty --- */
.card {
  background: var(--card);
  border: var(--rule) solid var(--line);
  border-radius: 0;
  padding: var(--s5);
  transition: transform 0.45s var(--ease);
}
.card:hover { transform: translateY(-0.35rem); }
.grid > .card:nth-child(3n + 2) { background: var(--green-lo); }
.grid > .card:nth-child(3n + 3) { background: var(--sand); }
.card h3 { margin-block-end: var(--s3); }

/* --- sekcje i nagłówki sekcji --- */
.section-head { margin-block-end: var(--s7); }
.section-head h2 { margin-block-start: var(--s4); }

/* --- pasek CTA --- */
.cta-band { background: var(--green); color: var(--paper); border-radius: 0; }
.cta-band h2 { color: var(--paper); }

/* --- cennik --- */
.price-row { border-block-end: var(--rule) solid var(--line); padding-block: var(--s5); }
.price-row .price, .card-price { font-family: var(--font-dsp); letter-spacing: -0.02em; color: var(--green); }

/* --- proza --- */
.prose h2 { margin-block-start: var(--s7); }
.prose h3 { margin-block-start: var(--s6); }

/* --- nagłówek podstrony --- */
.page-head { padding-block: var(--s7) var(--s6); border-block-end: var(--rule) solid var(--line); }

/* --- stopka --- */
.site-footer { background: var(--dark); color: var(--paper); }

/* --- obrazy --- */
.media-frame, .band img, .portrait-img img { border-radius: 0; }
img { filter: saturate(0.92); }

/* --- cele dotykowe: linki w listach i logo (WCAG 2.5.8) --- */
.logo { min-block-size: 2.75rem; display: inline-flex; align-items: center; }
li > a:not(.btn) { display: inline-block; min-block-size: 1.6rem; padding-block: 0.2rem; }

/* --- HERO: kolaż + pieczęć --- */
.hero { padding-block: var(--s5) var(--s7); overflow: clip; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s6);
  justify-content: space-between;
  padding-block-end: var(--s3);
  border-block-end: var(--rule) solid var(--line);
  margin-block-end: var(--s5);
}
@media (min-width: 48rem) { .hero-meta { gap: var(--s3) var(--s6); padding-block-end: var(--s4); margin-block-end: var(--s6); } }
.hero-split { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 64rem) { .hero-split { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: var(--s8); } }
.hero-left { min-inline-size: 0; }
.hero h1 { font-size: clamp(2.9rem, 20.5vw, 9.2rem); }
@media (min-width: 64rem) { .hero h1 { font-size: clamp(4.6rem, 10.2vw, 9.4rem); } }
.hero h1 em { font-style: italic; color: var(--green); }
.hero-lead { max-inline-size: 36ch; margin-block-start: var(--s4); }
@media (min-width: 64rem) { .hero-lead { margin-block-start: var(--s5); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s5); }

.collage { position: relative; min-inline-size: 0; }
.collage .c1 img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.collage .c2 {
  position: absolute;
  inset-inline-start: calc(var(--s8) * -1);
  inset-block-end: calc(var(--s6) * -1);
  inline-size: min(46%, 13rem);
  z-index: 3;
}
.collage .c2 img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border: 0.45rem solid var(--paper); }
@media (max-width: 64rem) {
  .collage .c1 img { aspect-ratio: 3 / 2; }
  .collage .c2 { display: none; }
}

.seal {
  position: absolute;
  inset-inline-start: calc(var(--s6) * -1);
  inset-block-start: calc(var(--s6) * -1);
  inline-size: 7.5rem;
  block-size: 7.5rem;
  z-index: 4;
  background: var(--paper);
  border-radius: 50%;
}
@media (max-width: 64rem) { .seal { display: none; } }
.seal svg { inline-size: 100%; block-size: 100%; animation: seal-spin 24s linear infinite; }
.seal text { font-family: var(--font-body); font-size: 8.4px; letter-spacing: 2.1px; font-weight: 600; fill: var(--ink-strong); }
.seal .dot { fill: var(--clay); }
@keyframes seal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal svg { animation: none; } }

.hero-points { display: grid; gap: var(--s3); margin-block-start: var(--s7); }
@media (min-width: 56rem) { .hero-points { grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s6); } }
.hero-review { grid-column: 1 / -1; }
.hero-card small, .hero-card strong { display: block; }

/* --- pasek przewijanych usług --- */
.ticker { background: var(--ink-strong); color: var(--paper); padding-block: var(--s3); overflow: hidden; }
.ticker-track { display: flex; inline-size: max-content; animation: ticker-slide 34s linear infinite; }
.ticker b {
  font-family: var(--font-dsp);
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
  letter-spacing: -0.025em;
  padding-inline: var(--s5);
  display: inline-flex;
  align-items: center;
  gap: var(--s5);
}
.ticker b::after { content: ""; inline-size: 0.35rem; block-size: 0.35rem; border-radius: 50%; background: var(--clay); flex: none; }
@keyframes ticker-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --- rolki (odtwarzacz doczytywany po kliknięciu) --- */
.reels { display: grid; gap: var(--s4); margin-block-start: var(--s7); }
@media (min-width: 48rem) { .reels { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.reel { position: relative; margin: 0; background: var(--ink-strong); overflow: hidden; }
.reel-btn {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-strong);
  cursor: pointer;
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}
.reel-btn picture { display: block; block-size: 100%; }
.reel-btn img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.82);
  transition: scale 0.6s var(--ease), filter 0.5s var(--ease);
}
.reel-btn:hover img, .reel-btn:focus-visible img { scale: 1.05; filter: saturate(0.95) contrast(1.05) brightness(0.68); }
.reel-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--s3);
  justify-items: center;
  color: var(--paper);
  pointer-events: none;
}
.reel-play svg { inline-size: 3.4rem; block-size: 3.4rem; }
.reel-play em { font-style: normal; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.reel-tag {
  position: absolute;
  inset-inline-start: var(--s4);
  inset-block-start: var(--s4);
  padding: 0.25rem 0.6rem;
  border: 1px solid #ffffff59;
  border-radius: 999px;
  color: var(--paper);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.reel iframe { display: block; inline-size: 100%; aspect-ratio: 9 / 16; border: 0; }

/* Nagłówek strony głównej jest dłuższy niż w podglądzie, więc własna skala. */
.hero h1 { font-size: clamp(2.1rem, 11.8vw, 3.6rem); }
@media (min-width: 64rem) { .hero h1 { font-size: clamp(3.4rem, 6vw, 5.8rem); } }
@media (min-width: 48rem) and (max-width: 63.999rem) { .hero h1 { font-size: clamp(3.6rem, 12vw, 6rem); } }

/* Nagłówek sekcji: tytuł i wprowadzenie jedno pod drugim, wprowadzenie
   ograniczone miarą czytelności. Próba układu dwukolumnowego zderzała
   wiersze, bo .stack narzuca własną siatkę. */
.section-head { max-inline-size: none; }
.section-head > .lead { max-inline-size: 46ch; }
.page-head .lead { max-inline-size: 52ch; }

/* Stałe kolumny zamiast auto-fit: przy auto-fit sześć usług układało się
   w 4 + 2 i zostawały dwa puste pola. */
@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 46rem) and (max-width: 63.999rem) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grid { gap: var(--s4); }
@media (min-width: 64rem) { .grid { gap: var(--s5); } }

/* Hero: kolumny tej samej wysokości, żeby nie robiła się dziura nad tytułem */
@media (min-width: 64rem) {
  .hero-split { align-items: stretch; }
  .hero-left { display: flex; flex-direction: column; justify-content: flex-end; }
  .collage { display: flex; }
  .collage .c1 { flex: 1; display: block; min-block-size: 0; }
  .collage .c1 img { block-size: 100%; inline-size: 100%; object-fit: cover; aspect-ratio: auto; }
  .hero-points { margin-block-start: var(--s6); }
}

/* Dwie sekcje o tym samym tle dawały podwójny odstęp (dół + góra).
   Zostaje jeden. Przy zmianie tła odstęp zostaje pełny, bo tam jest krawędź. */
.section:not(.on-tint) + .section:not(.on-tint),
.section.on-tint + .section.on-tint { padding-block-start: 0; }
.section > .wrap > .section-head:first-child { margin-block-end: var(--s6); }

/* --- H1 podstron: 18ch lamalo tytul na pol ekranu przy pustym prawym boku --- */
.page-head h1 { max-inline-size: 24ch; }
@media (min-width: 64rem) { .page-head h1 { max-inline-size: 20ch; } }
@media (min-width: 90rem) { .page-head h1 { max-inline-size: 22ch; } }

/* --- dwie oceny obok siebie --- */
.ratings { display: grid; gap: var(--s4); padding: 0; background: none; border: 0; }
@media (min-width: 30rem) { .ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.rating {
  display: grid;
  gap: 0.1rem;
  padding-block-start: var(--s3);
  border-block-start: var(--rule) solid var(--line);
  align-content: start;
}
.rating .stars { color: var(--star); font-size: 0.8rem; letter-spacing: 0.1em; line-height: 1.2; }
.rating strong { font-family: var(--font-dsp); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.02em; }
.rating small { color: var(--ink-soft); font-size: 0.82rem; }
.rating:hover strong { color: var(--clay); }
:is(.on-dark, .cta-band, .site-footer) .rating { border-block-start-color: #ffffff2e; }

/* --- ikony w stopce w jednej linii --- */
.footer-grid .social, .site-footer .social, .social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s3);
}
.social a { inline-size: 2.5rem; block-size: 2.5rem; border-color: #ffffff33; }

/* --- wizytowka na stronie "o mnie": lewa kolumna przestaje byc pusta --- */
.vcard { align-self: start; }
@media (min-width: 64rem) { .vcard { position: sticky; top: calc(4rem + var(--s5)); } }
.vcard-img { display: block; inline-size: 100%; background: var(--card); }
.vcard-img img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; }
.vcard-body { padding-block-start: var(--s5); }
.vcard-name { font-family: var(--font-dsp); font-size: 1.5rem; letter-spacing: -0.03em; margin-block-start: var(--s2); }
.vcard-list { display: grid; gap: var(--s4); margin-block: var(--s5); }
.vcard-list dt {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block-end: 0.2rem;
}
.vcard-list dd { margin: 0; font-size: 0.94rem; line-height: 1.45; }

/* Nazwa w stopce byla ciemna na ciemnym tle, wiec znikala. */
.site-footer .logo-text { color: var(--paper); }
.site-footer .logo-text small { color: #a19b90; }

/* Naglowki kolumn w stopce byly ciemne na ciemnym tle - na kazdej stronie
   trzy tytuly byly niewidoczne. */
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #a19b90;
  margin-block-end: var(--s4);
}
.site-footer .footer-grid a:not(.btn):not(.logo) { color: var(--paper); }
.site-footer .footer-grid a:not(.btn):not(.logo):hover { color: var(--clay); }
.site-footer p { color: #a19b90; }


/* Naglowki: spokojniejszy rysunek liter.
   WONK 1 celowo przechyla i "krzywi" znaki, a opsz 144 to krój plakatowy
   o bardzo wysokim kontraście grubości. Przy dłuższych polskich wyrazach
   z ogonkami robilo sie to nieczytelne. */
h1, h2, h3, h4, .dsp, .logo-text, .ticker b, .vcard-name, .rating strong,
.card-price, .price, .stat-strip b, .steps .n {
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
  font-synthesis: none;
}
h1, h2 { letter-spacing: -0.025em; line-height: 0.98; }
h3 { letter-spacing: -0.015em; }

/* Wyroznienie na pelna szerokosc, z wlasnymi odstepami. */
.callout-wide {
  max-inline-size: none;
  margin-block: 0 var(--s7);
}
.callout-wide p { max-inline-size: 78ch; }

/* Zdjecie budynku pod danymi kontaktowymi i mapa, na srodku. */
.building {
  margin: var(--s8) auto 0;
  max-inline-size: 52rem;
}
.building figcaption {
  margin-block-start: var(--s3);
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* --- CENNIK: grupy jedna pod druga, pozycje w rownych kolumnach ---
   Wczesniej kazda grupa byla osobna kolumna siatki, wiec kolumny konczyly sie
   na roznych wysokosciach i robily sie dziury. */
.svc-groups { display: grid; gap: var(--s8); }
.svc-group > h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.9rem);
  padding-block-end: var(--s3);
  border-block-end: 1px solid var(--line-strong);
  margin-block-end: var(--s2);
}
.svc-group .pricing { display: grid; gap: 0; }
@media (min-width: 40rem) { .svc-group .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); } }
@media (min-width: 68rem) { .svc-group .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s7); } }
.svc-group .price-row { padding-block: var(--s4); border-block-end: var(--rule) solid var(--line); }
.svc-group .price-row dt { font-family: var(--font-dsp); font-size: 1.05rem; letter-spacing: -0.015em; }
.svc-group .price-row dt span { display: block; margin-block-start: 0.2rem; font-family: var(--font-body); font-size: 0.88rem; color: var(--ink-soft); letter-spacing: 0; }

/* Zdjecie przy suchym iglowaniu: nizsze i wyrownane do bloku tekstu. */
.needle-shot { align-self: center; max-block-size: 30rem; }
.needle-shot img { block-size: 100%; object-fit: cover; }

/* Certyfikaty: pierwsza sekcja startuje tuz pod naglowkiem strony. */
.section:has(> .wrap > .callout-wide) { padding-block-start: var(--s6); }

/* =====================================================================
   TELEFON: wyrownanie do srodka, spokojniejsze menu, pasek bez przyklejenia
   ===================================================================== */
@media (max-width: 63.999rem) {

  /* --- hero na srodku --- */
  .hero-meta { justify-content: center; text-align: center; }
  .hero-left { text-align: center; }
  .hero-left h1, .hero-lead { margin-inline: auto; }
  .hero-lead { max-inline-size: 40ch; }
  .hero-actions { justify-content: center; }
  .hero-points { justify-items: center; text-align: center; }
  .hero-points li { justify-content: center; }
  .ratings { justify-items: center; }
  .rating { justify-items: center; text-align: center; }
  .trustbar li { text-align: center; }
  .trustbar span { align-items: center; }

  /* --- naglowki sekcji i wstepy na srodku --- */
  .section-head, .page-head .wrap { text-align: center; }
  .section-head > .lead, .page-head .lead { margin-inline: auto; }
  .section-head .eyebrow, .page-head .eyebrow { justify-content: center; }
  .page-head .crumbs { justify-content: center; }
  .cta-band { text-align: center; }
  .cta-actions, .cta-band .hero-actions { justify-content: center; }

  /* --- stopka na srodku --- */
  .footer-grid { text-align: center; justify-items: center; }
  .footer-grid > * { inline-size: 100%; }
  .footer-grid p { margin-inline: auto; }
  .site-footer .social { justify-content: center; }
  .site-footer .logo { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: var(--s2); }
}

/* --- pasek "Zadzwoń" przewija sie razem ze strona, nie zaslania tresci --- */
@media (max-width: 48rem) {
  .call-bar {
    position: static;
    backdrop-filter: none;
    background: var(--tint);
    border-block-start: var(--rule) solid var(--line);
    border-block-end: var(--rule) solid var(--line);
    padding-block: var(--s4);
  }
  body { padding-block-end: 0 !important; }
}

/* --- menu mobilne: wieksza czcionka, rowne odstepy --- */
@media (max-width: 63.999rem) {
  .site-nav { padding: var(--s4) var(--gut) var(--s6); }
  .nav-list { gap: 0; }
  .nav-list li + li { border-block-start: var(--rule) solid var(--line); }
  .nav-list a {
    display: block;
    padding-block: var(--s4);
    font-family: var(--font-dsp);
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    color: var(--ink-strong);
  }
  .nav-cta { margin-block-start: var(--s5); inline-size: 100%; justify-content: center; }
}

/* Pasek CTA na telefonie: tekst i przyciski na srodku, przyciski na pelna szerokosc. */
@media (max-width: 63.999rem) {
  .cta-band { text-align: center; justify-items: center; }
  .cta-text h2, .cta-text p { margin-inline: auto; }
  .cta-actions { display: grid; gap: var(--s3); inline-size: 100%; justify-items: stretch; }
  .cta-actions .btn { inline-size: 100%; justify-content: center; }
  .call-bar .btn { justify-content: center; }
}

/* Ptaszki przy atutach: ikona tuz przy tekscie, calosc na srodku. */
@media (max-width: 63.999rem) {
  .hero-points li {
    display: flex;
    gap: var(--s3);
    align-items: start;
    inline-size: fit-content;
    max-inline-size: 34ch;
    margin-inline: auto;
    text-align: start;
  }
  .hero-points li svg { flex: none; margin-block-start: 0.28em; }
  .hero-review { max-inline-size: none; }
}

/* =====================================================================
   PRZYCISKI, KARUZELA, WYSRODKOWANIE - poprawki koncowe
   ===================================================================== */

/* Napis znikal pod przesuwanym tlem, bo z-index dostawaly tylko elementy
   potomne, a goly tekst wewnatrz <a> juz nie. Tlo idzie pod spod. */
.btn { isolation: isolate; }
.btn::before { z-index: -1; }
.btn > * { position: relative; z-index: auto; }

/* Etykieta telefonu: funkcyjna na telefonie, numer na komputerze. */
.lbl-desk { display: none; }
@media (min-width: 48rem) {
  .lbl-mob { display: none; }
  .lbl-desk { display: inline; }
}

/* Liczby i karty na srodku tam, gdzie stoja samodzielnie. */
.stat-strip { text-align: center; }
.stat-strip li { justify-items: center; }
@media (max-width: 63.999rem) {
  .card, .steps li, .prob, .prep li, .svc-group .price-row { text-align: center; }
  .card ul, .steps li ul { text-align: start; display: inline-block; }
  .card-more, .steps .n, .prep .ico { margin-inline: auto; }
  .card-more { display: inline-flex; }
  .prep .ico { display: block; }
  .callout, .callout-wide { text-align: center; }
  .callout p, .callout-wide p { margin-inline: auto; }
  .vcard, .vcard-body { text-align: center; }
  .vcard-list { justify-items: center; }
  .quote, .lead { margin-inline: auto; }
}

/* Rolki: na telefonie przewijana karuzela zamiast trzech kafli pod soba. */
@media (max-width: 47.999rem) {
  .reels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--s3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    overscroll-behavior-x: contain;
    padding-block-end: var(--s3);
    /* karuzela siega krawedzi ekranu, ale pierwszy kafel trzyma margines */
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reel { scroll-snap-align: start; }
}