/* Motyw (z szablonu etapu 2). Kolory, kroje i promień nadpisuje global „Style” (zmienne w <style> strony). */
/* Motyw szablonu — tokeny marki w :root (kolory, fonty, skala). Pochodzenie: beta z 02.10.
   Rozmiary w rem przy html 62.5% (1rem = 10px), jak w oryginale. Przełom mobilny 991px jak w Bricks. */

/* 2C runda 2: nazwa kroju wprost — var() w @font-face jest nieważne, więc pliki się nie ładowały i polskie znaki szły z kroju zastępczego */
@font-face { font-family: "Scale"; font-weight: 300; font-display: swap; src: url(/fonts/Scale-Light.woff) format("woff"); }
@font-face { font-family: "Scale"; font-weight: 400; font-display: swap; src: url(/fonts/Scale-Regular.woff) format("woff"); }
@font-face { font-family: "Scale"; font-weight: 700; font-display: swap; src: url(/fonts/Scale-Bold.woff) format("woff"); }
@font-face { font-family: "Satoshi"; font-weight: 400; font-display: swap; src: url(/fonts/Satoshi-Regular.ttf) format("truetype"); }
@font-face { font-family: "Satoshi"; font-weight: 500; font-display: swap; src: url(/fonts/Satoshi-Medium.ttf) format("truetype"); }
@font-face { font-family: "Satoshi"; font-weight: 700; font-display: swap; src: url(/fonts/Satoshi-Bold.ttf) format("truetype"); }

:root {
  --primary: #084bf3;
  --secondary: #ed0800;
  --bg: #e5e5e5;
  --text: #010718;
  --white: #ffffff;
  --dark: #010718;
  --grey: #5e5e5e;
  --line: #d1d1d1;
  --container: 1320px;
  /* Płynne odstępy i rozmiary (K11): wartość na 360 px → 1440 px, między nimi liniowo — bez skoków na progach */
  --gutter: clamp(2rem, 0.667rem + 3.704vw, 6rem);
  --space-20: clamp(1rem, 0.667rem + 0.926vw, 2rem);
  --space-40: clamp(2rem, 1.333rem + 1.852vw, 4rem);
  --space-60: clamp(3rem, 2rem + 2.778vw, 6rem);
  --space-100: clamp(5rem, 3.333rem + 4.63vw, 10rem);
  --space-140: clamp(7rem, 4.667rem + 6.481vw, 14rem);
  --space-200: clamp(10rem, 6.667rem + 9.259vw, 20rem);
  --space-300: clamp(15rem, 10rem + 13.889vw, 30rem);
  /* Płynna skala nagłówków (Bricks: min 360 px → max 1440 px) */
  --fs-xxl: calc(clamp(4.6rem, 2.575rem + 5.625vw, 10rem) * var(--skala-h, 1));
  --fs-xl: calc(clamp(3.6rem, 2.475rem + 3.125vw, 6.6rem) * var(--skala-h, 1));
  --fs-lg: calc(clamp(2.4rem, 1.5rem + 4vw, 4.8rem) * var(--skala-h, 1));
  --fs-md: calc(clamp(2.4rem, 1.95rem + 1.25vw, 3.6rem) * var(--skala-h, 1));
  --fs-sm: calc(clamp(1.6rem, 1.3rem + 0.8333vw, 2.4rem) * var(--skala-h, 1));
  --t-body: clamp(1.4rem, 1.067rem + 0.926vw, 2.4rem);
  --t-small: clamp(1.4rem, 1.333rem + 0.185vw, 1.6rem);
  --radius: clamp(1.6rem, 1.467rem + 0.37vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--t-body); line-height: 1.2; letter-spacing: -0.24px;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-head); font-weight: var(--w-head, 300); color: inherit; }
p, ul, ol, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hl { color: var(--primary); }
strong { font-weight: 700; }

.mx { overflow-x: clip; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--blog { max-width: calc(900px + 2 * var(--gutter)); }
.blk { position: relative; }
.mt-0 { margin-top: 0; } .mt-20 { margin-top: var(--space-20); } .mt-40 { margin-top: var(--space-40); } .mt-60 { margin-top: var(--space-60); }
.mt-100 { margin-top: var(--space-100); } .mt-140 { margin-top: var(--space-140); } .mt-200 { margin-top: var(--space-200); } .mt-300 { margin-top: var(--space-300); }
.ar-21-9 { aspect-ratio: 21/9; } .ar-16-9 { aspect-ratio: 16/9; } .ar-3-2 { aspect-ratio: 3/2; } .ar-4-3 { aspect-ratio: 4/3; }
.ar-1-1 { aspect-ratio: 1/1; } .ar-4-5 { aspect-ratio: 4/5; } .ar-9-16 { aspect-ratio: 9/16; }
.blkh { display: flex; flex-direction: column; }
.blkh > .blk { flex: 1 0 auto; }
@media (min-width: 992px) {
  .blkh { min-height: calc((var(--h, 0px) + var(--mt, 0px)) * var(--g, 1)); }
  .blkh > .hero:not(.hero--split), .blkh > .ctac:not(.ctac--float), .blkh > .form, .blkh > .band, .blkh > .logos { display: flex; flex-direction: column; justify-content: center; }
}
.mx--bg-white, body:has(.mx--bg-white), html:has(.mx--bg-white) { background: var(--white); }
.mx--bg-white { --bg-page: var(--white); }

.fs-xxl { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-xxl); line-height: 1.1; letter-spacing: -1px; }
.fs-xl { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.24px; }
.fs-lg { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -0.24px; }
.fs-md { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-md); line-height: 1.2; letter-spacing: -0.24px; }
.fs-h2 { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: calc(clamp(2.4rem, 1.87rem + 1.48vw, 4rem) * var(--skala-h, 1)); line-height: 1.2; letter-spacing: -0.24px; }
.fs-sm { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-sm); line-height: 1.2; letter-spacing: 1.44px; }

/* ——— Przyciski ——— */
.btns { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 20px;
  font-family: var(--font-body); font-weight: 500; font-size: 1.6rem; line-height: 24px; letter-spacing: -0.16px;
  border: 1px solid var(--primary); border-radius: var(--btn-r, calc(8px * var(--zaokr, 1))); background: var(--primary); color: var(--bg);
  transition: background-color .2s, color .2s, filter .2s, transform .1s; white-space: nowrap; cursor: pointer;
  min-height: 48px; justify-content: center;
}
.btn .arr { width: 20px; height: 20px; flex-shrink: 0; }
.btn--outline { background: var(--bg); color: var(--primary); }
.btn--light { background: var(--white); color: var(--primary); border-color: var(--white); }
.btn--ghost { background: transparent; color: var(--bg); border-color: var(--bg); }
.btn--third { background: var(--bg); color: var(--primary); border-color: var(--bg); }
.btn--red { background: var(--secondary); border-color: var(--secondary); color: var(--bg); }
.btn--lg { font-weight: 400; font-size: 2.4rem; line-height: 1.5; letter-spacing: .5px; }
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(.92); transform: translateY(1px); }
@media (max-width: 991px) {
  .btn { font-size: 1.2rem; line-height: 1.5; padding: 4px 10px; }
  .btn .arr { width: 16px; height: 16px; }
  .btn--lg { font-size: 1.2rem; }
  .btns { gap: 12px 16px; }
}

.tag {
  display: inline-block; width: fit-content; padding: 7px 10px 4px; margin-bottom: 16px;
  font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: 1.6rem; line-height: 1; letter-spacing: .12px;
  color: var(--primary); border: 1px solid var(--primary); border-radius: calc(8px * var(--zaokr, 1)); background: transparent;
}
.tag--sm { margin-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-block; padding: 4px 20px; border: 1px solid currentColor; border-radius: calc(8px * var(--zaokr, 1)); font-size: 1.4rem; line-height: 1.5; letter-spacing: -.14px; }
@media (max-width: 991px) { .tag { font-size: 1.4rem; } .pill { padding: 2px 10px; font-size: 1.2rem; } }

.x-icon { width: 20px; height: 19px; flex-shrink: 0; color: var(--primary); transform: translateY(2px); }
@media (max-width: 991px) { .x-icon { width: 12px; height: 16px; transform: none; } }
.img-empty { background: var(--line); width: 100%; height: 100%; min-height: 120px; }

/* ——— Nagłówek ——— */
.hdr { position: relative; z-index: 50; padding: 22px 0 20px; }
.hdr__in { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: auto 1fr auto; gap: 50px; align-items: center; }
.hdr__logo img { width: 150px; height: auto; }
.hdr__nav > ul { list-style: none; display: flex; justify-content: center; gap: 32px; padding: 0; margin: 0; }
.hdr__nav > ul > li { position: relative; }
.hdr__nav a { display: inline-flex; align-items: center; gap: 6px; font-size: 1.6rem; line-height: 1.5; }
.hdr__nav a:hover { color: var(--primary); }
.chev { width: 12px; height: 12px; }
.hdr__sub { display: none; position: absolute; top: 100%; left: -16px; min-width: 260px; list-style: none; margin: 0; padding: 12px 0; background: var(--white); border-radius: calc(8px * var(--zaokr, 1)); box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.hdr__sub a { display: block; padding: 10px 20px; }
.has-sub:hover .hdr__sub, .has-sub:focus-within .hdr__sub { display: block; }
.hdr__btns { gap: 16px; justify-content: flex-end; flex-wrap: nowrap; }
.hdr__mob { display: none; }
@media (max-width: 991px) {
  .hdr { padding: 16px 0; }
  .hdr__in { grid-template-columns: 1fr auto; gap: 16px; }
  .hdr__logo img { width: 150px; }
  .hdr__nav, .hdr__btns { display: none; }
  .hdr__mob { display: block; }
  .hdr__mob summary { list-style: none; cursor: pointer; width: 28px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; }
  .hdr__mob summary::-webkit-details-marker { display: none; }
  .hdr__mob summary span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
  .hdr__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--dark); color: var(--bg); padding: 24px var(--gutter) 32px; }
  .hdr__panel ul { list-style: none; padding: 0; margin: 0 0 24px; }
  .hdr__panel > ul > li > a { display: block; font-family: var(--font-head); font-size: 2.8rem; line-height: 1.5; }
  .hdr__panel ul ul { margin: 4px 0 12px 12px; font-size: 1.6rem; line-height: 2; color: var(--line); }
}

/* ——— Hero ——— */
.hero__title { margin-top: calc(3.2rem * var(--g, 1)); }
.hero__lead { margin-top: 3px; max-width: 85%; line-height: 1.5; }
.hero__btns { margin-top: calc(4.3rem * var(--g, 1)); }
.hero--split .hero__in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.hero--split .hero__title { width: max-content; max-width: 100vw; position: relative; z-index: 2; }
.hero--split .hero__img { margin-right: calc(-1 * var(--gutter)); }
.hero--split .hero__img img { width: 100%; height: min(673px, 47vw); object-fit: cover; border-radius: calc(20px * var(--zaokr, 1)); }
.hero--center .hero__txt { text-align: center; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero--center .hero__title { margin-top: calc(2.4rem * var(--g, 1)); }
.hero--center .hero__lead { max-width: 900px; margin-top: calc(3.2rem * var(--g, 1)); }
.hero--center .hero__btns { justify-content: center; margin-top: calc(3.2rem * var(--g, 1)); }
.hero__eyebrow { font-size: 2.4rem; line-height: 1.2; }
.hero--left .hero__title { margin-top: 0; max-width: 1200px; }
.hero--left .hero__lead { max-width: 100%; margin-top: calc(3.2rem * var(--g, 1)); }
.hero--left .hero__btns { margin-top: calc(3.2rem * var(--g, 1)); }
@media (max-width: 991px) {
  .hero--split .hero__title { width: auto; margin-top: calc(1.6rem * var(--g, 1)); margin-bottom: calc(2.4rem * var(--g, 1)); }
  .hero--split .hero__img { margin-right: 0; }
  .hero--split .hero__img img { height: auto; aspect-ratio: 1 / .88; }
  .hero { padding-top: calc(4rem * var(--g, 1)); }
  .hero__lead { max-width: 100%; font-size: 1.4rem; }
  .hero__btns { margin-top: calc(2.4rem * var(--g, 1)); }
  .hero__eyebrow { font-size: 1.4rem; }
}

/* Hero wpisu */
.crumbs { display: flex; flex-wrap: wrap; gap: 12px; font-size: 1.4rem; margin-bottom: calc(4rem * var(--g, 1)); color: var(--grey); }
.crumbs a:hover { color: var(--primary); }
.phero__title { font-size: var(--fs-lg); line-height: 1.2; margin-top: 8px; }
.phero__author { display: flex; align-items: center; gap: 16px; margin-top: calc(3.2rem * var(--g, 1)); font-size: 1.6rem; }
.phero__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.phero__date { color: var(--grey); font-size: 1.4rem; }
.phero__img { margin-top: calc(4rem * var(--g, 1)); }
.phero__img img { width: 100%; border-radius: var(--radius); max-height: 640px; object-fit: cover; }

/* Hero realizacji */
.chero { padding-top: calc(4.6rem * var(--g, 1)); }
.chero .tags { margin-bottom: calc(2.4rem * var(--g, 1)); }
.chero .tag { margin-bottom: 0; }
.chero__title { line-height: 1.1; letter-spacing: -1px; max-width: 1200px; }
.chero__img { margin-top: calc(4rem * var(--g, 1)); }
.chero__img img { width: 100%; border-radius: var(--radius); aspect-ratio: 1320 / 680; object-fit: cover; }

/* ——— Pasek logotypów ——— */
.logos { background: var(--primary); color: var(--bg); }
.logos__in { display: flex; align-items: center; padding-top: calc(2.5rem * var(--g, 1)); padding-bottom: calc(2.5rem * var(--g, 1)); overflow: hidden; }
.logos__title { width: 40%; margin-left: 5rem; flex-shrink: 0; font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: 4.8rem; line-height: 72px; }
.logos__track { width: 60%; overflow: hidden; height: 9.1rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.logos__row { display: flex; align-items: center; gap: 40px; height: 100%; width: max-content; animation: logos 40s linear infinite; }
.logos__row img { height: 6rem; width: auto; max-width: 160px; object-fit: contain; }
@keyframes logos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos__row { animation: none; } }
@media (max-width: 991px) {
  .logos__in { padding-top: calc(1rem * var(--g, 1)); padding-bottom: calc(1rem * var(--g, 1)); }
  .logos__title { margin-left: 0; font-size: 1.6rem; line-height: 1.2; width: 35%; }
  .logos__track { width: 65%; height: 5rem; }
  .logos__row { gap: 20px; }
  .logos__row img { height: 2.8rem; max-width: 100px; }
}

/* ——— Wstęp sekcji ——— */
.intro__in { display: flex; }
.intro__label { width: 38%; display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.3rem; padding-right: 24px; }
.intro__label p { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: 2.4rem; letter-spacing: 1.44px; line-height: 28.8px; max-width: 34rem; }
.intro__main { width: 62%; display: flex; flex-direction: column; gap: 3.2rem; }
.intro__body { display: flex; flex-direction: column; gap: 2.4rem; line-height: 1.5; }
.intro__body ul { padding-left: 1.2em; }
.intro--sm .intro__body { font-size: 1.6rem; }
.intro__body a { color: var(--primary); }
@media (max-width: 991px) {
  .intro__label { margin-top: 0; align-items: center; }
  .intro__label p { font-size: 1.4rem; letter-spacing: normal; line-height: 1.5; max-width: 100%; }
  .intro__main { gap: 2.4rem; }
  .intro__body { gap: 1.6rem; }
}

/* ——— Pas wezwania (niebieski z X) ——— */
.band { background: var(--primary) url(/tla/pas.svg) center / cover no-repeat; color: var(--bg); }
.band--dark { background: var(--dark) url(/tla/ciemne.svg) center / cover no-repeat; }
.band__in { padding-top: calc(10rem * var(--g, 1)); padding-bottom: calc(10rem * var(--g, 1)); padding-left: calc(var(--gutter) + 5rem); }
.band__title { font-size: calc(clamp(3.6rem, 2.475rem + 3.125vw, 6.6rem) * var(--skala-h, 1)); line-height: 1.2; max-width: 65%; font-weight: var(--w-head, 300); letter-spacing: -0.24px; }
.band__title strong { font-weight: 400; }
.band .btns { margin-top: calc(6rem * var(--g, 1)); gap: 12px 3.4rem; }
.band--h2 .band__title { font-size: clamp(2.4rem, 1.87rem + 1.48vw, 4rem); }
@media (max-width: 991px) {
  .band { background-image: url(/tla/pas-tel.svg); }
  .band__in { padding-top: calc(6rem * var(--g, 1)); padding-bottom: calc(6rem * var(--g, 1)); padding-left: var(--gutter); }
  .band__title { max-width: 100%; font-size: 3.6rem; }
  .band .btns { margin-top: 4rem; gap: 1.2rem 1.7rem; }
}

/* ——— Wezwanie wyśrodkowane ——— */
.ctac__in { position: relative; }
.ctac__txt { max-width: 90rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3.2rem; position: relative; z-index: 2; }
.ctac__body { display: flex; flex-direction: column; gap: 2.4rem; line-height: 1.5; }
.ctac .btns { justify-content: center; margin-top: 2.5rem; }
.ctac--float .ctac__in { padding-top: calc(50rem * var(--g, 1)); padding-bottom: calc(50rem * var(--g, 1)); }
.ctac__imgs { position: absolute; inset: 0; pointer-events: none; }
.ctac__im { position: absolute; border-radius: calc(8px * var(--zaokr, 1)); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ctac__im img { width: 100%; height: 100%; object-fit: cover; }
.ctac__im--1 { left: 11%; top: 11%; width: 20rem; height: 27rem; }
.ctac__im--2 { left: 52%; top: 15%; width: 28rem; height: 20.5rem; }
.ctac__im--3 { left: 90%; top: 32%; width: 15rem; height: 11.5rem; }
.ctac__im--4 { left: 2%; top: 61%; width: 21rem; height: 27rem; }
.ctac__im--5 { left: 43%; top: 86%; width: 15rem; height: 11.5rem; }
.ctac__im--6 { left: 85%; top: 74%; width: 20rem; height: 27rem; }
@media (max-width: 991px) {
  .ctac__txt { gap: 2.4rem; }
  .ctac .btns { margin-top: 0; }
  .ctac--float .ctac__in { padding-top: 0; padding-bottom: 0; }
  .ctac__imgs { display: none; }
}

/* ——— Licznik ——— */
.counter { background: var(--primary) url(/tla/licznik.svg) center / cover no-repeat; color: var(--bg); }
.counter__in { padding-top: calc(10rem * var(--g, 1)); padding-bottom: calc(10rem * var(--g, 1)); position: relative; }
.counter__big { font-family: var(--font-head); font-weight: 700; font-size: clamp(9rem, 1rem + 20.5vw, 30rem); line-height: .8; letter-spacing: -2px; color: var(--bg); }
.counter__title { font-size: var(--fs-xxl); line-height: 1.5; color: var(--bg); white-space: nowrap; }
.counter__items { display: flex; justify-content: flex-start; column-gap: 8rem; margin-top: 10rem; padding-left: 13%; }
.counter__item { max-width: 35rem; }
.counter__item:nth-child(2) { max-width: 26rem; }
.counter__item:nth-child(3) { max-width: 27%; }
.counter__val { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-xxl); line-height: 1.5; white-space: nowrap; }
.counter__lbl { font-size: 2.4rem; line-height: 1.5; }
@media (max-width: 991px) {
  .counter { background-image: var(--counter-bg, none); }
  .counter__in { padding-top: calc(6rem * var(--g, 1)); padding-bottom: calc(6rem * var(--g, 1)); }
  .counter__title { font-size: 3.6rem; font-weight: 400; }
  .counter__items { column-gap: 3rem; margin-top: 6rem; padding-left: 0; }
  .counter__val { font-size: 3.6rem; }
  .counter__lbl { font-size: 1.4rem; }
}

/* ——— Pasek liczb ——— */
.stats__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.stats__val { font-family: var(--font-head); font-weight: var(--w-head, 300); color: var(--primary); font-size: var(--fs-xxl); line-height: 1.1; letter-spacing: -1px; }
.stats__lbl { font-size: 2.4rem; line-height: 1.2; max-width: 36rem; margin-top: 8px; }
@media (max-width: 991px) { .stats__lbl { font-size: 1.4rem; } .posts--grid2 .posts__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .stats__in { grid-template-columns: 1fr; gap: 2.4rem; } }

/* ——— Wideo / zdjęcie ——— */
.media__box { position: relative; width: 100%; overflow: hidden; background: #111; margin: 0; }
.media--full .media__box { max-width: 1920px; margin: 0 auto; }
.media--wrap .media__box { border-radius: var(--radius); }
.media__box > img, .media__box video, .yt img { width: 100%; height: 100%; object-fit: cover; }
.media__cap { font-size: 1.4rem; color: var(--grey); margin-top: 8px; }
.yt { all: unset; display: block; position: absolute; inset: 0; cursor: pointer; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); background: rgba(0,0,0,.65); border-radius: calc(12px * var(--zaokr, 1)); }
.yt__play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt:hover .yt__play { background: #f00; }
.yt__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ——— Tekst + obraz ——— */
.ti .wrap { display: flex; flex-direction: column; gap: 8rem; }
.ti__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 8rem; align-items: center; }
.ti__row--right .ti__img { order: 2; }
.ti__img img { width: 100%; border-radius: var(--radius); aspect-ratio: 1 / 1; object-fit: cover; }
.ti__txt { display: flex; flex-direction: column; gap: 3.2rem; }
.ti__body { font-size: 1.6rem; line-height: 1.5; display: flex; flex-direction: column; gap: 1.6rem; }
.ti__body a { color: var(--primary); }
@media (max-width: 991px) {
  .ti .wrap { gap: 6rem; }
  .ti__txt { gap: 2.4rem; }
  .ti__body { font-size: 1.4rem; }
}

/* ——— Kafle ——— */
.cards__grid { display: grid; gap: 2rem; }
.cards__btns { justify-content: center; margin-top: 8rem; }
.card { position: relative; border: 2px solid var(--primary); border-radius: var(--radius); padding: 2.5rem 2.5rem 4rem; color: var(--primary); overflow: hidden; display: flex; flex-direction: column; }
.card--blue { background: var(--primary); color: var(--bg); }
.card--blue .tag { color: var(--bg); border-color: var(--bg); }
.card__title { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: 2.4rem; line-height: 1.2; letter-spacing: -0.24px; }
.card__body { font-size: 1.6rem; line-height: 1.5; display: flex; flex-direction: column; gap: 1.6rem; }
.card__body a { text-decoration: underline; }
.card__links { display: flex; flex-wrap: wrap; gap: 1.3rem 1.6rem; margin: 6.6rem 0; max-width: 90%; }
.card__head { position: relative; }
/* Numer kroku = znak wodny (dekoracja, 10% krycia): treść z data-num w ::before, ukryta przed czytnikami — kolejność niesie sama lista. */
.card__num::before { content: attr(data-num); }
.card__num { display: block; font-family: var(--font-head); font-weight: var(--w-head, 300); color: color-mix(in srgb, var(--primary) 10%, transparent); font-size: clamp(20.5rem, 18.8rem + 4.7vw, 25rem); line-height: 25rem; margin: -6.5rem 0 0 -2rem; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.card .tag { position: relative; z-index: 1; }
.card .btns { margin-top: auto; }
.card__logo { height: auto; max-width: 160px; margin-bottom: 4rem; }

/* Oferta: 2 karty */
.cards--offer .cards__grid { grid-template-columns: 1fr 1fr; }
.cards--offer .card { border-width: 1px; padding: 4rem; }
.cards--offer .card__title { margin: 0 0 2.4rem; }
.cards--offer .card__logo { width: 20rem; max-width: 60%; margin-bottom: 4.1rem; filter: none; }
.cards--offer .card--blue .card__logo { filter: brightness(0) invert(.92); }
.cards--offer .card .btns { margin-top: 0; }
.cards--offer .card--blue .btn { background: var(--bg); color: var(--primary); border-color: var(--bg); }
/* Kroki 01–06 */
.cards--steps .cards__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
.cards--steps .card { padding: 2.5rem 2.5rem 4rem; }
.cards--steps .card:nth-child(3n+2) { margin-top: 5rem; }
.cards--steps .card:nth-child(n+4) { margin-top: -2.5rem; }
.cards--steps .card:nth-child(5) { margin-top: 2.5rem; }
.cards--steps .card__head { min-height: 6rem; }
.cards--steps .card__title { margin: 4.2rem 0 7.5rem; font-size: 2.4rem; }
.cards--steps .card__body { gap: 2rem; }
/* Wartości 2×2 */
.cards--values .cards__grid { grid-template-columns: 1fr 1fr; }
.cards--values .card { min-height: 40rem; padding: 2.5rem; justify-content: space-between; border-width: 2px; }
.cards--values .tag { font-size: 2.4rem; line-height: 36px; padding: 0 10px; align-self: flex-start; background: var(--bg); }
.cards--values .card__title { margin-top: auto; font-size: var(--fs-lg); line-height: 1.2; color: var(--primary); position: relative; z-index: 1; }
.card__x { position: absolute; right: 0; top: 0; height: 100%; width: auto; color: color-mix(in srgb, var(--primary) 12%, transparent); transform: none; z-index: 0; }
/* Usługi 3 karty */
.cards--service .cards__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
.cards--service .card { border-width: 1px; padding: 2rem; min-height: 46rem; }
.cards--service .card:nth-child(2) { margin-top: 0; }
.cards--service .card__title { font-size: var(--fs-sm); letter-spacing: 1.44px; margin-bottom: 4rem; }
.cards--service .card__body { margin-bottom: 4rem; }
/* Siatki */
.cards--grid4 .cards__grid { grid-template-columns: repeat(4, 1fr); align-items: start; }
.cards--grid4 .card { border-width: 1px; padding: 2rem; min-height: 26rem; }
.cards--grid4 .card:nth-child(2n) { margin-top: 2rem; }
.cards--grid4 .card__title { font-size: var(--fs-sm); margin-bottom: 6rem; letter-spacing: 1.44px; }
.cards--grid3 .cards__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
.cards--grid3 .card { border-width: 1px; padding: 2rem; min-height: 24rem; }
.cards--grid3 .card:nth-child(3n+2) { margin-top: 2rem; }
.cards--grid3 .card__title { font-size: var(--fs-sm); margin-bottom: 4rem; letter-spacing: 1.44px; }
.cards--grid3 .card .btns { margin-top: 2rem; }
/* Duże karty z numerem */
.cards--stack .cards__grid { grid-template-columns: 1fr; gap: 6rem; }
.cards--stack .card { flex-direction: row; gap: 4rem; padding: 4rem; border-width: 1px; align-items: stretch; }
.cards--stack .card__txt { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2rem; position: relative; }
.cards--stack .card__num { position: static; margin: 0 0 auto; font-size: 15rem; line-height: 1; color: rgba(255,255,255,.08); }
.cards--stack .card__img { flex: 1; }
.cards--stack .card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(12px * var(--zaokr, 1)); }
.cards--stack .card .btns { margin-top: 0; }
@media (max-width: 991px) {
  .cards__btns { margin-top: 3rem; }
  .card { padding: 2.1rem 2.1rem 4.8rem; }
  .cards--offer .card { padding: 2rem; }
  .card__links { margin: 2.4rem 0; gap: .8rem 1rem; }
  .cards--steps .card__title { margin: 2.4rem 0; }
  .cards--values .card { min-height: 21.6rem; padding: 1.3rem; }
  .cards--values .tag { font-size: 1.2rem; line-height: 1.5; }
  .cards--service .card { min-height: 0; }
  .card__num { font-size: 15rem; line-height: 16rem; }
  .cards--steps .card__head { min-height: 16rem; }
  .cards--steps .card__title { margin-top: 0; }
}

/* ——— Wpisy / realizacje ——— */
.posts__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; flex-wrap: wrap; gap: 2rem; }
.posts__filters { display: flex; gap: 1.6rem; }
.filter { padding: 7px 14px 4px; border: 1px solid var(--primary); border-radius: calc(8px * var(--zaokr, 1)); color: var(--primary); font-family: var(--font-head); font-size: 1.6rem; }
.filter::after { content: " ⌄"; }
.posts__head--featured { display: block; margin-bottom: 0; }
.posts__kick { display: flex; justify-content: space-between; align-items: center; }
.posts__kick > span { font-size: clamp(2.4rem, -0.45rem + 7.9167vw, 10rem); line-height: 1.1; }
.posts__big { font-size: clamp(7.2rem, -0.41rem + 21.15vw, 26.9rem); line-height: 1.2; font-weight: 400; margin-top: -4rem; white-space: nowrap; }
.posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
.posts--featured .posts__grid { margin-top: -6rem; position: relative; z-index: 2; }
.posts--featured .post:nth-child(3n+2) { margin-top: -6rem; }
.posts--grid2 .posts__grid { grid-template-columns: 1fr 1fr; }
.post { border: 2px solid var(--primary); border-radius: var(--radius); overflow: hidden; background: var(--bg); color: var(--primary); }
.post__img { display: block; position: relative; }
.post__img img { width: 100%; aspect-ratio: 854 / 532; object-fit: cover; border-radius: calc(17px * var(--zaokr, 1)) calc(17px * var(--zaokr, 1)) calc(20px * var(--zaokr, 1)) calc(20px * var(--zaokr, 1)); }
.post__label { position: absolute; left: 0; right: 0; bottom: 0; background: var(--primary); color: var(--bg); font-family: var(--font-head); font-size: 2rem; padding: 6px 2.5rem; }
.post__body { padding: 2rem 2.5rem; }
.post__title { font-size: var(--fs-sm); line-height: 1.2; letter-spacing: 1.44px; margin: 1.7rem 0 2rem; }
.post__excerpt { font-size: 1.6rem; line-height: 1.5; margin-bottom: 5.5rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 991px) {
  .posts__big { font-size: 6rem; margin-top: 0; }
  .posts--featured .posts__grid { margin-top: -2rem; }
  .post__excerpt { font-size: 1.4rem; margin-bottom: 3rem; }
}

/* ——— Galeria ——— */
.gal--strip { overflow: hidden; }
.gal__row { display: flex; gap: 2rem; width: max-content; }
.gal__row--top { margin-left: -14rem; }
.gal__row--bottom { margin-top: 2rem; margin-left: -6rem; }
.gal__row .gal__it { width: 42.6rem; height: 32rem; border-radius: calc(16px * var(--zaokr, 1)); overflow: hidden; flex-shrink: 0; }
.gal__it img { width: 100%; height: 100%; object-fit: cover; }
.gal__mosaic { display: grid; grid-template-columns: 1fr 1.5fr .5fr; gap: 2rem; }
.gal__col { display: flex; flex-direction: column; gap: 2rem; }
.gal__col .gal__it { border-radius: calc(16px * var(--zaokr, 1)); overflow: hidden; flex: 1; min-height: 0; }
.gal__col--c .gal__it { height: 100%; }
.gal__mosaic { height: 66rem; }
.gal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.gal__grid .gal__it { border-radius: calc(16px * var(--zaokr, 1)); overflow: hidden; aspect-ratio: 4/3; }
@media (max-width: 991px) {
  .gal__row .gal__it { width: 20rem; height: 15rem; }
  .gal__row--top { margin-left: -6rem; }
  .gal__mosaic { grid-template-columns: 1fr 1fr; height: auto; }
  .gal__col--c { grid-column: 1 / -1; order: -1; }
  .gal__col .gal__it { aspect-ratio: 4/3; }
  .gal__grid { grid-template-columns: 1fr 1fr; }
}

/* ——— Slider zespołu ——— */
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4rem) / 3); gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.person { scroll-snap-align: start; border: 1px solid var(--primary); border-radius: var(--radius); padding: 2rem; color: var(--primary); display: flex; flex-direction: column; }
.person__img { aspect-ratio: 1 / 1; border-radius: calc(12px * var(--zaokr, 1)); overflow: hidden; margin-bottom: 2.4rem; }
.person__img img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-size: var(--fs-md); line-height: 1.2; }
.person__role { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-sm); color: var(--text); letter-spacing: 1.44px; margin: 4px 0 2.4rem; }
.person__body { font-size: 1.6rem; line-height: 1.5; color: var(--text); flex: 1; }
.person__in { margin-top: 2.4rem; color: var(--text); }
.slider__nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 2rem; }
.slider__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--primary); background: transparent; color: var(--primary); font-size: 2.4rem; cursor: pointer; }
@media (max-width: 991px) { .slider__track { grid-auto-columns: 85%; } }

