/* ==========================================================================
   MIBENO — WSPÓLNA STRUKTURA SEKCJI (php/_common)
   Odtworzona 1:1 z designu zbudowanego na Woodmart/Elementor,
   przepisana na czysty, ręczny CSS.

   Ten arkusz opisuje LAYOUT i typografię wszystkich sekcji — wspólny dla
   każdego serwisu. Kolory serwisu wchodzą przez tokeny CSS definiowane
   w {serwis}/less/screen.less (paleta + tokeny pochodne + własne moduły).
   Edycja tutaj = zmiana designu sekcji NARAZ na wszystkich serwisach.
   ========================================================================== */

/* ----- Design tokens wspólne (paleta serwisu: {serwis}/less/screen.less) ----- */
:root {
  /* Kolory neutralne */
  --ink: #000000;
  --ink-soft: #333333;
  --grey: #767676;
  --gold: #fbbc34;
  --white: #ffffff;

  /* Typografia */
  --font-sans: "Lexend Deca", Arial, Helvetica, sans-serif;
  --font-serif: "Source Serif Pro", "Source Serif 4", Georgia, serif;

  /* Layout */
  --container: 1400px;
  --container-pad: 40px;
  --header-h: 90px;
}

/* ----- Reset / baza ----- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

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

/* ----- Nagłówki (globalne style z motywu) ----- */
h1, .h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.2;
  margin: 0 0 24px;
}
h1 strong, .h1 strong { font-weight: 800; }

/* Nagłówek sekcji — serif italic, mieszane grubości */
.section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 31px;
  line-height: 1.3;
  margin: 0 0 28px;
}
.section-title strong { font-weight: 800; }

/* Etykieta nad nagłówkiem sekcji */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}

/* Nagłówki kart / kolumn */
.card-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  margin: 0 0 12px;
}

/* Duży akapit serif (lead) */
.lead {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 200;
  line-height: 1.6;
}

/* ==========================================================================
   PRZYCISKI
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  padding: 12px 24px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--white);
  box-shadow: 4px 4px 0 0 var(--accent);
  transition: all .3s ease;
  cursor: pointer;
}
/* hover 1:1 z dumpa: przycisk "wciska się" — cień zapada do zera,
   kolory zostają (białe tło, teal tekst) */
.btn:hover {
  background: var(--white);
  color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
}
.btn--solid {
  background: var(--accent);
  color: var(--white);
}
.btn--solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { width: 160px; height: auto; }

.site-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.site-nav ul {
  list-style: none;
  display: flex;
  gap: 34px;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color .2s;
}
.site-nav a:hover,
.site-nav li.is-active a { color: var(--accent); }

.site-header__cta { flex: 0 0 auto; }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
}

/* ==========================================================================
   HERO PODSTRONY
   ========================================================================== */
.page-hero {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--accent);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: center;
  padding-block: 60px;
  min-height: 450px;
}
.page-hero__content { max-width: 660px; }
.page-hero__content h1 { margin-bottom: 28px; }
.page-hero__img img { width: 100%; object-fit: cover; }

/* ==========================================================================
   SEKCJE TREŚCI — zygzak (tekst / obraz naprzemiennie)
   ========================================================================== */
.zigzag { padding-block: 60px 0; }
.zigzag__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-block: 60px;
}
.zigzag__row--reverse .zigzag__text { order: 2; }
.zigzag__row--reverse .zigzag__media { order: 1; }
.zigzag__text { max-width: 520px; }
.zigzag__media img { width: 100%; }
.zigzag__media--placeholder {
  aspect-ratio: 4 / 3;
  background: var(--accent-bg-faint);
  border: 1px solid var(--accent-border);
}

/* ==========================================================================
   ZESPÓŁ — slider kart
   ========================================================================== */
.team { padding-block: 60px; }
.team__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.team__viewport::-webkit-scrollbar { display: none; }
.team__track {
  display: flex;
  gap: 30px;
}
.team-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.team-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 18px;
}
.team-card__name {
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 2px;
}
.team-card__role {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 12px;
}
.team-card__bio { font-size: 14px; line-height: 1.6; }

