/**
 * Landing staging - responsywnosc BEZ psucia desktopu.
 *
 * Zasada: na szerokim ekranie zostaw layout Webflow (hero 676px, 1 rzad kart).
 * Naprawiaj tylko: stale width kontenerow + mid/narrow (wrap, typografia).
 * NIE ruszaj height obrazow absolute (image-15/16/17 = tla sekcji/kart).
 *
 * Hero/starter (`.header-111` + `.vr-starter`): wspolne dla index + wypozyczalnia-*
 * (natywne App Router i static HTML). Cache-bust: `KARCHER_STAGING_RESPONSIVE_CSS_VERSION`.
 */

/* --- Tokeny: bezpieczne na kazdej szerokosci --- */
:root {
  --_spacing-sizing---page-padding--padding-global: clamp(16px, 4vw, 64px) !important;
  --_spacing-sizing---container--container-large: min(1280px, 100%) !important;
}

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

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

/* Kontenery: fluid, nie stale 1280/1440 */
.container-17,
.container-18,
.container-19,
.container-19-copy,
.container-20,
.container-21,
.container-22,
.container-24,
.container-28,
.container-29,
.container-30,
.container-31,
.div-block-21,
.rich-text-block-5 {
  width: 100% !important;
  max-width: min(1280px, 100%) !important;
  min-width: 0 !important;
}

/* Sekcje: nie wychodz poza viewport w poziomie */
.layout-13,
.layout-204,
.layout-399,
.layout-521,
.layout-521-copy,
.layout-521-copy-copy,
.services-cards,
.contact-9,
.contact-30-3,
.b2b-section,
.header-111 {
  max-width: 100% !important;
  overflow-x: clip !important;
}

.pricing-7,
.pricing-home {
  max-width: 100% !important;
  /* Inner tabs-content scrolls horizontally - nie clipuj całego #cennik */
  overflow-x: visible !important;
}

/* 5 kart cennika: rząd + scroll-snap na wąskich ekranach (bez karuzeli) */
.pricing-7 .tabs-content,
.pricing-home .tabs-content {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  grid-column-gap: 12px !important;
  grid-row-gap: 12px !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px !important;
}

.pricing-7 .tab-pane-1,
.pricing-home .tab-pane-1 {
  flex: 0 0 min(240px, 82vw) !important;
  width: min(240px, 82vw) !important;
  min-width: min(240px, 82vw) !important;
  max-width: 280px !important;
  scroll-snap-align: start;
  box-sizing: border-box !important;
  padding: 20px 16px !important;
}

.pricing-7 .tab-pane-1 .price-4,
.pricing-home .tab-pane-1 .price-4 {
  font-size: clamp(28px, 3.2vw, 40px) !important;
}

.pricing-7 .tab-pane-1 .heading-25,
.pricing-home .tab-pane-1 .heading-25 {
  font-size: clamp(15px, 1.4vw, 18px) !important;
  text-align: center;
}

.pricing-7 .tab-pane-1 .heading-25-copy,
.pricing-home .tab-pane-1 .heading-25-copy {
  font-size: 12px !important;
  text-align: center;
}

.pricing-7 .tab-pane-1 .text-23,
.pricing-home .tab-pane-1 .text-23 {
  font-size: 13px !important;
}

/* Sticky nav: CTA / starter nie chowają widgetu pod paskiem */
#rezerwacja {
  scroll-margin-top: 88px;
}