/* ——— Formularz ——— */
.form__box { background: var(--primary) url(/tla/licznik.svg) center / cover no-repeat; color: var(--bg); border-radius: var(--radius); padding: 6rem 4rem 4rem; }
.form__title { text-align: center; font-size: clamp(3.6rem, 2.475rem + 3.125vw, 6.6rem); line-height: 1.2; letter-spacing: -0.24px; margin-bottom: 4rem; }
.form__title strong { font-weight: 400; }
.form__f { display: flex; flex-direction: column; gap: 2rem; }
.form__f input[type=text], .form__f input[type=email], .form__f input[type=date], .form__f textarea {
  width: 100%; background: transparent; border: 1px solid var(--bg); border-radius: calc(8px * var(--zaokr, 1)); color: var(--bg);
  font-family: var(--font-body); font-size: 2.4rem; padding: 12px 16px;
}
.form__f textarea { min-height: 11rem; resize: vertical; }
.form__f ::placeholder { color: color-mix(in srgb, var(--bg) 80%, transparent); }
.form__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 1.2rem; line-height: 1.5; color: color-mix(in srgb, var(--bg) 75%, transparent); }
.form__hp { display: none; }
.form__err { margin: -1.2rem 0 0; font-size: 1.4rem; line-height: 1.4; color: var(--bg); font-weight: 700; }
.form__err::before { content: "! "; }
.form__f [aria-invalid="true"]:not(:focus-visible) { outline: 2px solid var(--bg); outline-offset: 2px; }
.form__msg { margin: 0; padding: 1.6rem 2rem; border-radius: var(--radius); font-size: 1.6rem; line-height: 1.5; background: var(--bg); color: var(--primary); }
.form__msg--ok { text-align: center; font-size: 2rem; }
.form__f[aria-busy="true"] button[type=submit] { opacity: .6; pointer-events: none; }
.form__consent input { width: 24px; height: 24px; flex-shrink: 0; margin: 0; accent-color: var(--white); }
.form__f .btn { align-self: flex-start; }
@media (max-width: 991px) {
  .form__box { padding: 3rem 2rem; }
  .form__title { font-size: 3.2rem; }
  .form__f input[type=text], .form__f input[type=email], .form__f input[type=date], .form__f textarea { font-size: 1.6rem; }
}

/* ——— Treść wpisu ——— */
.rt { font-size: 1.8rem; line-height: 1.6; }
.rt > * + * { margin-top: 1.6rem; }
.rt h2 { font-size: var(--fs-md); line-height: 1.2; margin-top: 4.8rem; }
.rt h3 { font-size: var(--fs-sm); line-height: 1.3; margin-top: 3.2rem; }
.rt h4 { font-size: 2rem; margin-top: 2.4rem; }
.rt a { color: var(--primary); text-decoration: underline; }
.rt ul, .rt ol { padding-left: 1.4em; }
.rt li + li { margin-top: .6rem; }
.image img { width: 100%; border-radius: calc(12px * var(--zaokr, 1)); }
@media (max-width: 991px) { .rt { font-size: 1.6rem; } }

/* ——— Stopka ——— */
.ftr { background: var(--dark) url(/tla/ciemne.svg) right bottom / auto 100% no-repeat; color: var(--line); margin-top: 0; }
.ftr__in { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 10rem var(--gutter) 6rem; }
.ftr__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10rem; }
.ftr__logo img { width: 20rem; height: auto; }
.ftr__big { list-style: none; padding: 0; margin: 0 0 6rem; display: flex; flex-wrap: wrap; gap: 0 6rem; }
.ftr__big a { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: clamp(3.4rem, 3.5vw, 4.8rem); line-height: 72px; color: var(--bg); }
.ftr__big a:hover { color: var(--primary); }
.ftr__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 10rem; }
.ftr__lists ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 4rem; }
.ftr__services { grid-template-columns: repeat(2, max-content); }
.ftr__cities { grid-template-columns: repeat(4, max-content); }
.ftr__lists li:empty { min-height: 1px; }
.ftr__lists a { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: 1.6rem; line-height: 1.5; color: var(--grey); letter-spacing: -0.16px; }
.ftr__lists a:hover { color: var(--bg); }
.ftr__info { display: flex; gap: 6rem; font-size: 1.6rem; line-height: 1.5; color: var(--line); margin-bottom: 6rem; }
.ftr__addr { display: flex; gap: 12px; align-items: flex-start; }
.ftr__info :is(img, svg) { width: 23px; height: 23px; flex-shrink: 0; }
.ftr__contact { display: flex; flex-direction: column; gap: 12px; }
.ftr__contact a { display: flex; gap: 12px; align-items: center; }
.ftr__bottom { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 4rem; font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: clamp(1.2rem, 1.133rem + 0.185vw, 1.4rem); line-height: 1.5; color: var(--bg); } /* jasny na granacie: kontrast ≥ 4,5:1 (niebieski dawał ok. 3,2:1) */
.ftr__legal a:hover { text-decoration: underline; }
.ftr__social { display: flex; gap: 12px; }
.ftr__social :is(img, svg) { width: 30px; height: 30px; }
@media (max-width: 991px) {
  .ftr { background-image: url(/tla/stopka-tel.svg); }
  .ftr__in { padding: 6rem var(--gutter) 4rem; }
  .ftr__top { margin-bottom: 6rem; }

  .ftr__logo img { width: 11.6rem; }
  .ftr__big { flex-direction: column; gap: 0; margin-bottom: 4rem; }
  .ftr__big a { font-size: 3.6rem; line-height: 1.5; }
  .ftr__lists { grid-template-columns: 1fr; margin-bottom: 4rem; }
  .ftr__cities { grid-template-columns: repeat(3, max-content); }
  .ftr__info { flex-direction: column; gap: 2rem; font-size: 1.6rem; }
  .ftr__bottom { flex-direction: column-reverse; align-items: flex-start; }
  .ftr__legal { gap: 1.2rem 2rem; letter-spacing: .64px; }
}

/* ——— Motyw ciemny (czerwony akcent) ——— */
.mx--live { background: var(--dark); color: var(--bg); --primary: var(--secondary); }
.mx--live .hdr__nav a, .mx--live .hdr__mob summary span { color: var(--bg); }
.mx--live .hdr__mob summary span { background: var(--bg); }
.mx--live .btn--outline { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.mx--live .hl { color: var(--bg); font-family: var(--font-head); font-weight: 700; font-style: italic; text-transform: uppercase; background: var(--secondary); padding: 0 .2em; transform: skewX(-8deg); display: inline-block; }
.mx--live .logos { background: var(--secondary); }
.mx--live .card { color: var(--bg); border-color: var(--secondary); }
.mx--live .card--blue { background: var(--secondary); }
.mx--live .card__num { color: rgba(255,255,255,.08); }
.mx--live .post { background: var(--secondary); color: var(--bg); border-color: var(--secondary); }
.mx--live .post .tag { color: var(--bg); border-color: var(--bg); }
.mx--live .post .btn { background: var(--bg); color: var(--secondary); border-color: var(--bg); }
.mx--live .intro__body, .mx--live .ctac__body { color: var(--bg); }
.mx--live .x-icon { color: var(--secondary); }
.mx--live .tag { color: var(--bg); border-color: var(--bg); }

/* ——— Zwijanie siatek: jak w Bricks, dopiero poniżej 768 px (przy 768 układ zostaje wielokolumnowy) ——— */
@media (max-width: 767px) {
  .ti__row { grid-template-columns: 1fr; }
  .ti__row--right .ti__img { order: 0; }
  .cards__grid { grid-template-columns: 1fr !important; gap: 2.4rem; }
  .cards--grid4 .card, .cards--grid3 .card { margin-top: 0 !important; }
  .posts__grid, .posts--grid2 .posts__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .posts--featured .post:nth-child(3n+2) { margin-top: 0; }
  .cards--stack .card { flex-direction: column; padding: 2rem; }
  .hero--split .hero__in { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 991px) {
  .intro__in { flex-direction: column; gap: 1.7rem; }
  .intro__label, .intro__main { width: 100%; }
  .cards--steps .cards__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .cards--steps .card { margin-top: 0 !important; }
}
@media (max-width: 767px) {
  .counter__items { flex-direction: column; row-gap: 3rem; }
  .counter__item, .counter__item:nth-child(2), .counter__item:nth-child(3) { max-width: 100%; }
  .counter__item + .counter__item .counter__lbl { font-size: 2rem; }
}

/* ——— Baner zgód (K8) — kolory z tokenów ——— */
.zgody { position: fixed; inset: auto 0 0 0; z-index: 1000; padding: 16px; pointer-events: none; }
.zgody[hidden] { display: none; }
.zgody__in { pointer-events: auto; max-width: 960px; margin: 0 auto; background: var(--white); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 1rem + 1.5vw, 2.4rem); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); font-size: var(--t-small); }
.zgody__tytul { font-weight: 700; margin: 0 0 .6rem; font-size: var(--fs-sm); }
.zgody__opis { margin: 0 0 1.2rem; }
.zgody__opis a { color: var(--primary); text-decoration: underline; }
.zgody__opis a:hover { text-decoration-thickness: 2px; }
.zgody__ustawienia { display: grid; gap: .8rem; margin: 0 0 1.2rem; }
.zgody__ustawienia[hidden] { display: none; }
.zgody__btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.zgody__btn { flex: 1 1 14rem; min-height: 44px; padding: 1rem 1.6rem; font: inherit; font-weight: 700; border: 2px solid var(--primary); border-radius: 999px; background: var(--primary); color: var(--white); cursor: pointer; }
.zgody__btn--jasny { background: var(--white); color: var(--primary); }
.zgody__btn[hidden] { display: none; }
.zgody__btn:hover { filter: brightness(1.1); }
.zgody__btn:active { transform: translateY(1px); }
.zgody__btn:focus-visible, .zgody__opis a:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }

/* ——— Stany elementów klikalnych (K10): każdy link, przycisk i pole ma hover, active i focus-visible ———
   Reguły bazowe przez :where() (zerowa waga) — klocek może nadpisać własnym stylem, ale nigdy nie zostaje bez stanu. */
:where(a, button, summary, [role="button"]) { transition: color .2s, background-color .2s, opacity .2s, filter .2s; }
:where(a:not(.btn)):hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
:where(a:not(.btn)):active { opacity: .7; }
:where(button:not(.btn), summary, [role="button"]):hover { filter: brightness(1.1); }
:where(button:not(.btn), summary, [role="button"]):active { filter: brightness(.9); }
:where(input:not([type="hidden"]), textarea, select):hover { box-shadow: 0 0 0 1px currentColor; }
:where(input:not([type="hidden"]), textarea, select):active { box-shadow: 0 0 0 2px currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ——— Ograniczony ruch (K10.2): jedna globalna reguła wyłącza animacje i przejścia ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* P2 — układy z panelu: Kolumny (podział z tokenu --kol) i Siatka (kafle min. --min). Na telefonie jedna kolumna. */
.kolumny { display: grid; gap: var(--space-40); grid-template-columns: var(--kol, 1fr 1fr); }
.kolumny__kol, .siatka > * { display: grid; gap: var(--space-20); align-content: start; min-width: 0; }
.siatka { display: grid; gap: var(--space-40); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 280px), 100%), 1fr)); }
@media (max-width: 767px) { .kolumny { grid-template-columns: 1fr; } }

/* Szkielet serwisu (P5): menu i stopka z panelu, listy wpisów i usług, stronicowanie — tylko tokeny. */
.serwis-gora { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20); padding-block: var(--space-20); border-bottom: 1px solid var(--line); }
.serwis-gora__logo { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text); text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; min-height: 48px; }
/* Logo w nagłówku (26.10, poprawka): wersja na ciemne tło w wersji ciemnej strony (tryb „Ciemna” albo „Oba” → ciemna), przy ciemnym motywie strony
   i na płótnie Editora z ciemnym motywem; druga wersja jest w kodzie tylko wtedy, gdy plik „Logo na ciemne tło” jest wgrany (Uklad.astro, RamaSerwisu.tsx). */
.serwis-gora__logo > img { display: block; }
.serwis-gora__logo > .serwis-gora__logo-ciemne { display: none; }
:is(html[data-s-scheme="dark"] .serwis-gora, body:has(main .mx--ciemny) > .serwis-gora, .ef-serwis--ciemny > .serwis-gora) > .serwis-gora__logo:has(> .serwis-gora__logo-ciemne) > .serwis-gora__logo-jasne { display: none; }
:is(html[data-s-scheme="dark"] .serwis-gora, body:has(main .mx--ciemny) > .serwis-gora, .ef-serwis--ciemny > .serwis-gora) > .serwis-gora__logo > .serwis-gora__logo-ciemne { display: block; }
.serwis-menu ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.serwis-menu a, .serwis-dol a { color: var(--text); text-decoration: none; font-size: var(--t-small); display: inline-flex; align-items: center; min-height: 48px; }
.serwis-menu a { min-width: 48px; padding-inline: 8px; justify-content: center; }
.serwis-menu a:hover, .serwis-dol a:hover, .serwis-menu a[aria-current="page"] { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.serwis-dol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20); justify-content: space-between; padding-block: var(--space-40); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--grey); }
.serwis-dol ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
/* Podmenu w menu serwisu (26.10): pozycja z „poziom: 1” w Menu. Komputer — lista rozwija się pod pozycją po najechaniu albo po przejściu klawiszem Tab;
   telefon i tablet — wcięta lista pod pozycją, zawsze widoczna (bez rozwijania). */
.serwis-menu__ma-pod > a::after { content: ""; width: 0.6rem; height: 0.6rem; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
@media (min-width: 992px) {
  .serwis-menu__ma-pod { position: relative; }
  .serwis-menu .serwis-menu__pod { display: none; position: absolute; z-index: 30; top: 100%; left: 0; min-width: 22rem; max-width: min(32rem, 90vw); flex-direction: column; gap: 0; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
  .serwis-menu li:last-child > .serwis-menu__pod { left: auto; right: 0; }
  .serwis-menu__ma-pod:is(:hover, :focus-within) > .serwis-menu__pod { display: flex; }
  .serwis-menu__pod a { justify-content: flex-start; width: 100%; text-align: left; }
}
@media (max-width: 991px) {
  .serwis-menu__ma-pod { flex-basis: 100%; }
  .serwis-menu .serwis-menu__pod { padding-left: var(--space-20, 16px); border-left: 1px solid var(--line); }
}
/* Strona z listą (wpisy, usługi). Nie „.lista”: tę nazwę ma element „Lista z ptaszkami”, który zeruje odstępy. */
.lista-strony { padding-block: 40px var(--space-60); }
/* A1 (27.10): strona „Nie ma takiej strony” (404) — tylko tokeny Style Guide; bez animacji. Na telefonie przyciski na całą szerokość (48 px wysokości z .btn). */
.nie-ma { display: grid; align-content: center; justify-items: start; gap: var(--space-20); min-height: 55vh; padding-block: var(--space-100); }
.nie-ma__kod { margin: 0; font-family: var(--font-head); font-size: var(--fs-sm); letter-spacing: 1.44px; color: var(--primary); }
.nie-ma__tytul { margin: 0; max-width: 20ch; overflow-wrap: anywhere; }
.nie-ma__opis { margin: 0; max-width: 60ch; }
.nie-ma__przyciski { margin: var(--space-20) 0 0; }
@media (max-width: 575px) {
  .nie-ma__przyciski { width: 100%; flex-direction: column; align-items: stretch; }
  .nie-ma__przyciski .btn { font-size: 1.6rem; white-space: normal; }
}
.lista__tytul { font-size: var(--fs-lg); margin: 0 0 var(--space-20); }
.lista__filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-20); }
.lista__filtry a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: var(--t-small); }
.lista__filtry a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--white); }
.lista__ile { color: var(--grey); font-size: var(--t-small); }
.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-20); list-style: none; margin: 0; padding: 0; }
.karta { display: flex; flex-direction: column; gap: 8px; padding: var(--space-20); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.karta img { width: 100%; height: auto; border-radius: calc(var(--radius) / 2); }
.karta__zdjecie { aspect-ratio: 16 / 9; object-fit: cover; }
.wpis__zdjecie { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; margin: 28px 0 0; border-radius: var(--radius); }
.wpis__wroc { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; color: var(--text); text-underline-offset: 3px; font-size: var(--t-small); }
article .wpis__meta { margin: 0 0 8px !important; }
article .wpis__meta + h1 { margin-top: 0; }
.wpis__zdjecie + * { margin-top: 28px; }
.karta__meta { color: var(--grey); font-size: var(--t-small); margin: 0; }
.karta__tytul { font-family: var(--font-head); font-size: var(--fs-sm); margin: 0; }
.karta__tytul a { color: var(--text); text-decoration: none; }
.karta__tytul a:hover { color: var(--primary); }
.stronicowanie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: var(--space-40); font-size: var(--t-small); }
.stronicowanie ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.stronicowanie a, .stronicowanie span { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 12px; text-align: center; border-radius: calc(8px * var(--zaokr, 1)); color: var(--text); text-decoration: none; }
.stronicowanie a:hover { background: var(--white); color: var(--primary); }
.stronicowanie [aria-current="page"] { background: var(--primary); color: var(--white); }
/* Brak poprzedniej/następnej: miejsce zostaje (przyciski nie skaczą), napis niewidoczny — szary tekst nie spełniał kontrastu WCAG. */
.stronicowanie > span[aria-hidden="true"] { visibility: hidden; }
.stronicowanie li[aria-hidden="true"] { color: var(--text); }
.tresc { padding-block: var(--space-60); font-size: var(--t-body); }
.tresc h1 { font-size: var(--fs-lg); }
.tresc :is(p, ul, ol, h2, h3) + :is(p, ul, ol, h2, h3) { margin-top: var(--space-20); }
.tresc__lead { font-size: var(--fs-sm); color: var(--grey); }
.tresc img { width: 100%; height: auto; border-radius: var(--radius); }
.pomin { position: absolute; left: 8px; top: -100px; z-index: 10; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; background: var(--primary); color: var(--white); border-radius: calc(8px * var(--zaokr, 1)); }
.pomin:focus { top: 8px; }
.karta p:not(.karta__meta) { font-size: var(--t-small); line-height: 1.5; margin: 0; color: var(--grey); }
.lista__ile { margin: 0 0 var(--space-20); }

/* Formularze z panelu (P6): widoczne etykiety, lista wyboru, klikalny kontakt, wersja prosta (element „Formularz”) */
.form__pole { display: flex; flex-direction: column; gap: .6rem; }
.form__lbl { font-size: 1.6rem; line-height: 1.4; font-weight: 500; }
.form__f select { width: 100%; font: inherit; font-size: 1.6rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); border: 1px solid currentColor; background: transparent; color: inherit; }
.form__box .form__f select option { color: #000; }
.form__kontakt { margin: 2.4rem 0 0; text-align: center; font-size: 1.6rem; line-height: 1.5; }
.form__kontakt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.form--prosty { display: grid; gap: var(--space-20); max-width: 520px; padding-block: var(--space-40); }
.form--prosty .form__f input:not([type=checkbox]), .form--prosty .form__f textarea { width: 100%; font: inherit; font-size: 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid var(--text, #222); border-radius: var(--radius); background: var(--bg); color: inherit; }
.form--prosty .form__err { color: #b00020; }
.form--prosty .form__msg { border: 1px solid currentColor; }
.form--prosty .form__consent { color: inherit; }
.form--prosty .form__f button[type=submit] { align-self: flex-start; }
.form__pole .form__err, .form__f > div > .form__err { margin: .4rem 0 0; }
/* Runda D (poz. 9): pola o szerokości „Pół” (panel: Forms) — dwa obok siebie, gdy formularz ma co najmniej 42rem; węziej jedno pod drugim.
   Szerokość liczona od szerokości formularza (nie okna), więc tak samo w wąskiej kolumnie obok danych kontaktowych i w podglądzie panelu. */
.form__rzad { display: flex; flex-wrap: wrap; gap: 2rem; }
.form__rzad > * { flex: 0 0 clamp(calc(50% - 1.01rem), (42rem - 100%) * 999, 100%); min-width: 0; }
.form__rzad > div > .form__err { margin: .4rem 0 0; }
/* P13 (26.10): pola „Data” i „Plik” — podpowiedź nad polem (jakie pliki, ile MB), pole wyboru pliku 48 px, bez przewijania w bok na 360 px */
.form__podp { margin: 0; font-size: 1.4rem; line-height: 1.5; font-weight: 400; }
.form__f input[type=date] { max-width: 100%; }
.form__f input[type=file] { width: 100%; max-width: 100%; min-height: 48px; box-sizing: border-box; font: inherit; font-size: 1.6rem; padding: .8rem; border: 1px dashed var(--pole, currentColor); border-radius: var(--radius); background: transparent; color: inherit; overflow: hidden; text-overflow: ellipsis; }
.form__f input[type=file]::file-selector-button { min-height: 40px; margin-right: 1.2rem; padding: .6rem 1.4rem; font: inherit; font-weight: 700; border: 1px solid currentColor; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; }

/* Baner zgód (K8, P7) — z szablonu etapu 2 */
.zgody { position: fixed; inset: auto 0 0 0; z-index: 1000; padding: 16px; pointer-events: none; }
.zgody[hidden] { display: none; }
.zgody__in { pointer-events: auto; max-width: 960px; margin: 0 auto; background: var(--white); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 1rem + 1.5vw, 2.4rem); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); font-size: var(--t-small); }
.zgody__tytul { font-weight: 700; margin: 0 0 .6rem; font-size: var(--fs-sm); }
.zgody__opis { margin: 0 0 1.2rem; }
.zgody__opis a { color: var(--primary); text-decoration: underline; }
.zgody__opis a:hover { text-decoration-thickness: 2px; }
.zgody__ustawienia { display: grid; gap: .8rem; margin: 0 0 1.2rem; }
.zgody__ustawienia[hidden] { display: none; }
.zgody__btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.zgody__btn { flex: 1 1 14rem; min-height: 44px; padding: 1rem 1.6rem; font: inherit; font-weight: 700; border: 2px solid var(--primary); border-radius: 999px; background: var(--primary); color: var(--white); cursor: pointer; }
.zgody__btn--jasny { background: var(--white); color: var(--primary); }
.zgody__btn[hidden] { display: none; }
.zgody__btn:hover { filter: brightness(1.1); }
.zgody__btn:active { transform: translateY(1px); }
.zgody__btn:focus-visible, .zgody__opis a:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }

/* ——— Szkielet klocka (2C.2): to samo dla każdego klocka ——— */
/* Cele dotykowe ≥ 48 px (logo, menu na telefonie, strzałki slidera, kontakt w stopce, pola formularza) */
.hdr__logo, .ftr__logo { display: inline-flex; align-items: center; min-height: 48px; }
.slider__nav button { width: 48px; height: 48px; }
.ftr__contact a { min-height: 48px; }
.form__f input[type=text], .form__f input[type=email], .form__f input[type=tel], .form__f input[type=number], .form__f input[type=date], .form__f select { min-height: 48px; }
@media (max-width: 991px) { .hdr__mob summary { width: 48px; height: 48px; padding: 14px 10px; } }
/* Linki w zdaniach: widoczny stan najechania */
.form__kontakt a:hover, .intro__body a:hover, .rt a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* Przewijany pas (slider) dostępny z klawiatury */
.slider__track:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
/* Licznik na wąskim telefonie bez przewijania w bok */
@media (max-width: 991px) { .counter__title { white-space: normal; } .counter__big { overflow-wrap: anywhere; } }
/* Ograniczony ruch: żadnych animacji ani przejść */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ——— Wygląd z design systemu klienta (2C.3): cień, ramki pól, motyw sekcji ——— */
.card, .post, .person, .gal__it, .hero__img img, .ti__img img, .phero__img img, .chero__img img { box-shadow: var(--cien, none); }
.form__f input[type=text], .form__f input[type=email], .form__f input[type=tel], .form__f input[type=number], .form__f input[type=date], .form__f input[type=file], .form__f textarea, .form__f select { border-color: var(--pole, var(--bg)); }
/* Motyw sekcji: klocek (także nagłówek i stopka) dostaje tło i kolory z tokenów; zmienne przestawione tylko wewnątrz sekcji */
.mot--jasna > * { background: var(--bg); color: var(--text); }
.mot--karta { --bg: var(--white); }
.mot--karta > * { background: var(--white); color: var(--text); }
.mot--ciemna { --bg: var(--dark); --white: color-mix(in srgb, var(--naCiemnym) 8%, var(--dark)); --text: var(--naCiemnym); --primary: var(--primaryJasny);
  --grey: color-mix(in srgb, var(--naCiemnym) 78%, var(--dark)); --line: color-mix(in srgb, var(--naCiemnym) 28%, var(--dark)); --pole: color-mix(in srgb, var(--naCiemnym) 60%, var(--dark)); }
.mot--ciemna > * { background: var(--bg); color: var(--text); }
.mot--akcent { --bg: var(--secondary); --primary: var(--text); --grey: var(--text); --line: color-mix(in srgb, var(--text) 30%, var(--secondary)); }
.mot--akcent > * { background: var(--secondary); color: var(--text); }
.mot > * .hl { color: var(--primary); }
/* Przyciski „na ciemne tło” (ghost/light) w motywach sekcji: zawsze widoczne na tle, które motyw nadaje */
:is(.mot--jasna, .mot--karta, .mot--akcent, .mot--ciemna) .btn--ghost:not(.form__box .btn) { background: transparent; color: var(--text); border-color: var(--text); }
:is(.mot--jasna, .mot--karta, .mot--akcent, .mot--ciemna) .btn--light:not(.form__box .btn) { background: var(--primary); border-color: var(--primary); color: var(--bg); }
/* Stopka jest zawsze ciemna: marka w wersji na ciemne tło; napis na jasnym przycisku ciemny (gdy klient poda „Marka na ciemnym”) */
.ftr { --primary: var(--primaryJasny); }
.ftr .btn--primary { color: var(--naPrzyciskuCiemnych, var(--bg)); }
/* Stopka w jasnym motywie: marka i napis na przycisku jak w reszcie motywu, nie wersja „na ciemne” */
:is(.mot--jasna, .mot--karta, .mot--akcent) > .ftr { --primary: inherit; --naPrzyciskuCiemnych: var(--bg); }
/* Stopka w motywie: tekst informacyjny w kolorze tekstu motywu (bez motywu zostaje jasna „linia” na ciemnym) */
.mot > .ftr .ftr__info { color: var(--text); }

/* ——— Małe elementy z gotowymi opcjami (2C.6): tylko tokeny ——— */
.btn--link { background: transparent; border-color: transparent; color: var(--primary); padding-inline: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.btn--link:hover { filter: none; text-decoration-thickness: 2px; }
.snag { display: grid; gap: calc(1.6rem * var(--g, 1)); max-width: 80rem; }
.snag--srodek { justify-items: center; text-align: center; margin-inline: auto; }
.snag__nad { margin: 0; font-size: 1.4rem; line-height: 1.4; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.snag__opis { margin: 0; font-size: 1.8rem; line-height: 1.5; color: var(--grey); max-width: 65ch; }
.etyk { display: inline-flex; align-items: center; justify-self: start; padding: .4rem 1.2rem; border: 1px solid transparent; border-radius: var(--btn-r, 999px); font-size: 1.4rem; line-height: 1.4; font-weight: 500; }
.etyk--marka { background: var(--primary); border-color: var(--primary); color: var(--bg); }
.etyk--akcent { background: transparent; border-color: var(--secondary); color: var(--text); }
.etyk--neutralna { background: var(--white); border-color: var(--line); color: var(--text); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(1.2rem * var(--g, 1)); }
.lista li { display: flex; gap: 1.2rem; align-items: flex-start; font-size: 1.8rem; line-height: 1.5; }
.lista__ico { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; margin-top: .2rem; color: var(--primary); }
.sep { border: 0; margin: 0; width: 100%; }
.sep--linia { border-top: 1px solid var(--line); }
.sep--krotka { width: 6.4rem; border-top: 3px solid var(--primary); }
.sep--20 { margin-block: var(--space-20); } .sep--40 { margin-block: var(--space-40); } .sep--60 { margin-block: var(--space-60); }
.karta { display: grid; gap: calc(1.6rem * var(--g, 1)); align-content: start; padding: calc(3.2rem * var(--g, 1)); border-radius: var(--radius); background: var(--white); color: var(--text); border: 1px solid transparent; }
.karta--ramka { border-color: var(--line); }
.karta--cien { box-shadow: var(--cien, 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent)); }
.karta--plaska { background: color-mix(in srgb, var(--primary) 6%, var(--white)); }

/* ——— Docelowy układ 20 sekcji (2C.4): układy inspirowane Relume, kod i wygląd własne — tylko tokeny ———
   Nagłówki sekcji, karty, etykiety i przyciski = klasy małych elementów z 2C.6 (.snag, .karta, .etyk, .btn). */
.snag__opis { display: grid; gap: 1.2rem; }
.snag__opis ul { padding-left: 1.2em; }
.snag__opis a { color: var(--primary); text-decoration: underline; }

/* Nagłówek (Navbar 2): na telefonie przycisk „Menu” z elementu „Przycisk”, panel w kolorach na ciemne tło */
.hdr__menu { list-style: none; gap: 8px; }
.hdr__menu::-webkit-details-marker { display: none; }
.hdr__mob summary .hdr__ham { display: inline-flex; flex-direction: column; justify-content: space-between; width: 18px; height: 12px; background: none; }
.hdr__mob .hdr__ham span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
@media (max-width: 991px) {
  .hdr__mob summary.hdr__menu { width: auto; height: auto; min-height: 48px; padding: 8px 16px; flex-direction: row; align-items: center; font-size: 1.6rem; }
  .hdr__panel { color: var(--naCiemnym); }
}

/* Hero (Header 1): tekst z lewej, zdjęcie z prawej w kontenerze; odstępy tytułu z --space-*; wariant „tekst na zdjęciu” */
.hero--split .hero__in { gap: var(--space-60); }
.hero--split .hero__title { width: auto; max-width: none; margin-top: var(--space-20); }
.hero--split .hero__lead { margin-top: var(--space-20); }
.hero--split .hero__btns { margin-top: var(--space-40); }
.hero--split .hero__img { margin-right: 0; }
.hero--tlo { position: relative; overflow: hidden; color: var(--naCiemnym); }
.hero--tlo .hero__in { position: relative; min-height: min(72rem, 80vh); display: flex; align-items: center; padding-block: var(--space-100); }
.hero--tlo .hero__txt { position: relative; z-index: 2; max-width: 80rem; }
.hero--tlo .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero--tlo .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--tlo .hero__bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--dark) 70%, transparent); }
.hero--tlo .tag { color: var(--naCiemnym); border-color: var(--naCiemnym); }

/* Hero wpisu (Blog Post Header 2): link „Wszystkie wpisy”, kategoria, tytuł, autor i data, szerokie zdjęcie */
.phero__powrot { display: flex; width: fit-content; margin-bottom: var(--space-20); }

/* Hero realizacji (Portfolio Header 3): wyśrodkowana nazwa, opis, etykiety z elementu „Etykieta”, duże zdjęcie */
.chero__txt { display: grid; justify-items: center; text-align: center; gap: var(--space-20); max-width: 90rem; margin-inline: auto; }
.chero__txt .chero__title { max-width: none; }
.chero__opis { font-size: 1.8rem; line-height: 1.5; color: var(--grey); display: grid; gap: 1.2rem; }
.chero__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.etyk--link { min-height: 48px; }

/* Logotypy (Logo 3): krótki napis, rząd 6 logotypów; telefon po 2; opcjonalnie w odcieniach szarości */
.logos--rzad .wrap { display: grid; gap: var(--space-40); justify-items: center; padding-block: var(--space-40); }
.logos--rzad .logos__title { width: auto; margin: 0; font-size: var(--fs-sm); line-height: 1.3; text-align: center; }
.logos--rzad .logos__row { list-style: none; margin: 0; padding: 0; width: 100%; height: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-20) var(--space-40); align-items: center; justify-items: center; animation: none; }
.logos--rzad .logos__row img { height: 4.8rem; width: auto; max-width: 100%; }
.logos--szare img { filter: grayscale(1); }
@media (max-width: 767px) { .logos--rzad .logos__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logos--rzad .logos__row img { height: 4rem; } }

/* Wstęp (Layout 36): nagłówek sekcji z elementu, przyciski opcjonalne */
.intro__in--lewo, .intro__in--srodek { display: grid; gap: var(--space-40); }
.intro__in--srodek { justify-items: center; text-align: center; }
.intro .snag { max-width: 90rem; }
.intro--lg .snag__opis { font-size: clamp(1.6rem, 1.4rem + 0.5vw, 2.2rem); }
.intro--sm .snag__opis { font-size: 1.6rem; }