/* Strzałki sliderów */
.slider-nav {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.slider-arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--accent);
  background: var(--white);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .2s;
}
.slider-arrow:hover { border-color: var(--hover-tint); color: var(--hover-tint); } /* loop-arrows hover z motywu */
.slider-arrow svg { width: 16px; height: 16px; }

/* ==========================================================================
   W CO WIERZYMY — karty w układzie masonry
   ========================================================================== */
.values {
  background: var(--accent-bg-faint);
  padding-block: 80px;
}
.values__grid {
  columns: 3;
  column-gap: 30px;
  margin-top: 40px;
}
.value-card {
  break-inside: avoid;
  background: var(--white);
  border: 1px solid var(--accent-border);
  padding: 60px 32px 32px;
  margin-bottom: 30px;
}
.value-card p { font-size: 15px; line-height: 1.65; }

/* ==========================================================================
   KROKI WSPÓŁPRACY
   ========================================================================== */
.steps { padding-block: 80px; }
/* wariant wash: podlew na lewych 75% (1:1 z dumpa "Od czego zaczynamy…") */
.steps--wash { background: linear-gradient(90deg, var(--accent-bg-2) 75%, var(--white) 75%); }
.steps__intro { max-width: 720px; }
.steps__intro p { font-size: 15px; line-height: 1.7; }
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 50px;
}
.steps__grid--3 { grid-template-columns: repeat(3, 1fr); }
.steps__grid--2 { grid-template-columns: repeat(2, 1fr); }
.step p { font-size: 14px; line-height: 1.65; }
.step__more { margin-top: 12px; }
.steps__footer {
  margin-top: 36px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
}

/* ----- "Kim jesteśmy" (paint_cards, 1:1 z dumpa o nas): farba serwisu
   jako pełne tło, szachownica białych kart i pól z ikoną ----- */
.paint-cards {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-block: 60px;
}
.paint-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.paint-cards__card {
  background: var(--white);
  padding: 70px 60px;
}
.paint-cards__card .section-title { margin-bottom: 18px; }
.paint-cards__card p { font-size: 15px; line-height: 1.7; }
.paint-cards__icon {
  display: grid;
  place-items: center;
}
.paint-cards__icon .icon {
  font-size: 76px;
  color: var(--white);
}

/* ----- Tytuł + kolumny tekstu (3 równe kolumny, 1:1 z dumpa:
   "Co robimy w ramach tej usługi?" — tytuł | tekst | tekst) ----- */
.title-cols { padding-block: 70px 40px; }
.title-cols__grid {
  display: grid;
  grid-template-columns: repeat(var(--title-cols, 3), 1fr);
  gap: 20px;
}
.title-cols__head .section-title { margin-bottom: 0; }
.title-cols__col p { font-size: 15px; line-height: 1.7; }

/* ==========================================================================
   OPINIE — slider
   ========================================================================== */
.testimonials {
  background: var(--accent-bg-faint);
  padding-block: 80px;
}
.testimonials__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: 40px;
}
.testimonials__viewport::-webkit-scrollbar { display: none; }
.testimonials__track { display: flex; gap: 30px; }
.testimonial-card {
  flex: 0 0 440px;
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--accent-border);
  padding: 40px;
}
.testimonial-card blockquote {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
}
.testimonial-card figcaption strong { display: block; font-weight: 700; }
.testimonial-card figcaption span { font-size: 13px; color: var(--grey); }

/* ==========================================================================
   PAS CTA NAD STOPKĄ
   ========================================================================== */
.prefooter {
  background: var(--prefooter-bg);
  padding-block: 56px;
}
.prefooter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.prefooter h2 {
  font-family: var(--font-sans);
  font-size: 33px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--prefooter-ink);
  margin: 0;
}
.prefooter .btn { border-color: var(--prefooter-btn-border, var(--accent)); box-shadow: 4px 4px 0 0 var(--prefooter-btn-shadow); }

/* --- wariant "paint" (1:1 z dumpa: "Nie wiesz od czego zacząć?"):
   farba serwisu obrócona o -90° jako tło pasa, jasny pas, ciemny tekst.
   Obraz podaje sekcja przez --prefooter-paint (mib_paint) --- */