@media screen and (min-width: 1200px) {
  .pricing-7 .tabs-content,
  .pricing-home .tabs-content {
    overflow-x: visible !important;
    gap: 10px !important;
    grid-column-gap: 10px !important;
  }

  .pricing-7 .tab-pane-1,
  .pricing-home .tab-pane-1 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    padding: 24px 14px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* HERO - przywroc desktopowy uklad (lewa kolumna + cena po prawej)            */
/* -------------------------------------------------------------------------- */
.header-111 {
  position: relative;
  overflow: hidden !important;
}

.header-111 .container-16 {
  width: 100% !important;
  max-width: min(1280px, 100%) !important;
  height: 676px !important;
  min-height: 676px !important;
  flex-flow: row nowrap !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 50px !important;
}

.header-111 .div-block-26 {
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  flex: 0 1 50% !important;
}

.header-111 .div-block-27 {
  flex: 0 0 auto !important;
  max-width: 45% !important;
}

/* Tlo hero: MUSI byc absolute + height 100% - nie height:auto */
.header-111 .image-15 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 85% !important;
  z-index: -1 !important;
}

/* Cena 220px bywa za duza na ~1280 - lekko scisnij */
.header-111 .text-block-4 {
  font-size: clamp(100px, 12vw, 220px) !important;
  line-height: 0.85 !important;
}

.header-111 .heading-31 {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word;
}

.header-111 .text-15 {
  display: block !important;
  min-width: 0 !important;
  white-space: normal !important;
}

/* Chipy startera w hero - jeden rzad na desktopie/tablecie */
.header-111 .actions-3,
.header-111 .vr-starter,
.header-111 .vr-starter__chips {
  max-width: 100% !important;
  min-width: 0 !important;
}

.header-111 .vr-starter__label {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
}

.header-111 .vr-starter__meta {
  margin-top: 10px !important;
  width: 100% !important;
  justify-content: space-between !important;
}

.header-111 .vr-starter__deposit,
.header-111 .vr-starter__more {
  font-size: 12px !important;
}

.header-111 .vr-starter__more {
  margin-left: auto !important;
  text-align: right !important;
}