/* Tekst z obrazem (Layout 1 / 487): na telefonie tekst nad zdjęciem w każdym wierszu */
@media (max-width: 767px) { .ti__row .ti__img { order: 1; } }

/* Kafle (Layout 242): tytuł z lewej, 3 kolumny kart z elementu „Karta”: ikona, tytuł, opis, link */
.cards__nag { margin-bottom: var(--space-40); }
.cards--kolumny .cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); align-items: stretch; }
.cards__karta { display: flex; flex-direction: column; } /* bez pustych wierszy siatki pod linkiem; link na dole karty */
.cards__ikona { width: 4rem; height: 4rem; color: var(--primary); }
.cards__img { width: 100%; }
.cards__tytul { margin: 0; letter-spacing: normal; }
.cards__opis { font-size: 1.6rem; line-height: 1.5; color: var(--grey); display: grid; gap: 1.2rem; align-content: start; }
.cards__karta .btns { margin-top: auto; }
.karta .cards__opis p { font-size: inherit; } /* opis 16 px, wygrywa z .karta p (P5) */

/* Wpisy (Blog 44): tytuł z lewej, przycisk w rogu, wpisy w kartach; na telefonie przycisk pod listą */
.posts__karty { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-40); align-items: end; }
.posts__karty .posts__nag { grid-column: 1; }
.posts__karty .posts__wiecej { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.posts__karty .posts__filters, .posts__karty .posts__grid { grid-column: 1 / -1; }
.posts--karty .posts__grid { align-items: stretch; }
.post2 { display: flex; flex-direction: column; gap: 1.2rem; }
.post2__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post2__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post2__tytul { margin: 0; letter-spacing: normal; }
.post2__opis { font-size: 1.6rem; line-height: 1.5; color: var(--grey); }
.post2__link { align-self: flex-start; margin-top: auto; }
@media (min-width: 768px) and (max-width: 991px) { .posts--karty .posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* tablet: 2 karty w rzędzie, tytuły nie łamią się po słowie */
@media (max-width: 767px) {
  .posts__karty { grid-template-columns: minmax(0, 1fr); }
  .posts__karty .posts__wiecej { grid-column: 1; grid-row: auto; order: 3; justify-content: flex-start; }
}

/* Treść wpisu (Content 29): wstęp, zdjęcie z podpisem, cytat; lista ze znacznikiem jak w elemencie „Lista z ptaszkami” */
.rt__wstep { font-size: clamp(1.8rem, 1.6rem + 0.5vw, 2.2rem); line-height: 1.5; }
.rt .rt__fig { margin: var(--space-40) 0 0; display: grid; gap: 1.2rem; }
.rt__fig img { width: 100%; border-radius: var(--radius); box-shadow: var(--cien, none); }
.rt__fig figcaption { font-size: 1.4rem; line-height: 1.5; color: var(--grey); }
.rt .rt__cytat { margin: var(--space-40) 0 0; padding-left: var(--space-20); border-left: 3px solid var(--primary); display: grid; gap: 1.2rem; }
.rt__cytat p { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-sm); line-height: 1.4; }
.rt__cytat footer { font-size: 1.4rem; color: var(--grey); }
.rt ul { list-style: none; padding-left: 0; }
.rt ul > li { position: relative; padding-left: 3.6rem; }
.rt ul > li::before { content: ""; position: absolute; left: 0; top: .15em; width: 2.4rem; height: 2.4rem; background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Obraz (Gallery 1): wyśrodkowany tytuł, jedno duże zdjęcie, podpis opcjonalny */
.image__nag { margin-bottom: var(--space-40); }
.image__fig { margin: 0; display: grid; gap: 1.2rem; }
.image__fig img { box-shadow: var(--cien, none); }
.image__cap { font-size: 1.4rem; line-height: 1.5; color: var(--grey); text-align: center; }

/* Wideo (Layout 158): duże wideo, pod nim tytuł i opis */
.media__txt { margin-top: var(--space-40); }

/* Galeria (Gallery 5): 6 zdjęć po 3; telefon po 1, tablet po 2 */
.gal__nag { margin-bottom: var(--space-40); }
@media (max-width: 767px) { .gal__grid { grid-template-columns: minmax(0, 1fr); } }

/* Slider (Team 10): tytuł z lewej, karuzela, strzałki i kropki (cele 48 px), bez samoczynnego przewijania */
.slider__nag { margin-bottom: var(--space-40); }
.slider__nav { align-items: center; flex-wrap: wrap; }
.slider__dots { display: flex; flex-wrap: wrap; margin-right: auto; }
.slider__nav .slider__dot { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.slider__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary); }
.slider__dot[aria-current="true"]::before { background: var(--primary); }

/* Licznik (Stats 2): tytuł z lewej, opis z prawej, 3 duże liczby (skala nagłówków ze Stylu) */
.counter__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40); align-items: end; }
.counter .counter__title { font-size: var(--fs-lg); line-height: 1.2; white-space: normal; color: inherit; font-weight: var(--w-head, 300); }
.counter__title .counter__big { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; }
.mot .counter__title .counter__big { color: var(--primary); }
.counter__opis { font-size: 1.8rem; line-height: 1.5; display: grid; gap: 1.2rem; }
.counter .counter__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); margin-top: var(--space-60); padding-left: 0; }
.counter .counter__item { max-width: none; }
@media (max-width: 767px) {
  .counter__head, .counter .counter__items { grid-template-columns: minmax(0, 1fr); }
  .counter .counter__val { font-size: var(--fs-xl); }
  .counter .counter__item .counter__lbl { font-size: 1.6rem; }
}

/* Liczby (Stats 8): długi tytuł z lewej, liczby oddzielone pionową kreską w kolorze „line”; telefon — kreska pozioma */
.stats__wrap { display: grid; gap: var(--space-40); }
.stats--tytul .stats__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; }
.stats__item { border-left: 1px solid var(--line); padding-left: var(--space-20); }
@media (max-width: 991px) { .stats--tytul .stats__wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .stats__item { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-20) 0 0; } }

/* Pas CTA (CTA 7): tytuł i opis z lewej, przyciski z prawej; telefon — przyciski pod tekstem na całą szerokość */
.band .band__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-40); padding: var(--space-60) var(--gutter); }
.band__txt { flex: 1 1 40rem; display: grid; gap: var(--space-20); max-width: 76rem; }
.band .band__title { max-width: none; }
.band__opis { font-size: 1.8rem; line-height: 1.5; display: grid; gap: 1.2rem; }
.band .band__btns { margin-top: 0; flex: 0 1 auto; gap: 12px 16px; }
.band .btn { white-space: normal; }
.band--bez { background-image: none; }
.mot--ciemna > .band:not(.band--bez) { background: var(--bg) url(/tla/ciemne.svg) center / cover no-repeat; }
@media (max-width: 767px) {
  .band .band__in { flex-direction: column; align-items: stretch; }
  .band__txt { flex: none; }
  .band .band__btns { flex-direction: column; align-items: stretch; }
  .band .band__btns .btn { width: 100%; }
}

/* Formularz (Contact 5): dane kontaktowe obok formularza (telefon — nad nim); w motywie bez kolorowej ramki, pola z ramką „pole” */
.form__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-60); align-items: start; }
.form__box .form__title { text-align: left; margin-bottom: 0; }
.form__info { display: grid; gap: var(--space-20); align-content: start; }
.form__opis { font-size: 1.8rem; line-height: 1.5; display: grid; gap: 1.2rem; }
.form__info .form__kontakt { text-align: left; margin: 0; }
@media (max-width: 991px) { .form__box { grid-template-columns: minmax(0, 1fr); } }
.mot > .form .form__box { background: transparent; color: var(--text); padding: 0; border-radius: 0; }
.mot > .form .form__f :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=file], textarea, select) { border-color: var(--pole, var(--grey)); color: var(--text); }
.mot > .form .form__f ::placeholder, .mot > .form .form__consent { color: var(--grey); }
.mot > .form .form__consent input { accent-color: var(--primary); }
.mot > .form .form__err { color: var(--text); }
.mot > .form .form__f [aria-invalid="true"]:not(:focus-visible) { outline-color: var(--text); }
.mot > .form .form__box .btn--light { background: var(--primary); border-color: var(--primary); color: var(--bg); }

/* Stopka (Footer 3): logo i kontakt z lewej, kolumny linków z prawej, na dole prawa i ikony (cel 48 px) */
.ftr__glowna { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-60); margin-bottom: var(--space-60); }
.ftr__lewa { display: grid; gap: var(--space-40); align-content: start; justify-items: start; }
.ftr__lewa .ftr__info { flex-direction: column; gap: 2rem; margin-bottom: 0; }
.ftr__prawa .ftr__big { margin-bottom: var(--space-40); }
.ftr__prawa .ftr__lists { margin-bottom: 0; }
.ftr__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; }
@media (max-width: 991px) { .ftr__glowna { grid-template-columns: minmax(0, 1fr); } }
/* Wideo w kontenerze: zdjęcie-okładka z tymi samymi rogami co ramka; obrys w motywie — przezroczysty, krawędź = ramka w kolorze marki */
.media--wrap .media__box > img, .media--wrap .yt img { border-radius: var(--radius); }
.mot .btn--outline { background: transparent; border-color: var(--primary); }
/* Stopka w motywie: prawa autorskie i najechane linki w kolorze tekstu motywu (kolor „tła strony” znikał na ciemnym) */
.mot > .ftr .ftr__legal, .mot > .ftr .ftr__lists a:hover { color: var(--text); }
/* Motyw „Ciemna”: napis na przycisku w kolorze marki — jasny, chyba że klient podał jasną „Markę na ciemnym” (wtedy ciemny) */
.mot--ciemna .btn--primary, .mot--ciemna .btn--light:not(.form__box .btn) { color: var(--naPrzyciskuCiemnych, var(--naCiemnym)); }
/* Motyw „Akcent”: tekst czarny albo biały — ten, który ma większy kontrast z kolorem „Akcent” klienta (próg luminancji 0,179) */
.mot--akcent { --text: var(--naAkcencie, #000000); }
/* Czytelność (Practical UI, 2C.4): tekst ciągły na telefonie min. 16 px, zgoda w formularzu min. 14 px */
@media (max-width: 991px) { .hero__lead, .ti__body, .stats__lbl { font-size: 1.6rem; } }
.mot > .form .form__consent { font-size: 1.4rem; }

/* ——— Rytm pionowy (2C.4): każda sekcja z motywem ma odstęp góra/dół z tokenu --space-60 (skaluje się z gęstością);
   własne odstępy klocków w środku zerujemy, żeby nie sumowały się w dziury ani nie znikały do 0 ——— */
.mot > .blk { padding-block: var(--space-60); }
.mot > .blk :is(.counter__in, .ctac__in, .logos__in) { padding-block: 0; }
.mot > .logos--rzad .wrap { padding-block: 0; }
.mot > .band { padding-block: 0; } /* pas CTA: ten sam odstęp jest w .band__in */
@media (max-width: 991px) { .mot > .hero { padding-top: var(--space-60); } }
:is(h1, h2, h3, .snag__tytul) { text-wrap: balance; }

/* Atrapa logo wzornika: napis w kolorach Stylu (tekst/marka), żadnych kolorów z pliku */
.logo-atrapa { display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: .4rem 1.2rem; border: 2px solid currentColor;
  border-radius: calc(8px * var(--zaokr, 1)); font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--text); white-space: nowrap; }
.hdr__logo .logo-atrapa { color: var(--primary); }
.ftr__logo .logo-atrapa { color: var(--naCiemnym); }
.mot > .ftr .ftr__logo .logo-atrapa { color: var(--text); }
.logos .logo-atrapa { color: var(--grey); min-width: 12rem; }

/* Tekst z obrazem w motywie: zdjęcie 4:3 (nie kwadrat), większy tekst — proporcje tekst/zdjęcie */
.mot .ti__img img { aspect-ratio: 4 / 3; }
.mot .ti__body { font-size: 1.8rem; }
.mot .ti__row { align-items: center; }
/* Stopka: logo blisko danych firmy */
.ftr__lewa { gap: var(--space-20); }
.ftr__lewa .btns { margin-top: var(--space-20); }
/* Jedna stopka i jeden nagłówek: gdy strona ma klocek Nagłówek/Stopka, szablon nie dokłada swojego paska
   (zostaje, gdy w stopce szablonu jest „Ustawienia cookies” — tego klocek Stopka nie ma) */
body:has(main .hdr) > .serwis-gora { display: none; }
body:has(main .ftr):not(:has(.serwis-dol a[href="#zgody"])) > .serwis-dol { display: none; }
/* Napis na przycisku min. 16 px także na telefonie (było 12 px) */
@media (max-width: 991px) { .btn, .btn--lg { font-size: 1.6rem; padding: 8px 16px; } .btn--link { padding-inline: 0; } }
.karta.post2 .post2__opis { font-size: 1.6rem; } /* wygrywa z .karta p z listy wpisów (P5) */

/* ——— 2C.4b: opisy sekcji czytelne na dużym ekranie (Practical UI: tekst główny 18–20 px na komputerze, min. 16 px), stopka ——— */
:root { --fs-opis: clamp(1.6rem, 1.4rem + 0.42vw, 2rem); --fs-opis-karty: clamp(1.6rem, 1.5rem + 0.21vw, 1.8rem); }
.snag__opis, .counter__opis, .band__opis, .form__opis { font-size: var(--fs-opis); }
.cards__opis, .card__body, .post2__opis, .karta.post2 .post2__opis { font-size: var(--fs-opis-karty); }
.ctac__body { font-size: max(1.6rem, var(--t-body)); }
/* Stopka 1440: kolumny linków obok siebie, bez rozciągania na pół szerokości */
.ftr__prawa .ftr__lists { grid-template-columns: repeat(2, max-content); column-gap: var(--space-100); justify-content: start; }
@media (min-width: 992px) { .ftr__prawa .ftr__lists ul { grid-template-columns: max-content; } } /* każda lista = jedna pionowa kolumna linków */
/* Podpis zdjęcia i autor cytatu we wpisie: min. 16 px */
.rt__fig figcaption, .rt__cytat footer { font-size: 1.6rem; }
/* Stopka 390: górny odstęp jak reszta rytmu (logo i tak ma pole 48 px) */
@media (max-width: 767px) {
  .ftr__in { padding-top: var(--space-40); }
  .ftr__prawa .ftr__lists { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-20); }
}
/* Logotypy na tablecie: 3 w rzędzie (6 atrap po 120 px nie mieściło się w 768 px i zachodziło na margines) */
@media (min-width: 768px) and (max-width: 1199px) { .logos--rzad .logos__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Stopka: linki z polem dotyku 48 px (zamiast ściśniętych wierszy 24 px) i równy rytm danych kontaktowych */
.ftr__lists a { display: inline-flex; align-items: center; min-height: 48px; }
.ftr__lists ul { row-gap: 0; align-content: start; } /* wiersze nie rozciągają się do wysokości sąsiedniej listy */
.ftr__lewa .ftr__info { gap: 1.2rem; }
.ftr__contact { gap: 0; }
/* Kafle na tablecie (768–991 px): jedna kolumna — w trzech wąskich kartach opis łamał się co 1–2 słowa */
@media (min-width: 768px) and (max-width: 991px) { .cards--kolumny .cards__grid { grid-template-columns: minmax(0, 1fr); } }
/* Menu mobilne zamknięte = panel poza układem (przycisk z panelu wystawał 80 px poza prawą krawędź ekranu) */
.hdr__mob:not([open]) > .hdr__panel { display: none; }
/* Ikona „hamburger”: trzy kreski jedna pod drugą bez flexa (bramka wyrównania kolumn brała je za kolumny) */
.hdr__mob summary .hdr__ham { display: block; }
.hdr__mob summary .hdr__ham span + span { margin-top: 3px; }
/* Zgoda w formularzu: cały wiersz z etykietą jest polem dotyku min. 48 px (kliknięcie w tekst zaznacza pole) */
.form__consent { min-height: 48px; align-items: center; cursor: pointer; }
/* Pole zgody: widoczny kwadrat 24 px, a pole dotyku samego pola 44 px (kwadrat przy lewej krawędzi, pole dotyku sięga w prawo pod etykietę; ujemny margines — układ bez zmian).
   Rysunek maską: obrys w kolorze tekstu zgody; zaznaczone = kwadrat w kolorze marki z „ptaszkiem” wyciętym do tła sekcji. */
.form__consent input[type=checkbox] {
  -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin: -10px -20px -10px 0; flex-shrink: 0; cursor: pointer;
  border: 0; border-radius: 0; padding: 0; background: currentColor; color: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM2 12v20h20V12z'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM2 12v20h20V12z'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
}
.form__consent input[type=checkbox]:checked {
  background: var(--white);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM5.5 22.5l1.8-1.8 3.2 3.2 6.2-6.2 1.8 1.8-8 8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM5.5 22.5l1.8-1.8 3.2 3.2 6.2-6.2 1.8 1.8-8 8z'/%3E%3C/svg%3E");
}
.mot > .form .form__consent input[type=checkbox]:checked, .form--prosty .form__consent input[type=checkbox]:checked { background: var(--primary); }
.form__consent input[type=checkbox]:focus-visible { outline: none; background: var(--primary); }
.form__consent:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 4px; }
@media (forced-colors: active) { .form__consent input[type=checkbox] { appearance: auto; -webkit-mask: none; mask: none; width: 24px; height: 24px; margin: 0; background: none; } }
/* Licznik: tytuł i opis obok siebie wyrównane do linii bazowej pierwszego wiersza (Practical UI: różne rozmiary w jednej linii → baseline) */
.counter__head { align-items: baseline; }

/* ——— 2C.5: drobne z audytu 2C.4b ——— */
/* Hero na tablecie (768–991 px): jedna kolumna — w wąskiej kolumnie obok zdjęcia wielki tytuł łamał się na 5 wierszy */
@media (min-width: 768px) and (max-width: 991px) {
  .hero--split .hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .hero--split .hero__img img { aspect-ratio: 3 / 2; }
}
/* Wpisy na tablecie: jedna kolumna, karta poziomo (zdjęcie z lewej, tekst z prawej) — bez sieroty 2 + 1 w siatce */
@media (min-width: 768px) and (max-width: 991px) {
  .posts--karty .posts__grid { grid-template-columns: minmax(0, 1fr); }
  .posts--karty .post2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-20); row-gap: 1.2rem; align-content: start; }
  .posts--karty .post2 > * { grid-column: 2; }
  .posts--karty .post2 > .post2__img { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .posts--karty .post2 > .post2__link { justify-self: start; }
}
/* Zgoda w formularzu: 16 px (było 12–14 px) */
.form__consent, .mot > .form .form__consent { font-size: 1.6rem; }

/* ——— Nowe klocki (2C.5): Cennik (Pricing 10), Opinie (Testimonial 6), FAQ (FAQ 2) — inspiracja układu, kod i wygląd własne, tylko tokeny ———
   Liczba kolumn bez sierot: komputer — tyle kart, ile pakietów (opinie: 2 albo 3 w rzędzie); tablet — 2 w rzędzie przy parzystej liczbie, inaczej 1; telefon — 1. */
.cennik__nag, .opinie__nag { margin-bottom: var(--space-40); }
.cennik__lista, .opinie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-20); grid-template-columns: repeat(var(--kol, 3), minmax(0, 1fr)); align-items: stretch; }
.cennik--n2 .cennik__lista { --kol: 2; max-width: 96rem; margin-inline: auto; }
.cennik--n4 .cennik__lista { --kol: 4; }
.cennik__pakiet { display: flex; flex-direction: column; gap: var(--space-20); }
.cennik__pakiet--polecany { border: 2px solid var(--primary); }
.cennik__gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }
.cennik__nazwa { margin: 0; letter-spacing: normal; }
.cennik__cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; font-variant-numeric: tabular-nums; }
.cennik__kwota { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-lg); line-height: 1.1; letter-spacing: -0.24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cennik__od, .cennik__okres { font-size: var(--fs-opis-karty); line-height: 1.4; color: var(--grey); }
.cennik__opis { font-size: var(--fs-opis-karty); line-height: 1.5; color: var(--grey); }
.cennik__pakiet .lista { padding-top: var(--space-20); border-top: 1px solid var(--line); }
.cennik__pakiet .lista li { font-size: var(--fs-opis-karty); }
.cennik__btn { margin-top: auto; width: 100%; white-space: normal; }
.cennik__notka { margin-top: var(--space-40); font-size: var(--fs-opis-karty); line-height: 1.5; color: var(--grey); text-align: center; }

.opinie--n1 .opinie__lista { --kol: 1; max-width: 80rem; }
.opinie--n2 .opinie__lista, .opinie--n4 .opinie__lista { --kol: 2; }
.opinia { margin: 0; display: flex; flex-direction: column; gap: var(--space-20); }
.opinia__ocena { display: flex; gap: .4rem; color: var(--primary); }
.opinia__gw { width: 2rem; height: 2rem; }
.opinia__cytat { margin: 0; }
.karta.opinia .opinia__cytat p { margin: 0; font-size: var(--fs-opis); line-height: 1.5; color: var(--text); }
.opinia__podpis { margin-top: auto; display: flex; align-items: center; gap: var(--space-20); }
.karta .opinia__foto { flex: 0 0 auto; width: 4.8rem; height: 4.8rem; object-fit: cover; border-radius: 50%; }
.opinia__inicjaly { flex: 0 0 auto; width: 4.8rem; height: 4.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--bg); font-weight: 700; font-size: var(--fs-opis-karty); line-height: 1; }
.opinia__dane { display: grid; gap: .2rem; }
.opinia__autor { font-weight: 700; font-size: var(--fs-opis-karty); line-height: 1.4; }
.opinia__rola { font-size: var(--fs-opis-karty); line-height: 1.4; color: var(--grey); }
.opinie--duza .opinie__lista { --kol: 1; max-width: 96rem; margin-inline: auto; }
.opinie--duza .opinia { align-items: center; text-align: center; padding: var(--space-40); }
.opinie--duza .opinia__ocena { justify-content: center; }
.opinie--duza .karta.opinia .opinia__cytat p { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-md); line-height: 1.3; }
.opinie--duza .opinia__podpis { margin-top: 0; text-align: left; }
@media (min-width: 768px) and (max-width: 991px) {
  .cennik__lista, .opinie__lista { --kol: 1; }
  .cennik--n2 .cennik__lista, .cennik--n4 .cennik__lista, .opinie--n2 .opinie__lista, .opinie--n4 .opinie__lista, .opinie--n6 .opinie__lista { --kol: 2; }
  .cennik--n3 .cennik__lista, .opinie--n3 .opinie__lista { max-width: 64rem; margin-inline: auto; }
}
@media (max-width: 767px) { .cennik__lista, .opinie__lista, .cennik--n2 .cennik__lista, .cennik--n4 .cennik__lista, .opinie--n2 .opinie__lista, .opinie--n4 .opinie__lista { --kol: 1; } }

.faq__in { display: grid; gap: var(--space-40); }
.faq--dwie .faq__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-60); align-items: start; }
.faq--jedna .faq__in { max-width: calc(88rem + 2 * var(--gutter)); }
.faq--jedna .faq__nag.snag--srodek { margin-inline: auto; }
.faq__lista { border-top: 1px solid var(--line); }
.faq__it { border-bottom: 1px solid var(--line); }
.faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); min-height: 48px; padding-block: var(--space-20);
  cursor: pointer; font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-opis); line-height: 1.35; text-underline-offset: .2em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.faq__q:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.faq__ico { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; color: var(--primary); }
.faq__it[open] .faq__pion { display: none; }
.faq__a { padding-bottom: var(--space-20); padding-right: var(--space-40); font-size: var(--fs-opis); line-height: 1.5; color: var(--grey); display: grid; gap: var(--space-20); max-width: 70ch; }
.faq__a a { color: var(--primary); text-decoration: underline; }
.faq__a a:hover { text-decoration-thickness: 2px; }
.faq__btns { margin-top: var(--space-40); }
@media (max-width: 991px) { .faq--dwie .faq__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); } }

/* ——— 2C runda 1: fundament (audyt niezależny 08.10) — tokeny odstępów, skali pisma i siatki; wszystkie klocki biorą je stąd ———
   --section-pad   odstęp góra = dół każdej sekcji (telefon 48–64, tablet ~64, komputer 92–120; mnoży go „Gęstość” w Stylu)
   --gap           jeden odstęp siatki 12 kolumn (20 / 24 / 32)
   --nag-odstep    nagłówek sekcji → treść (24 / 32)
   --fs-h1 … --fs-karta  jedno H1, jedno H2, H3, wstęp (lead) 18–20, tekst 16–17, tytuł karty 18–22 półgruby */
:root {
  --section-pad: clamp(4.8rem, calc(5.6rem * var(--g, 1)), 6.4rem);
  --gap: 2rem;
  --nag-odstep: 2.4rem;
  --karta-pad: clamp(2.4rem, 2.03rem + 0.952vw, 3.2rem);
  --fs-h1: calc(clamp(3.6rem, 1.669rem + 4.952vw, 8.8rem) * var(--skala-h, 1));
  --fs-h2: calc(clamp(2.8rem, 2.057rem + 1.905vw, 4.8rem) * var(--skala-h, 1));
  --fs-h3: calc(clamp(2.2rem, 1.8rem + 0.95vw, 3.2rem) * var(--skala-h, 1));
  --fs-lead: clamp(1.8rem, 1.7rem + 0.28vw, 2rem);
  --fs-body: clamp(1.6rem, 1.55rem + 0.14vw, 1.7rem);
  --fs-karta: clamp(1.8rem, 1.6rem + 0.55vw, 2.2rem);
}
@media (min-width: 768px) { :root { --section-pad: clamp(5.6rem, calc(6.4rem * var(--g, 1)), 7.2rem); --gap: 2.4rem; } }
@media (min-width: 1200px) { :root { --section-pad: clamp(9.2rem, calc(11.6rem * var(--g, 1)), 12rem); --gap: 3.2rem; --nag-odstep: 3.2rem; } }

/* Litery (poz. 10): Chromium na Linuksie rysował glify z zaokrąglonymi pozycjami („po mieszcz enie”) — precyzyjne rysowanie, kerning z kroju;
   tekst małymi literami bez rozstrzelenia (zostaje tylko w nadtytule wersalikami) */
html { text-rendering: geometricPrecision; font-kerning: normal; }
body :not(.snag__nad) { letter-spacing: normal; }
p { text-wrap: pretty; }

/* Rytm pionowy (poz. 6): jeden odstęp sekcji; dwie sąsiednie sekcje na tym samym tle nie sumują odstępu */
.mot > .blk { padding-block: var(--section-pad); }
.mot > .band { padding-block: 0; }
.band .band__in { padding-block: var(--section-pad); }
:is(.mot--jasna:has(> .blk) + .mot--jasna, .mot--karta:has(> .blk) + .mot--karta, .mot--ciemna:has(> .blk) + .mot--ciemna, .mot--akcent:has(> .blk) + .mot--akcent) > .blk { padding-top: 0; }
:is(.mot--jasna:has(> .blk) + .mot--jasna, .mot--karta:has(> .blk) + .mot--karta, .mot--ciemna:has(> .blk) + .mot--ciemna, .mot--akcent:has(> .blk) + .mot--akcent) > .band .band__in { padding-top: 0; }
.ftr .ftr__in { padding-block: var(--section-pad); }
/* Nagłówek sekcji → treść (poz. 13) */
.snag { gap: 1.6rem; }
:is(.cards__nag, .slider__nag, .gal__nag, .image__nag, .cennik__nag, .opinie__nag) { margin-bottom: var(--nag-odstep); }
.media__txt { margin-top: var(--nag-odstep); }
.posts__karty { row-gap: var(--nag-odstep); }
.faq__in, .stats__wrap, .intro__in--lewo, .intro__in--srodek, .logos--rzad .wrap { gap: var(--nag-odstep); }
.counter .counter__items { margin-top: var(--nag-odstep); }
.ti .wrap { gap: var(--section-pad); }