.prefooter--paint {
  position: relative;
  overflow: hidden;
  background: var(--accent-bg-2);
}
.prefooter--paint::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vmax;
  height: 120vmax;
  transform: translate(-50%, -50%) rotate(-90deg);
  background: var(--prefooter-paint) center / cover no-repeat;
}
.prefooter--paint .prefooter__inner { position: relative; }
.prefooter--paint h2 { color: var(--ink); }
.prefooter--paint .btn {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 4px 4px 0 0 var(--accent);
}

/* ==========================================================================
   STOPKA
   ========================================================================== */
.site-footer { background: var(--accent-bg); }
.site-footer__main { padding-block: 70px 50px; }
.site-footer__heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 50px;
}
.site-footer__heading em {
  font-style: italic;
  font-weight: 200;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.site-footer__col h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 20px;
}
.site-footer__col p,
.site-footer__col li { font-size: 15px; line-height: 1.7; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 8px; }
.site-footer__col a:hover { color: var(--accent); }

.social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.social a {
  width: 38px; height: 38px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all .2s;
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.social svg { width: 15px; height: 15px; fill: currentColor; }

.site-footer__bar {
  background: var(--white);
  border-top: 1px solid var(--accent);
  padding-block: 22px;
  font-size: 14px;
}
.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 50px;
  align-items: center;
}
.site-footer__bar a:hover { color: var(--accent); }
.site-footer__bar .copyright { margin-inline: auto; }
.site-footer__bar .legal { font-size: 12px; color: var(--grey); }

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --container-pad: 24px; }
  h1, .h1 { font-size: 40px; }
  .values__grid { columns: 2; }
  .steps__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: block;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--accent);
    padding: 20px var(--container-pad) 30px;
  }
  .site-nav.is-open ul { flex-direction: column; gap: 18px; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-header__cta { display: none; }

  .page-hero__inner { grid-template-columns: 1fr; padding-block: 40px; }
  .zigzag__row { grid-template-columns: 1fr; gap: 30px; padding-block: 30px; }
  .zigzag__row--reverse .zigzag__text { order: 1; }
  .zigzag__row--reverse .zigzag__media { order: 2; }
  /* paint_cards: na wąskim ekranie jedna kolumna kart, pola z ikoną
     schowane (szachownica 2×N wyjeżdżała poza viewport); farbę widać
     w odstępach między kartami */
  .paint-cards__grid { grid-template-columns: 1fr; gap: 24px; }
  .paint-cards__card { padding: 40px 28px; }
  .paint-cards__icon { display: none; }
  h1, .h1 { font-size: 32px; }
  .values__grid { columns: 1; }
  .steps__grid { grid-template-columns: 1fr; gap: 28px; }
  .prefooter__inner { flex-direction: column; align-items: flex-start; }
  .prefooter h2 { font-size: 26px; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__heading { font-size: 32px; }
  .testimonial-card { flex-basis: 85%; }
}

/* ==========================================================================
   ROZSZERZENIA — komponenty pozostałych stron
   ========================================================================== */

/* ----- Dropdown w menu ----- */
.site-nav li { position: relative; }
.site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--accent);
  padding: 28px 32px;
  min-width: 560px;
  z-index: 110;
}
.site-nav li:hover > .site-nav__dropdown,
.site-nav li:focus-within > .site-nav__dropdown { display: block; }
.site-nav__dropdown-head {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 4px;
}
.site-nav__dropdown-sub {
  font-size: 13px;
  color: var(--grey);
  margin: 0 0 18px;
}
.site-nav__dropdown ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 28px;
}
.site-nav__dropdown ul a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.site-nav__dropdown ul a .icon { font-size: 20px; }
.site-nav__dropdown--simple { min-width: 260px; }
.site-nav__dropdown--simple ul { grid-template-columns: 1fr; }

/* ----- Linki "czytaj więcej" (przycisk ze strzałką, 1:1 z dumpa:
       .elementor-button-info — hover: tekst czernieje, strzałka odjeżdża
       w prawo i obraca się o 45°) ----- */
.link-more {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--accent-deep);
  transition: color .3s ease;
}
.link-more::after {
  /* 1:1 z dumpa: glif Font Awesome 6 Pro \e09f (arrow-up-right ↗),
     na hoverze odjeżdża w prawo i obraca się o 45° (→) */
  content: "\e09f";
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  margin-left: 1em;
  transition: all .3s ease;
}
.link-more:hover { color: var(--ink); }
.link-more:hover::after {
  margin-left: 1.4em;
  rotate: 45deg;
}