.header-111 .actions-3 {
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

.header-111 .vr-starter__chips {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.header-111 .vr-chip {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Tylko wąski telefon: chipy jeden pod drugim + kompakt, bez rozpychania */
@media screen and (max-width: 559px) {
  .header-111 .vr-starter__chips {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-width: 100% !important;
    margin-bottom: 1.25rem !important;
  }

  .header-111 .vr-chip {
    min-height: 0 !important;
    padding: 12px 14px !important;
  }

  .header-111 .vr-chip__price {
    font-size: 22px !important;
  }

  .header-111 .vr-chip__sub {
    min-height: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Karty sprzetu / zastosowania / proces                                      */
/* -------------------------------------------------------------------------- */
.services-cards {
  overflow: hidden !important;
  padding-top: clamp(32px, 4vw, 64px) !important;
  padding-bottom: clamp(32px, 4vw, 64px) !important;
}

/* Katalog sprzetu w 1 rzedzie na szerokim desktopie */
.services-cards .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 16px;
  grid-column-gap: 16px !important;
}

.services-cards .row > a,
.services-cards .row > .w-inline-block {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/*
 * Zastosowania: NIE sciskaj 4 kart w nowrap (efekt „pionowych paskow”).
 * Wrap + min-width → 4 kolumny na szerokim, 2x2 na mid, 1 kolumna na mobile.
 */
.layout-521-copy .row,
.myjki-zastosowania .row,
.layout-399 .row,
.component-4 .row {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  gap: 16px;
  grid-column-gap: 16px !important;
  grid-row-gap: 16px !important;
}

.layout-521-copy .row > .card13,
.layout-521-copy .row > .card-13-copy,
.layout-521-copy .row > .odkrz-piorace,
.myjki-zastosowania .row > .card13,
.myjki-zastosowania .row > .card-13-copy,
.myjki-zastosowania .row > .odkrz-piorace,
.layout-399 .row > .card-14,
.layout-399 .row > .card-15,
.layout-399 .row > .card-16 {
  flex: 1 1 calc(25% - 16px) !important;
  min-width: min(100%, 240px) !important;
  max-width: none !important;
  width: auto !important;
  min-height: 280px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.layout-399 .content-style-16 {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
}

.parownice,
.odkurzacze,
.myjki,
.szorowarki,
.dkurzacz-piorace {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
}

/*
 * Tla kart zastosowan: nad tlem karty (nie z-index:-1 za background-color),
 * tekst zostaje wyzej.
 */
.layout-521-copy .card13 > img,
.layout-521-copy .card-13-copy > img,
.layout-521-copy .odkrz-piorace > img,
.myjki-zastosowania .card13 > img,
.myjki-zastosowania .card-13-copy > img,
.myjki-zastosowania .odkrz-piorace > img,
.layout-521-copy .image-16,
.layout-521-copy .image-17,
.layout-521-copy .image-18,
.layout-521-copy .image-19,
.myjki-zastosowania .image-16,
.myjki-zastosowania .image-17,
.myjki-zastosowania .image-18,
.myjki-zastosowania .image-19 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  pointer-events: none;
}

/*
 * Przyciemnienie foto: img absolute zaslanialo background-color karty,
 * wiec bialy tekst ginal na jasnych zdjeciach (fugi, okna).
 */
.layout-521-copy .card13::before,
.layout-521-copy .card-13-copy::before,
.layout-521-copy .odkrz-piorace::before,
.myjki-zastosowania .card13::before,
.myjki-zastosowania .card-13-copy::before,
.myjki-zastosowania .odkrz-piorace::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

.layout-521-copy .content-top-2,
.myjki-zastosowania .content-top-2 {
  position: relative !important;
  z-index: 2 !important;
}

/*
 * Mapa Lokalizacja: jedna iframe w .tabs-content-2 > .code-embed.
 * Webflow chowa ten slot ≤767px i pokazuje .code-embed-2 - u nas slot mobile
 * jest pusty (dedupe), wiec wymuszamy widocznosc prawej kolumny na wszystkich
 * szerokosciach.
 */
.contact-30-3 .tabs-content-2,
.contact-30-3-copy .tabs-content-2 {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 446px !important;
  min-height: 300px !important;
  align-items: stretch !important;
}

.contact-30-3 .code-embed,
.contact-30-3-copy .code-embed {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  overflow: hidden;
  border-radius: 10px;
}

.contact-30-3 .code-embed iframe,
.contact-30-3-copy .code-embed iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  border: 0 !important;
}

.contact-30-3 .code-embed-2,
.contact-30-3-copy .code-embed-2 {
  display: none !important;
}

/* Zwykle obrazki w tresci (nie tla) */
.image-6 {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/*
 * Karty procesu (tekst gora, zdjecie dol): jedna proporcja we wszystkich kartach.
 * Poprzednie height:auto pokazywalo natywne ratio WebP i robilo „zeby” w rzedzie.
 */
.image-8,
.image-9,
.image-10,
.image-11,
.card-14 > img,
.card-15 > img,
.card-16 > img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Naglowki sekcji - wrap bez psucia layoutu */
.heading-18,
.heading-19,
.heading-21,
.heading-21-copy-copy,
.heading-22,
.heading-24,
.heading-20 {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word;
}

.heading-19,
.heading-22,
.heading-24 {
  text-align: center !important;
}

.section-title-8-copy,
.section-title-9,
.section-title-10,
.content-style,
.content-style-copy {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Layout Puzzi (tekst + zdjecie) */
.component-3 {
  width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.content-style-15 {
  min-width: 0 !important;
  max-width: 100% !important;
}

#veric-widget-frame,
.code-embed-3,
.contact-9 .component {
  max-width: 100% !important;
  width: 100% !important;
}

iframe {
  max-width: 100%;
}

.text-16,
.text-17,
.text-18,
.text-19,
.text-20,
.text-21,
.text-22,
.paragraph-2,
.paragraph-53 {
  max-width: 100% !important;
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------- */
/* Mid width: zawijanie kart (hero trzymamy 2-kolumnowo osobno niżej)          */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 1399px) {
  .services-cards .row {
    flex-wrap: wrap !important;
  }

  .services-cards .row > a,
  .services-cards .row > .w-inline-block,
  .layout-521-copy .row > .card13,
  .layout-521-copy .row > .card-13-copy,
  .layout-521-copy .row > .odkrz-piorace,
  .myjki-zastosowania .row > .card13,
  .myjki-zastosowania .row > .card-13-copy,
  .myjki-zastosowania .row > .odkrz-piorace,
  .layout-399 .row > .card-14,
  .layout-399 .row > .card-15,
  .layout-399 .row > .card-16 {
    flex: 1 1 calc(50% - 12px) !important;
    min-width: min(100%, 240px) !important;
  }

  .component-3 {
    flex-wrap: wrap !important;
  }

  .content-style-15 {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Kontakt: mapa + kolumny nie ściskają się w jednym rzędzie */
  .contact-30-3 .content-style-10,
  .contact-30-3 .tabs-menu-4,
  .contact-30-3-copy .content-style-10,
  .contact-30-3-copy .tabs-menu-4 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .contact-30-3 .tabs-content-2,
  .contact-30-3-copy .tabs-content-2 {
    flex: 1 1 100% !important;
    height: 320px !important;
    margin-top: 16px;
  }

  .contact-30-3 .code-embed-2,
  .contact-30-3-copy .code-embed-2 {
    display: none !important;
  }

  :root {
    --_typography---text-sizes--heading-2: clamp(1.5rem, 3.2vw, 2.5rem) !important;
  }
}

/*
 * Hero mid: 2 kolumny + responsywne „od 49zł”
 * (tytuł nie rozjeżdża się na całą szerokość, starter w poziomie)
 */
@media screen and (min-width: 1200px) and (max-width: 1500px) {
  .header-111 .container-16 {
    height: auto !important;
    min-height: 560px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .header-111 .div-block-26 {
    width: 58% !important;
    max-width: 58% !important;
    flex: 0 1 58% !important;
    gap: 24px !important;
    grid-row-gap: 24px !important;
  }

  .header-111 .div-block-27 {
    display: block !important;
    width: 38% !important;
    max-width: 38% !important;
    flex: 0 1 38% !important;
    margin-left: 0 !important;
    text-align: right !important;
  }

  .header-111 .heading-31 {
    font-size: clamp(28px, 2.8vw, 40px) !important;
    line-height: 1.15 !important;
  }

  .header-111 .paragraph-2 {
    font-size: clamp(18px, 1.6vw, 28px) !important;
    line-height: 1.25 !important;
  }

  .header-111 .text-block-4 {
    font-size: clamp(64px, 6.5vw, 130px) !important;
    line-height: 0.86 !important;
  }

  .header-111 .bold-text-5 {
    line-height: 0.85 !important;
  }

  .header-111 .vr-starter__chips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .header-111 .vr-chip {
    min-height: 100px !important;
    padding: 8px 10px !important;
  }

  .header-111 .vr-chip__title {
    font-size: 12px !important;
  }

  .header-111 .vr-chip__sub {
    font-size: 11px !important;
    min-height: calc(1.2em * 2) !important;
  }

  .header-111 .vr-chip__price {
    font-size: 20px !important;
  }
}

/* Tablet i lekko większy: 1 kolumna treści, bez „od 49zł”, chipy w poziomie */
@media screen and (max-width: 1199px) {
  .header-111 .container-16 {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  .header-111 .div-block-26 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .header-111 .div-block-27 {
    display: none !important;
  }

  .header-111 .vr-starter {
    max-width: 100% !important;
  }

  .header-111 .vr-starter__chips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .header-111 .vr-chip {
    min-height: 108px !important;
    padding: 12px 12px !important;
  }

  .header-111 .vr-chip__title {
    font-size: 12px !important;
  }

  .header-111 .vr-chip__sub {
    font-size: 11px !important;
    min-height: calc(1.25em * 2) !important;
  }

  .header-111 .vr-chip__price {
    font-size: 22px !important;
  }
}

/* Węższy tablet/desktop (nadpisanie wcześniejszego zakresu 992–1199) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .header-111 .container-16 {
    min-height: 420px !important;
  }

  .header-111 .div-block-26 {
    max-width: 760px !important;
  }
}

/* Natywny mount React (zamiast iframe) */
.karcher-native-booking-mount,
.code-embed-3.karcher-native-booking-mount {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/*
 * Island w App Router: bez białego tła (hero ma image z z-index:-1).
 * NIE używaj isolation:isolate na .header-111 - wtedy obrazek maluje się
 * NAD gradientem i znika przyciemnienie.
 */
.karcher-staging-native-island {
  background: transparent;
}

.karcher-staging-native-island .header-111 {
  position: relative;
}

/* Jawna nakładka - działa też gdy stacking z wrappera Next różni się od Webflow */
.karcher-staging-native-island .header-111::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: #00000024;
  background-image: linear-gradient(#0000005c, #0000005c);
}

.karcher-staging-native-island .header-111 .image-15 {
  z-index: 0 !important;
}

.karcher-staging-native-island .header-111 .container-16 {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------- */
/* Navbar typografia - desktop + mobile (spójna skala, bez rozjazdu)           */
/* -------------------------------------------------------------------------- */
.navbar-3 .nav-menu-2 {
  gap: 0.15rem;
}

.navbar-3 .nav-link-3,
.navbar-3 .nav-link-4,
.navbar-3 .nav-link-2-copy,
.navbar-3 .cta-nav,
.navbar-3 .div-block-32 {
  font-family: localfont, Arial, sans-serif !important;
  font-size: clamp(12px, 0.95vw, 14px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.navbar-3 .nav-link-3,
.navbar-3 .nav-link-4,
.navbar-3 .nav-link-2-copy {
  color: #fff !important;
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
}

.navbar-3 .nav-link-3:hover,
.navbar-3 .nav-link-4:hover,
.navbar-3 .nav-link-2-copy:hover {
  color: #ffed00 !important;
  border-bottom-color: rgba(255, 237, 0, 0.55) !important;
}

.navbar-3 .nav-link-3.w--current,
.navbar-3 .nav-link-4.w--current,
.navbar-3 .nav-link-2-copy.w--current {
  color: #ffed00 !important;
  border-bottom-color: #ffed00 !important;
  text-decoration: none !important;
}

.navbar-3 .cta-nav {
  color: #ffed00 !important;
  font-weight: 700 !important;
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease, filter 0.15s ease !important;
}

.navbar-3 .cta-nav:hover {
  color: #fff !important;
  border-bottom-color: #ffed00 !important;
  filter: drop-shadow(0 0 8px rgba(255, 237, 0, 0.35));
}

.navbar-3 .cta-nav.w--current {
  color: #ffed00 !important;
  border-bottom-color: #ffed00 !important;
  text-decoration: none !important;
}

.navbar-3 .div-block-32 {
  color: #fff !important;
  padding-left: 0.45rem !important;
  padding-right: 0.45rem !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
}

.navbar-3 .dropdown-toggle-2 {
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  transition: opacity 0.15s ease !important;
}

.navbar-3 .dropdown-toggle-2:hover .div-block-32,
.navbar-3 .w-dropdown.w--open .div-block-32 {
  color: #ffed00 !important;
  border-bottom-color: rgba(255, 237, 0, 0.55) !important;
}

.navbar-3 .div-block-18 {
  text-decoration: none !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.navbar-3 .div-block-18:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.navbar-3 .div-block-18:hover .number-link {
  color: #fff !important;
}

/* Dropdown desktop: ciemny panel jak navbar (bez szarego + niebieskich linków) */
.navbar-3 .dropdown-list-2,
.navbar-3 .dropdown-list-2.w--open {
  background-color: rgba(12, 12, 12, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  margin-top: 8px !important;
  padding: 8px !important;
  min-width: 240px !important;
  inset: 100% auto auto 0 !important;
}

.navbar-3 .dropdown-list-2 .w-dropdown-link,
.navbar-3 .dropdown-list-2 [class*="dropdown-link-"] {
  display: block !important;
  color: #fff !important;
  background: transparent !important;
  font-family: localfont, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}

.navbar-3 .dropdown-list-2 .w-dropdown-link:hover,
.navbar-3 .dropdown-list-2 [class*="dropdown-link-"]:hover {
  color: #111 !important;
  background: #ffed00 !important;
}

.navbar-3 .dropdown-list-2 .w-dropdown-link.w--current,
.navbar-3 .dropdown-list-2 [class*="dropdown-link-"].w--current {
  color: #ffed00 !important;
  background: rgba(255, 237, 0, 0.12) !important;
}

.navbar-3 .div-block-18 .text-block-2 {
  font-family: localfont, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}

.navbar-3 .div-block-18 .number-link {
  font-family: localfont, Arial, sans-serif !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
}

@media screen and (max-width: 991px) {
  .header-111 .container-16 {
    margin-top: 24px !important;
  }

  .header-111 .div-block-27 {
    display: none !important; /* Webflow tez chowa cene na mobile w czesci breakpointow */
  }

  /*
   * Topbar tablet/mobile:
   * - logo w lewo (nie wyśrodkowane)
   * - telefon: pełny blok gdy mieści się, inaczej sama ikona
   * - ikona telefonu odsunięta od hamburgera
   * - otwarte menu: widoczne linki (nie pusty panel)
   */
  .navbar-3 {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 10px 0 12px !important;
    z-index: 1000;
  }

  .navbar-3 .container-26 {
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    height: 60px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 1 1 auto !important;
  }

  .navbar-3 .logo-brand {
    margin-right: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  .navbar-3 .logo {
    left: 0 !important;
    min-width: 110px !important;
    max-width: 160px !important;
  }

  .navbar-3 .menu-button-2 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 0 0 14px !important;
    padding: 10px !important;
    flex: 0 0 auto !important;
    z-index: 1002;
  }

  /* Pełny blok telefonu na tablecie (miejsce obok hamburgera) */
  .navbar-3 .div-block-18 {
    display: flex !important;
    position: relative !important;
    left: auto !important;
    margin: 0 4px 0 auto !important;
    flex: 0 0 auto !important;
    z-index: 1001;
  }

  .navbar-3 .div-block-16 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .navbar-3 .div-block-16 .text-block-2 {
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
  }

  .navbar-3 .div-block-16 .number-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
  }

  /* Otwarte menu - jedna typografia, równy rytm, bez zbędnych wcięć */
  .navbar-3 .nav-menu-2 {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    grid-row-gap: 0 !important;
    min-width: min(300px, 86vw) !important;
    width: min(320px, 88vw) !important;
    max-width: 90vw !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 76px 20px 36px !important;
    background-color: rgba(0, 0, 0, 0.94) !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
  }

  .navbar-3 .nav-menu-2.w--open,
  .navbar-3 .w-nav-menu.w--nav-menu-open {
    display: flex !important;
  }

  .navbar-3 .nav-menu-2 > .w-nav-link,
  .navbar-3 .nav-menu-2 > .w-dropdown,
  .navbar-3 .nav-menu-2 .w-dropdown {
    width: 100% !important;
    margin: 0 !important;
  }

  .navbar-3 .nav-menu-2 .nav-link-3,
  .navbar-3 .nav-menu-2 .nav-link-4,
  .navbar-3 .nav-menu-2 .nav-link-2-copy,
  .navbar-3 .nav-menu-2 .cta-nav,
  .navbar-3 .nav-menu-2 .div-block-32,
  .navbar-3 .nav-menu-2 .w-nav-link,
  .navbar-3 .nav-menu-2 .dropdown-toggle-2,
  .navbar-3 .nav-menu-2 .dropdown-toggle-2.w-dropdown-toggle {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-family: localfont, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    white-space: normal !important;
    background: transparent !important;
  }

  .navbar-3 .nav-menu-2 .dropdown-toggle-2.w-dropdown-toggle {
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }

  .navbar-3 .nav-menu-2 .dropdown-toggle-2 .div-block-32 {
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  .navbar-3 .nav-menu-2 .dropdown-toggle-2 .icon-3,
  .navbar-3 .nav-menu-2 .dropdown-toggle-2 .w-icon-dropdown-toggle {
    position: static !important;
    width: 0.7em !important;
    height: 0.7em !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .navbar-3 .nav-menu-2 .cta-nav {
    color: #ffed00 !important;
    font-weight: 600 !important;
  }

  .navbar-3 .nav-menu-2 .w-nav-link,
  .navbar-3 .nav-menu-2 .div-block-32 {
    color: #fff !important;
  }

  .navbar-3 .nav-menu-2 .w-nav-link:hover,
  .navbar-3 .nav-menu-2 .dropdown-toggle-2:hover,
  .navbar-3 .nav-menu-2 .dropdown-toggle-2:hover .div-block-32,
  .navbar-3 .nav-menu-2 .w-dropdown.w--open > .dropdown-toggle-2,
  .navbar-3 .nav-menu-2 .w-dropdown.w--open .div-block-32 {
    color: #ffed00 !important;
    background: transparent !important;
  }

  .navbar-3 .nav-menu-2 .w-nav-link.w--current,
  .navbar-3 .nav-menu-2 .cta-nav.w--current {
    color: #ffed00 !important;
    background: transparent !important;
  }

  /* Podmenu: wyrównane do lewej jak rodzice (bez padding-left) */
  .navbar-3 .nav-menu-2 .w-dropdown-list,
  .navbar-3 .nav-menu-2 .dropdown-list-2,
  .navbar-3 .nav-menu-2 .dropdown-list-2.w--open {
    position: static !important;
    display: none;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 4px 0 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    inset: auto !important;
  }

  .navbar-3 .nav-menu-2 .w-dropdown.w--open .w-dropdown-list,
  .navbar-3 .nav-menu-2 .w-dropdown-list.w--open {
    display: block !important;
  }

  .navbar-3 .nav-menu-2 .w-dropdown-link,
  .navbar-3 .nav-menu-2 .dropdown-list-2 .w-dropdown-link,
  .navbar-3 .nav-menu-2 .dropdown-list-2 [class*="dropdown-link-"] {
    display: block !important;
    color: rgba(255, 255, 255, 0.78) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    font-family: localfont, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    padding: 11px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    white-space: normal !important;
  }

  .navbar-3 .nav-menu-2 .w-dropdown-link:hover,
  .navbar-3 .nav-menu-2 .dropdown-list-2 .w-dropdown-link:hover,
  .navbar-3 .nav-menu-2 .dropdown-list-2 [class*="dropdown-link-"]:hover {
    color: #ffed00 !important;
    background: transparent !important;
  }

  .navbar-3 .nav-menu-2 .w-dropdown-link.w--current,
  .navbar-3 .nav-menu-2 .dropdown-list-2 [class*="dropdown-link-"].w--current {
    color: #ffed00 !important;
  }
}

/* Wąski ekran: sama ikona telefonu, odsunięta od hamburgera */
@media screen and (max-width: 699px) {
  .navbar-3 .div-block-18 {
    display: flex !important;
    margin-right: 18px !important;
  }

  .navbar-3 .div-block-16 {
    display: none !important;
  }

  .navbar-3 .div-block-17 {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar-3 .menu-button-2 {
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 700px) {
  .services-cards .row > a,
  .services-cards .row > .w-inline-block,
  .layout-521-copy .row > .card13,
  .layout-399 .row > .card-14,
  .layout-399 .row > .card-15,
  .layout-399 .row > .card-16 {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  .text-17,
  .text-20,
  .text-22 {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
  }
}