/* Skala pisma (poz. 11): jedno H1 (strona, wpis, realizacja), jedno H2 (sekcje, formularz, pasy CTA), H3, wstęp, tekst, tytuł karty */
:is(h1.hero__title, h1.phero__title, h1.chero__title, h1.form__title, h1.snag__tytul, .ctac__txt > h1) { font-size: var(--fs-h1); line-height: 1.1; }
:is(h2.hero__title, h2.phero__title, h2.chero__title, h2.form__title, h2.snag__tytul, .ctac__txt > h2, h2.band__title, h2.counter__title) { font-size: var(--fs-h2); line-height: 1.2; }
.band h2.band__title, .counter h2.counter__title { font-size: var(--fs-h2); }
:is(.ti__txt h3, h3.snag__tytul) { font-size: var(--fs-h3); line-height: 1.25; }
:is(.cards__tytul, .post2__tytul, .cennik__nazwa, .person__name) { font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
:is(.hero__lead, .snag__opis, .counter__opis, .band__opis, .form__opis, .chero__opis, .rt__wstep, .ctac__body) { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); }
.intro .snag__opis, .karta.opinia .opinia__cytat p { font-size: var(--fs-lead); color: var(--text); }
:is(.cards__opis, .post2__opis, .karta.post2 .post2__opis, .cennik__opis, .faq__a, .person__body, .ti__body, .mot .ti__body) { font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.stats__val, .counter .counter__val { font-size: var(--fs-h1); line-height: 1.1; }
.stats__lbl, .counter .counter__item .counter__lbl { font-size: var(--fs-body); line-height: 1.5; }
.hero__lead { max-width: 60ch; }

/* Siatka 12 kolumn (poz. 7): jeden odstęp --gap, prawa kolumna zawsze od 7. kolumny; telefon — jedna kolumna */
@media (min-width: 768px) {
  .ti__row, .counter__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ti__row > * { grid-row: 1; }
  .ti__row--right .ti__txt { grid-column: 1 / 6; }
  .ti__row--right .ti__img { grid-column: 7 / 13; }
  .ti__row--left .ti__img { grid-column: 1 / 7; }
  .ti__row--left .ti__txt { grid-column: 7 / 13; }
  .counter__head > :first-child { grid-column: 1 / 7; }
  .counter__head > :nth-child(2) { grid-column: 7 / 13; }
}
@media (min-width: 992px) {
  .hero--split .hero__in, .form__box, .ftr__glowna, .faq--dwie .faq__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .hero--split .hero__txt { grid-column: 1 / 7; }
  .hero--split .hero__img { grid-column: 7 / 13; }
  .form__box > :first-child, .ftr__glowna > :first-child, .faq--dwie .faq__in > :first-child { grid-column: 1 / 6; }
  .form__box > :nth-child(2), .ftr__glowna > :nth-child(2), .faq--dwie .faq__in > :nth-child(2) { grid-column: 7 / 13; }
}
@media (max-width: 991px) { .hero--split .hero__in, .form__box, .ftr__glowna, .faq--dwie .faq__in { row-gap: 4rem; } }
@media (max-width: 767px) { .ti__row { row-gap: 3.2rem; } }
.cards--kolumny .cards__grid, .posts--karty .posts__grid, .cennik__lista, .opinie__lista, .counter .counter__items { gap: var(--gap); }
@media (min-width: 768px) { .gal__grid { gap: var(--gap); } }

/* Liczby (poz. 3): tytuł nad liczbami, 3 kolumny w siatce, kreski tylko między kolumnami (w połowie odstępu) */
.stats--tytul .stats__wrap { grid-template-columns: minmax(0, 1fr); }
.stats .stats__in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.stats .stats__item { position: relative; border: 0; padding: 0; }
.stats__item + .stats__item::before { content: ""; position: absolute; left: calc(var(--gap) / -2); top: 0; bottom: 0; border-left: 1px solid var(--line); }
@media (max-width: 767px) {
  .stats .stats__in { grid-template-columns: minmax(0, 1fr); row-gap: 4rem; }
  .stats__item + .stats__item::before { left: 0; right: 0; top: -2rem; bottom: auto; border-left: 0; border-top: 1px solid var(--line); }
}

/* Przyciski (poz. 14): wysokość 48, jeden odstęp; poniżej 600 px na całą szerokość jeden pod drugim, od 600 px w rzędzie */
.btns { gap: 1.2rem 1.6rem; }
.btn:not(.btn--lg) { min-height: 48px; padding: 0 2rem; font-size: 1.6rem; line-height: 1.4; }
.btn.btn--link { padding-inline: 0; }
@media (max-width: 599px) {
  .btns { flex-direction: column; align-items: stretch; }
  .btns .btn:not(.btn--link) { width: 100%; }
  .btns .btn--link { align-self: flex-start; }
  .form__f .btn { align-self: stretch; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .band .band__btns { flex-direction: row; align-items: center; }
  .band .band__btns .btn { width: auto; }
}

/* Pas „Akcent” (poz. 15): jasny odcień marki z palety zamiast drugiego koloru — jeden akcent na wygląd, tekst i przyciski jak w motywie jasnym */
.mot--akcent { --primary: inherit; --text: inherit; --grey: inherit; --bg: color-mix(in srgb, var(--primary) 10%, var(--white)); --line: color-mix(in srgb, var(--primary) 25%, var(--white)); }
.mot--akcent > * { background: var(--bg); color: var(--text); }

/* Karta (poz. 17): jeden komponent — ten sam odstęp wewnętrzny, obraz wpisu do krawędzi karty, tytuł wpisu na 2 linie */
.karta { padding: var(--karta-pad); gap: 1.6rem; }
.karta > :last-child { margin-bottom: 0; }
.post2 { overflow: hidden; }
.post2 > .post2__img { width: calc(100% + 2 * var(--karta-pad)); max-width: none; margin: calc(-1 * var(--karta-pad)) calc(-1 * var(--karta-pad)) 0; }
@media (min-width: 768px) and (max-width: 991px) {
  .posts--karty .post2 > .post2__img { width: calc(100% + var(--karta-pad)); height: calc(100% + 2 * var(--karta-pad)); min-height: 20rem; aspect-ratio: auto; align-self: stretch; margin: calc(-1 * var(--karta-pad)) 0 calc(-1 * var(--karta-pad)) calc(-1 * var(--karta-pad)); }
}
@media (min-width: 992px) { .post2__tytul { min-height: 2.6em; } }
.person { border: 1px solid var(--line); background: var(--white); color: var(--text); padding: var(--karta-pad); gap: 0; }
.person__role { font-family: var(--font-body); font-weight: 400; font-size: 1.6rem; line-height: 1.4; color: var(--grey); margin: .4rem 0 1.2rem; }

/* Zespół (poz. 16, 22): tor do krawędzi ekranu, miejsce na cień, 3 / 2 / 1 karta; pierwsza kropka na krawędzi kontenera */
.slider .slider__track { margin-inline: calc(-1 * var(--gutter)); padding: 1.6rem var(--gutter); scroll-padding-inline: var(--gutter); gap: var(--gap); grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
@media (min-width: 768px) and (max-width: 1199px) { .slider .slider__track { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
@media (max-width: 767px) { .slider .slider__track { grid-auto-columns: 85%; } }
.slider__nav { margin-top: .8rem; }

/* Logotypy (poz. 18): nagłówek jak nadtytuł do lewej, płaskie szare znaki słowne bez ramki na pełną szerokość kontenera */
.logos--rzad .wrap { justify-items: stretch; }
.logos--rzad .logos__title { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 1.4rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--primary); }
.logos--rzad .logos__row { gap: 1.6rem var(--gap); justify-items: start; }
@media (min-width: 1200px) { .logos--rzad .logos__row { display: flex; flex-wrap: wrap; justify-content: space-between; } }
.logos .logo-atrapa { border: 0; padding: 0; min-width: 0; min-height: 3.2rem; font-size: 2.2rem; color: var(--grey); }
@media (max-width: 767px) { .logos .logo-atrapa { font-size: 1.8rem; white-space: normal; } } /* dwie kolumny na telefonie: nazwa łamie się zamiast wychodzić poza kolumnę */

/* Kafle (poz. 19, 28): ikona 32 px; tablet — karta pozioma (ikona z lewej) */
.cards__ikona { width: 3.2rem; height: 3.2rem; }
@media (min-width: 768px) and (max-width: 991px) {
  .cards--kolumny .cards__karta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--gap); align-content: start; }
  .cards--kolumny .cards__karta > * { grid-column: 2; }
  .cards--kolumny .cards__karta > .cards__ikona { grid-column: 1; grid-row: 1 / span 3; }
}

/* Galeria (poz. 20): telefon — 2 kolumny kwadratów; podpisy z opisu zdjęcia (opcja) */
.gal__fig { margin: 0; display: grid; gap: .8rem; align-content: start; }
.gal__cap { font-size: 1.6rem; line-height: 1.4; color: var(--grey); }
@media (max-width: 767px) {
  .gal--grid .gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .gal--grid .gal__it { aspect-ratio: 1 / 1; }
  .gal__cap { font-size: 1.4rem; }
}

/* Formularz (poz. 21): zgoda w kolorze tekstu, zaokrąglone pole zgody, gwiazdka przy wymaganych, link do polityki */
.mot > .form .form__consent { color: var(--text); }
.form__consent input[type=checkbox] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M5 10h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5zM6 12h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V16a4 4 0 0 1 4-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M5 10h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5zM6 12h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V16a4 4 0 0 1 4-4z'/%3E%3C/svg%3E");
}
.form__consent input[type=checkbox]:checked {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M5 10h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5zM5.5 22.5l1.8-1.8 3.2 3.2 6.2-6.2 1.8 1.8-8 8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M5 10h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5zM5.5 22.5l1.8-1.8 3.2 3.2 6.2-6.2 1.8 1.8-8 8z'/%3E%3C/svg%3E");
}
.form__pole:has(:required) .form__lbl::after, .form__consent:has(:required) > span::after { content: " *"; content: " *" / ""; }
.form__polityka { display: inline-flex; align-items: center; min-height: 48px; margin-left: 3.6rem; font-size: 1.6rem; text-decoration: underline; text-underline-offset: .2em; }
.form__polityka:hover { text-decoration-thickness: 2px; }

/* Treść wpisu (poz. 12): linia do 65 znaków, śródtytuł bliżej swojego akapitu, lista z odstępem */
.rt { max-width: 65ch; font-size: clamp(1.7rem, 1.65rem + 0.14vw, 1.8rem); line-height: 1.6; }
.rt h2 { font-size: var(--fs-h3); line-height: 1.25; margin-top: 4rem; }
.rt h3 { font-size: 2.2rem; margin-top: 3.2rem; }
.rt :is(h2, h3, h4) + * { margin-top: 1.2rem; }
.rt > :is(ul, ol) { margin-top: 1.6rem; }
.rt li + li { margin-top: .8rem; }

/* Nagłówek strony (poz. 27): logo | menu na środku | przycisk; logo-atrapa bez ramki */
@media (min-width: 992px) {
  .hdr__in { grid-template-columns: 1fr auto 1fr; }
  .hdr__btns { justify-self: end; }
}
.hdr__logo .logo-atrapa, .ftr__logo .logo-atrapa { border: 0; padding: 0; font-size: 2.4rem; }

/* Stopka (poz. 23): nagłówki kolumn, linia nad prawami, prawa 14 px bez rozstrzelenia, ikony do krawędzi */
.ftr__kol { display: grid; gap: .4rem; align-content: start; }
.ftr .ftr__kol-tytul { font-size: 1.4rem; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.ftr__bottom { border-top: 1px solid var(--line); padding-top: var(--nag-odstep); }
.ftr__legal { font-family: var(--font-body); font-weight: 400; font-size: 1.4rem; gap: 1.2rem 2.4rem; }
.ftr__legal a { display: inline-flex; align-items: center; min-height: 48px; }
.ftr__social { margin-right: -9px; }
@media (max-width: 991px) { .ftr__social { margin: 0 0 0 -9px; } }

/* Wideo (poz. 26): okrągły przycisk odtwarzania w kolorze marki, trójkąt w kolorze tła */
.yt__play { width: 7.2rem; height: 7.2rem; border-radius: 50%; background: var(--primary); transition: filter .2s; }
.yt__play::after { left: 50%; top: 50%; transform: translate(-35%, -50%); border-width: 1.2rem 0 1.2rem 2rem; border-color: transparent transparent transparent var(--bg); }
.mot--ciemna .yt__play::after { border-left-color: var(--naPrzyciskuCiemnych, var(--naCiemnym)); }
.yt:hover .yt__play { background: var(--primary); filter: brightness(1.12); }

/* Wyrównanie (poz. 24, 30): realizacja i obraz do lewej; środek tylko w pasie CTA (akapit max ~560 px) */
.chero__txt { justify-items: start; text-align: left; margin-inline: 0; max-width: none; }
.chero__opis { max-width: var(--miara, 60ch); } /* 2C.8: ta sama miara co inne leady */
.chero__tags { justify-content: flex-start; }
.image__fig img { aspect-ratio: 16 / 9; object-fit: cover; max-height: 64rem; }
.image__cap { text-align: left; }
.ctac__body { max-width: 56rem; }
.cennik__notka { text-align: left; }

/* Tagi i metadane (poz. 25): jedna neutralna etykieta 14 px; „autor · data” w rzędzie; podkreślony tylko tekst linku */
.tag { padding: .4rem 1.2rem; font-family: var(--font-body); font-weight: 500; font-size: 1.4rem; line-height: 1.4; color: var(--text); background: var(--white); border-color: var(--line); border-radius: var(--btn-r, 999px); }
.phero__author > div { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.phero__name, .phero__date { font-size: 1.5rem; line-height: 1.4; }
.phero__name + .phero__date::before { content: "·"; margin-right: .8rem; }
.phero__powrot { text-decoration: none; }
.phero__powrot .phero__powrot-txt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.phero__powrot:hover .phero__powrot-txt { text-decoration-thickness: 2px; }

/* Ciemny pas CTA na telefonie (poz. 33): bez łuków w tle; wymuszone złamania linii w nagłówkach tylko od 768 px (poz. 9) */
@media (max-width: 767px) {
  .band, .mot > .band:not(.band--bez) { background-image: none; }
  :is(h1, h2, h3) br { display: none; }
}
/* Ciemne tło: przycisk drugorzędny (obrys) i nadtytuł w kolorze tekstu — marka bywa za ciemna na ciemnym (AA) */
.mot--ciemna .btn--outline { color: var(--text); border-color: var(--text); }
.mot--ciemna .snag__nad { color: var(--text); }

/* ——— 2C runda 2: fundament (drugi audyt niezależny 08.10) — te same tokeny co w rundzie 1, domknięte miejsca, które ich nie brały ———
   Zasady: odstęp nagłówek→treść = --nag-odstep (24/32); tytuł→opis = 16; opis→przyciski = 32; bez odstępów liczonych z vw (tylko skala 4/8);
   granica dwóch sekcji na tym samym tle ≥ 80 px (bez sumowania paddingu); jeden szablon pasa CTA; jedna karta (ramka, bez cienia). */
:root { --karta-pad: 2.4rem; --tytul-opis: 1.6rem; --opis-przyciski: 3.2rem;
  /* H1: na telefonie min. 38 px, na komputerze maks. 94 px — skala nagłówków ze Stylu działa tylko między tymi granicami */
  --fs-h1: clamp(3.8rem, calc((1.669rem + 4.952vw) * var(--skala-h, 1)), 9.4rem); }
@media (min-width: 768px) { :root { --karta-pad: 2.8rem; } }
@media (min-width: 1200px) { :root { --karta-pad: 3.2rem; } }

/* Rytm: sąsiednie sekcje na tym samym tle — granica co najmniej 80 px (na komputerze sam --section-pad, który i tak jest większy) */
:is(.mot--jasna:has(> .blk) + .mot--jasna, .mot--karta:has(> .blk) + .mot--karta, .mot--ciemna:has(> .blk) + .mot--ciemna, .mot--akcent:has(> .blk) + .mot--akcent) > .blk { padding-top: max(0rem, calc(8rem - var(--section-pad))); }
:is(.mot--jasna:has(> .blk) + .mot--jasna, .mot--karta:has(> .blk) + .mot--karta, .mot--ciemna:has(> .blk) + .mot--ciemna, .mot--akcent:has(> .blk) + .mot--akcent) > .band .band__in { padding-top: max(0rem, calc(8rem - var(--section-pad))); }
.ti .wrap { gap: max(6.4rem, var(--section-pad)); }
@media (max-width: 767px) { .ti__row { row-gap: 2.4rem; } }

/* Tytuł → opis jednym tokenem we wszystkich blokach nagłówka (było 7–22 px z clamp) */
.band__txt, .chero__txt, .form__info, .ctac__txt { gap: var(--tytul-opis); }
.counter__head { row-gap: var(--tytul-opis); }
.faq__q { padding-block: 1.2rem; gap: 1.6rem; }
.faq__a { padding-bottom: 1.6rem; gap: 1.6rem; }
.posts__karty { column-gap: var(--gap); }
.cennik__nag, .opinie__nag { margin-bottom: var(--nag-odstep); }
.cennik__pakiet, .opinia { gap: 1.6rem; }
.cennik__pakiet .lista { padding-top: 1.6rem; }
.opinia__podpis { gap: 1.2rem; }
.cennik__notka { margin-top: var(--nag-odstep); }
.ftr__lewa { gap: 2.4rem; }
.ftr__lewa .btns { margin-top: 0; }

/* Hero: nadtytuł→H1 16, H1→opis 24, opis→przyciski 32 (odstępy rosną razem z wagą, nie maleją) */
.hero .hero__title { margin-top: calc(1.6rem * var(--g, 1)); margin-bottom: 0; } /* 16 px przy gęstości 1; gęstość Stylu nadal działa */
.hero .hero__txt > .hero__title:first-child { margin-top: 0; }
.hero .hero__lead { margin-top: 2.4rem; }
.hero .hero__btns { margin-top: var(--opis-przyciski); }
.hero .tag { margin-bottom: 0; }
.hero__nad { display: block; }

/* Jeden szablon pasa CTA (ciemny „pas” i jasny „środek”): do lewej, tytuł, opis, pod nimi przyciski; różni je tylko tło */
.band .band__in { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--opis-przyciski); }
.band__txt { flex: none; max-width: 76rem; }
.band__opis, .ctac__body { max-width: 60ch; }
@media (min-width: 600px) { .band .band__btns { flex-direction: row; flex-wrap: wrap; align-items: center; } .band .band__btns .btn { width: auto; } }
.ctac:not(.ctac--float) .ctac__txt { max-width: 76rem; margin: 0; text-align: left; align-items: flex-start; }
.ctac:not(.ctac--float) .btns { justify-content: flex-start; margin-top: calc(var(--opis-przyciski) - var(--tytul-opis)); }
/* Łuki ciemnego pasa leżą w prawym dolnym rogu — przy węższym ekranie wchodziły pod przyciski, więc do 991 px pas jest gładki */
@media (max-width: 991px) { .band, .mot > .band:not(.band--bez) { background-image: none; } }

/* Przyciski poniżej 600 px: każda grupa na całą szerokość (także w pasie „środek”, stopce i kolumnach z justify-items: start) */
@media (max-width: 599px) {
  .btns { width: 100%; align-self: stretch; justify-self: stretch; }
  .ctac__txt { align-items: stretch; }
}

/* Treść wpisu: tekst z edytora siedzi we własnym <div> — reguły bez „>” (runda 1 nie trafiała); lista 16 pod akapitem, punkty co 8 */
.rt :is(p, li) { font-size: inherit; line-height: 1.6; }
.rt :is(ul, ol) { margin-top: 1.6rem; }
.rt li + li { margin-top: .8rem; }
.rt :is(h2, h3) { margin-top: 4rem; }
.rt p, .rt li { text-wrap: pretty; }
.rt .rt__cytat p { font-family: var(--font-body); font-weight: 500; font-size: 2rem; line-height: 1.4; }
.rt .rt__cytat footer { font-size: 1.5rem; line-height: 1.4; color: var(--grey); }

/* Stopka: dolny pasek w jednym rzędzie, prawa i link na tej samej linii (oba 14 px, pole 48); Menu i miasta w jednej siatce 2 kolumn */
.ftr__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2.4rem; }
.ftr__legal > span { display: inline-flex; align-items: center; min-height: 48px; }
@media (min-width: 992px) { .ftr__bottom { align-items: center; } } /* telefon/tablet: legal i ikony od lewej krawędzi */
.ftr__prawa .ftr__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem var(--gap); }
.ftr__prawa .ftr__lists ul { grid-template-columns: minmax(0, 1fr); }
.ftr__kol { gap: 0; }
@media (min-width: 768px) {
  .ftr__glowna { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ftr__glowna > :first-child { grid-column: 1 / 6; }
  .ftr__glowna > :nth-child(2) { grid-column: 7 / 13; }
}

/* Cennik i Opinie na tablecie: karty na pełną szerokość kontenera jak wszystkie inne listy kart */
.cennik__lista, .opinie--siatka .opinie__lista, .cennik--n3 .cennik__lista, .opinie--n3 .opinie__lista { max-width: none; margin-inline: 0; } /* tablet: pełna szerokość siatki, bez wąskiej kolumny 640 */
/* Cennik: karta polecana — obramowanie 2 px bez przesunięcia treści (1 px ramki + 1 px cienia wewnątrz); wiersz tytułu stałej wysokości */
.cennik__pakiet--polecany { border-width: 1px; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cennik__gora { min-height: 3.2rem; }
.cennik__opis, .cards__opis, .opinia__rola, .person__body, .ti__body { text-wrap: pretty; }
/* Opinie: ta sama ramka co inne karty (wariant „wyróżniony” różni się tylko tłem); podpisy na jednej wysokości (rola zawsze 2 linie) */
.karta.opinia { border-color: var(--line); }
.opinia__podpis { align-items: flex-start; }
.opinie--siatka .opinia__rola { min-height: 2.8em; }

/* Jedna karta: zespół bez cienia (ramka jak usługi i blog), zdjęcie do krawędzi karty jak we wpisie */
.slider .person { box-shadow: none; overflow: hidden; border-radius: var(--radius); }
.slider .person__img { margin: calc(-1 * var(--karta-pad)) calc(-1 * var(--karta-pad)) 2.4rem; border-radius: 0; }
/* Link w karcie: pole dotyku 48 px zostaje, ale nie dokłada pustki pod tekstem (wizualnie góra ≈ dół karty) */
.karta > .btns:last-child:has(> .btn--link:only-child), .karta > .post2__link:last-child { margin-top: -.4rem; margin-bottom: -1.2rem; }

/* Zespół: bez zajawki następnej karty na tablecie i komputerze (był pasek 1–28 px), na telefonie zajawka ~45 px; kropek tyle, ile pozycji */
.slider .slider__track { margin-inline: 0; padding: 0; scroll-padding-inline: 0; }
@media (max-width: 767px) { .slider .slider__track { grid-auto-columns: 80%; } }
.slider__nav { margin-top: var(--nag-odstep); }
.slider__nav .slider__dot { justify-content: flex-start; } /* kropka 12 px z lewej strony pola 48 — pierwsza na krawędzi kontenera, pole dotyku bez zmian */
.slider__nav .slider__dot[hidden] { display: none; }

/* Liczby: jeden styl w obu klockach (Licznik i Pasek liczb) — liczba w kolorze marki, kreska między kolumnami */
.counter .counter__val { color: var(--primary); }
.counter .counter__item { position: relative; }
.counter__item + .counter__item::before { content: ""; position: absolute; left: calc(var(--gap) / -2); top: 0; bottom: 0; border-left: 1px solid var(--line); }
@media (max-width: 767px) {
  .counter .counter__items { row-gap: 4rem; }
  .counter__item + .counter__item::before { left: 0; right: 0; top: -2rem; bottom: auto; border-left: 0; border-top: 1px solid var(--line); }
}
.counter__nad { margin-bottom: var(--tytul-opis); }

/* Wideo: nagłówek nad filmem (jak w każdej sekcji); przycisk odtwarzania ciemny z jasnym trójkątem — kontrast ≥ 3:1 na jasnym kadrze */
.media .media__txt { margin: 0 0 var(--nag-odstep); }
.mot--ciemna .yt__play { background: var(--bg); box-shadow: 0 0 0 2px var(--text); }
.mot--ciemna .yt__play::after { border-left-color: var(--text); }
.mot--ciemna .yt:hover .yt__play { background: var(--bg); filter: none; box-shadow: 0 0 0 3px var(--text); }

/* Tekst z obrazem: jedna miara tekstu w obu wierszach, nagłówek wiersza = H3 (jeden rozmiar) */
.ti__txt { max-width: 60ch; }

/* Wpisy na tablecie (karta pozioma): odstęp obraz→tekst = padding karty, karty równej wysokości */
@media (min-width: 768px) and (max-width: 991px) {
  .posts--karty .post2 { column-gap: var(--karta-pad); }
  .posts--karty .posts__grid { grid-auto-rows: 1fr; }
}

/* Formularz: link do polityki w zdaniu zgody; pole zgody z rogami jak pola (przy „Brak” zaokrągleń — kwadrat); telefon i e-mail na telefonie w osobnych wierszach */
.form__consent .form__polityka { display: inline; min-height: 0; margin: 0; font-size: inherit; }
@container style(--zaokr: 0) {
  .form__consent input[type=checkbox] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM2 12v20h20V12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM2 12v20h20V12z'/%3E%3C/svg%3E");
  }
  .form__consent input[type=checkbox]:checked {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM5.5 22.5l1.8-1.8 3.2 3.2 6.2-6.2 1.8 1.8-8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM5.5 22.5l1.8-1.8 3.2 3.2 6.2-6.2 1.8 1.8-8 8z'/%3E%3C/svg%3E");
  }
}
@media (max-width: 599px) { .form__kontakt a { display: block; width: fit-content; } .form__sep { display: none; } }

/* Logotypy: każda nazwa ma własny znak słowny (krój, grubość, wersaliki) zamiast zwykłego tekstu; stała wysokość wiersza 28 px */
.logos--rzad .logo-atrapa { min-height: 2.8rem; line-height: 1; }
.logos--rzad .logos__row li:nth-child(6n+1) .logo-atrapa { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1.6rem; }
.logos--rzad .logos__row li:nth-child(6n+2) .logo-atrapa { font-family: var(--font-body); font-weight: 500; font-style: italic; font-size: 2rem; }
.logos--rzad .logos__row li:nth-child(6n+3) .logo-atrapa { font-family: var(--font-head); font-weight: 300; font-size: 2.2rem; letter-spacing: -.02em; }
.logos--rzad .logos__row li:nth-child(6n+4) .logo-atrapa { font-family: var(--font-body); font-weight: 700; font-variant: small-caps; font-size: 2rem; letter-spacing: .04em; }
.logos--rzad .logos__row li:nth-child(6n+5) .logo-atrapa { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; font-size: 1.5rem; }
.logos--rzad .logos__row li:nth-child(6n+6) .logo-atrapa { font-family: var(--font-body); font-weight: 700; font-size: 2rem; letter-spacing: -.03em; }

/* ——— 2C runda 3: fundament (trzeci audyt niezależny 08.10 + własny r2) ———
   Zasady: stały odstęp sekcji niezależnie od tła (bez „zlewania” sąsiednich sekcji na tym samym tle); treść → przycisk/link = 32;
   jedna kolumna prozy wpisu (~700 px, środek); siatka 12 kolumn z lustrzanymi wierszami; karty z linkiem zawsze na dole. */
:root { --ti-odstep: clamp(6.4rem, 5.6rem + 1.5vw, 8rem); --liczby-odstep: clamp(4.8rem, 4rem + 1.5vw, 6.4rem);
  --fs-h1: clamp(3.8rem, calc((1.669rem + 4.952vw) * var(--skala-h, 1)), 7.6rem); }

/* Rytm (poz. 9): każda sekcja ma pełny odstęp góra i dół — granica dwóch sekcji wygląda tak samo bez względu na kolor tła */
:is(.mot--jasna:has(> .blk) + .mot--jasna, .mot--karta:has(> .blk) + .mot--karta, .mot--ciemna:has(> .blk) + .mot--ciemna, .mot--akcent:has(> .blk) + .mot--akcent) > .blk { padding-top: var(--section-pad); }
:is(.mot--jasna:has(> .blk) + .mot--jasna, .mot--karta:has(> .blk) + .mot--karta, .mot--ciemna:has(> .blk) + .mot--ciemna, .mot--akcent:has(> .blk) + .mot--akcent) > .band .band__in { padding-top: var(--section-pad); }
/* Wiersze „Tekst z obrazem” tuż pod kaflami na tym samym tle = dalsza część tej samej sekcji: jeden odstęp ~80 px */
.ti .wrap { gap: var(--ti-odstep); }
:is(.mot--jasna:has(> .cards):has(+ .mot--jasna > .ti), .mot--karta:has(> .cards):has(+ .mot--karta > .ti)) > .blk.cards { padding-bottom: var(--ti-odstep); }
:is(.mot--jasna:has(> .cards) + .mot--jasna, .mot--karta:has(> .cards) + .mot--karta) > .blk.ti { padding-top: 0; }

/* Wideo (poz. 1): nagłówek w tym samym kontenerze co film — „margin: 0” zdejmował wyśrodkowanie .wrap */
.media .media__txt { margin: 0 auto var(--nag-odstep); }
/* Przycisk odtwarzania (poz. 33): 96 px z cieniem, widoczny na każdym kadrze */
.yt__play { width: 9.6rem; height: 9.6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.yt__play::after { border-width: 1.5rem 0 1.5rem 2.5rem; }
.mot--ciemna .yt__play { box-shadow: 0 0 0 2px var(--text), 0 8px 24px rgba(0, 0, 0, .35); }
.mot--ciemna .yt:hover .yt__play { box-shadow: 0 0 0 3px var(--text), 0 8px 24px rgba(0, 0, 0, .35); }

/* Wpis (poz. 3, 4, 27, 28): nagłówek, okładka i treść w jednej sekcji na jednym tle; jedna kolumna prozy ~700 px na środku */
.wrap--blog { max-width: calc(70rem + 2 * var(--gutter)); }
.rt { max-width: 70rem; margin-inline: auto; }
.rt .rt__fig, .rt .rt__cytat { width: 100%; }
.mot.blkh:has(> .phero):has(+ .mot.blkh > .article) > .blk.phero { padding-bottom: 0; }
.mot.blkh:has(> .phero) + .mot.blkh > .blk.article { padding-top: clamp(4rem, 3.2rem + 1.5vw, 5.6rem); }
.phero__powrot { margin-top: -1.2rem; gap: .8rem; }
.phero .phero__title { font-size: clamp(3.2rem, calc((2.4rem + 2.2vw) * var(--skala-h, 1)), 6.4rem); line-height: 1.15; }
.phero__name, .phero__date { font-size: 1.6rem; }
.rt .rt__cytat { margin-top: 3.2rem; padding-left: 2.4rem; }

/* Karty (poz. 5): link „Więcej…/Czytaj wpis” zawsze na dole karty — równa linia w rzędzie */
.karta.cards__karta > .btns:last-child:has(> .btn--link:only-child), .karta.post2 > .post2__link:last-child { margin-top: auto; }
/* Opis w karcie usług: ten sam kolor i rozmiar co opisy innych kart (poz. 23) */
.karta .cards__opis p { color: inherit; font-size: inherit; }

/* Opinie (poz. 6): równy odstęp w karcie; stanowisko i firma zawsze w osobnych liniach (bez sztucznej wysokości) */
.opinie--siatka .opinia__rola { min-height: 0; }
.opinia__dane { gap: 0; }
.opinia__podpis { align-items: center; }

/* Logotypy (poz. 7): nazwa w jednej linii, komórka stałej wysokości, znak na środku komórki */
.logos--rzad .logos__row { justify-items: stretch; }
.logos--rzad .logos__row li { display: flex; align-items: center; justify-content: center; min-height: 5.6rem; }
.logos--rzad .logo-atrapa { white-space: nowrap; }
@media (max-width: 767px) {
  .logos.logos--rzad .logos__row li:nth-child(n) .logo-atrapa { font-size: 1.6rem; letter-spacing: .02em; }
  .logos--rzad .logos__row { row-gap: .8rem; }
}

/* Tekst z obrazem (poz. 8, 15): lustrzane wiersze o tej samej geometrii (tekst 5 kolumn, 1 kolumna przerwy, obraz 6); do 899 px jedna kolumna, obraz nad tekstem */
@media (min-width: 900px) {
  .ti .ti__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ti .ti__row > * { grid-row: 1; }
  .ti .ti__row--right .ti__txt { grid-column: 1 / 6; }
  .ti .ti__row--right .ti__img { grid-column: 7 / 13; }
  .ti .ti__row--left .ti__img { grid-column: 1 / 7; }
  .ti .ti__row--left .ti__txt { grid-column: 8 / 13; }
  .ti .ti__txt { max-width: none; }
}
@media (max-width: 899px) {
  .ti .ti__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--nag-odstep); }
  .ti .ti__row > * { grid-column: 1; grid-row: auto; }
  .ti .ti__row .ti__img { order: -1; }
  .ti .ti__txt { max-width: 64rem; }
}
.ti .ti__txt { gap: var(--tytul-opis); }
.ti .ti__txt > .btns { margin-top: calc(var(--opis-przyciski) - var(--tytul-opis)); }

/* Treść → przycisk zamykający sekcję (poz. 15): jeden token 32 px (Wstęp, FAQ, Blog na telefonie) */
.intro .intro__in--lewo, .intro .intro__in--srodek { gap: var(--opis-przyciski); }
.faq .faq__btns { margin-top: var(--opis-przyciski); }
@media (max-width: 767px) { .posts__karty .posts__wiecej { margin-top: calc(var(--opis-przyciski) - var(--nag-odstep)); } }

/* Wstęp „O nas” (poz. 18, 19): na komputerze tytuł z lewej, opis i przycisk z prawej (siatka 12 kolumn); lista z ptaszkami jak w cenniku */
@media (min-width: 992px) {
  .intro .intro__in--lewo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .intro .intro__in--lewo > .snag { grid-column: 1 / -1; grid-template-columns: subgrid; max-width: none; row-gap: var(--tytul-opis); }
  .intro .intro__in--lewo > .snag > :is(.snag__nad, .snag__tytul) { grid-column: 1 / 6; }
  .intro .intro__in--lewo > .snag > .snag__opis { grid-column: 7 / 13; grid-row: 2; }
  .intro .intro__in--lewo > .snag:not(:has(> .snag__nad)) > .snag__opis { grid-row: 1; }
  .intro .intro__in--lewo > .btns { grid-column: 7 / 13; }
}
.snag__opis ul { list-style: none; padding-left: 0; display: grid; gap: 1rem; }
.snag__opis ul > li { position: relative; padding-left: 3.6rem; }
.snag__opis ul > li::before { content: ""; position: absolute; left: 0; top: .15em; width: 2.4rem; height: 2.4rem; background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
ul.lista { gap: 1rem; }

/* Liczby (poz. 11): kreska przy własnej kolumnie, liczba 24–32 px od kreski; nagłówek → rząd liczb 48–64 px; opis wyrównany do dołu tytułu */
.stats .stats__item + .stats__item, .counter .counter__item + .counter__item { padding-left: var(--gap); }
.stats__item + .stats__item::before, .counter__item + .counter__item::before { left: 0; }
.counter__head { align-items: end; }
.counter .counter__items { margin-top: var(--liczby-odstep); }
.stats--tytul .stats__wrap { row-gap: var(--liczby-odstep); }
@media (max-width: 767px) {
  .stats .stats__item + .stats__item, .counter .counter__item + .counter__item { padding-left: 0; }
  .stats__item + .stats__item::before, .counter__item + .counter__item::before { left: 0; right: 0; }
}

/* Blog na tablecie (poz. 12): obraz karty poziomej na całą wysokość karty (bez białego paska pod spodem) */
@media (min-width: 768px) and (max-width: 991px) {
  .posts--karty .post2 { display: flex; flex-direction: column; position: relative; padding-left: calc(40% + var(--karta-pad)); min-height: 22rem; }
  .posts--karty .post2 > .post2__img { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; height: 100%; min-height: 0; margin: 0; aspect-ratio: auto; object-fit: cover; }
}

/* Zespół na telefonie (poz. 13): karuzela do krawędzi ekranu — następna karta ucięta krawędzią ekranu, nie kontenera */
@media (max-width: 767px) { .slider .slider__track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }
/* Strzałki karuzeli (poz. 34): rogi jak przyciski ze Stylu (pigułka → koło, kwadrat → kwadrat) */
.slider__nav button[data-slide] { border-radius: var(--btn-r, calc(8px * var(--zaokr, 1))); }

/* Kontakt (poz. 14, 24, 25, 29): tytuł w 6 kolumnach (2 linie zamiast 3), formularz w 5; pola dotyku linków; zgoda z ramką jak pola */
@media (min-width: 992px) {
  .form .form__box > :first-child { grid-column: 1 / 7; }
  .form .form__box > :nth-child(2) { grid-column: 8 / 13; }
}
@media (max-width: 991px) { .form .form__box, .faq--dwie .faq__in { row-gap: var(--nag-odstep); } }
.form__kontakt { font-size: 1.6rem; }
.form__consent .form__polityka { white-space: nowrap; } /* „Polityka prywatności” w jednej linii (cały link pod kursorem) */
.form__kontakt a { display: inline-flex; align-items: center; min-height: 4.4rem; }
@media (max-width: 599px) { .form__kontakt a { display: flex; } }
.mot > .form .form__consent input[type=checkbox]:not(:checked):not(:focus-visible), .form--prosty .form__consent input[type=checkbox]:not(:checked):not(:focus-visible) { background: var(--pole, var(--grey)); }
.form__consent input[type=checkbox]:not(:checked) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M5 10h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5zM5 11h14a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V15a4 4 0 0 1 4-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M5 10h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5zM5 11h14a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V15a4 4 0 0 1 4-4z'/%3E%3C/svg%3E");
}
@container style(--zaokr: 0) {
  .form__consent input[type=checkbox]:not(:checked) {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM1 11v22h22V11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M0 10h24v24H0zM1 11v22h22V11z'/%3E%3C/svg%3E");
  }
}