/* Wariant "alt" (notatki — .btn-alt z motywu): bez wersalików,
   animowane podkreślenie + chevron; hover: podkreślenie zwija się
   do zera, a strzałka odjeżdża w prawo */
.link-more--alt {
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  padding: .3em 0;
  position: relative;
}
.link-more--alt::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transition: all .3s ease-out;
}
.link-more--alt::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 12px;
  margin-left: 1em;
  background-color: transparent;
  background-image: url('../img/arrow2.svg'); /* oryginał: podwójny chevron */
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
  transition: margin .3s ease-out;
}
.link-more--alt:hover { color: var(--accent-deep); }
.link-more--alt:hover::before { width: 0; }
.link-more--alt:hover::after {
  margin-left: 1.6em;
  rotate: none;
  /* background-image (arrow3.svg w kolorze serwisu) → {serwis}/less/screen.less */
}

/* ----- Hero z ilustracją SVG (usługa / archiwum usług) ----- */
.page-hero__illustration {
  justify-self: end;
  width: 100%;
  max-width: 520px;
}
.page-hero__illustration img { width: 100%; height: auto; }

/* ----- Hero dzielone z kartą boczną (archiwa case study / notatek) ----- */
.hero-split { position: relative; border-bottom: 1px solid var(--accent); }
.hero-split__bg {
  position: absolute;
  inset: 0 25% 0 0;
  background: var(--accent-bg);
}
/* hero-split bezpośrednio po page-hero: podlew schodzi do najjaśniejszego
   odcienia (jak tło sekcji kart), żeby sekcje nie zlewały się kolorem */
.page-hero + .hero-split .hero-split__bg { background: var(--accent-bg-faint); }
.hero-split__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 70px;
  align-items: center;
  padding-block: 70px;
}
.hero-split__content h1 { margin-bottom: 26px; }
.hero-split__content p { margin-bottom: 1em; }
.hero-split__card {
  background: var(--white);
  border: 1px solid var(--accent-border);
  padding: 10px 36px;
}
.hero-split__item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding-block: 24px;
  border-bottom: 1px solid var(--accent-bg-2);
}
.hero-split__item:last-child { border-bottom: 0; }
.hero-split__item .icon { font-size: 40px; flex: 0 0 auto; margin-top: 4px; }
.hero-split__item h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}
.hero-split__item p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ----- Pasek filtrów archiwum ----- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  padding-block: 34px 10px;
}
.filter-bar a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}
.filter-bar a:hover, .filter-bar a.is-active { color: var(--accent); }

/* ----- Karty usług (archiwum usług) ----- */
.services { padding-block: 70px; }
.services__intro {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 40px;
}
.services__grid--two { grid-template-columns: 1fr 1fr; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service-card {
  background: var(--accent-bg-faint);
  border: 1px solid var(--accent-border);
  padding: 44px 40px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* hover 1:1 z dumpa (post-19431): teal obrys + miękka poświata */
.service-card:hover {
  border-color: var(--accent-deep);
  box-shadow: var(--focus-shadow);
}
.service-card__img {
  margin: 0 auto 36px;
  max-width: 310px;
}
.service-card h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 27px;
  margin: 0 0 14px;
}
.service-card h2 strong, .service-card h2 b { font-weight: 800; }
.service-card p { font-size: 15px; line-height: 1.65; }
.service-card__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.15);
}

/* ----- Znaczniki meta (kategoria / klient / data) ----- */
.meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg-faint);
  border: 1px solid var(--accent-border);
  padding: 5px 10px;
}
.badge .icon { font-size: 13px; }