/* Stopka (poz. 10, 31): pod prawami tyle samo miejsca co nad nimi; logo wyrównane do góry kolumn, w menu do środka */
.ftr .ftr__in { padding-bottom: max(2.4rem, var(--space-40)); }
.ftr__bottom { padding-top: max(2.4rem, var(--space-40)); }
.ftr__logo { align-items: flex-start; }
.hdr__logo .logo-atrapa, .ftr__logo .logo-atrapa { line-height: 1; margin: 0; }

/* Typografia (poz. 17, 26): akapity i punkty bez krótkich ostatnich linii; leady i cytaty wyważone; wspólna szerokość leadów */
li { text-wrap: pretty; }
:is(.hero__lead, .snag__opis > p, .counter__opis > p, .band__opis > p, .form__opis > p, .chero__opis > p, .ctac__body > p, .rt__cytat p) { text-wrap: balance; }
.opinia__cytat p { text-wrap: pretty; } /* cytat w wąskiej karcie: pełna szerokość linii (balance zostawiał pusty pas z prawej) */
:is(.snag__opis, .hero__lead, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body) { max-width: 64rem; }

/* Drobne teksty (poz. 22): podpisy galerii w jednej linii, ciemniejsze; etykiety 14 px w pigułce 32 px */
.gal__cap { font-size: 1.6rem; color: color-mix(in srgb, var(--grey) 70%, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .gal__cap { font-size: 1.5rem; } }
.etyk, .tag { display: inline-flex; align-items: center; min-height: 3.2rem; font-size: 1.4rem; }

/* Tło „Akcent” (poz. 32): wyraźniejszy odcień marki (było 10% — prawie jak kremowe tło); zdjęcia z cienką ramką, żeby nie zlewały się z tłem */
.mot--akcent { --bg: color-mix(in srgb, var(--primary) 16%, var(--white)); --line: color-mix(in srgb, var(--primary) 30%, var(--white)); }
:is(.ti__img img, .image__fig img, .gal__it, .rt__fig img, .phero__img img, .chero__img img, .hero__img img) { outline: 1px solid color-mix(in srgb, var(--text) 12%, transparent); outline-offset: -1px; }

/* ——— 2C runda 4: fundament (czwarty audyt niezależny 09.10) ———
   Jedna miara akapitu (--miara), stały odstęp sekcji także przed wierszami tekst+obraz, jeden komponent liczb, kolumny od 7. kolumny siatki. */
:root { --miara: 58rem; --fs-h2: clamp(2.6rem, calc((1.9rem + 1.95vw) * var(--skala-h, 1)), calc(4.8rem * var(--skala-h, 1))); }

/* W1: wiersze tekst+obraz to zwykła sekcja (pełny odstęp jak każda granica sekcji); między wierszami jeden mniejszy token */
:is(.mot--jasna:has(> .cards):has(+ .mot--jasna > .ti), .mot--karta:has(> .cards):has(+ .mot--karta > .ti)) > .blk.cards { padding-bottom: var(--section-pad); }
:is(.mot--jasna:has(> .cards) + .mot--jasna, .mot--karta:has(> .cards) + .mot--karta) > .blk.ti { padding-top: var(--section-pad); }
.ti .wrap { gap: var(--section-pad); }
/* D1: akapit → link 32 px wizualnie (pole dotyku linku 48 px ma 12 px powietrza nad tekstem) */
.btns:has(> .btn--link:only-child) { margin-top: -1.2rem; }
.ti .ti__txt > .btns:has(> .btn--link:only-child) { margin-top: calc(var(--opis-przyciski) - var(--tytul-opis) - 1.2rem); }

/* W2: prawa kolumna zawsze od 7. kolumny (x = 736 przy 1440): wiersze tekst+obraz pół na pół, formularz 7–12 jak lista FAQ */
@media (min-width: 900px) {
  .ti .ti__row--right .ti__txt { grid-column: 1 / 7; }
  .ti .ti__row--right .ti__img { grid-column: 7 / 13; }
  .ti .ti__row--left .ti__img { grid-column: 1 / 7; }
  .ti .ti__row--left .ti__txt { grid-column: 7 / 13; }
  .ti .ti__row--right .ti__txt { padding-right: var(--gap); }
  .ti .ti__row--left .ti__txt { padding-left: 0; }
}
@media (min-width: 992px) {
  .form .form__box > :first-child { grid-column: 1 / 6; }
  .form .form__box > :nth-child(2) { grid-column: 7 / 13; }
}
/* W8: opis „O nas” w siatce podrzędnej — odstęp kolumn z siatki rodzica (gap .snag przestawiał go na 16 px) */
@media (min-width: 992px) { .intro .intro__in--lewo > .snag { column-gap: var(--gap); } }

/* W3: jeden komponent liczb (Licznik i Pasek liczb): nadtytuł + tytuł + opis pod spodem, liczby 28–32 px niżej, liczba → etykieta 8 px */
.counter .counter__head { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: var(--tytul-opis); }
.counter .counter__head > * { grid-column: 1 / -1; }
.counter .counter__items { margin-top: var(--nag-odstep); }
.stats--tytul .stats__wrap { row-gap: var(--nag-odstep); }
.stats__val, .counter .counter__val { line-height: 1; }
.stats__lbl, .counter .counter__item .counter__lbl { margin-top: .8rem; }
.counter .counter__nad { margin-bottom: 1.6rem; }
.stats .snag { gap: var(--tytul-opis); }

/* W5: galeria — zdjęcie → podpis 8 px, rzędy 24–32 px, kolumny z tokenu siatki */
.gal__fig { gap: .8rem; }
.gal__cap { line-height: 1.3; }
.gal--grid .gal__grid { row-gap: var(--nag-odstep); }
@media (max-width: 767px) { .gal--grid .gal__grid { gap: var(--nag-odstep) var(--gap); } }

/* W6, W9, D3: jedna miara akapitu; telefon — pełna szerokość; leady bez wyważania (zwężało akapit do ~260 px); bez wdów */
:is(.snag__opis, .hero__lead, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body, .ti__body) { max-width: var(--miara); }
@media (max-width: 767px) { :is(.snag__opis, .hero__lead, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body, .ti__body) { max-width: none; } }
:is(.hero__lead, .snag__opis > p, .counter__opis > p, .band__opis > p, .form__opis > p, .chero__opis > p, .ctac__body > p) { text-wrap: pretty; }
:is(p, li, figcaption, .faq__pyt, .gal__cap, .rt__fig figcaption) { text-wrap: pretty; }
h2 { text-wrap: balance; }

/* W7, D13: wpis — do 991 px proza od lewej krawędzi kontenera (jedna krawędź z okładką), miara ~65 znaków; zdjęcie w treści = szerokość okładki */
@media (max-width: 991px) {
  .wrap--blog { max-width: calc(var(--container) + 2 * var(--gutter)); }
  .rt { max-width: 65ch; margin-inline: 0; }
  .rt .rt__fig { width: calc(100vw - 2 * var(--gutter)); max-width: calc(var(--container)); }
}
@media (min-width: 992px) { .wrap--blog { max-width: calc(66rem + 2 * var(--gutter)); } .rt { max-width: 66rem; } }
.rt .rt__fig { margin-top: 3.2rem; }
.rt .rt__wstep { font-size: clamp(1.9rem, 1.75rem + 0.45vw, 2.2rem); }

/* D2: logotypy — komórka 48 px (dół sekcji = góra), do 1199 px znaki od lewej krawędzi kolumny */
.logos--rzad .logos__row li { min-height: 4.8rem; }
@media (max-width: 1199px) { .logos--rzad .logos__row li { justify-content: flex-start; } }

/* D4, D5: pytania FAQ i linki stopki krojem tekstu (cienki krój nagłówków tylko od ~24 px); stopka — logo → dane 32, nazwa+adres jako grupa */
.faq__q { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.6rem, 1.5rem + 0.28vw, 1.8rem); }
.ftr__lists a { font-family: var(--font-body); font-weight: 500; }
.ftr .ftr__kol-tytul { font-weight: 600; }
.ftr__logo { margin-bottom: -1.6rem; }
.ftr__lewa .ftr__info { gap: .8rem; }
.ftr__company { margin: 0; }
.ftr__addr { margin-bottom: .8rem; }
.ftr__contact a { min-height: 4.8rem; }
.ftr__social a { min-width: 4.8rem; min-height: 4.8rem; }
.ftr__social svg { width: 2.6rem; height: 2.6rem; }

/* D7: karuzela — kropka 14 px w polu 48, strzałki z ikoną systemu, wygaszona na początku/końcu; telefon — zajawka następnej karty ~28 px */
.slider__dot::before { width: 14px; height: 14px; }
.slider__nav button[data-slide] { display: inline-flex; align-items: center; justify-content: center; }
.slider__nav button[data-slide] .arr { width: 2rem; height: 2rem; }
.slider__wstecz { display: inline-flex; transform: scaleX(-1); }
.slider__nav button[aria-disabled="true"] { opacity: .4; cursor: default; }
@media (max-width: 767px) { .slider .slider__track { grid-auto-columns: calc(100% - 4.8rem); } }

/* D8, D9: kontakt — telefon i e-mail jako lista, przed formularzem 40 px; pola i przyciski 48 px; przycisk wysyłki jak każdy przycisk; gwiazdka za zdaniem zgody */
@media (max-width: 599px) { .form__kontakt { display: grid; gap: 0; } .form__kontakt a { min-height: 4.4rem; } }
@media (max-width: 991px) { .form .form__box { row-gap: 4rem; } }
.form__f :is(input[type=text], input[type=email], input[type=tel], input[type=number], select) { min-height: 48px; padding: 1rem 1.6rem; font-size: 1.6rem; line-height: 1.5; }
.form__f textarea { font-size: 1.6rem; line-height: 1.5; padding: 1rem 1.6rem; }
.form__f button.btn { font-family: var(--font-body); font-weight: 500; }
.form__consent:has(:required) > span::after { content: none; }
.form__consent:has(:required) .form__zgoda-txt::after { content: " *"; content: " *" / ""; }

/* D12: pas „Gotowi na…” na komputerze — tekst z lewej (6 kolumn), przyciski z prawej na środku wysokości */
@media (min-width: 992px) {
  .ctac:not(.ctac--float) .ctac__txt { max-width: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--tytul-opis); align-items: center; }
  .ctac:not(.ctac--float) .ctac__txt > :not(.btns) { grid-column: 1 / 7; }
  .ctac:not(.ctac--float) .ctac__txt > .btns { grid-column: 8 / 13; grid-row: 1 / span 2; justify-content: flex-end; margin-top: 0; }
}

/* D14: ikona karty usług na tablecie na wysokości tytułu */
@media (min-width: 768px) and (max-width: 991px) { .cards--kolumny .cards__karta > .cards__ikona { grid-row: 1; align-self: center; } }

/* D15, D16: jedna rama mediów (także kadr wideo); przycisk odtwarzania z cieniem Stylu; duże obrazy tylko 3:2 i 16:9 */
.media__box > img, .yt img { outline: 1px solid color-mix(in srgb, var(--text) 12%, transparent); outline-offset: -1px; }
.yt__play { box-shadow: var(--cien, none); }
.mot--ciemna .yt__play { box-shadow: 0 0 0 2px var(--text), var(--cien, 0 0 0 0 transparent); }
.mot--ciemna .yt:hover .yt__play { box-shadow: 0 0 0 3px var(--text), var(--cien, 0 0 0 0 transparent); }
.mot .ti__img img, .ti__img img { aspect-ratio: 3 / 2; }
@media (min-width: 768px) and (max-width: 899px) { .ti .ti__img img { aspect-ratio: 16 / 9; } }
.chero__img img { aspect-ratio: 16 / 9; }
@media (min-width: 992px) { .hero--split .hero__img img { height: auto; aspect-ratio: 3 / 2; } }

/* ——— 2C.7: logo marki z „Style” — wersja na jasne albo ciemne tło według tła sekcji; bez pliku zostaje napis marki ——— */
.logo-marki { display: inline-flex; align-items: center; }
.logo-marki__plik { display: none; width: var(--logo-szer, 16rem); height: var(--logo-wys, 4rem); background: var(--logo-jasne) left center / contain no-repeat; }
.mot--ciemna .logo-marki__plik, .ftr .logo-marki__plik { background-image: var(--logo-ciemne, var(--logo-jasne)); }
:is(.mot--jasna, .mot--karta, .mot--akcent) > .ftr .logo-marki__plik { background-image: var(--logo-jasne); }
@media (max-width: 991px) { .logo-marki__plik { width: 13rem; height: 3.6rem; } }
@media (forced-colors: active) { .logo-marki__plik { forced-color-adjust: none; } }

/* ——— 2C runda 5: fundament (piąty audyt niezależny 09.10) ———
   Rozmiary pisma 16/15/14 i pola 44 px mierzy testy/c2-bramka.mjs przed każdą publikacją zrzutów; pomocniczy szary ciemniejszy (cel ≥ 5:1). */
:root { --tekst-pom: color-mix(in srgb, var(--grey) 70%, var(--text)); --ti-gap: clamp(4rem, 2.8rem + 3vw, 9.6rem); --fs-podpis: 1.5rem; }
/* Rozmiary bez zmian (bramka: 0 przekroczeń 16/15/14) — ciemniejszy tylko szary pomocniczy, cel ≥ 5:1 */
:is(figcaption, .gal__cap, .person__role, .opinia__rola, .phero__date, .rt__cytat footer, .rt .rt__cytat footer, .cennik__notka, .cennik__od, .cennik__okres, .image__cap, .media__cap, .rt__fig figcaption) { color: var(--tekst-pom); }
.mot--ciemna :is(.ftr__legal, .ftr__info, .ftr__lists a) { color: var(--text); }

/* (b), W4, W5: „Tekst z obrazem” jako własna sekcja — nagłówek, wiersze 50/50 z tym samym odstępem kolumn i tą samą szerokością tekstu,
   tekst od góry wiersza (bez dziury przy wysokim obrazie), obraz 4:3; między wierszami jeden token, ostatni bez marginesu */
.ti .ti__nag { margin-bottom: var(--nag-odstep); }
.ti .wrap { gap: 0; }
.ti .ti__row + .ti__row { margin-top: var(--ti-odstep); }
@media (min-width: 900px) {
  .ti .ti__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ti-gap); align-items: start; }
  .ti .ti__row > *, .ti .ti__row--right .ti__txt, .ti .ti__row--right .ti__img, .ti .ti__row--left .ti__img, .ti .ti__row--left .ti__txt { grid-column: auto; padding: 0; max-width: none; }
  .ti .ti__row--right .ti__txt { grid-column: 1; } .ti .ti__row--right .ti__img { grid-column: 2; }
  .ti .ti__row--left .ti__img { grid-column: 1; } .ti .ti__row--left .ti__txt { grid-column: 2; }
  .ti .ti__txt { padding-top: var(--nag-odstep); }
}
.ti .ti__img img, .mot .ti__img img { aspect-ratio: 4 / 3; }
.ti .ti__txt h3 { font-size: var(--fs-h3); }

/* W6, D14: nagłówki wyważone; na telefonie opisy sekcji na pełną szerokość (FAQ i Kontakt jak inne) */
h2, h3, .snag__tytul { text-wrap: balance; }
@media (max-width: 599px) { :is(.faq__nag, .form__info) :is(.snag__opis, .form__opis) { max-width: none; } }

/* W3: pola kliknięcia — linki tel/mail i polityka po 44 px, ikony stopki do krawędzi kontenera */
.form__kontakt a, .form__polityka { display: inline-flex; align-items: center; min-height: 4.4rem; }
.form__polityka-zdanie { margin: .4rem 0 0 3.6rem; font-size: var(--fs-podpis); color: var(--text); }
.form__polityka-zdanie .form__polityka { min-height: 4.4rem; text-decoration: underline; text-underline-offset: .2em; }
.ftr__social { margin-right: -1.1rem; }
@media (max-width: 991px) { .ftr__social { margin: 0 0 0 -1.1rem; } }

/* D2: logotypy — dół = góra (bez wysokości komórki pod ostatnim rzędem); tablet — znaki na środku komórek */
.logos--rzad .logos__row li { min-height: 0; }
@media (min-width: 768px) and (max-width: 1199px) { .logos--rzad .logos__row li { justify-content: center; } }

/* D3, D4: stopka — dół = góra sekcji; kreska → ikony → prawa jednym odstępem; miasta jako zwykły tekst */
.ftr .ftr__in { padding-bottom: calc(var(--section-pad) - 1.2rem + env(safe-area-inset-bottom, 0px)); }
.ftr__bottom { padding-top: 2rem; }
@media (max-width: 991px) { .ftr__bottom { gap: .8rem; } }
.ftr__cities span { display: inline-flex; align-items: center; min-height: 4.8rem; font-size: 1.6rem; color: var(--text); }
.ftr__lists ul { row-gap: 0; }

/* D6, D7, D8, D9, D13 (wpis): kolumna prozy 65 znaków, zdjęcia na szerokość kolumny; H1 → metryczka 20, metryczka → okładka 44, okładka → wstęp 48;
   śródtytuł 22–24 px; cień okładki nie ucięty; pole wiadomości bez gryzącego się uchwytu */
@media (min-width: 992px) { .wrap--blog { max-width: calc(64rem + 2 * var(--gutter)); } .rt { max-width: 64rem; } }
.rt { max-width: min(65ch, 100%); }
.phero__author { margin-top: 2rem; }
.phero__img { margin-top: 4.4rem; }
.mot.blkh:has(> .phero):has(+ .mot.blkh > .article) > .blk.phero { padding-bottom: 2.4rem; }
.mot.blkh:has(> .phero) + .mot.blkh > .blk.article { padding-top: 2.4rem; }
.rt h2 { font-size: max(2.2rem, var(--fs-h3)); margin-top: 4rem; }
.form__f textarea { resize: vertical; min-height: 14rem; }

/* D10: lista z ptaszkami 16 px pod akapitem; „O nas” — prawa kolumna od nadtytułu jak w FAQ i Kontakcie */
.snag__opis { gap: 1.6rem; }
@media (min-width: 992px) { .intro .intro__in--lewo > .snag > .snag__opis { grid-row: 1 / span 2; } }

/* D11, D15: kontakt — dane w bloku z odstępem 12, przed formularzem 40; pytania FAQ 17–18 px półgrube, wiersz min. 48 */
.form__info { gap: 1.2rem; }
.form__info > .snag__nad + * { margin-top: 0; }
.faq__q { font-size: clamp(1.7rem, 1.65rem + 0.14vw, 1.8rem); font-weight: 600; min-height: 4.8rem; }

/* D16: karuzela na telefonie — następna karta wygasza się przy krawędzi (bez uciętych liter) */
@media (max-width: 767px) { .slider .slider__track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 5.6rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 5.6rem), transparent); } }

/* D17: tytuł karty bloga bez sztucznej wysokości */
@media (min-width: 992px) { .post2__tytul { min-height: 0; } }

/* D18: cennik na tablecie — karty ~520 px, przycisk szerokości treści (min. 200 px) */
@media (min-width: 600px) and (max-width: 991px) {
  .cennik__lista { max-width: 56rem; }
  .cennik__btn { width: auto; min-width: 20rem; align-self: flex-start; }
}

/* D19: realizacja — etykiety → zdjęcie jednym tokenem */
.chero__img { margin-top: var(--nag-odstep); }
/* Runda 5 — wyniki bramki mierzonej: pola 44 px dla linków menu i stopki, prawa 15 px, zdanie o polityce 16 px */
.hdr__nav > ul > li > a { min-height: 4.4rem; min-width: 4.4rem; justify-content: center; }
.ftr__lists a { min-width: 4.4rem; }
.ftr__legal, .ftr__legal a, .ftr__legal > span { font-size: 1.5rem; }
.form__polityka-zdanie { font-size: 1.6rem; }
.form__polityka-zdanie .form__polityka { min-height: 4.8rem; }
.form__polityka-zdanie .form__polityka:hover { text-decoration-thickness: 2px; }
.mot.blkh:has(> .phero):has(+ .mot.blkh > .article) > .blk.phero { padding-bottom: 2.8rem; }
.mot.blkh:has(> .phero) + .mot.blkh > .blk.article { padding-top: 2.8rem; }
.mot--akcent .snag__nad { color: color-mix(in srgb, var(--primary) 70%, var(--text)); } /* nadtytuł na jasnym tle marki ≥ 5:1 */
.faq__q { font-weight: 500; } /* 600 nie istnieje w krojach tekstu — przeglądarka składała polskie znaki z innej grubości */
.form__polityka-zdanie .form__polityka { margin-left: 0; display: inline-flex; vertical-align: middle; }

/* ——— 2C runda 6: fundament (szósty audyt niezależny 09.10) ——— */
:root { --kol-gap: 4rem; }  /* odstęp kolumn w układach dwukolumnowych (tekst + obraz) */

/* 1, 5, 8, 15: „Dlaczego my” — rząd wyśrodkowany w pionie, obraz 3:2 (tablet 16:9), wspólny odstęp kolumn; H3 jak tytuł karty; nagłówek → pierwszy rząd 56–64 */
@media (min-width: 900px) { .ti .ti__row { column-gap: var(--kol-gap); align-items: center; } .ti .ti__txt { padding-top: 0; } }
.ti .ti__img img, .mot .ti__img img { aspect-ratio: 3 / 2; }
@media (min-width: 600px) and (max-width: 899px) { .ti .ti__img img { aspect-ratio: 16 / 9; } }
.ti .ti__nag { margin-bottom: clamp(4rem, 3.4rem + 1.1vw, 6.4rem); }
@media (min-width: 768px) { .ti .ti__nag { margin-bottom: clamp(5.6rem, 5rem + 0.6vw, 6.4rem); } }
.ti .ti__txt h3 { font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; }
.ti .ti__txt > :last-child { margin-bottom: 0; }
.ti .ti__txt > .btns:last-child:has(> .btn--link:only-child) { margin-bottom: -1.2rem; }
@media (max-width: 767px) { .ti .ti__row + .ti__row { margin-top: 5.2rem; } }

/* 2, 22, 23: zgoda — checkbox na wysokości pierwszej linii, polityka drugą linią bloku etykiety (4–8 px), do przycisku 24–32; pole wiadomości stałej wysokości */
.form__consent { align-items: flex-start; }
.form__zgoda-blok { display: grid; gap: .6rem; }
.form__consent .form__polityka-zdanie { margin: 0; font-size: 1.6rem; line-height: 1.5; }
.form__consent .form__polityka-zdanie .form__polityka { display: inline; min-height: 0; margin: 0; }
.form__f textarea { resize: none; height: 14rem; min-height: 14rem; }

/* 3, 18: „O nas” — nadtytuł → H2 jednym tokenem, obie kolumny od góry (nadmiar wysokości opisu idzie w ostatni pusty wiersz) */
@media (min-width: 992px) {
  .intro .intro__in--lewo > .snag { grid-template-rows: auto auto 1fr; align-items: start; }
  .intro .intro__in--lewo > .snag > .snag__opis { grid-row: 1 / -1; }
}

/* 4: opinie — imię 16 px półgrube w kolorze tekstu, stanowisko i firma w jednej szarej linii 15 px, awatar na środku bloku */
.opinia__autor { font-size: 1.6rem; font-weight: 600; color: var(--text); }
.opinia__rola { font-size: 1.6rem; } /* 16 px jak rola w karcie zespołu (próg opisów w c2-4) */
.opinia__podpis { align-items: center; }

/* 6, 30: stopka — dane jednym odstępem 16, jedna lewa krawędź tekstu (ikony w kolumnie obok), dolny pasek 32 nad / 32–40 pod */
.ftr__lewa .ftr__info { gap: 1.6rem; }
.ftr__addr { margin-bottom: 0; }
.ftr__contact { margin-block: -1rem; gap: 0; }
.ftr__company { padding-left: calc(23px + 12px); }
.ftr .ftr__in { padding-bottom: 2.8rem; }
.ftr__bottom { padding-top: 2rem; }

/* 7, 24: liczby — kolumny tej samej budowy, kreska na środku odstępu, podpis wyważony; telefon — liczba obok podpisu */
.stats .stats__in, .counter .counter__items { column-gap: 6.4rem; }
.stats .stats__item + .stats__item, .counter .counter__item + .counter__item { padding-left: 0; }
.stats__item + .stats__item::before, .counter__item + .counter__item::before { left: -3.2rem; }
.stats__lbl, .counter .counter__item .counter__lbl { text-wrap: balance; }
@media (max-width: 767px) {
  .stats__item + .stats__item::before, .counter__item + .counter__item::before { left: 0; right: 0; }
  .stats .stats__in { row-gap: 3.2rem; }
  .stats .stats__item { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); column-gap: 1.6rem; align-items: center; }
  .stats .stats__item .stats__val { font-size: 3.6rem; }
  .stats .stats__item .stats__lbl { margin-top: 0; }
  .stats__item + .stats__item::before { top: -1.6rem; }
}

/* 9: cennik na tablecie — przycisk na całą szerokość karty (jak na telefonie) */
@media (min-width: 600px) and (max-width: 991px) { .cennik__btn { width: 100%; min-width: 0; align-self: stretch; } }

/* 10: logotypy na tablecie — od krawędzi do krawędzi kontenera (pierwszy równo z nadtytułem) */
@media (min-width: 768px) and (max-width: 1199px) {
  .logos--rzad .logos__row li:nth-child(3n+1) { justify-content: flex-start; }
  .logos--rzad .logos__row li:nth-child(3n+2) { justify-content: center; }
  .logos--rzad .logos__row li:nth-child(3n) { justify-content: flex-end; }
}

/* 11: zespół na telefonie — następna karta wystaje ~28 px samym zdjęciem; tekst niewidocznej karty przygaszony (bez gradientu) */
@media (max-width: 767px) {
  .slider .slider__track { -webkit-mask-image: none; mask-image: none; grid-auto-columns: calc(100% - var(--gap) - max(0px, 2.8rem - var(--gutter))); }
  .slider .person:not([data-widoczna]) > :not(.person__img) { opacity: 0; }
  .slider .person > * { transition: opacity .2s; }
}

/* 12: menu — pole 44 px z odstępem 12 px po bokach, równe przerwy między pozycjami */
.hdr__nav > ul { gap: .8rem; }
.hdr__nav > ul > li > a { min-width: 0; padding-inline: 1.2rem; }

/* 13, 28: wpis — akapity, listy i cytat do 65 znaków, zdjęcia na szerokość kolumny wpisu; zdjęcie w treści 40 px góra/dół, podpis 12 px */
.rt { max-width: none; }
.rt :is(p, ul, ol, h2, h3, h4, blockquote) { max-width: 65ch; }
@media (min-width: 992px) { .wrap--blog { max-width: calc(76rem + 2 * var(--gutter)); } .rt { max-width: none; } }
.rt .rt__fig { width: 100%; max-width: none; margin: 4rem 0; gap: 1.2rem; }
.rt .rt__fig + * { margin-top: 0; }
@media (max-width: 991px) { .rt .rt__fig { width: 100%; } }

/* 19, 20, 21: kontakt — dane z ikonami jak w stopce, lista 8–12 px, do formularza 32–40; linki w akcencie z podkreśleniem */
.form__kontakt { display: grid; gap: .8rem; }
.form__kontakt-nad { margin: 0; }
.form__dane { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.form__dane li { display: flex; align-items: center; gap: 1.2rem; min-height: 4.4rem; }
.form__dane li:has(.form__linia) { align-items: flex-start; padding-block: 1rem; }
.form__linia { display: block; }
.form__ik { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; color: var(--primary); }
.form__dane a, .form__kontakt a { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 4.4rem; }
.form__dane a:hover { text-decoration-thickness: 2px; }
@media (max-width: 991px) { .form .form__box { row-gap: 3.6rem; } }

/* 25, 26: blog — linia pod jasną ilustracją w kolorze ramki karty; „Czytaj wpis” stały odstęp pod opisem */
.post2 > .post2__img { border-bottom: 1px solid var(--line); }
.karta.post2 > .post2__link:last-child { margin-top: 0; }

/* 29: nagłówek na tablecie i telefonie — logo na środku wysokości przycisku „Menu” */
.logo-marki { display: flex; align-items: center; }
.hdr__logo .logo-atrapa { display: block; line-height: 1; }

/* ——— 2C runda 7: TWARDE DECYZJE (D1–D4, nie zmieniamy w kolejnych rundach) + pomiary bramki P1–P6 ———
   D1 „Dlaczego my”: zygzak wyśrodkowany w pionie, tekst z 3 punktami; nagłówek → pierwszy rząd = --nag-odstep; tablet od 720 px obok siebie 40/60.
   D2 karty w rzędzie: flex column, gap 24, link/CTA z margin-top: auto.  D3 jeden max-width leadu (--miara) wszędzie; proza wpisu 65ch.
   D4 sieroty w nagłówkach: twarda spacja po słowach 1–2-literowych przy renderowaniu (bezSierot w klocki/ui.tsx). */
.ti .wrap { display: flex; flex-direction: column; gap: var(--ti-odstep); }
.ti .ti__row + .ti__row { margin-top: 0; }
.ti .ti__nag { margin-bottom: calc(var(--nag-odstep) - var(--ti-odstep)); }
@media (min-width: 720px) {
  .ti .ti__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--kol-gap); align-items: center; }
  .ti .ti__row--left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .ti .ti__row > * { grid-row: 1; }
  .ti .ti__row--right .ti__txt { grid-column: 1; } .ti .ti__row--right .ti__img { grid-column: 2; }
  .ti .ti__row--left .ti__img { grid-column: 1; } .ti .ti__row--left .ti__txt { grid-column: 2; }
  .ti .ti__row .ti__img { order: 0; }
  .ti .ti__txt { max-width: none; padding: 0; }
}
@media (min-width: 720px) and (max-width: 899px) { .ti .ti__img img { aspect-ratio: 3 / 2; } }
.ti .ti__txt > ul.lista { margin: 0; }
.ti .ti__txt > .btns:has(> .btn--link:only-child) { margin-top: -.4rem; }
@media (max-width: 719px) {
  .ti .wrap { gap: 6rem; }
  .ti .ti__txt > .btns:has(> .btn--link:only-child) { margin-top: -.8rem; }
}

.cards__karta, .karta.post2, .cennik__pakiet { display: flex; flex-direction: column; gap: 2.4rem; }
.karta.cards__karta > .btns:last-child:has(> .btn--link:only-child), .karta.post2 > .post2__link:last-child, .karta.post2 > .post2__link { margin-top: auto; }
.cennik__pakiet > .cennik__btn { margin-top: auto; }
@media (min-width: 768px) and (max-width: 991px) { .cards--kolumny .cards__karta { display: grid; } }

:is(.snag__opis, .hero__lead, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body) { max-width: var(--miara); }
@media (max-width: 767px) { :is(.snag__opis, .hero__lead, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body) { max-width: var(--miara); } }
:is(.snag__opis, .hero__lead, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body) > * { max-width: none; }

/* P6: nadtytuł → nagłówek i nagłówek → opis jednym tokenem we wszystkich blokach nagłówka */
:is(.snag, .chero__txt, .form__info, .band__txt) { row-gap: var(--tytul-opis); }
.counter .counter__nad { margin-bottom: var(--tytul-opis); }
.hero .hero__title { margin-top: calc(var(--tytul-opis) * var(--g, 1)); } /* Hero: nadtytuł → H1 skaluje się z gęstością Stylu (c2-2) */