/* ----- Wpisy case study (pełna szerokość, obraz z prawej) ----- */
.cs-list { padding-block: 20px 70px; }
.cs-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--accent-border);
  margin-top: 40px;
  transition: border-color .3s ease;
}
.cs-item:hover { border-color: var(--accent); } /* .case-study:hover z motywu */
.cs-item__body { padding: 40px 44px 0; display: flex; flex-direction: column; }
.cs-item__body h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 18px;
}
.cs-item__body > p { font-size: 15px; line-height: 1.7; }
.cs-item__list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
}
.cs-item__list li {
  font-size: 15px;
  padding: 6px 0 6px 26px;
  position: relative;
}
.cs-item__list li::before {
  /* oryginalny pocisk ul.strzalka z motywu (arrow.svg) */
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 15px;
  height: 15px;
  background: no-repeat bottom / contain; /* obraz (arrow.svg w kolorze serwisu) → {serwis}/less/screen.less */
}
.cs-item__footer {
  margin-top: auto;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(0,0,0,.12);
}
.cs-item__media { min-height: 380px; }
.cs-item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ----- Karty notatek (siatka 2 kolumny) ----- */
.notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-block: 20px 70px;
}
.note-card {
  border: 1px solid var(--accent-border);
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease;
}
.note-card:hover { border-color: var(--accent); } /* .elementor-post__card:hover z motywu */
.note-card__img { aspect-ratio: 16 / 9; }
.note-card__img img { width: 100%; height: 100%; object-fit: cover; }
.note-card__body { padding: 28px 32px 0; display: flex; flex-direction: column; flex: 1; }
.note-card__body h2 { font-size: 21px; font-weight: 700; margin: 0 0 16px; }
.note-card__footer {
  margin-top: auto;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(0,0,0,.12);
}

/* ----- Kontakt: mapa ----- */
.map-hero { position: relative; border-bottom: 1px solid var(--accent); }
.map-hero__canvas {
  width: 100%;
  height: 500px;
  background: #e5e3df;
}
.map-hero__canvas iframe { width: 100%; height: 100%; border: 0; }
.map-hero__card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: max(40px, calc((100vw - var(--container)) / 2 + var(--container-pad)));
  background: var(--white);
  border: 1px solid var(--accent);
  padding: 34px 38px;
  max-width: 360px;
}
.map-hero__card h1 { font-size: 27px; margin-bottom: 14px; }
.map-hero__card p { font-size: 15px; line-height: 1.7; }

/* ----- Kontakt: dwie karty ----- */
.contact { padding-block: 70px; }
/* wariant wash: podlew na lewych 25% (1:1 z dumpa: "Wolisz kontakt mailowy?") */
.contact--wash { background: linear-gradient(270deg, var(--white) 75%, var(--accent-bg-2) 75%); }
.contact__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: start;
}
.contact-card {
  border: 1px solid var(--accent-border);
  padding: 40px;
}
.contact-card h2.section-title { margin-bottom: 20px; }
.contact-card p { font-size: 15px; line-height: 1.7; }
.contact-card .social { margin-top: 16px; }

/* ----- Formularze ----- */
.form label { display: block; }
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--accent-soft);
  padding: 13px 16px;
  margin-bottom: 14px;
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.form textarea { min-height: 120px; resize: vertical; }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: justify;
  margin: 6px 0 20px;
}
.form__consent input { margin-top: 3px; }
.form__actions { text-align: right; }

/* ----- Kroki z ikonami ----- */
.steps__grid .step .icon {
  display: block;
  font-size: 44px;
  margin-bottom: 22px;
}

/* ----- Sekcja "hero-band" w środku strony (tytuł + tekst + karta) ----- */
.band { position: relative; margin-block: 40px; }
.band__bg {
  position: absolute;
  inset: 0 25% 0 0;
  background: var(--accent-bg);
}
.band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 70px;
  align-items: center;
  padding-block: 60px;
}

/* ----- Wyróżnienie w tekście ----- */
mark, .highlight {
  background: var(--mark-bg);
  padding: 0 4px;
}

/* ----- Sekcja "Co robimy w ramach tej usługi" ----- */
.intro-cols { padding-block: 70px 40px; }
.intro-cols__text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 50px;
}
.intro-cols__text p { font-size: 15px; line-height: 1.7; }
.feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
}
.feature {
  border-top: 1px solid var(--accent);
  padding-top: 16px;
}
.feature h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.feature p { font-size: 14px; line-height: 1.65; margin: 0; }

/* ----- Pełnoekranowy obraz przykładu ----- */
.showcase { padding-block: 30px; }
.showcase img { width: 100%; }

/* ----- Icon-boxy 3 kolumny ----- */
.icon-boxes { padding-block: 50px; }
/* wariant tint: tło jak sekcje kart (1:1 z dumpa: "W co wierzymy" na o nas) */
.icon-boxes--tint { background: var(--accent-bg-faint); padding-block: 70px; }
.icon-boxes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
}
.icon-box .icon {
  display: block;
  font-size: 44px;
  margin-bottom: 18px;
}
.icon-box p { font-size: 14px; line-height: 1.65; margin: 0; }
.icon-box__title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
/* wariant "to nie dla Ciebie" — uczciwość jako wyróżnik (Concept §7) */
.icon-box--muted { opacity: .78; }
.icon-box--muted .icon { color: var(--grey); }

/* ----- "Jak pracujemy" / KROK PO KROKU — oś czasu (wd_timeline 1:1 z dumpa):
   tekst z lewej; z prawej ciągła pionowa linia wiodąca wzdłuż elementów,
   każdy tytuł znaczony gwiazdką .timeline-dot (dot.svg w kolorze serwisu —
   definicja rozmiaru/aureoli w {serwis}/less/screen.less) ----- */
.howwork {
  background: var(--paper);
  padding-block: 70px;
}
.howwork__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.howwork__footer {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
}
.howwork__timeline {
  position: relative;
  padding-left: 30px; /* odsunięcie treści od linii (timeline-col z dumpa) */
}
.howwork__timeline::before { /* woodmart-timeline-line */
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  border-left: 1px solid var(--accent);
}
.howwork-item { position: relative; margin-bottom: 50px; }
.howwork-item:last-child { margin-bottom: 0; }
.howwork-item .timeline-dot { /* gwiazdka nasadzona na linię przy tytule */
  position: absolute;
  top: -6px;
  left: -48px; /* 30px paddingu + 18px (środek gwiazdki 37px na linii) */
}
.howwork-item h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.howwork-item__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 800;
  color: var(--accent);
  margin-right: 10px;
}
.howwork-item p { font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.howwork-item p:last-child { margin-bottom: 0; }
.howwork-item__result { /* sygnaturowy "Rezultat:" (jak w process_steps) */
  max-width: 640px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  border-left: 2px solid var(--accent);
  background: var(--accent-bg-faint);
  padding: 12px 18px;
  margin: 14px 0 0;
}
.howwork-item__result strong {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 8px;
}
.howwork-item__more { margin: 12px 0 0; }

/* ----- Ponumerowane korzyści ----- */
.benefits { padding-block: 70px; }
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
}
.benefit {
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent-border);
  padding: 26px 30px 40px;
}
.benefit:nth-child(3n) { border-right: 0; }
.benefit__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 800;
  font-size: 27px;
  display: block;
  margin-bottom: 14px;
}
.benefit h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.benefit p { font-size: 14px; line-height: 1.65; margin: 0; }

/* ----- Slider case studies (w single) ----- */
.cs-slider { padding-block: 60px; }
.cs-slider__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: 40px;
}
.cs-slider__viewport::-webkit-scrollbar { display: none; }
.cs-slider__track { display: flex; gap: 30px; }
.cs-slider .cs-item {
  flex: 0 0 92%;
  scroll-snap-align: start;
  margin-top: 0;
}

/* ----- Karta z formularzem (single usługa) ----- */
/* "Chcesz porozmawiać?" 1:1 z dumpa: farba z lewej (35%, tło dołem
   wycentrowane, ramka bez prawej krawędzi), biała karta z prawej */
.contact-banner {
  display: grid;
  grid-template-columns: 35% 1fr;
  margin-block: 70px;
}
.contact-banner__paint {
  border: 1px solid var(--accent);
  border-right: 0;
  background-color: var(--accent-bg);
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 320px;
}
.contact-banner__card {
  border: 1px solid var(--accent);
  background: var(--white);
  padding: 50px;
}
.contact-banner h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  margin: 0 0 18px;
}
.contact-banner h2 strong { font-weight: 800; }
.contact-banner__card > p { font-size: 15px; line-height: 1.65; }

/* ----- FAQ / akordeon ----- */
/* FAQ 1:1 z dumpa: podlew na lewych 25% szerokości (twardy stop gradientu),
   biała karta intro z ikoną NAD tytułem, akordeon ze strzałką w 3D */