/* Stopka (ważne 1): nazwa firmy jako podpis pod logo z tą samą krawędzią; adres, telefon, e-mail jak w Kontakcie; dół = token sekcji */
.ftr__company { padding-left: 0; margin-top: -.8rem; }
.ftr__lewa .ftr__info { gap: .4rem; }
.ftr__addr, .ftr__contact a { display: flex; align-items: center; gap: 1.2rem; min-height: 4.8rem; margin: 0; }
.ftr__addr { align-items: flex-start; padding-block: 1.2rem; }
.ftr__contact { display: grid; gap: .4rem; margin-block: 0; }
.ftr .ftr__in { padding-bottom: calc(var(--section-pad) + env(safe-area-inset-bottom, 0px)); }

/* 9, 23: liczby — kreska z równym odstępem 24 px nad i pod (telefon), podpisy bez ograniczenia szerokości */
@media (max-width: 767px) {
  .counter .counter__items, .stats .stats__in { row-gap: 4.8rem; }
  .stats__item + .stats__item::before, .counter__item + .counter__item::before { top: -2.4rem; }
}
.stats__lbl { max-width: none; }
@media (min-width: 768px) and (max-width: 991px) { .stats__lbl { min-height: 3em; } }

/* 10, 11: cennik — punkty bez wyważania, opis pod ceną w rozmiarze punktów */
.lista li, .lista li span { text-wrap: pretty; }
.cennik__opis, .cennik__pakiet .lista li { font-size: var(--fs-body); }

/* 14, 20: jedna karta na białym tle (biała z ramką); opinia i cytat we wpisie jako wariant „cytat” z cudzysłowem */
.karta.opinia { background: var(--white); border: 1px solid var(--line); }
.opinia__cytat, .rt .rt__cytat { position: relative; }
.opinia__cytat::before, .rt .rt__cytat::before { content: "„"; display: block; font-family: var(--font-head); font-size: 4.8rem; line-height: .6; color: var(--primary); margin-bottom: .8rem; }
.rt .rt__cytat { border-left: 0; padding-left: 0; margin-block: 4.8rem; }
.rt .rt__cytat p { font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: clamp(2.4rem, 2.2rem + 0.45vw, 2.8rem); line-height: 1.35; }
.rt .rt__cytat footer { font-size: 1.5rem; }

/* 16, 17: kontakt — „Wolisz zadzwonić…” 24–32 nad i 12 pod; pola formularza białe na kolorowej sekcji */
.form__kontakt { margin-top: 2.4rem; }
.form__kontakt-nad { margin-bottom: .4rem; }
.mot > .form .form__f :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=file], textarea, select) { background: var(--white); }
.mot > .form .form__consent input[type=checkbox]:not(:checked):not(:focus-visible) { background: var(--pole, var(--grey)); }

/* 18: etykiety — pigułka z pastelowym wypełnieniem, bez ramki (nie wygląda jak przycisk) */
:is(.etyk--neutralna, .tag) { background: color-mix(in srgb, var(--primary) 12%, var(--white)); border-color: transparent; border-radius: 999px; color: var(--text); }

/* 19: wpis — jeden token 48 px między blokami (okładka → wstęp, zdjęcie, cytat, śródtytuł) */
.mot.blkh:has(> .phero):has(+ .mot.blkh > .article) > .blk.phero { padding-bottom: 0; }
.mot.blkh:has(> .phero) + .mot.blkh > .blk.article { padding-top: 4.8rem; }
.rt .rt__fig { margin-block: 4.8rem; }
.rt :is(h2, h3) { margin-top: 4.8rem; }

/* 21: FAQ — wiersz 60–64 px, pytanie 18 px / 500 */
.faq__q { padding-block: 1.8rem; font-size: 1.8rem; font-weight: 500; min-height: 6rem; }

/* 22: „Zaufali nam” — wąski pas z mniejszym odstępem; tablet 3 kolumny na środku komórek, równe odstępy */
.mot > .blk.logos { padding-block: clamp(6.4rem, 5.6rem + 1.5vw, 8rem); }
@media (min-width: 768px) and (max-width: 1199px) { .logos--rzad .logos__row li:nth-child(n) { justify-content: center; } }

/* 24: zespół na tablecie — karta ~45% szerokości, następna wystaje */
@media (min-width: 768px) and (max-width: 1199px) { .slider .slider__track { grid-auto-columns: 45%; } }
@media (max-width: 599px) { :is(.faq__nag, .form__info) :is(.snag__opis, .form__opis) { max-width: var(--miara); } } /* P5: jeden max-width leadu także na telefonie */
/* P1: logo, linki menu, „Menu” i przycisk w nagłówku wyrównane do środka wysokości wersalików (przycinanie pola tekstu do linii wersalików i bazowej) */
.hdr :is(.logo-atrapa, .hdr__txt, .btn > span) { display: inline-block; line-height: 1; text-box: trim-both cap alphabetic; }
.hdr .logo-atrapa { min-height: 0; padding: 0; }
.hdr__mob summary .hdr__txt { height: auto; background: none; border-radius: 0; }

/* ——— 2C runda 8: TWARDE DECYZJE D5–D11 (cofają sprzeczne rady z wcześniejszych list) ——— */
/* D7: jeden token paddingu sekcji na szerokość — 390: 48, 768: 56, komputer jak dotąd; także pasek logotypów */
:root { --section-pad: 4.8rem; }
@media (min-width: 768px) { :root { --section-pad: 5.6rem; } }
@media (min-width: 1200px) { :root { --section-pad: clamp(9.2rem, calc(11.6rem * var(--g, 1)), 12rem); } }
.mot > .blk.logos { padding-block: var(--section-pad); }

/* D8: ostatni element każdej sekcji i każdego kontenera treści bez dolnego marginesu (odstępy tylko przez gap / token przepływu) */
.blk :is(div, p, ul, ol, li, figure, blockquote, section, article, h1, h2, h3, h4, nav, form):last-child { margin-bottom: 0; }

/* D5: stopka — górna część zwykły padding sekcji; pasek prawny 24 px nad i 48 px pod tekstem (+ bezpieczny obszar) */
.ftr .ftr__in { padding-bottom: calc(4.8rem - 1.5rem + env(safe-area-inset-bottom, 0px)); }
.ftr__bottom { padding-top: calc(2.4rem - 1.5rem); }
@media (max-width: 991px) { .ftr__bottom { padding-top: calc(2.4rem - 1.5rem); } }

/* D6: „Dlaczego my” — poniżej 900 px jedna kolumna (obraz na pełną szerokość, tekst do 580 px, obraz → tekst 32, rzędy co 72);
   komputer: odstęp kolumn 72, kolumna tekstu do 440 px; D1 bez zmian */
@media (max-width: 899px) {
  .ti .ti__row, .ti .ti__row--left { grid-template-columns: minmax(0, 1fr); row-gap: 3.2rem; }
  .ti .ti__row > *, .ti .ti__row--right .ti__txt, .ti .ti__row--right .ti__img, .ti .ti__row--left .ti__img, .ti .ti__row--left .ti__txt { grid-column: 1; grid-row: auto; }
  .ti .ti__row .ti__img { order: -1; }
  .ti .ti__txt { max-width: var(--miara); }
  .ti .wrap { gap: 7.2rem; }
  .ti .ti__img img, .mot .ti__img img { aspect-ratio: 3 / 2; }
}
@media (min-width: 900px) {
  .ti .ti__row--right { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); }
  .ti .ti__row--left { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); }
  .ti .ti__row { column-gap: 7.2rem; align-items: center; }
}

/* D9: w kolumnach tekstu przycisk 32 px pod treścią (Wstęp: opis i przycisk w jednej kolumnie, na komputerze z prawej) */
.intro .intro__in--lewo, .intro .intro__in--srodek { gap: var(--tytul-opis); }
.intro__prawa { display: grid; gap: var(--opis-przyciski); justify-items: start; }
.intro__in--srodek .intro__prawa { justify-items: center; }
.intro__prawa > .btns { margin-top: 0; }
@media (min-width: 992px) {
  .intro .intro__in--lewo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .intro .intro__in--lewo > .snag { grid-column: 1 / 6; display: grid; grid-template-columns: none; grid-template-rows: none; max-width: none; }
  .intro .intro__in--lewo > .intro__prawa { grid-column: 7 / 13; grid-row: 1; }
}

/* D10: etykiety (tagi, „Polecany”) — jeden token rogów zależny od wyglądu (pigułka w A, rogi przycisków w B) */
:root { --radius-badge: var(--btn-r, 999px); }
:is(.etyk, .tag) { border-radius: var(--radius-badge); }

/* D11: listy z ptaszkami — rozmiar i odstęp z samej klasy listy (16 px, odstęp 10), niezależnie od miejsca */
ul.lista { gap: 1rem; }
ul.lista li, .cennik__pakiet ul.lista li, .ti ul.lista li { font-size: 1.6rem; line-height: 1.5; }
.snag__opis ul, .intro__prawa ul { gap: 1rem; }
.snag__opis ul > li, .intro__prawa .snag__opis ul > li { font-size: 1.6rem; line-height: 1.5; }
.snag__opis ul > li::before { width: 2rem; height: 2rem; top: .2em; }
.snag__opis ul > li { padding-left: 3.2rem; }

/* Ważne 4: akcent w nagłówku nie łamie się w środku („Gotowi / na nowe wnętrze?”) */
:is(.ctac, .band) :is(h1, h2) .hl { white-space: nowrap; } /* tylko krótkie akcenty w pasach CTA; w Hero dłuższy akcent musi się łamać (390 px) */

/* Ważne 5: zdjęcie w karcie bloga bez zaokrąglenia od strony treści (karta przycina rogi), także w karcie poziomej */
.post2 > .post2__img { border-radius: 0; }

/* P3: treść wpisu 34em (~550 px), wstęp wpisu jak lead 580 px */
.rt :is(p, ul, ol, h2, h3, h4, blockquote) { max-width: 34em; }
.rt .rt__wstep { max-width: var(--miara); }
/* P8: jeden token 48 px między blokami wpisu (wstęp, treść, zdjęcie z podpisem, cytat, śródtytuł) */
.rt > * + * { margin-top: 4.8rem; }
.rt > div > * + * { margin-top: 1.6rem; }
.rt > div > :is(h2, h3) { margin-top: 4.8rem; }
.rt .rt__fig, .rt .rt__cytat { margin: 4.8rem 0 0; }
.rt > :first-child { margin-top: 0; }

/* Drobne 7: znak cudzysłowu z ikony 36 px w kolorze akcentu, znak → tekst 10 px przez gap; gwiazdki 20 px */
.opinia__cytat, .rt .rt__cytat { display: grid; gap: 1rem; }
.opinia__cytat::before, .rt .rt__cytat::before { content: ""; display: block; width: 3.6rem; height: 3.6rem; margin: 0; background: var(--primary); font-size: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v1a3 3 0 0 1-3 3v2a5 5 0 0 0 5-5zM20 7h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v1a3 3 0 0 1-3 3v2a5 5 0 0 0 5-5z'/%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='M10 7H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v1a3 3 0 0 1-3 3v2a5 5 0 0 0 5-5zM20 7h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v1a3 3 0 0 1-3 3v2a5 5 0 0 0 5-5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.opinia { gap: 1.2rem; }

/* Drobne 9, 10: logotypy na telefonie wyśrodkowane w komórkach, rzędy co 24–32 px */
@media (max-width: 767px) { .logos--rzad .logos__row li:nth-child(n) { justify-content: center; text-align: center; } .logos--rzad .logos__row { row-gap: 2.4rem; } }
@media (min-width: 768px) { .logos--rzad .logos__row { row-gap: 2.8rem; } }

/* Drobne 17: pytanie FAQ wyważone („…ekipę / remontową?”) */
.faq__pyt { text-wrap: balance; }

/* Drobne 18: wpis i realizacja — ten sam styl H1 i etykiety nad tytułem */
.chero .chero__title, .phero .phero__title { font-size: clamp(3.2rem, calc((2.4rem + 2.2vw) * var(--skala-h, 1)), 6.4rem); line-height: 1.15; font-weight: var(--w-head, 300); }
.chero__txt { gap: var(--tytul-opis); }
.chero__tags { margin: 0; }
.chero__txt > .phero__powrot { margin-bottom: 0; }
/* P7: link „← Wszystkie wpisy/realizacje” — tekst równo z górną krawędzią treści (pole dotyku 48 px wystaje w padding) */
.phero__powrot, .chero__txt > .phero__powrot { margin-top: -1.4rem; margin-bottom: calc(var(--tytul-opis) - 1.4rem); }
.logos--rzad .logo-atrapa { min-height: 0; }
.ftr__logo { margin-top: -.4rem; } /* P7: pierwsza linia stopki (znak słowny, interlinia 1) równo z paddingiem sekcji */

/* ——— 2C runda 9: poprawki po audycie r8 (D1–D11 bez zmian) ——— */
/* Ważne 1: nagłówek wpisu i realizacji — jeden kontener (kolumna, odstęp 24 px) dla obu szablonów, bez własnych marginesów dzieci */
.phero > .wrap--blog, .chero .chero__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.phero > .wrap--blog > *, .chero .chero__txt > * { margin-block: 0; }
/* link powrotu: pole dotyku 48 px wystaje po równo nad i pod tekst (tekst równo z paddingiem sekcji, 24 px do etykiet) */
.phero > .wrap--blog > .phero__powrot, .chero .chero__txt > .phero__powrot { margin-block: -1.4rem; }

/* Ważne 2 i 3: lista w dłuższym tekście (Wstęp „O nas”, karty, FAQ) = ten sam komponent .lista co „Dlaczego my”, cennik i wpis */
:is(.snag__opis, .intro__body, .card__body, .cards__opis, .faq__a, .chero__opis) ul.lista { list-style: none; padding-left: 0; }
:is(.snag__opis, .intro__prawa .snag__opis, .intro__body) ul.lista > li { position: static; padding-left: 0; }
:is(.snag__opis, .intro__body) ul.lista > li::before { content: none; }

/* Ważne 4: treść wpisu wyśrodkowana w kolumnie — tekst 34em na osi, zdjęcie na pełną szerokość kolumny (symetrycznie) */
.rt :is(p, ul, ol, h2, h3, h4, blockquote), .rt .rt__wstep, .rt .rt__cytat { margin-inline: auto; }
.rt .rt__fig { margin-inline: 0; }

/* Drobne 5: „Dlaczego my” poniżej 900 px — nagłówek → pierwszy rząd = --nag-odstep (rzędy co 72 px zostają, D6) */
@media (max-width: 899px) { .ti .ti__nag { margin-bottom: calc(var(--nag-odstep) - 7.2rem); } }

/* Drobne 6: link do polityki w zgodzie formularza wygląda jak inne linki w tekście */
.form__consent .form__polityka-zdanie .form__polityka { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.form__consent .form__polityka-zdanie .form__polityka:hover { text-decoration-thickness: 2px; }

/* Drobne 7: tekst w karcie usługi i opinii najwyżej 34em (karta zostaje na pełną szerokość) */
.cards__karta :is(.cards__tytul, .cards__opis), .karta.opinia .opinia__cytat { max-width: 34em; }

/* Drobne 9: pasek liczb na tablecie — węższy odstęp kolumn, podpisy łamią się równo */
@media (min-width: 768px) and (max-width: 1199px) {
  .stats .stats__in, .counter .counter__items { column-gap: 4rem; }
  .stats__item + .stats__item::before, .counter__item + .counter__item::before { left: -2rem; }
  .stats__lbl, .counter__lbl { text-wrap: balance; }
}
/* Drobne 10: liczby na telefonie — kolumna liczby tak szeroka jak liczba, 20 px do podpisu */
@media (max-width: 767px) { .stats .stats__item { grid-template-columns: auto minmax(0, 1fr); column-gap: 2rem; } }

/* Drobne 12: cennik — linia nad listą ma 24 px nad i 24 px pod */
.cennik__pakiet .lista { padding-top: 2.4rem; }

/* Drobne 13: karty ze zdjęciem (blog, zespół) — treść pod zdjęciem ma ten sam odstęp co padding karty */
.karta.post2 > .post2__img { margin-bottom: calc(var(--karta-pad) - 2.4rem); }
.slider .person__img { margin-bottom: var(--karta-pad); }

/* Drobne 14: Hero w jednej kolumnie — przyciski → obraz 32 px */
@media (max-width: 991px) { .hero--split .hero__in { row-gap: 3.2rem; } }

/* Drobne 15: stopka — nazwa firmy pierwszą linią bloku adresu, równe odstępy w bloku */
.ftr__addr .ftr__company { display: block; margin: 0; padding: 0; }
/* Ważne 1 a rytm P6: w nagłówku realizacji nadtytuł → tytuł i tytuł → opis zostają na tokenie --tytul-opis (16 px) */
.chero .chero__txt > .snag__nad + .phero__title, .chero .chero__txt > .chero__opis { margin-top: calc(var(--tytul-opis) - 2.4rem); }
/* Drobne 9: podpisy liczb bez zarezerwowanej drugiej linii (P7: pod ostatnią treścią dokładnie padding sekcji) */
@media (min-width: 768px) and (max-width: 991px) { .stats__lbl { min-height: 0; } }
/* Ważne 4 c.d.: akapity, listy, śródtytuły, wstęp i cytat wpisu w jednej kolumnie na osi — jedna miara 580 px (--miara; 34em przy piśmie 17 px),
   bo 34em liczone od różnych rozmiarów pisma dawało kolumny 580 / 612 / 760 px o różnych lewych krawędziach */
.rt :is(p, ul, ol, h2, h3, h4, blockquote), .rt .rt__wstep, .rt .rt__cytat { max-width: var(--miara); }

/* ——— 2C runda 10: poprawki po audycie r9 (D1–D11 bez zmian) ——— */
/* Krytyczny 1: szablon wpisu ma jedną lewą krawędź — link powrotu, etykieta, H1 i autor w tej samej kolumnie 580 px na osi co treść; podpis zdjęcia też */
.phero > .wrap--blog { display: grid; grid-template-columns: minmax(0, var(--miara)); justify-content: center; justify-items: start; }
.rt .rt__fig figcaption { width: 100%; max-width: var(--miara); margin-inline: auto; }

/* Ważne 2: zdjęcie główne wpisu z całym cieniem i ramką — odstęp pod zdjęciem należy do sekcji nagłówka (następna sekcja nie zakrywa cienia) */
.mot.blkh:has(> .phero):has(+ .mot.blkh > .article) > .blk.phero { padding-bottom: 4.8rem; }
.mot.blkh:has(> .phero) + .mot.blkh > .blk.article { padding-top: 0; }

/* Ważne 3: blok liczb na telefonie (wariant z liczbą obok podpisu) — liczba i podpis na jednej linii bazowej */
@media (max-width: 767px) { .stats .stats__item { align-items: baseline; align-items: last baseline; } }

/* Drobne 4: nagłówek realizacji — H1 do 780 px, wyważone linie (zostaje przy lewej krawędzi) */
.chero .chero__txt > .chero__title { max-width: 78rem; text-wrap: balance; }

/* Drobne 5: karty „Co robimy” na tablecie — od wiersza ikona + tytuł do opisu 14 px */
@media (min-width: 768px) and (max-width: 991px) { .cards--kolumny .cards__karta > .cards__opis { margin-top: -1rem; } }

/* Drobne 6: pasek liczb na tablecie — wspólna szerokość podpisów, wszystkie łamią się tak samo */
@media (min-width: 768px) and (max-width: 991px) { .stats .stats__lbl { max-width: 15rem; } }

/* Drobne 7: przypis cennika w mierze leadu */
.cennik__notka { max-width: var(--miara); }
/* Drobne 8: opisy pakietów — jedna reguła łamania */
.cennik__opis { text-wrap: balance; }

/* Drobne 9: „Zacznijmy / od rozmowy” — złamanie z treści nagłówka formularza działa na każdej szerokości */
.form .form__title br { display: initial; }

/* Drobne 10: opinie — od cytatu do autora 24 px, autor przypięty do dołu karty (karta w rzędzie, D2) */
.karta.opinia .opinia__podpis { margin-top: auto; padding-top: 1.2rem; }

/* Drobne 11: stopka — linki jedną regułą (grubość, kolor, delikatne podkreślenie 3 px pod tekstem), zwykły tekst regular w kolorze drugorzędnym */
.ftr :is(.ftr__lists a, .ftr__contact a, .ftr__legal a) { font-weight: 500; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.ftr :is(.ftr__lists a, .ftr__contact a, .ftr__legal a):hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.ftr :is(.ftr__addr, .ftr__cities span, .ftr__legal > span) { font-weight: 400; color: color-mix(in srgb, currentColor 78%, transparent); }

/* Drobne 12: gwiazdka pola wymaganego związana ze zdaniem zgody twardą spacją */
.form__consent:has(:required) .form__zgoda-txt::after { content: "\00a0*"; content: "\00a0*" / ""; }

/* ——— 2C runda 11: poprawki po audycie r10 (D1–D11 bez zmian) ——— */
/* Ważne 1 i drobne 7: liczby — pole tekstu przycięte do wysokości cyfr (krój ma wysokie wydłużenia, przy interlinii 1 cyfry wystawały nad pole),
   więc lead → liczba to dokładnie token sekcji, a liczba → podpis i odstępy przy kresce liczą się od cyfr */
.counter .counter__val, .stats .stats__val { text-box: trim-both cap alphabetic; }
@media (max-width: 767px) { .counter .counter__item .counter__lbl { margin-top: .4rem; } }

/* Drobne 2: lista wpisów poniżej 900 px — przycisk „Wszystkie wpisy” pod leadem (32 px, od lewej), lead w pełnej mierze */
@media (max-width: 899px) {
  .posts .posts__karty { grid-template-columns: minmax(0, 1fr); }
  .posts .posts__karty .posts__wiecej { grid-column: 1; grid-row: auto; order: 0; justify-content: flex-start; margin-top: calc(var(--opis-przyciski) - var(--nag-odstep)); }
}

/* Drobne 3: zespół na komputerze — czwarta karta wystaje zdjęciem ok. 80 px, jak na węższych ekranach */
@media (min-width: 1200px) {
  .slider .slider__track { grid-auto-columns: calc((100% - 3 * var(--gap) - 8rem) / 3); }
  .slider .person:not([data-widoczna]) > :not(.person__img) { opacity: 0; }
  .slider .person > * { transition: opacity .2s; }
}

/* Drobne 4: zdjęcie w treści wpisu w mierze tekstu (D3), podpis równo ze zdjęciem */
.rt .rt__fig { max-width: var(--miara); margin-inline: auto; }

/* Drobne 5: ozdobny cudzysłów otwierający (“) — ten sam znak obrócony */
.opinia__cytat::before, .rt .rt__cytat::before { transform: rotate(180deg); }

/* Drobne 6: karty wpisów poniżej 900 px — „Czytaj wpis” stałe 24 px pod zajawką (D9), bez dosuwania do dołu */
@media (max-width: 899px) { .karta.post2 > .post2__link, .karta.post2 > .post2__link:last-child { margin-top: 0; } }

/* Drobne 8: formularz — przycisk wysyłki 32 px pod zgodą */
.form__f > .btn, .form__f > button[type="submit"] { margin-top: 1.2rem; }

/* Drobne 9: cennik w jednej kolumnie (600–899 px) — przycisk szerokości treści, min. 200 px, od lewej */
@media (min-width: 600px) and (max-width: 899px) { .cennik__pakiet > .cennik__btn { width: auto; min-width: 20rem; align-self: flex-start; } }

/* Drobne 10: stopka na telefonie i tablecie — ikony → wiersz © ok. 20 px; pole dotyku 48 px zostaje (wystaje w odstęp ujemnym marginesem) */
@media (max-width: 991px) { .ftr__bottom { gap: .8rem; } .ftr__social { margin-bottom: -1.1rem; } }

/* Drobne 11: ikony kart „Co robimy” — wspólne pole 28 × 28, rysunek równo z lewą krawędzią tekstu */
.cards--kolumny .cards__karta > .cards__ikona { width: 2.8rem; height: 2.8rem; margin-left: -.35rem; }

/* Drobne 12: podpis opinii — nazwa firmy nie łamie się w środku */
.opinia__firma { display: inline-block; white-space: nowrap; }

/* Drobne 13: leady łamią się jedną regułą */
:is(.snag__opis, .hero__lead, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body, .rt__wstep), :is(.snag__opis, .counter__opis, .band__opis, .form__opis, .chero__opis, .ctac__body) > p { text-wrap: pretty; }

/* ——— 2C runda 12: poprawki po audycie r11 (D1–D11 bez zmian) ——— */
/* Ważne 1: poziome karty wpisów na tablecie — kolumna tekstu wyśrodkowana w pionie (jak D1), link bez dosuwania do dołu (D9) */
@media (min-width: 768px) and (max-width: 991px) {
  .posts--karty .karta.post2 { justify-content: center; }
  .posts--karty .karta.post2 > .post2__link, .posts--karty .karta.post2 > .post2__link:last-child { margin-top: 0; }
}

/* Drobne 2: ozdobny cudzysłów na krawędzi tekstu (rysunek zaczynał się 6 px od lewej krawędzi pola 36 px) */
.opinia__cytat::before, .rt .rt__cytat::before { transform: translateX(-.6rem) rotate(180deg); }

/* Drobne 3 (D11): ptaszek 16 × 16, rysunek na całe pole, 12 px do tekstu — we wszystkich listach, także w treści wpisu */
.lista__ico { width: 1.6rem; height: 1.6rem; margin-top: .4rem; }
.rt ul > li { padding-left: 2.8rem; }
.rt ul > li::before { width: 1.6rem; height: 1.6rem; top: .4rem; -webkit-mask-size: 134%; mask-size: 134%; -webkit-mask-position: center; mask-position: center; }

/* Drobne 5 i 6: Hero na komputerze — obraz na wysokość kolumny tekstu (góra i dół równo), 72 px od kolumny tekstu (D6); łamanie H1 bez zmian */
@media (min-width: 992px) {
  .hero--split .hero__img { align-self: stretch; margin-left: 4rem; }
  .hero--split .hero__img img { height: 100%; aspect-ratio: auto; object-fit: cover; }
}

/* Drobne 7: okładka wpisu poniżej 1024 px w mierze tekstu */
@media (max-width: 1023px) { .phero .phero__img { max-width: calc(var(--miara) + 2 * var(--gutter)); margin-inline: auto; } }

/* Drobne 8: karty usług i karty wpisów — tytuł → opis 8 px (ikona / etykieta → tytuł 24 px, do linku bez zmian) */
.karta.cards__karta > .cards__opis, .cards--kolumny .cards__karta > .cards__opis, .karta.post2 > .post2__opis { margin-top: -1.6rem; }

/* ——— 1.22.0: elementy w miejscach sekcji ———
   Puste miejsce (sekcja bez nagłówka, bez przycisków albo bez zdjęcia) nie zajmuje miejsca na stronie — tak jak przed 1.22.0, gdy takiego pojemnika nie było.
   W edytorze puste miejsce zostaje widoczne jako pole do upuszczenia elementu (ma atrybut data-puck-dropzone). */
:is(.hero__img, .hero__bg, .btns, .snag, .intro__prawa, .band__txt, .ctac__txt):empty:not([data-puck-dropzone]) { display: none; }
/* Element „Tekst” i „Zdjęcie” wstawione z „Dodaj → Elementy”: bez własnych odstępów, szerokość i kolor bierze z miejsca. */
.el-tekst { display: grid; gap: 1.2rem; max-width: var(--miara, 58rem); }
.el-tekst > :last-child { margin-bottom: 0; }
.el-obraz { display: block; max-width: 100%; }
.el-puste { display: grid; place-items: center; min-height: 12rem; border: 1px dashed currentColor; border-radius: var(--radius); opacity: .6; font-size: 1.4rem; }

/* ——— 1.23.0: nowe ogólne opcje klocków ——— */
/* Kafle „dwie”: dwie kolumny dużych kart wypełniane kolumnami; poniżej 992 px jedna kolumna */
.cards--dwie .cards__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; }
.cards--dwie .card { display: flex; flex-direction: column; border-width: 1px; padding: 2rem; min-height: 44rem; }
.cards--dwie .card__title { font-size: var(--fs-lg); line-height: 1.2; margin-bottom: 4rem; }
.cards--dwie .card__body { margin-top: auto; }
@media (max-width: 991px) {
  .cards--dwie .cards__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 3rem; }
  .cards--dwie .card { min-height: 32rem; }
}
/* Lista wpisów: filtr jako lista wyboru i „Pokaż więcej” */
.posts__filters { flex-wrap: wrap; }
.filter--lista { padding: 0; position: relative; display: inline-flex; }
.filter--lista::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.filter--lista select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 7px 38px 4px 14px; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.filter--lista select:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.posts__wiecej-wiersz { display: flex; justify-content: center; margin-top: var(--space-40); }
.posts__grid > [hidden] { display: none !important; }
/* Galeria „Siatka”: dwie kolumny i proporcje zdjęć z listy */
.gal--k2 .gal__grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .gal--k2 .gal__grid { grid-template-columns: 1fr 1fr; gap: 8px; } }
.gal--ar .gal__grid .gal__it { aspect-ratio: var(--gal-ar, 4 / 3); }
.gal--ar-3-2 { --gal-ar: 3 / 2; } .gal--ar-16-9 { --gal-ar: 16 / 9; } .gal--ar-1-1 { --gal-ar: 1 / 1; } .gal--ar-4-5 { --gal-ar: 4 / 5; } .gal--ar-3-4 { --gal-ar: 3 / 4; } .gal--ar-2-3 { --gal-ar: 2 / 3; }
/* Treść wpisu: karta z wezwaniem. „obok” stoi po prawej stronie kolumny tekstu od 1600 px; „pod” jest pod treścią poniżej 1600 px; „zawsze” pod treścią na każdym ekranie */
.kartab { display: flex; flex-direction: column; gap: 1.6rem; padding: 3.2rem; border: 1px solid var(--primary); border-radius: calc(32px * var(--zaokr, 1)); }
.kartab__tytul { font-family: var(--font-head); font-size: 3rem; line-height: 1.3; color: var(--primary); }
.kartab__opis { font-size: 1.8rem; line-height: 1.5; }
.kartab .kartab__btns { flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-top: 0; }
.kartab--obok { display: none; }
.kartab--pod, .kartab--zawsze { margin-top: 4.8rem; }
@media (min-width: 1600px) {
  .kartab--pod { display: none; }
  .article--zkarta > .wrap { position: relative; }
  .kartab--obok { display: flex; position: absolute; top: 0; left: calc(100% - var(--gutter) + 4rem); width: 30rem; }
}
.article--dokument .rt { max-width: none; }
.article--dokument .rt :is(p, li) { font-size: 2rem; line-height: 1.6; }
/* Tabela */
.tabela__fig { margin-block: 0; }
.tabela__przewin { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela__przewin:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.tabela table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: 1.6rem; line-height: 1.5; }
.tabela :is(th, td) { padding: 1.2rem 1.6rem 1.2rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-weight: 400; }
.tabela thead th { font-weight: 700; border-bottom-width: 2px; border-bottom-color: currentColor; }
.tabela tbody th { font-weight: 700; }
.tabela__podpis { margin-top: 1.2rem; font-size: 1.4rem; color: var(--grey); }
/* Tekst z obrazem: nadtytuł wiersza */
.ti__nad { margin-bottom: 1.2rem; }
/* Krój akcentu ze Stylu (pole „Krój akcentu”): gdy ustawiony, wyróżnienia na stronie w motywie ciemnym piszą się tym krojem, bez pochylenia i wersalików */
@font-face { font-family: "Kaushan Script"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/KaushanScript-latin-ext.woff2) format("woff2"); unicode-range: U+0100-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Kaushan Script"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/KaushanScript-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; }
.mx--live .hl { font-family: var(--font-akcent, var(--font-head)); font-weight: var(--akcent-waga, 700); font-style: var(--akcent-styl, italic); text-transform: var(--akcent-litery, uppercase); transform: skewX(var(--akcent-skos, -8deg)); }
/* Motyw strony „białe tło” (klient.config.json → motywy, wartość „white”): cała strona na kolorze „Tło jasne, karty” zamiast „Tło strony” */
.mx--white { background: var(--white); }
/* Etykieta w ramce na stronie w motywie ciemnym: bez jasnego wypełnienia (napis był niewidoczny) */
.mx--live .tag { background: transparent; }