.faq {
  padding-block: 70px;
  background: linear-gradient(270deg, var(--white) 75%, var(--accent-bg) 75%);
}
.faq__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: start;
}
.faq__intro {
  border: 1px solid var(--accent);
  background: var(--white);
  padding: 44px 40px;
}
.faq__intro .icon { /* ikona nad tytułem (w dumpie: icon-s2 obrócony 180°) */
  display: block;
  font-size: 44px;
  color: var(--accent);
  transform: rotate(180deg);
  width: fit-content;
  margin-bottom: 15px;
}
.faq__intro p { font-size: 14px; line-height: 1.7; }
.faq details {
  border-bottom: 1px solid var(--accent-soft);
}
.faq details:first-of-type { border-top: 1px solid var(--accent-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 17px;
  font-weight: 700;
  padding: 20px 4px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '\e829'; /* icon-c3 */
  font-family: 'mibeno-icons';
  font-size: 14px;
  color: var(--accent);
  transition: transform .7s ease-in-out; /* jak akordeon w dumpie */
}
.faq details[open] summary { color: var(--accent); }
/* obrót w osi 3D — "do przodu, jak karta do gry" (rotateX, 1:1 z dumpa) */
.faq details[open] summary::after { transform: rotateX(180deg); }
.faq details p {
  font-size: 15px;
  line-height: 1.7;
  padding: 0 4px 22px;
  margin: 0;
}

/* ----- Single notatka ----- */
.post-hero {
  position: relative;
  background: var(--accent-dark) url('../img/testowy-wpis.jpg') center/cover;
}
.post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 35, 42, 0.55);
}
.post-hero__inner {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 80px;
}
.post-hero h1 {
  color: var(--white);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.35;
  max-width: 860px;
}
.post-meta {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.4);
}
.post-meta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-block: 22px;
}
.post-meta__item {
  color: var(--white);
  font-size: 14px;
  padding-inline: 30px;
  border-left: 1px solid rgba(255,255,255,.4);
}
.post-meta__item:first-child { border-left: 0; padding-left: 0; }
.post-meta__item span {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .75;
}

.article {
  max-width: 900px;
  margin-inline: auto;
  padding: 60px 44px;
  border-left: 1px solid var(--accent-border);
  border-right: 1px solid var(--accent-border);
}
.article__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.5;
  margin-bottom: 40px;
}
.article h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 16px;
}
.article p { font-size: 15px; line-height: 1.75; }
.article__share {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 50px;
  padding-top: 26px;
  border-top: 1px solid var(--accent-border);
}
.article__share span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.article__share a { transition: color .2s; }
.article__share a:hover { color: var(--accent-deep); }

/* ----- Powiązane notatki ----- */
.related { padding-block: 60px; }
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 36px;
}

/* ==========================================================================
   RESPONSYWNOŚĆ — rozszerzenia
   ========================================================================== */