/* ——— 1.24.0 ——— */
/* Wstęp w układzie „etykieta z lewej, treść z prawej”; nadtytuł ze znakiem marki */
.intro__in--etykieta { display: grid; grid-template-columns: 38% minmax(0, 62%); align-items: start; }
.intro__etykieta { display: grid; gap: 1.2rem; padding-right: 2.4rem; margin-top: 1.3rem; }
.intro__glowna { display: flex; flex-direction: column; gap: 3.2rem; }
.intro__glowna .btns { margin-top: 0; }
.etykieta-znak { display: flex; align-items: flex-start; gap: 1rem; font-family: var(--font-head); font-weight: 300; font-size: 2.4rem; line-height: 1.2; letter-spacing: .06em; max-width: 34rem; }
.etykieta-znak .x-icon { flex: none; width: 2rem; height: 1.9rem; margin-top: .45rem; color: var(--primary); }
@media (max-width: 991px) {
  .intro__in--etykieta { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
  .intro__etykieta { margin-top: 0; padding-right: 0; }
  .etykieta-znak { font-size: 1.4rem; letter-spacing: 0; line-height: 1.5; align-items: center; }
  .etykieta-znak .x-icon { margin-top: 0; }
}
:is(.intro__etykieta, .intro__glowna):empty:not([data-puck-dropzone]) { display: none; }

/* Kroje ekranu Styl hostowane lokalnie (woff2, wagi 400 i 700, latin + latin-ext). Źródło: Google Fonts, licencje OFL. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/BricolageGrotesque-latin-ext.woff2) format("woff2"); unicode-range: U+0100-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: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/BricolageGrotesque-latin-400.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: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/DMSans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-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: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/DMSans-latin-400.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: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Fraunces-latin-ext.woff2) format("woff2"); unicode-range: U+0100-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: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Fraunces-latin-400.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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Inter-latin-400.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: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-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: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Manrope-latin-400.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; }

/* JetBrains Mono (liczby w „Szczegółach dla grafika”), lokalnie, licencja OFL */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/JetBrainsMono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-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: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/JetBrainsMono-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; }

/* Stopka: napis „©…” i linki w jednym wierszu (bez marginesu akapitu) */
.serwis-dol > p { margin: 0; }
/* Karta wpisu: kategoria i data w jednej linii (data się nie łamie), tytuły w rzędzie na tej samej wysokości */
.karta .karta__meta { white-space: nowrap; text-wrap-mode: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karta__meta time { white-space: nowrap; }

/* Otwarcie wpisu i realizacji przy każdej gęstości (też „Zwarte”): link „← Wszystkie…” ma ujemny margines (tekst linku w jednej linii z polem
   kliknięcia 48 px), więc sekcja dostaje u góry co najmniej --space-40 + to wcięcie — treść zaczyna się nie bliżej niż --space-40 od krawędzi. */
:root { --powrot-wciecie: 1.4rem; }
.phero > .wrap--blog > .phero__powrot, .chero .chero__txt > .phero__powrot { margin-block: calc(-1 * var(--powrot-wciecie)); }
.mot > .blk.phero, .mot > .blk.chero { padding-top: max(var(--section-pad, var(--space-60)), calc(var(--space-40) + var(--powrot-wciecie))); }
:is(.mot--jasna:has(> .blk) + .mot--jasna, .mot--karta:has(> .blk) + .mot--karta, .mot--ciemna:has(> .blk) + .mot--ciemna, .mot--akcent:has(> .blk) + .mot--akcent) > .blk:is(.phero, .chero) { padding-top: calc(var(--space-40) + var(--powrot-wciecie)); }

/* ——— A-6: motyw strony „Ciemny” razem z motywami sekcji ——— */
/* W ciemnym motywie strony sekcje jasne i kartowe dostają motyw „ciemna” (puck/config.tsx, OslonaSekcji), więc tło, tekst, przyciski
   i linki biorą kolory z .mot--ciemna. Dawne reguły .mx--live pisały jasnym kolorem tła (--bg) po ciemnym; w sekcji z motywem --bg jest
   kolorem tła sekcji, więc napisy biorą kolor tekstu motywu, a wyróżnienie na pasku akcentu — kolor napisu na akcencie. */
html:has(.mx--live), body:has(.mx--live) { background: var(--dark); }
.mx--live .mot :is(.hdr__nav a, .intro__body, .ctac__body, .card) { color: var(--text); }
.mx--live .mot .hdr__mob summary span { color: var(--text); background: var(--text); }
.mx--live .mot .tag { color: var(--text); border-color: var(--text); }
.mx--live .mot .btn--outline { background: transparent; color: var(--text); border-color: var(--text); }
.mx--live .mot .hl { color: var(--naAkcencie, var(--dark)); background: var(--secondary); }
.mx--live .mot .post { color: var(--naAkcencie, var(--dark)); }
.mx--live .mot .post .tag { color: var(--naAkcencie, var(--dark)); border-color: currentColor; }
.mx--live .mot .post .btn { background: var(--dark); border-color: var(--dark); color: var(--secondary); }

/* ——— K1 (A-6, 20.10): na stronie w ciemnym motywie nagłówek serwisu, menu, stopka i baner cookies leżą poza sekcjami,
   więc biorą te same kolory co sekcja „ciemna” (bez tego ciemny tekst stał na ciemnym tle, ok. 1,3:1). ——— */
body:has(main .mx--ciemny) > :is(.serwis-gora, .serwis-dol, .zgody) {
  --bg: var(--dark); --white: color-mix(in srgb, var(--naCiemnym) 8%, var(--dark)); --text: var(--naCiemnym); --primary: var(--primaryJasny);
  --line: color-mix(in srgb, var(--naCiemnym) 24%, transparent); color: var(--naCiemnym);
}
body:has(main .mx--ciemny) > :is(.serwis-gora, .serwis-dol) { background: var(--dark); }
body:has(main .mx--ciemny) > :is(.serwis-gora, .serwis-dol) :is(a, p, li, span) { color: var(--naCiemnym); }
body:has(main .mx--ciemny) > :is(.serwis-gora, .serwis-dol) a:is(:hover, [aria-current="page"]) { color: var(--primaryJasny); }
body:has(main .mx--ciemny) > .zgody .zgody__in { background: color-mix(in srgb, var(--naCiemnym) 8%, var(--dark)); color: var(--naCiemnym); border-color: color-mix(in srgb, var(--naCiemnym) 30%, transparent); }

/* A-6 cz. 2 (22.10): nowe elementy — lista numerowana, cytat, plik do pobrania, godziny otwarcia, akordeon. Tylko tokeny; motyw sekcji przestawia kolory sam. */
.lista__nr { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--primary); color: var(--bg); font-size: 1.4rem; font-weight: 600; line-height: 1; }
.el-cytat { margin: 0; display: grid; gap: var(--space-20); }
.el-cytat__tekst { margin: 0; font-size: var(--fs-opis); line-height: 1.5; display: grid; gap: var(--space-20); }
.el-cytat--kreska { border-left: 3px solid var(--primary); padding-left: var(--space-20); }
.el-cytat--duzy { text-align: center; justify-items: center; }
.el-cytat--duzy .el-cytat__tekst { font-size: clamp(2rem, 1.6rem + 1vw, 2.8rem); line-height: 1.4; max-width: 40ch; }
.el-cytat__podpis { font-size: var(--fs-body, 1.6rem); color: var(--grey); }
.el-cytat__podpis::before { content: "— "; }
.el-plik { display: inline-flex; align-items: center; gap: 1.2rem; min-height: 48px; padding: 1rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; max-width: 100%; }
.el-plik:hover .el-plik__nazwa { text-decoration: underline; text-decoration-thickness: 2px; }
.el-plik:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.el-plik__ikona { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; color: var(--primary); }
.el-plik__txt { display: grid; min-width: 0; }
.el-plik__nazwa { font-size: var(--fs-body, 1.6rem); font-weight: 600; overflow-wrap: anywhere; }
.el-plik__opis { font-size: 1.4rem; color: var(--grey); }
.el-godziny { display: grid; gap: 1.2rem; }
.el-godziny__lista { margin: 0; display: grid; }
.el-godziny__rzad { display: flex; justify-content: space-between; gap: var(--space-20); padding-block: 1rem; border-bottom: 1px solid var(--line); font-size: var(--fs-body, 1.6rem); }
.el-godziny__rzad dt { font-weight: 600; }
.el-godziny__rzad dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.el-godziny__notka { margin: 0; font-size: 1.4rem; color: var(--grey); }
.el-godziny__tekst { margin: 0; font-size: var(--fs-body, 1.6rem); }
.el-akordeon { min-width: 0; }
.el-kontakt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.el-kontakt--rzad { flex-flow: row wrap; column-gap: var(--space-40, 3.2rem); }
@media (max-width: 767px) { .el-kontakt--rzad { flex-direction: column; } }
.el-kontakt :is(a, .el-kontakt__adres) { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; color: inherit; font-size: var(--fs-body, 1.6rem); overflow-wrap: anywhere; }
.el-kontakt a { text-decoration: underline; text-underline-offset: 3px; }
.el-kontakt a:hover { text-decoration-thickness: 2px; }
.el-kontakt__ikona { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; color: var(--primary); }
.el-galeria { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-20, 1.6rem); grid-template-columns: repeat(var(--el-gal-k, 3), minmax(0, 1fr)); }
.el-galeria--k2 { --el-gal-k: 2; } .el-galeria--k3 { --el-gal-k: 3; } .el-galeria--k4 { --el-gal-k: 4; }
@media (max-width: 991px) { .el-galeria--k3, .el-galeria--k4 { --el-gal-k: 2; } }
@media (max-width: 479px) { .el-galeria { --el-gal-k: 1; } .el-galeria--k4 { --el-gal-k: 2; } }
.el-galeria__it { margin: 0; display: grid; gap: 0.8rem; }
.el-galeria__it img { width: 100%; height: auto; aspect-ratio: var(--el-gal-ar, 4 / 3); object-fit: cover; border-radius: var(--radius); display: block; }
.el-galeria__it figcaption { font-size: 1.4rem; color: var(--grey); }
.el-logo { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.el-logo img, .el-logo .logo-atrapa { height: var(--el-logo-h, 3.2rem); min-height: 0; width: auto; max-width: 100%; }
.el-logo--s { --el-logo-h: 2.4rem; } .el-logo--m { --el-logo-h: 3.2rem; } .el-logo--l { --el-logo-h: 4.8rem; }
.el-logo .logo-marki__plik { height: var(--el-logo-h, 3.2rem); }

/* ===== Style Guide, runda C (wdrozenie-c.md, część 4): opcje z atrybutów <html> (atrybutyStylu w style/tokeny.ts) =====
   Przy ustawieniach startowych (light, none, flat, off) żadna reguła poniżej nie pasuje: istniejące strony wyglądają jak dziś. */

/* Wersja ciemna strony (tryb „Ciemna” na stałe albo „Oba” z przełącznikiem): jasne zmienne Stylu biorą wartości z ciemnych.
   html[...] jest mocniejsze niż :root ze zmiennych strony, więc kolejność arkuszy nie gra roli. Ciemny pas jest o stopień jaśniejszy. */
html[data-s-scheme="dark"] {
  color-scheme: dark;
  --s-bg: var(--d-bg); --s-fill: var(--d-fill); --s-stroke-weak: var(--d-stroke-weak); --s-stroke: var(--d-stroke);
  --s-text: var(--d-text); --s-text-weak: var(--d-text-weak);
  --s-brand: var(--d-brand); --s-on-brand: var(--d-on-brand); --s-link: var(--d-brand); --s-brand-stroke: var(--d-brand);
  --s-brand-fill: var(--d-brand-fill); --s-brand-fill-2: var(--d-brand-fill-2); --s-brand-hover: var(--d-brand-hover); --s-brand-press: var(--d-brand-press);
  --s-focus: var(--d-brand); --s-error: var(--d-error); --s-warning: var(--d-warning); --s-success: var(--d-success);
  --s-shadow: var(--d-shadow); --s-shadow-hover: var(--d-shadow-hover); --s-lift: var(--d-lift); --s-glow-btn: var(--d-glow-btn);
  --s-glow-top: var(--d-glow-top); --s-glow-card: var(--d-glow-card); --s-grad-sec: var(--d-grad-sec); --s-grad-band: var(--d-grad-band);
  --dark: var(--d-fill);
}
html[data-s-scheme="dark"] .mot--ciemna { --white: var(--d-raised); }
/* stopka w sekcji jasnej albo kartowej ma w wersji ciemnej ciemne tło, więc też logo na ciemne tło (reguła z :is(.mot--jasna, …) > .ftr wyżej jest mocniejsza) */
html[data-s-scheme="dark"] .logo-marki__plik, html[data-s-scheme="dark"] :is(.mot--jasna, .mot--karta) > .ftr .logo-marki__plik { background-image: var(--logo-ciemne, var(--logo-jasne)); }

/* Przełącznik jasna/ciemna (tryb „Oba”): w nagłówku, 48 × 48 px; gdy nagłówka nie ma (strona bez menu albo własny nagłówek w treści) — w rogu ekranu */
.s-tryb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); cursor: pointer; }
.s-tryb:hover { border-color: var(--text); }
.s-tryb:focus-visible { outline: 2px solid var(--s-focus, var(--text)); outline-offset: 2px; }
.s-tryb--plywa { position: fixed; right: 16px; bottom: 16px; z-index: 60; box-shadow: var(--s-shadow-hover, 0 4px 12px rgb(0 0 0 / .16)); }
.s-tryb__ksiezyc, html[data-s-scheme="dark"] .s-tryb__slonce { display: none; }
html[data-s-scheme="dark"] .s-tryb__ksiezyc { display: block; }

/* Poświata: za obrazem otwarcia strony i w prawym górnym rogu wyróżnionej karty, zawsze pod treścią (z-index: -1 w izolowanym elemencie) */
html:is([data-s-glow="top"], [data-s-glow="both"]) .hero__img { position: relative; isolation: isolate; }
html:is([data-s-glow="top"], [data-s-glow="both"]) .hero__img::before { content: ""; position: absolute; inset: -16% -12% -16% 0; z-index: -1; background: var(--s-glow-top); pointer-events: none; }
html:is([data-s-glow="card"], [data-s-glow="both"]) .cennik__pakiet--polecany { position: relative; isolation: isolate; overflow: hidden; }
html:is([data-s-glow="card"], [data-s-glow="both"]) .cennik__pakiet--polecany::before { content: ""; position: absolute; right: -40%; top: -60%; width: 100%; height: 120%; z-index: -1; background: var(--s-glow-card); pointer-events: none; }
html[data-s-glow] .mot--ciemna :is(.hero__img, .cennik__pakiet--polecany)::before { background: var(--d-glow-top); }

/* Przejścia kolorów: „Łagodne” — sekcje jasne od tła strony do tła kart (z góry na dół); „W kolorze marki” — ciemne pasy pod kątem 135° */
html[data-s-grad="soft"] main .blkh:not(.blkh .blkh, .mot--ciemna, .mot--akcent, .mot--karta, .mot--ciemna .blkh, .mx--ciemny .blkh) { background-image: var(--s-grad-sec); }
html[data-s-grad="soft"] .mot--jasna:not(.blkh .blkh) > * { background-image: var(--s-grad-sec); }
html[data-s-grad="brand"] .mot--ciemna > * { background-image: var(--s-grad-band); }
html[data-s-grad="brand"] .mot--ciemna > .band:not(.band--bez) { background-image: var(--s-grad-band); }

/* Drugi przycisk szklany: tylko na ciemnym tle i na zdjęciu (na jasnym zostaje zwykły z ramką). Zdjęcie w obrazie otwarcia ma przyciemnienie 70%+. */
html[data-s-glass="on"] :is(.mot--ciemna, .hero--tlo, .mx--ciemny, .ftr) :is(.btn--outline, .btn--ghost),
html[data-s-glass="on"][data-s-scheme="dark"] :is(.btn--outline, .btn--ghost) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .10)); border: 1px solid rgba(255, 255, 255, .55); color: #ffffff;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 8px 24px rgba(0, 0, 0, .25);
}
html[data-s-glass="on"] :is(.mot--ciemna, .hero--tlo, .mx--ciemny, .ftr) :is(.btn--outline, .btn--ghost):hover,
html[data-s-glass="on"][data-s-scheme="dark"] :is(.btn--outline, .btn--ghost):hover { filter: none; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .14)); }

/* Przycisk zablokowany: „Szary” — tło kart, tekst pomocniczy, cienka ramka; „Wyblakły” — 40% krycia. Bez najechania i ruchu. */
html[data-s-disabled="grey"] .btn:is(:disabled, [aria-disabled="true"]) { background: var(--s-fill) !important; color: var(--s-text-weak) !important; border-color: var(--s-stroke-weak) !important; }
html[data-s-disabled="faded"] .btn:is(:disabled, [aria-disabled="true"]) { opacity: .4; }
html[data-s-disabled] .btn:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; filter: none !important; box-shadow: none !important; transform: none !important; text-decoration: none !important; }

/* Pojawianie przy przewijaniu: klasę .rv daje dopiero klocki.js (html.js), i to tylko sekcjom poniżej okna przy wczytaniu — bez JS
   i nad zgięciem wszystko widać od razu (LCP). Kolejne sekcje co 90 ms. Ograniczenie ruchu w systemie = widoczne bez animacji. */
html.js[data-s-reveal="fade"] .rv, html.js[data-s-reveal="slide"] .rv { opacity: 0; transition: opacity var(--s-rv, 450ms) var(--s-ease, ease) calc(var(--i, 0) * 90ms), transform var(--s-rv, 450ms) var(--s-ease, ease) calc(var(--i, 0) * 90ms); }
html.js[data-s-reveal="slide"] .rv { transform: translateY(24px); }
html.js[data-s-reveal] .rv.rv--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1 !important; transform: none !important; transition-duration: 0s !important; } }
@media print { html.js .rv { opacity: 1 !important; transform: none !important; } }

/* ───────── B6 (27.10): „Wygląd” formularza z panelu (Forms → Wygląd). Klasy na sekcji „Formularz kontaktowy”:
   form--u-obok (dotychczasowy wygląd, bez zmian), form--u-prosty, form--u-dwie, form--u-karta; form--duze = „Duże” pola.
   Kolory, kroje, promień i przyciski tylko z tokenów Style Guide (działa w wersji jasnej, ciemnej i w motywach sekcji). ───────── */
.form:is(.form--u-prosty, .form--u-dwie, .form--u-karta) .form__box { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: var(--space-40, 4rem); margin-inline: auto; }
.form:is(.form--u-prosty, .form--u-dwie, .form--u-karta) .form__box > * { grid-column: 1 / -1; }
.form:is(.form--u-prosty, .form--u-dwie, .form--u-karta) .form__info { max-width: 64rem; }
.form.form--u-prosty .form__box { max-width: 64rem; }
.form.form--u-dwie .form__box { max-width: 88rem; }
.form.form--u-karta .form__box { max-width: 72rem; row-gap: var(--space-40, 4rem); }
/* Karta: tło karty i linia ze Style Guide (w wersji ciemnej --white i --line to odcienie ciemnego tła) */
.form.form--u-karta .form__box, .mot > .form.form--u-karta .form__box {
  background: var(--white); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--karta-pad, 2.4rem); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px rgb(0 0 0 / .06);
}
@media (min-width: 768px) { .form.form--u-karta .form__box, .mot > .form.form--u-karta .form__box { padding: calc(var(--karta-pad, 3.2rem) * 1.5); } }
.form.form--u-karta .form__title { font-size: var(--fs-h3); line-height: 1.2; }
.form.form--u-karta .form__info { gap: 1.2rem; }
/* Duże pola: wyższe pola i większe napisy (łatwiej trafić palcem); przycisk tej samej wysokości */
.form--duze .form__f :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select) { min-height: 56px; padding: 1.4rem 2rem; font-size: 1.8rem; }
.form--duze .form__f textarea { padding: 1.4rem 2rem; font-size: 1.8rem; }
.form--duze .form__f input[type=file] { min-height: 56px; font-size: 1.8rem; }
.form--duze .form__lbl { font-size: 1.8rem; }
.form--duze .form__f { gap: 2.4rem; }
.form--duze .form__f button[type=submit] { min-height: 56px; font-size: 1.8rem; padding-inline: 3.2rem; }
/* ——— B5 (27.10): Footer z elementami jak widgety w WordPressie (klocki/stopka-widzety.tsx). Ten sam HTML na stronie, w Editorze i w podglądzie
   na ekranie Footer. Kolumny obok siebie od 768 px (3 i 4 kolumny: od 768 px po dwie, od 992 px wszystkie), węziej jedna pod drugą. ——— */