@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .hero-split__inner, .band__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-split__bg, .band__bg { inset: 0; }
  .hero-split__card { background: var(--white); }
  .benefits__grid { grid-template-columns: 1fr 1fr; }
  .benefit:nth-child(3n) { border-right: 1px solid var(--accent-border); }
  .benefit:nth-child(2n) { border-right: 0; }
  .icon-boxes__grid { grid-template-columns: 1fr 1fr; }
  .feature-row { grid-template-columns: 1fr 1fr; gap: 40px; }
  .intro-cols__text { grid-template-columns: 1fr; gap: 0; }
  .howwork__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__grid, .faq__grid { grid-template-columns: 1fr; }
  .contact-banner { grid-template-columns: 1fr; }
  .contact-banner__paint { border-right: 1px solid var(--accent); border-bottom: 0; min-height: 160px; }
  .contact-banner__card { padding: 30px; }
  .notes-grid { gap: 24px; }
}
@media (max-width: 800px) {
  .services__grid, .notes-grid, .icon-boxes__grid, .related__grid { grid-template-columns: 1fr; }
  .benefits__grid { grid-template-columns: 1fr; }
  .benefit, .benefit:nth-child(n) { border-right: 0; padding-inline: 0; }
  .cs-item { grid-template-columns: 1fr; }
  .cs-item__media { min-height: 240px; order: -1; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .map-hero__card { position: static; transform: none; margin: -60px var(--container-pad) 0; }
  .map-hero__canvas { height: 380px; }
  .post-meta__inner { grid-template-columns: 1fr; gap: 14px; }
  .post-meta__item { border-left: 0; padding-inline: 0; }
  .article { padding: 40px 20px; border: 0; }
  .cs-slider .cs-item { flex-basis: 95%; }
}

/* ==========================================================================
   LISTY TREŚCIOWE — 1:1 z motywu potomnego (screen.min.css)
   Klasy do użycia w treściach redakcyjnych (w WP: listy w edytorze).
   ========================================================================== */
ul.strzalka, ul.gwiazdka, ul.ptaszek {
  list-style: none;
  position: relative;
  padding-left: 25px;
}
ul.strzalka li, ul.gwiazdka li, ul.ptaszek li { margin-left: 10px; position: relative; }
ul.strzalka li::before, ul.gwiazdka li::before, ul.ptaszek li::before {
  content: "";
  display: inline-block;
  position: absolute;
  margin-left: -25px;
  margin-top: 6px;
  width: 15px;
  height: 15px;
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}
/* ul.strzalka li::before — arrow.svg w kolorze serwisu → {serwis}/less/screen.less */
ul.gwiazdka li::before { background-image: url('../img/dot-black.svg'); }  /* gwiazdka */
ul.ptaszek li::before {
  /* background-image (tick.svg w kolorze serwisu) → {serwis}/less/screen.less */
  margin-top: 5px;
  margin-right: 7px;
  width: 17px;
  height: 17px;
}

/* ==========================================================================
   STAMP — okrągła "pieczątka" z obracającym się otokiem (circle.svg)
   Komponent z motywu (nie występuje na zrzuconych podstronach — czeka
   na stronę główną / sekcje, które go użyją).
   ========================================================================== */
.stamp .btn {
  color: var(--ink);
  position: relative;
  width: 150px;
  height: 150px;
  margin: 10px auto;
  text-align: center;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 10;
}
.stamp .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/circle.svg') no-repeat center / contain;
  transition: transform .9s ease;
}
.stamp .btn:hover::before { transform: rotate(-75deg); }

/* Kropka osi czasu (.timeline-dot, dot.svg) → {serwis}/less/screen.less */

/* ==========================================================================
   PATH NAV — krok wcześniej / krok dalej
   ========================================================================== */
.path-nav { padding-block: 20px 70px; }
.path-nav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.path-nav__card {
  border: 1px solid var(--accent-border);
  padding: 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .3s ease;
}
.path-nav__card:hover { border-color: var(--accent); }
.path-nav__card--empty { border: 0; }
.path-nav__card--next { text-align: right; align-items: flex-end; }
.path-nav__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.path-nav__card--prev .path-nav__label::before {
  content: "\e09f";
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  transform: rotate(-135deg); /* ↖ → kierunek "wstecz" */
  display: inline-block;
}
.path-nav__card--next .path-nav__label::after {
  content: "\e09f";
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  transform: rotate(45deg); /* → */
  display: inline-block;
  transition: transform .3s ease;
}
.path-nav__card--next:hover .path-nav__label::after { transform: rotate(45deg) translateY(-3px); }
.path-nav__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}
.path-nav__title strong { font-weight: 800; }

/* ==========================================================================
   STATS — efekty w liczbach
   ========================================================================== */
.stats { padding-block: 70px; }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.stat {
  border-top: 1px solid var(--accent);
  padding-top: 18px;
}
.stat__value {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 800;
  font-size: 52px;
  line-height: 1.1;
  color: var(--accent);
}
.stat__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-top: 6px;
}
.stat__note {
  display: block;
  font-size: 13px;
  color: var(--grey);
  margin-top: 4px;
}

/* ----- eyebrow w hero (numer etapu drogi) ----- */
.eyebrow--hero { color: var(--accent); font-weight: 700; }

/* ----- responsywność nowych sekcji ----- */
@media (max-width: 1100px) {
}
@media (max-width: 800px) {
  .path-nav__grid { grid-template-columns: 1fr; }
  .path-nav__card--next { text-align: left; align-items: flex-start; }
  .stats__grid { grid-template-columns: 1fr; }
}