.serwis-dol.sdol { display: block; }
.sdol__kolumny { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-40); padding-bottom: var(--space-40); }
@media (min-width: 768px) {
  .sdol:is([data-uklad="2"], [data-uklad="3"], [data-uklad="4"]) .sdol__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdol:is([data-uklad="2-szeroka"], [data-uklad="3-szeroka"]) .sdol__kolumny { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .sdol[data-uklad="3-szeroka"] .sdol__kol:first-child { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .sdol[data-uklad="3"] .sdol__kolumny { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sdol[data-uklad="3-szeroka"] .sdol__kolumny { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .sdol[data-uklad="3-szeroka"] .sdol__kol:first-child { grid-column: auto; }
  .sdol[data-uklad="4"] .sdol__kolumny { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sdol__kol { display: grid; align-content: start; gap: var(--space-40); min-width: 0; }
.sdol__el { min-width: 0; }
.sdol__tytul { margin: 0 0 0.8rem; font-size: var(--t-small); line-height: 1.4; font-weight: 700; color: var(--text); }
.sdol__el p { margin: 0 0 0.8em; }
.sdol__el p:last-child { margin-bottom: 0; }
.sdol__el :is(.sdol__linki, .sdol__dane, .sdol__social) { list-style: none; margin: 0; padding: 0; }
.sdol__linki { display: grid; }
.sdol__dane { display: grid; gap: 4px; }
.sdol__dane li { min-height: 48px; display: flex; align-items: center; }
.sdol__dane address { font-style: normal; padding-block: 12px; }
.sdol__social { display: flex; flex-wrap: wrap; gap: 8px; }
.serwis-dol .sdol__social a { width: 48px; justify-content: center; }
.sdol__social svg { width: 24px; height: 24px; }
.sdol__godziny { margin: 0; display: grid; gap: 4px; }
.sdol__godziny > div { display: flex; justify-content: space-between; gap: 16px; }
.sdol__godziny :is(dt, dd) { margin: 0; }
.sdol__uwaga { margin-top: 0.8rem; }
.sdol__logo { display: grid; gap: 1.2rem; justify-items: start; }
.sdol__logo img { display: block; height: auto; width: auto; max-height: 3rem; max-width: min(16rem, 60vw); }
.sdol__logo .sdol__logo-ciemne { display: none; }
:is(html[data-s-scheme="dark"] .sdol, body:has(main .mx--ciemny) > .sdol, .ef-serwis--ciemny > .sdol) .sdol__logo-link:has(.sdol__logo-ciemne) .sdol__logo-jasne { display: none; }
:is(html[data-s-scheme="dark"] .sdol, body:has(main .mx--ciemny) > .sdol, .ef-serwis--ciemny > .sdol) .sdol__logo-link .sdol__logo-ciemne { display: block; }
.sdol__marka { font-size: var(--t-body); font-weight: 700; color: var(--text); }
.sdol__form .form__f { gap: 1.2rem; }
.sdol__brak { margin: 0; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.sdol__pasek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-20); }
.sdol__kolumny + .sdol__pasek { border-top: 1px solid var(--line); padding-top: var(--space-20); }
.sdol__pasek > p { margin: 0; }
.sdol__pasek ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
/* B3 (27.10): Mapa dojazdu — zasłona z adresem tej samej wysokości co mapa (bez skoku układu po kliknięciu); ramka mapy dopiero po „Pokaż mapę” (klocki.js) */
.el-mapa { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem 2.4rem; min-width: 0; }
.el-mapa__okno { grid-column: 1 / -1; }
.el-mapa__okno { position: relative; height: var(--el-mapa-h, 36rem); max-height: 75vh; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg, #fff));
  background-image: linear-gradient(color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
  background-size: 4rem 4rem; }
.el-mapa--mala { --el-mapa-h: 24rem; } .el-mapa--srednia { --el-mapa-h: 36rem; } .el-mapa--duza { --el-mapa-h: 48rem; }
@media (max-width: 767px) { .el-mapa--duza { --el-mapa-h: 40rem; } .el-mapa--srednia { --el-mapa-h: 32rem; } }
.el-mapa__zaslona { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; text-align: center; color: inherit; }
.el-mapa__pinezka { width: 3.6rem; height: 3.6rem; color: var(--primary); }
.el-mapa__adres { margin: 0; font-size: var(--fs-body, 1.6rem); font-weight: 600; max-width: 40ch; overflow-wrap: anywhere; }
.el-mapa__pokaz { min-height: 48px; }
.el-mapa__pokaz[disabled] { opacity: .7; cursor: progress; }
.el-mapa__uwaga { margin: 0; font-size: 1.4rem; color: var(--grey); max-width: 44ch; }
.el-mapa--mala .el-mapa__zaslona { gap: .8rem; padding: 1.2rem; } .el-mapa--mala .el-mapa__pinezka { width: 2.4rem; height: 2.4rem; }
.el-mapa__ramka { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.el-mapa__dol { grid-column: 2; grid-row: 2; margin: 0; }
.el-mapa__podpis { grid-column: 1; grid-row: 2; align-self: center; font-size: 1.4rem; color: var(--grey); }
@media (max-width: 479px) { .el-mapa { grid-template-columns: minmax(0, 1fr); } .el-mapa__dol, .el-mapa__podpis { grid-column: 1; grid-row: auto; } }
.el-mapa__link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.el-mapa__link:hover { text-decoration-thickness: 2px; }
.el-mapa__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 1.6rem; }
.el-mapa__zrodlo { font-size: 1.3rem; color: var(--grey); }
.el-mapa__zrodlo a { color: inherit; }
/* bez współrzędnych: sam adres i link do Map Google */
.el-mapa--bez { grid-template-columns: minmax(0, 1fr); }
.el-mapa__adresowka { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; padding: 1.6rem 2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.el-mapa--bez .el-mapa__pinezka { width: 2.4rem; height: 2.4rem; }
.el-mapa--bez .el-mapa__podpis { grid-column: 1; grid-row: auto; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════
   C3 (28.10): sześć nowych sekcji — Oś czasu, Porównanie, Pasek ogłoszenia, Wydarzenia, Oferty pracy, Produkty (klocki/c3-sekcje.tsx).
   Tylko tokeny strony (kolory motywu sekcji, --section-pad, --gap, --nag-odstep, --radius, skala pisma). Najpierw telefon;
   od 360 px nic nie wystaje w bok (min-width: 0, przewijanie tylko w torach z tabIndex), przyciski i ikony ≥ 48 px.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ——— Wspólne ——— */
:is(.os__nag, .porown__nag, .wyd__nag, .praca__nag, .prod__nag) { margin-bottom: var(--nag-odstep); }
:is(.os__btns, .porown__btns, .wyd__btns, .praca__btns, .prod__btns) { margin-top: var(--space-40); }
:is(.wyd__btn, .praca__btn, .prod__btn, .ogl__btn) { max-width: 100%; white-space: normal; text-align: center; }
:is(.os, .porown, .wyd, .praca, .prod) :is(ol, ul, li, figure, dl, dd) { min-width: 0; }
.c3-minione { opacity: .6; }
/* karta nowych sekcji — wygląd jak element „Karta”, bez reguł dawnej .karta (np. szary drobny tekst każdego <p>) */
.c3-karta { display: grid; gap: calc(1.6rem * var(--g, 1)); align-content: start; padding: calc(3.2rem * var(--g, 1)); border-radius: var(--radius); background: var(--white); color: var(--text); border: 1px solid transparent; }
.c3-karta--ramka { border-color: var(--line); }
.c3-karta--plaska { background: color-mix(in srgb, var(--primary) 6%, var(--white)); }
.c3-uwaga, .wyd__minelo { display: block; margin: .8rem 0 0; font-size: 1.4rem; line-height: 1.4; color: var(--text); font-style: italic; }

/* ——— 1. Oś czasu ——— */
.os__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-40); }
.os__etykieta { margin: 0 0 .4rem; font-size: 1.4rem; line-height: 1.4; font-weight: 600; color: var(--primary); }
.os__tytul { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
.os__opis { margin-top: .6rem; font-size: var(--fs-body); line-height: 1.6; color: var(--grey); display: grid; gap: .8rem; max-width: 60ch; }
/* A: pionowa linia z kropkami; na komputerze nagłówek z lewej, oś z prawej */
.os--pionowa .os__lista { gap: var(--space-40); padding-left: 2.8rem; border-left: 2px solid var(--line); }
.os--pionowa .os__txt { position: relative; }
.os__znak { position: absolute; left: calc(-2.8rem - 1px); top: .3rem; width: 1.6rem; height: 1.6rem; transform: translateX(-50%); border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--bg); }
.os__krok--ostatni .os__znak { background: var(--text); }
@media (min-width: 992px) {
  .os--pionowa .os__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nag lista" "btns lista"; column-gap: var(--space-100); align-items: start; }
  .os--pionowa .os__nag { grid-area: nag; margin-bottom: 0; }
  .os--pionowa .os__lista { grid-area: lista; }
  .os--pionowa .os__btns { grid-area: btns; align-self: start; }
}
/* B: kroki w poziomie (na telefonie jeden pod drugim) */
.os--kroki .os__lista { gap: var(--space-40) var(--gap); }
.os__nr { display: inline-grid; place-items: center; width: 4.8rem; height: 4.8rem; margin-bottom: 1.6rem; border-radius: 50%; background: var(--primary); color: var(--bg); font-weight: 700; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .os--kroki .os__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .os--kroki .os__lista { grid-template-columns: repeat(var(--os-kol, 4), minmax(0, 1fr)); padding-top: var(--space-40); border-top: 2px solid var(--line); }
  .os--kroki .os__lista--n2 { --os-kol: 2; } .os--kroki .os__lista--n3 { --os-kol: 3; }
}
/* C: na przemian zdjęcie i tekst */
.os--zdjecia .os__krok { display: grid; gap: var(--space-20); align-items: center; }
.os__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.os__foto:empty { display: none; }
.os--zdjecia .os__tytul { font-size: var(--fs-h3); }
@media (min-width: 768px) {
  .os--zdjecia .os__krok { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-60); }
  .os--zdjecia .os__krok:nth-child(even) .os__foto { order: 2; }
  .os--zdjecia .os__krok:has(.os__foto:empty) { grid-template-columns: minmax(0, 1fr); }
}

/* ——— 2. Porównanie ——— */
/* A: tabela pakietów (od 768 px) i karty pakietów (telefon) — ta sama treść, widać jedną wersję */
.porown__tabela { display: none; }
.porown__karty { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.porown__karta { gap: 1.6rem; }
.porown__karta--wyr { border: 2px solid var(--primary); }
.porown__karta-gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.porown__nazwa { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; }
.porown__cechy { margin: 0; display: grid; }
.porown__cecha { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; padding-block: 1.2rem; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.5; }
.porown__cecha dt { color: var(--text); }
.porown__cecha dd { margin: 0; text-align: right; font-weight: 600; flex: none; max-width: 50%; }
.porown__tak { display: inline-flex; color: var(--primary); }
.porown__tak svg { width: 2.4rem; height: 2.4rem; }
.porown__nie { color: var(--grey); }
.porown__notka { margin-top: 1.6rem; font-size: 1.4rem; line-height: 1.5; color: var(--grey); }
@media (min-width: 768px) {
  .porown__karty { display: none; }
  .porown__tabela { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
  .porown__tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
  .porown__tabela :is(th, td) { padding: 1.4rem 2rem; text-align: center; vertical-align: middle; border-top: 1px solid var(--line); }
  .porown__tabela thead th { border-top: 0; font-weight: 600; background: color-mix(in srgb, var(--primary) 6%, var(--white)); }
  .porown__tabela :is(thead th:first-child, tbody th) { text-align: left; font-weight: 400; }
  .porown__tabela thead th:first-child { font-weight: 600; }
  .porown__tabela tbody tr:last-child { font-weight: 600; }
  .porown__tabela .porown__wyr { background: color-mix(in srgb, var(--primary) 8%, var(--white)); }
  .porown__tabela thead .porown__wyr { background: var(--primary); color: var(--bg); }
  .porown__tabela thead .porown__wyr .porown__etyk { background: var(--bg); color: var(--text); border-color: var(--bg); }
  .porown__pakiet { display: block; }
  .porown__etyk { margin-top: .6rem; }
}
/* B: przed i po — bez skryptu dwa zdjęcia obok siebie; klocki.js nakłada je na siebie i dokłada suwak (input range) */
.porown__pp { display: grid; gap: var(--gap); }
@media (min-width: 600px) { .porown__pp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.porown__fot { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; }
.porown__fot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.porown__podpis { position: absolute; top: 1.2rem; left: 1.2rem; padding: .4rem 1.2rem; border-radius: var(--btn-r, 999px); background: var(--white); color: var(--text); font-size: 1.4rem; font-weight: 600; line-height: 1.4; }
.porown__pp--suwak { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: var(--radius); overflow: hidden; --p: 50; --pk: calc(2.4rem + (100% - 4.8rem) * var(--p) / 100); }
.porown__pp--suwak > .porown__fot { grid-area: 1 / 1; border-radius: 0; }
.porown__pp--suwak .porown__fot--po { clip-path: inset(0 0 0 var(--pk)); }
.porown__pp--suwak .porown__fot--po .porown__podpis { left: auto; right: 1.2rem; }
.porown__pp--suwak::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pk); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; }
/* suwak: pas wysokości uchwytu na środku zdjęć (uchwyt 48 px, strzałki ← →); klawiatura: strzałki, Home, End */
.porown__suwak { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; width: 100%; height: 4.8rem; margin: -2.4rem 0 0; padding: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.porown__suwak::-webkit-slider-runnable-track { height: 4.8rem; background: transparent; }
.porown__suwak::-moz-range-track { height: 4.8rem; background: transparent; }
.porown__suwak::-webkit-slider-thumb { -webkit-appearance: none; width: 4.8rem; height: 4.8rem; border-radius: 50%; border: 2px solid var(--text); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 2.4rem no-repeat; box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 30%, transparent); }
.porown__suwak::-moz-range-thumb { box-sizing: border-box; width: 4.8rem; height: 4.8rem; border-radius: 50%; border: 2px solid var(--text); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 2.4rem no-repeat; box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 30%, transparent); }
.porown__suwak:focus-visible { outline: none; }
.porown__suwak:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--primary); outline-offset: 2px; }
.porown__suwak:focus-visible::-moz-range-thumb { outline: 3px solid var(--primary); outline-offset: 2px; }
/* C: my i zwykle */
.porown__my { display: grid; gap: var(--gap); align-items: stretch; }
@media (min-width: 768px) { .porown__my { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.porown__kol-tytul { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; }
.porown__kol--zwykle .porown__kol-tytul, .porown__zwykle li { color: var(--grey); }
.porown__zwykle .lista__ico { color: var(--grey); }
.porown__kol--my { border: 2px solid var(--primary); }
.porown__kol :is(.lista li) { font-size: var(--fs-body); }
.porown__kol .porown__btns { margin-top: var(--space-20); }

/* ——— 3. Pasek ogłoszenia ——— */
:where(.ogl--pasek) { background: var(--text); color: var(--bg); }
.ogl__in { display: flex; align-items: center; gap: .8rem; min-height: 4.8rem; padding-block: .4rem; }
.ogl--pasek .ogl__tekst { flex: 1; margin: 0; padding-left: 4.8rem; text-align: center; font-size: 1.5rem; line-height: 1.4; }
.ogl__link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; display: inline-flex; align-items: center; min-height: 4.4rem; }
.ogl__link:hover { text-decoration-thickness: 2px; }
.ogl__zamknij { flex: none; display: inline-grid; place-items: center; width: 4.8rem; height: 4.8rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.ogl__zamknij svg { width: 2.4rem; height: 2.4rem; }
.ogl__zamknij:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
@media (max-width: 599px) { .ogl--pasek .ogl__tekst { padding-left: 0; text-align: left; } }
.ogl--pasek .c3-uwaga { padding: 0 var(--gutter) .8rem; color: inherit; }
/* B: baner w treści */
.ogl__baner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20) var(--space-40); padding: var(--karta-pad); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 10%, var(--white)); color: var(--text); border: 1px solid var(--line); }
.ogl__ikona { flex: none; width: 3.2rem; height: 3.2rem; color: var(--primary); }
.ogl__tresc { flex: 1 1 28rem; min-width: 0; display: grid; gap: .4rem; }
.ogl__tytul { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; }
.ogl--baner .ogl__tekst, .ogl--okno .ogl__tekst { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.ogl--baner .ogl__tekst a, .ogl--okno .ogl__tekst a { color: inherit; text-decoration: underline; }
/* C: okienko w rogu — sekcja bez wysokości; na komputerze okienko pływa w prawym dolnym rogu, na telefonie stoi w miejscu sekcji */
.ogl--okno { padding: 0; }
.ogl__okno { display: grid; gap: 1.2rem; max-width: 40rem; padding: 2rem 2.4rem 2.4rem; border: 1px solid var(--line); box-shadow: var(--cien, 0 12px 32px color-mix(in srgb, var(--text) 18%, transparent)); }
.ogl__okno[hidden] { display: none; }
/* podglądy w Editorze (kafle „Dodaj → Sections”, „Podgląd strony”: ramka #ef-korzen) pokazują okienko w miejscu sekcji */
#ef-korzen .ogl__okno[hidden] { display: grid; margin: var(--space-40) var(--gutter); }
.ogl__okno-gora { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.ogl__okno-gora .ogl__zamknij { margin: -1.2rem -1.6rem 0 0; }
.ogl__okno .ogl__btn { justify-self: start; }
.ogl--okno:has(.ogl__okno:not([hidden]):not(.ogl__okno--plywa)) { padding-block: var(--space-40); }
.ogl--okno:has(.ogl__okno:not([hidden]):not(.ogl__okno--plywa)) .ogl__okno { margin-inline: var(--gutter); }
.ogl__okno--plywa { position: fixed; right: 1.6rem; bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); z-index: 40; width: min(36rem, calc(100vw - 3.2rem)); }
body:has(.s-tryb--plywa) .ogl__okno--plywa { bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) {
  .ogl__okno--plywa { animation: c3-wjazd .3s ease-out; }
  @keyframes c3-wjazd { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
}
.ogl--puste { padding: var(--space-20) 0; }

/* ——— 4. Wydarzenia ——— */
.wyd__pusto { font-size: var(--fs-body); line-height: 1.6; color: var(--grey); }
.wyd__nazwa { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
.wyd__meta { margin: .4rem 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--grey); }
.wyd__data, .wyd__etykieta { margin: 0; font-size: 1.4rem; line-height: 1.4; font-weight: 600; color: var(--primary); }
/* A: lista z kafelkiem daty */
.wyd__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.wyd__it { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: center; gap: 1.6rem 2.4rem; padding: 1.6rem 2rem; }
.wyd__kafel { margin: 0; display: grid; place-items: center; align-content: center; min-height: 7.2rem; padding: .8rem 0; border-radius: calc(var(--radius) * .75); background: color-mix(in srgb, var(--primary) 8%, var(--white)); color: var(--text); text-align: center; line-height: 1.1; }
.wyd__kafel--pierwszy { background: var(--primary); color: var(--bg); }
.wyd__dzien { display: block; font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wyd__mies { font-size: 1.4rem; }
.wyd__it .wyd__btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 768px) { .wyd__it { grid-template-columns: 7.2rem minmax(0, 1fr) auto; } .wyd__it .wyd__btn { grid-column: auto; } }
/* B: karty ze zdjęciem */
.wyd__karty { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }
.wyd__karta { padding: 0; overflow: hidden; gap: 0; align-content: start; }
.wyd__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0 !important; }
.wyd__karta-txt { display: grid; gap: .4rem; padding: 2rem; }
.wyd__karta .wyd__btn { justify-self: start; }
/* C: najbliższe wyróżnione, reszta obok */
.wyd__wyr { display: grid; gap: var(--space-40); align-items: start; }
@media (min-width: 992px) { .wyd__wyr { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-60); } }
.wyd__glowne { display: grid; gap: 1.2rem; justify-items: start; }
.wyd__glowne-nazwa { margin: 0; font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-h2); line-height: 1.2; }
.wyd__opis { font-size: var(--fs-body); line-height: 1.6; color: var(--text); display: grid; gap: .8rem; max-width: 60ch; }
.wyd__reszta { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wyd__reszta > li { padding-block: 1.2rem; border-bottom: 1px solid var(--line); }
.wyd__reszta-link { display: inline-flex; align-items: center; min-height: 4.4rem; margin: 0; font-weight: 600; font-size: var(--fs-body); color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
a.wyd__reszta-link:hover { text-decoration-color: currentColor; }

/* ——— 5. Oferty pracy ——— */
.praca__stanowisko { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
.praca__meta { display: block; margin-top: .4rem; font-size: 1.5rem; line-height: 1.4; color: var(--grey); font-weight: 400; }
.praca__opis { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--grey); }
/* A: lista rozwijana — wygląd i zachowanie jak FAQ (details/summary, działa bez JavaScriptu) */
.praca__glowa { display: block; min-width: 0; }
.praca__tresc { display: grid; gap: var(--space-20); padding-bottom: var(--space-40); }
.praca__bloki { display: grid; gap: var(--space-20) var(--space-40); }
@media (min-width: 768px) { .praca__bloki { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); } }
.praca__blok-tytul { margin: 0 0 .8rem; font-weight: 600; font-size: var(--fs-body); color: var(--text); }
.praca__blok .lista li { font-size: var(--fs-body); }
.praca__tresc .praca__btn { justify-self: start; }
/* B: karty z oznaczeniami + karta „Wyślij CV” */
.praca__karty { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }
.praca__karta { display: flex; flex-direction: column; gap: 1.2rem; }
.praca__karta .praca__opis { flex: 1; }
.praca__karta .praca__btn { align-self: flex-start; margin-top: auto; }
.praca__karta--cv { border: 1px dashed var(--grey); background: transparent; }
.praca__tagi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.praca__tagi .etyk { font-size: 1.3rem; }
/* C: zaproszenie z korzyściami */
.praca__zapr { display: grid; gap: var(--space-40); align-items: center; }
@media (min-width: 992px) { .praca__zapr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-60); } }
.praca__zapr .praca__nag { margin-bottom: 0; }
.praca__zapr .praca__btns { margin-top: var(--space-20); }
.praca__korzysci { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 480px) { .praca__korzysci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.praca__korzysc { gap: .4rem; padding: 1.6rem 2rem; }
.praca__korzysc-tytul { margin: 0; font-weight: 600; font-size: var(--fs-body); color: var(--text); }
.praca__korzysc-opis { margin: 0; font-size: 1.5rem; line-height: 1.5; color: var(--grey); }

/* ——— 6. Produkty ——— */
.prod__karta { display: flex; flex-direction: column; gap: .8rem; }
.prod__foto { position: relative; border-radius: var(--radius); overflow: hidden; background: color-mix(in srgb, var(--primary) 6%, var(--white)); aspect-ratio: 1 / 1; }
.prod__foto img { width: 100%; height: 100%; object-fit: cover; }
.prod__etyk { position: absolute; top: 1.2rem; left: 1.2rem; }
.prod__nazwa { margin: .4rem 0 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
.prod__cena { margin: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.prod__opis { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--grey); display: grid; gap: .8rem; }
.prod__karta .prod__btn { align-self: flex-start; margin-top: auto; }
/* A: siatka (telefon 1–2 kolumny, komputer do 4) */
.prod__siatka { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-40) var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
/* B: jeden produkt wyróżniony */
.prod__wyr { display: grid; gap: var(--space-40); align-items: center; }
@media (min-width: 768px) { .prod__wyr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-60); } }
.prod__wyr-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.prod__wyr-foto:empty { display: none; }
.prod__wyr-txt { display: grid; gap: 1.6rem; justify-items: start; }
.prod__wyr-etyk { margin: 0; font-size: 1.4rem; line-height: 1.4; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.prod__wyr-nazwa { margin: 0; font-family: var(--font-head); font-weight: var(--w-head, 300); font-size: var(--fs-h2); line-height: 1.2; }
.prod__wyr-txt .lista li { font-size: var(--fs-body); }
.prod__wyr-cena { margin: 0; font-family: var(--font-head); font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
/* C: pasek przewijany w bok — przewija się sam tor (z fokusem z klawiatury), strona nigdy */
.prod__gora { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem var(--gap); margin-bottom: var(--nag-odstep); }
.prod__gora .prod__nag { margin-bottom: 0; flex: 1 1 28rem; min-width: 0; }
.prod__strzalki { display: flex; gap: .8rem; }
.prod__strzalki[hidden] { display: none; }
.prod__strzalka { display: inline-grid; place-items: center; width: 4.8rem; height: 4.8rem; padding: 0; border-radius: 50%; border: 1px solid var(--text); background: transparent; color: var(--text); cursor: pointer; }
.prod__strzalka svg { width: 2.4rem; height: 2.4rem; }
.prod__strzalka:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.prod__strzalka[aria-disabled="true"] { opacity: .4; cursor: default; }
.prod__przewin { position: relative; /* tekst dla czytnika (.sr, absolute) w kartach poza ekranem nie rozpycha strony */ overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 1.2rem; border-radius: var(--radius); }
.prod__przewin:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.prod__pasek { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(26rem, 78%); gap: var(--gap); }
.prod__pasek > .prod__karta { scroll-snap-align: start; }
.prod__pasek .prod__foto { aspect-ratio: 4 / 3; }
@media (prefers-reduced-motion: no-preference) { .prod__przewin { scroll-behavior: smooth; } }

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════
   Noc 29.10: nowe układy Cennika, Opinii i FAQ (klocki/oferta.tsx) oraz siedem nowych sekcji (klocki/noc-sekcje.tsx):
   Zespół, Portfolio, Nagłówek podstrony, Karta produktu, Strona linków, Formularz w krokach, Formularz w oknie.
   Tylko tokeny strony (kolory motywu sekcji, --gap, --nag-odstep, --radius, --space-*, skala pisma). Najpierw telefon; nic nie wystaje w bok
   (min-width: 0, przewijanie tylko w torach z fokusem), przyciski i pola wyboru ≥ 48 px, fokus zawsze widoczny.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ——— Wspólne ——— */
:is(.zesp__nag, .port__nag) { margin-bottom: var(--nag-odstep); }
:is(.zesp__btns, .port__btns) { margin-top: var(--space-40); }
:is(.zesp, .port, .kp, .slink, .npod, .opinie, .cennik, .faq) :is(ol, ul, li, figure, dl, dd) { min-width: 0; }
/* atrybut hidden wygrywa z display przycisków i list (klocki.js zdejmuje go, gdy skrypt działa) */
:is(.tor__strzalki, .port__filtr, .port__it, .kp__miniatury, .form__kroki, .form__krok, .form__krok-nav > .btn, .okno__btn)[hidden] { display: none !important; }
:is(.tor__strzalka, .port__przycisk, .kp__mini, .okno__zamknij, .faq__spis-link, .slink__karta):focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* tor przewijany w bok (opinie w karuzeli) — strzałki jak w pasku produktów */
.tor__strzalki { display: flex; gap: .8rem; }
.tor__strzalka { display: inline-grid; place-items: center; width: 4.8rem; height: 4.8rem; padding: 0; border-radius: 50%; border: 1px solid var(--text); background: transparent; color: var(--text); cursor: pointer; }
.tor__strzalka svg { width: 2.4rem; height: 2.4rem; }
.tor__strzalka:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.tor__strzalka[aria-disabled="true"] { opacity: .4; cursor: default; }

/* ——— Cennik: przełącznik „co miesiąc / za rok” ——— */
.cennik__okresy { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--space-40); padding: .4rem; border: 1px solid var(--line); border-radius: var(--btn-r, 999px); background: var(--white); min-width: 0; max-width: 100%; }
.cennik__okresy--srodek { display: flex; width: fit-content; margin-inline: auto; }
.cennik__okres-opcja { position: relative; display: inline-flex; align-items: center; gap: .8rem; min-height: 4.8rem; padding: .4rem 2rem; border-radius: var(--btn-r, 999px); font-size: 1.6rem; line-height: 1.3; font-weight: 500; color: var(--text); cursor: pointer; }
.cennik__okres-opcja input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cennik__okres-opcja:has(input:checked) { background: var(--primary); color: var(--bg); }
.cennik__okres-opcja:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
.cennik__rabat { display: inline-flex; padding: .2rem 1rem; border-radius: var(--btn-r, 999px); background: color-mix(in srgb, var(--primary) 12%, var(--white)); color: var(--text); font-size: 1.3rem; font-weight: 600; white-space: nowrap; }
.cennik__okres-opcja:has(input:checked) .cennik__rabat { background: var(--bg); color: var(--text); }
.cennik__cena--rok { display: none; }
.cennik--przelacznik:has(input[value="rok"]:checked) .cennik__cena--mies { display: none; }
.cennik--przelacznik:has(input[value="rok"]:checked) .cennik__cena--rok { display: flex; }
/* ——— Cennik: tabela porównawcza (od 768 px), na telefonie karty pakietów ——— */
.cennik__tabela { display: none; }
.cennik__t-karty { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.cennik__t-cechy { margin: 0; display: grid; }
.cennik__t-cecha { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; padding-block: 1.2rem; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.5; }
.cennik__t-cecha dd { margin: 0; text-align: right; font-weight: 600; max-width: 50%; }
.cennik__t-karty .cennik__btn { width: 100%; }
@media (min-width: 768px) {
  .cennik__t-karty { display: none; }
  .cennik__tabela { display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
  .cennik__tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
  .cennik__tabela :is(th, td) { padding: 1.4rem 1.6rem; text-align: center; vertical-align: middle; border-top: 1px solid var(--line); }
  .cennik__tabela thead :is(th, td) { border-top: 0; vertical-align: bottom; padding-block: 2.4rem 2rem; }
  .cennik__tabela tbody th { text-align: left; font-weight: 400; }
  .cennik__tabela .cennik__t-wyr { background: color-mix(in srgb, var(--primary) 7%, var(--white)); }
  .cennik__t-glowa { display: grid; gap: 1rem; justify-items: center; }
  .cennik__t-nazwa { font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; }
  .cennik__t-cena { justify-content: center; }
  .cennik__tabela .cennik__kwota { font-size: var(--fs-md); }
  .cennik__tabela .cennik__btn { width: 100%; min-width: 0; margin-top: .4rem; }
  .cennik__tabela .cennik__etyk { justify-self: center; }
  .cennik__tabela thead .cennik__okres { font-weight: 400; }
}

/* ——— Opinie: karuzela i siatka z ocenami ——— */
.opinie__gora { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem var(--gap); margin-bottom: var(--nag-odstep); }
.opinie__gora .opinie__nag { margin-bottom: 0; flex: 1 1 28rem; min-width: 0; }
.opinie__przewin { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 1.2rem; border-radius: var(--radius); }
.opinie__przewin:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.opinie--karuzela .opinie__lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(42rem, 86%); max-width: none; margin: 0; }
.opinie--karuzela .opinie__lista > .opinia { scroll-snap-align: start; }
@media (prefers-reduced-motion: no-preference) { .opinie__przewin { scroll-behavior: smooth; } }
.opinie__srednia { display: flex; align-items: center; gap: 1.6rem; min-width: 0; }
.opinie__srednia-liczba { margin: 0; font-family: var(--font-head); font-size: var(--fs-xl); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.opinie__srednia-txt { display: grid; gap: .6rem; min-width: 0; }
.opinie__srednia-gw .opinia__gw { width: 2.4rem; height: 2.4rem; }
.opinie__srednia-opis { margin: 0; font-size: 1.5rem; line-height: 1.4; color: var(--grey); }
.opinie__zrodlo { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.opinie__zrodlo:hover { text-decoration-thickness: 2px; }
.opinie--oceny .opinie__lista { --kol: 3; }
@media (max-width: 991px) { .opinie--oceny .opinie__lista { --kol: 2; } }
@media (max-width: 767px) { .opinie--oceny .opinie__lista { --kol: 1; } }

/* ——— FAQ: pytania w dwóch kolumnach i w grupach ——— */
.faq__kolumny { display: grid; gap: 0 var(--space-60); align-items: start; }
@media (min-width: 992px) { .faq__kolumny { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 991px) { .faq__kolumny > .faq__lista + .faq__lista { border-top: 0; } }
.faq__spis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.faq__spis--srodek ul { justify-content: center; }
.faq__spis-link { display: inline-flex; align-items: center; min-height: 4.8rem; padding: .4rem 2rem; border: 1px solid var(--line); border-radius: var(--btn-r, 999px); background: var(--white); color: var(--text); font-size: 1.5rem; line-height: 1.3; font-weight: 500; }
.faq__spis-link:hover { border-color: var(--text); }
.faq__grupy { display: grid; gap: var(--space-60); max-width: 96rem; }
.faq__grupa { scroll-margin-top: 12rem; }
.faq__grupa-tytul { margin: 0 0 .8rem; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
.faq--kategorie .faq__btns { margin-top: 0; }

/* ——— 1. Zespół ——— */
.zesp__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-40) var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.zesp__os { display: grid; gap: 1.6rem; align-content: start; }
.zesp__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--primary) 8%, var(--white)); }
.zesp__foto img { width: 100%; height: 100%; object-fit: cover; }
.zesp__inicjaly { display: grid; place-items: center; height: 100%; font-family: var(--font-head); font-size: var(--fs-lg); color: var(--text); }
.zesp__txt { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.zesp__imie { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
.zesp__rola { margin: 0; font-size: 1.5rem; line-height: 1.4; font-weight: 500; color: var(--grey); }
.zesp__opis { margin: .4rem 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text); text-wrap: pretty; }
.zesp__linki { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.zesp__link { display: inline-grid; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 50%; border: 1px solid var(--line); color: var(--text); }
.zesp__link svg { width: 2rem; height: 2rem; }
.zesp__link:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.zesp__link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* małe okrągłe zdjęcia, wszystko na środku */
.zesp--okragle .zesp__lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); text-align: center; }
.zesp--okragle .zesp__foto { width: 14.4rem; aspect-ratio: 1; border-radius: 50%; margin-inline: auto; }
.zesp--okragle .zesp__linki { justify-content: center; }
/* zdjęcie obok opisu (na telefonie małe zdjęcie z lewej) */
.zesp--opis .zesp__lista { grid-template-columns: minmax(0, 1fr); }
.zesp--opis .zesp__os { grid-template-columns: 9.6rem minmax(0, 1fr); gap: 1.6rem 2rem; align-items: start; }
.zesp--opis .zesp__foto { aspect-ratio: 1; }
@media (min-width: 768px) {
  .zesp--opis .zesp__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zesp--opis .zesp__os { grid-template-columns: 14.4rem minmax(0, 1fr); }
}

/* ——— 2. Portfolio ——— */
.port__filtr { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: var(--space-40); }
.port__filtr--srodek { justify-content: center; }
.port__przycisk { display: inline-flex; align-items: center; min-height: 4.8rem; padding: .4rem 2rem; border-radius: var(--btn-r, 999px); border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 1.5rem; line-height: 1.3; font-weight: 500; cursor: pointer; }
.port__przycisk:hover { border-color: var(--text); }
.port__przycisk[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.port__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-40) var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }
.port__it { display: grid; gap: 1.2rem; align-content: start; }
.port__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--primary) 6%, var(--white)); }
.port__foto img { width: 100%; height: 100%; object-fit: cover; }
.port__foto:empty { display: none; }
.port__txt { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.port__kat { margin: 0; font-size: 1.4rem; line-height: 1.4; font-weight: 600; color: var(--grey); }
.port__tytul { margin: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: var(--text); }
.port__link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
.port__link:hover { text-decoration-color: currentColor; }
.port__link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.port__meta { margin: 0; font-size: 1.5rem; line-height: 1.4; color: var(--grey); }
.port__opis { margin: .4rem 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text); text-wrap: pretty; }
/* mozaika: pierwszy projekt większy (tablet: na całą szerokość; komputer: dwie kolumny i dwa rzędy), reszta w siatce bez opisu */
.port--mozaika .port__it:not(:first-child) .port__opis { display: none; }
@media (min-width: 768px) {
  .port--mozaika .port__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .port--mozaika .port__it:first-child { grid-column: 1 / -1; }
  .port--mozaika .port__it:first-child .port__foto { aspect-ratio: 16 / 9; }
  .port--mozaika .port__it:first-child .port__tytul { font-size: var(--fs-h3); }
}
@media (min-width: 992px) {
  .port--mozaika .port__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .port--mozaika .port__it:first-child { grid-column: span 2; grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto; }
  .port--mozaika .port__it:first-child .port__foto { aspect-ratio: auto; height: 100%; min-height: 32rem; }
}
/* lista: zdjęcie obok opisu */
.port--lista .port__lista { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .port--lista .port__it { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-40); align-items: center; } }

/* ——— 3. Nagłówek podstrony ——— */
.npod__in { display: grid; gap: var(--space-40); align-items: center; }
.npod__txt { display: grid; gap: 1.6rem; justify-items: start; max-width: 80rem; min-width: 0; }
.npod--srodek .npod__txt { justify-items: center; text-align: center; margin-inline: auto; }
.npod__sciezka ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.5rem; line-height: 1.4; color: var(--grey); }
.npod--srodek .npod__sciezka ol { justify-content: center; }
.npod__sciezka li { display: inline-flex; align-items: center; }
.npod__sciezka li + li::before { content: "/"; content: "/" / ""; margin-inline: .8rem; color: var(--grey); }
.npod__sciezka a { display: inline-block; padding-block: .8rem; color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; }
.npod__sciezka a:hover { text-decoration-color: currentColor; }
.npod__sciezka a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.npod__sciezka [aria-current] { color: var(--text); font-weight: 500; }
.npod__nad { margin: 0; }
.npod__tytul { margin: 0; line-height: 1.1; }
.npod__wstep { display: grid; gap: 1.2rem; max-width: 65ch; font-size: 1.8rem; line-height: 1.5; color: var(--text); }
.npod__btns { margin-top: .8rem; }
.npod--srodek .npod__btns { justify-content: center; }
.npod__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 992px) { .npod--obraz .npod__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-60); } }
@media (max-width: 599px) { .npod__wstep { font-size: 1.6rem; } }

/* ——— 4. Karta produktu ——— */
.kp__in { display: grid; gap: var(--space-40); align-items: start; }
@media (min-width: 992px) { .kp__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-60); } }
.kp__galeria { display: grid; gap: 1.2rem; min-width: 0; }
.kp__tor { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 6%, var(--white)); }
.kp__zdjecia { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; }
.kp__zdjecia > li { scroll-snap-align: start; }
.kp__zdjecia img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kp__tor:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .kp__tor { scroll-behavior: smooth; } }
.kp__miniatury { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .8rem; }
.kp__mini { display: block; width: 100%; min-height: 4.8rem; padding: 0; border: 2px solid transparent; border-radius: calc(var(--radius) * .6); overflow: hidden; background: none; cursor: pointer; }
.kp__mini img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kp__mini[aria-current="true"] { border-color: var(--primary); }
.kp__siatka { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kp__siatka > li:first-child { grid-column: 1 / -1; }
.kp__siatka img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.kp__siatka > li:first-child img { aspect-ratio: 4 / 3; }
.kp__siatka--n2 > li:first-child { grid-column: auto; }
.kp__siatka--n2 > li:first-child img { aspect-ratio: 1; }
.kp__txt { display: grid; gap: 1.6rem; justify-items: start; min-width: 0; }
.kp__nazwa { margin: 0; line-height: 1.15; }
.kp__cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin: 0; }
.kp__kwota { font-family: var(--font-head); font-size: var(--fs-md); line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.kp__dopisek { font-size: 1.5rem; color: var(--grey); }
.kp__dost { display: inline-flex; align-items: center; gap: .8rem; margin: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--text); }
.kp__dost-ik { flex: none; width: 2rem; height: 2rem; color: var(--primary); }
.kp__opis { display: grid; gap: .8rem; max-width: 60ch; font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.kp__txt .lista li { font-size: var(--fs-body); }
.kp__btns { margin-top: .8rem; }
.kp__notka { margin: 0; max-width: 60ch; font-size: 1.5rem; line-height: 1.5; color: var(--grey); }

/* ——— 5. Strona linków ——— */
.slink__in { display: grid; justify-items: center; text-align: center; gap: 1.6rem; max-width: calc(56rem + 2 * var(--gutter)); }
.slink__foto { width: 12rem; height: 12rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); }
.slink__foto img { width: 100%; height: 100%; object-fit: contain; padding: 1.2rem; }
.slink__nazwa { margin: 0; line-height: 1.2; }
.slink__opis { margin: 0; max-width: 44ch; font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
.slink__lista { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 1.2rem; width: 100%; }
.slink__btn { width: 100%; justify-content: center; min-height: 5.6rem; white-space: normal; text-align: center; }
.slink__karta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; min-height: 7.2rem; padding: 1.2rem 2rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--text); text-align: left; }
.slink__karta:not(:has(.slink__mini)) { grid-template-columns: minmax(0, 1fr) auto; padding-left: 2rem; }
.slink__karta:hover { border-color: var(--text); }
.slink__karta--wyr { border: 2px solid var(--primary); }
.slink__mini { width: 5.6rem; height: 5.6rem; object-fit: cover; border-radius: calc(var(--radius) * .6); }
.slink__karta-txt { display: grid; gap: .2rem; min-width: 0; }
.slink__etyk { font-size: var(--fs-body); line-height: 1.3; font-weight: 600; }
.slink__dopisek { font-size: 1.4rem; line-height: 1.4; color: var(--grey); }
.slink__karta .arr { width: 2rem; height: 2rem; flex: none; }
.slink__notka { margin: .8rem 0 0; font-size: 1.4rem; line-height: 1.5; color: var(--grey); }

/* ——— 6. Formularz w krokach ——— */
.form__kroki { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; gap: .8rem; }
.form__kroki-it { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .2rem .6rem; padding-top: 1rem; border-top: 4px solid var(--line); font-size: 1.4rem; line-height: 1.3; color: inherit; }
.form__kroki-it--zrobione { border-top-color: var(--primary); }
.form__kroki-it--teraz { border-top-color: var(--primary); font-weight: 600; }
.form__kroki-nr::after { content: "."; }
.form__krok { display: flex; flex-direction: column; gap: 2rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.form__krok-tytul { margin: 0 0 .8rem; padding: 0; font-family: var(--font-head); font-size: var(--fs-karta); font-weight: 600; line-height: 1.3; color: inherit; }
.form__krok-nr { display: block; margin-bottom: .2rem; font-family: var(--font-body); font-size: 1.4rem; font-weight: 500; }
.form__krok-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: .4rem; }
.form__krok-nav > .btn { align-self: auto; }
.fkrok .form__box { max-width: 64rem; }

/* ——— 7. Formularz w oknie ——— */
.okno__pas { display: grid; gap: var(--space-20) var(--space-40); align-items: center; }
@media (min-width: 768px) { .okno__pas { grid-template-columns: minmax(0, 1fr) auto; } }
.okno__pas-txt { min-width: 0; }
.okno__pas-tytul { margin: 0; line-height: 1.2; }
.okno__pas-opis { margin: .8rem 0 0; max-width: 60ch; font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
.okno__sam { display: flex; justify-content: center; }
.okno__btn { white-space: normal; text-align: center; }
.okno__dialog { width: min(64rem, calc(100vw - 3.2rem)); max-width: none; max-height: calc(100dvh - 3.2rem); margin: auto; padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--text); overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 64px color-mix(in srgb, var(--dark, #000) 35%, transparent); }
.okno__dialog::backdrop { background: rgb(0 0 0 / .55); background: color-mix(in srgb, var(--dark, #000) 60%, transparent); }
.okno .okno__dialog > .form__box.okno__box, .okno .okno__podglad > .form__box.okno__box { display: block; max-width: none; margin: 0; padding: clamp(2rem, 1.333rem + 1.852vw, 4rem); }
.okno .okno__podglad > .form__box.okno__box { border: 1px dashed var(--line); border-radius: var(--radius); }
.okno__gora { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.6rem; margin-bottom: 1.2rem; }
.okno__tytul { margin: 0; line-height: 1.2; }
.okno__zamknij { flex: none; display: inline-grid; place-items: center; width: 4.8rem; height: 4.8rem; margin: -.8rem -.8rem 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.okno__zamknij svg { width: 2.4rem; height: 2.4rem; }
.okno__zamknij:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.okno__opis { margin: 0 0 2rem; font-size: var(--fs-body); line-height: 1.5; }
.okno__podglad { display: grid; gap: 1.6rem; margin-top: var(--space-40); }
body:has(.okno__dialog[open]) { overflow: hidden; }
/* kontrast w sekcjach z motywem: tekst pomocniczy (podpisy, „netto / miesiąc”, stanowisko w opinii) liczony z kolorów sekcji, nie strony —
   w ciemnej sekcji był ciemny na ciemnym (1,7–2,5 : 1). W jasnych motywach wartość się nie zmienia. */
.mot { --tekst-pom: color-mix(in srgb, var(--grey) 70%, var(--text)); }
.cennik__tabela .porown__nie { color: var(--text); }