@charset "UTF-8";
/* base/reset.scss */
/* 1. Box sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Reset marginesów i paddingów */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* 3. Listy bez wypunktowania */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 4. Linki bez podkreśleń */
a {
  text-decoration: none;
  color: inherit;
}

/* 5. Obrazy i media – pełna szerokość i automatyczna wysokość */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 6. Formularzowe elementy – reset fontu i marginesów */
input, button, textarea, select {
  font: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
}

/* 7. Focus (opcjonalnie – można stylować inaczej) */
:focus {
  outline: none;
}

/* 8. Body */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: "DM Sans", sans-serif;
  background-color: #fff;
  color: #000;
}

/* base/base.scss */
html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: "DM Sans", sans-serif;
  /* żadnych paddingów na html/body – sterujemy gutterem przez .container */
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: "DM Sans", sans-serif;
}

/* ========== TYPOGRAFIA ========== */
/* ========== BREAKPOINTS ========== */
/* ========== COLORS ========== */
:root {
  /* Elevations */
  --elev-modal: 7px 16px 106.4px rgba(99,99,99,.10);
  /* Możesz też mieć inne poziomy, jeśli używasz w projekcie: */
  --elev-1: 2px 4px 12px rgba(99,99,99,.10);
  --elev-2: 4px 8px 32px rgba(99,99,99,.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* lekko mocniejszy w dark, ale ten sam „kształt” */
    --elev-modal: 7px 16px 106.4px rgba(0,0,0,.45);
  }
}
.container {
  max-width: 1200px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  box-sizing: border-box;
  pointer-events: none;
}

/* =========================================
   HEADER (mobile-first)
   ========================================= */
.header {
  position: relative;
  width: 100%;
  min-height: 450px;
  color: #fff;
  overflow: hidden;
  isolation: auto;
  padding-top: 80px;
}
.header .header__logo-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85); /* 0.6 = 60% krycia (40% przezroczystości) */
  border-radius: 0 6px 0 0; /* zaokrąglenie rogów (opcjonalne) */
  padding: 4px 8px; /* odstęp między logo a ramką */
  box-shadow: 0 4px 3.5px rgba(12, 12, 12, 0.35);
}
.header .header__logo--img {
  display: block;
  height: 32px; /* dostosuj do swojego */
  width: auto;
}
.header__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.header__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}
.header {
  /* === Belka top — ZAWSZE 100% viewportu === */
}
.header__wrap {
  position: relative;
  z-index: auto;
}
.header .container.header__top {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 66px; /* mobile */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* fill (tło półprzezroczyste) */
  background: rgba(23, 23, 23, 0.4);
  /* blur */
  backdrop-filter: blur(1px);
  /* stroke (imitacja stroke inside → border-bottom, bo belka leży na górze) */
  border-bottom: 1px solid rgb(0, 0, 0);
  /* drop shadow */
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
}
.header__logo {
  display: flex;
  align-items: center;
}
.header__logo--img {
  height: 40px;
  width: 92px;
  display: block;
}
.header {
  /* Burger (0–1439 px) */
}
.header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-right: 2px;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2147483647;
}
.header__burger:focus-visible {
  outline: 2px solid #DC9B59;
  outline-offset: 2px;
  border-radius: 8px;
}
.header__burger-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.header {
  /* Treść hero */
}
.header__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 20px 0 20px;
  margin: 0;
}
.header .header__badge {
  grid-column: 1/span 6;
}
.header .header__title {
  font-family: dm sans, sans-serif;
  font-size: 32px;
  line-height: 130%;
  letter-spacing: 2%;
  font-weight: 600;
  margin-top: 75px;
}
.header .header__description {
  font-family: dm sans, sans-serif;
  font-size: 14px;
  line-height: auto;
  font-weight: 400;
  margin-top: 16px;
}
.header .button--header {
  grid-column: 1/span 3;
  width: 335px;
  height: 40px;
  justify-self: start;
  margin-bottom: 37px;
  font-family: dm sans, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.43px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* ===== TABLET (≥744 <1440) — grid 660: 8×65 / gap 20 / padding 42 ===== */
@media (min-width: 744px) and (max-width: 1439px) {
  .header .container.header__top {
    height: 66px;
    padding: 0 42px;
    z-index: 31;
  }
  .header__content {
    /* zamiast „max-width: 744px” robimy płynne 100% z marginesami 42px */
    width: 100%;
    max-width: none;
    padding-inline: 42px;
    padding-bottom: 0;
    padding-top: 36px;
    margin-inline: 0; /* nie centrować nic sztywnie */
    /* grid: 8 płynnych kolumn, stały gap 20 */
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 16px;
  }
  .header__content > * {
    min-width: 0;
  }
  .header__content { /* zabezpieczenie przed overflowem */ }
  .header {
    /* ⬆⬆ KONIEC PODMIANY ⬆⬆ */
  }
  .header .header__badge {
    grid-column: 1/span 6;
  }
  .header .header__title {
    grid-column: 1/span 8;
    font-family: dm sans, sans-serif;
    font-size: 48px;
    line-height: 130%;
    letter-spacing: 0.07em;
    font-weight: 600;
  }
  .header .header__description {
    grid-column: 1/span 8;
    font-family: dm sans, sans-serif;
    font-size: 18px;
    line-height: auto;
    font-weight: 300;
  }
  .header .button--header {
    grid-column: 1/span 3;
    width: 250px;
    height: 56px;
    justify-self: start;
    margin-bottom: 103px;
    font-family: dm sans, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.43px;
  }
}
/* ===== LAPTOP (≥1440 <1920) — grid 1280: 12×78 / 24 / 40 ===== */
@media (min-width: 1440px) and (max-width: 1919px) {
  .header {
    /* Belka top: PODWIESZONA, tło full-width przez padding 40 */
  }
  .header .container.header__top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    padding: 0;
    /* KLUCZ: żadnego stosu i żadnego wizualu – to robi nav */
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    z-index: 31;
  }
  .header .header__logo {
    position: fixed;
    top: 0;
    left: 40px; /* jak padding belki */
    height: 80px;
    display: flex;
    align-items: center;
    z-index: 40; /* NAJWYŻEJ */
  }
  .header .header__logo--img {
    height: 60px;
    width: 138px;
    position: static; /* żadnych z-index na samym img */
  }
  .header__burger {
    display: none;
  }
  .header__content {
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 45px;
    padding-left: 40px;
    padding-right: 40px; /* centruje siatkę */
    display: grid;
    grid-template-columns: repeat(12, 78px);
    column-gap: 24px;
    row-gap: 20px;
  }
  .header__content > * {
    min-width: 0;
  }
  .header .header__badge {
    grid-column: 1/span 6;
  }
  .header .header__title {
    grid-column: 1/span 9;
    font-family: dm sans, sans-serif;
    font-size: 66px;
    line-height: 130%;
    letter-spacing: 2%;
    font-weight: 600;
    margin-top: 282px;
  }
  .header .header__description {
    grid-column: 1/span 8;
    font-family: dm sans, sans-serif;
    font-size: 18px;
    line-height: auto;
    font-weight: 300;
  }
  .header .button--header {
    grid-column: 1/span 3;
    width: 275px;
    height: 56px;
    justify-self: start;
    margin-bottom: 103px;
    font-family: dm sans, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.43px;
  }
}
/* ===== DESKTOP (≥1920) — grid 1320: 12×88 / 24 / 300 ===== */
@media (min-width: 1920px) {
  .header .container.header__top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    /* KLUCZ: żadnego stosu i żadnego wizualu – to robi nav */
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    z-index: 31;
  }
  .header__logo--img {
    height: 60px;
    width: 138px;
    margin-left: 0;
    z-index: 40; /* najwyżej */
  }
  .header__burger {
    display: none;
  }
  .header__content {
    max-width: 1920px;
    height: 860px;
    padding-inline: 300px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(12, 88px);
    column-gap: 24px;
    row-gap: 1px;
    align-content: start; /* ✱ NIE rozciągaj wierszy na całą wysokość */
    align-items: start; /* ✱ elementy przy górze swoich wierszy */
    grid-auto-rows: min-content; /* ✱ wiersze dopasowane do treści (brak „szyn”) */
    /* ✱ przeniesione NAD zagnieżdżenie */
    padding-top: 0;
    /* dzieci w gridzie nie wychodzą poza kolumny */
  }
  .header__content > * {
    min-width: 0;
  }
  .header .header__badge {
    grid-column: 1/span 6;
  }
  .header .header__title {
    grid-column: 1/span 10;
    font-family: dm sans, sans-serif;
    font-size: 77px;
    line-height: 120%;
    letter-spacing: 0.07em;
    font-weight: 600;
    margin-top: 286px;
  }
  .header .header__description {
    grid-column: 1/span 10;
    font-family: dm sans, sans-serif;
    font-size: 24px;
    line-height: auto;
    font-weight: 300;
    margin-bottom: 22px;
  }
  .header .button--header {
    grid-column: 1/span 3;
    width: 289px;
    height: 66px;
    justify-self: start;
    margin-bottom: 103px;
    font-family: dm sans, sans-serif;
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: -0.43px;
    justify-content: flex-start;
    text-align: left;
  }
}
/* === Jedno źródło prawdy dla poziomowych gutterów === */
/* ===== Jeden gutter dla całej strony ===== */
/* ========== WSPÓLNE STAŁE ========== */
:root {
  --content-x: 20px;
  --nav-h: 66px;
} /* mobile */
@media (min-width: 744px) and (max-width: 1439px) {
  :root {
    --content-x: 42px;
    --nav-h: 66px;
  }
} /* tablet */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --content-x: 40px;
    --nav-h: 80px;
  }
} /* laptop */
@media (min-width: 1920px) {
  :root {
    --content-x: 300px;
    --nav-h: 88px;
  }
} /* desktop */
/* Belka tła (szkło) – 100% szerokości, bez własnych paddingów */
.header .container.header__top {
  /* ta reguła NADPISUJE padding z .container — nie ma podwójnych odstępów */
  position: relative; /* <<< DODANE */
  z-index: 31; /* <<< DODANE */
  padding-inline: var(--content-x);
  height: var(--nav-h);
}

/* Treść hero ma ten sam gutter co NAV */
@media (min-width: 1440px) {
  .header__content {
    padding-inline: var(--content-x);
  }
}
/* LOGO — od 1440px kotwiczone do tego samego guttera */
@media (min-width: 1440px) {
  .header__logo {
    position: fixed; /* trzyma się belki przy scrollu */
    top: 0;
    left: var(--content-x); /* KLUCZ: ten sam gutter co NAV i hero */
    height: var(--nav-h);
    display: flex;
    align-items: center;
    z-index: 40; /* nad szkłem i AI-boxem, razem z linkami */
    pointer-events: auto;
  }
  .header__logo--img {
    height: 60px;
    width: 138px;
  } /* Twoje wartości */
}
@media (min-width: 1440px) {
  .header__logo {
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
  }
  /* gdy belka jest ukryta */
  .nav-hidden .header__logo {
    transform: translateY(-100%);
  }
}
/* === LOGO: zawsze klikalne na mobile/tablet === */
.header__logo,
.header__logo a {
  z-index: 5; /* ponad burgerem/menu/overlayami */
  pointer-events: auto;
}

/* (opcjonalnie) żeby klik trafiał w <a>, nie w <img> */
.header__logo img {
  pointer-events: none;
}

/* Ukryte menu i overlay NIE mogą łapać klików */
.nav-overlay.is-hidden,
.mobile-menu.is-hidden {
  display: none;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Nav całkiem nieklikalne i niewidoczne gdy aria-hidden="true" */
.header__nav[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

/* Gdy otwarte (aria-hidden="false") — normalnie overlay */
.header__nav[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* MOBILE+TABLET: menu zamknięte nie zasłania headera */
@media (max-width: 1439px) {
  #mobile-menu[aria-hidden=true] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* <-- kluczowe */
  }
  #mobile-menu[aria-hidden=false] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
/* Na wszelki wypadek: dekoracje headera nie przechwytują klików */
.header__overlay,
.header_video,
.header::before,
.header::after {
  pointer-events: none;
}

/* === Burger zawsze klikalny === */
.header__burger,
#mobile-menu-button,
.menu-toggle {
  position: relative;
  z-index: 6; /* wyżej niż logo i reszta headera */
  pointer-events: auto;
}

/* Burger zawsze nad wszystkim i klikalny */
#burger-toggle {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* menu schowane/pokazane – tylko mobile/tablet */
@media (max-width: 1439px) {
  #mobile-menu[aria-hidden=true] {
    display: none;
    pointer-events: none;
  }
  #mobile-menu[aria-hidden=false] {
    display: block;
    pointer-events: auto;
  }
}
/* blokada scrolla, gdy otwarte */
html.nav-open, body.nav-open {
  overflow: hidden;
}

/* burger klikalny */
#burger-toggle {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* overlay/video w headerze nie łapie klików */
.header__overlay, .header_video, .header::before, .header::after {
  pointer-events: none;
}

.header__nav-close {
  position: absolute; /* dostosuj pozycję jak masz w projekcie */
  top: 0;
  right: 0;
  z-index: 12; /* ponad zawartością menu */
  pointer-events: auto; /* klikalny */
}

/* menu: stan zamknięty/otwarty (dla mobile/tablet) */
@media (max-width: 1439px) {
  #mobile-menu[aria-hidden=true] {
    display: none;
    pointer-events: none;
  }
  #mobile-menu[aria-hidden=false] {
    display: block;
    pointer-events: auto;
  }
}
/* === PHONE CALL LINK === */
.header__call {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 64px; /* 🔑 regulujesz odstęp między burgerem a pigułką */
  z-index: 35;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.header__call img {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* mobile = tylko ikona */
.header__call-text {
  display: none;
  pointer-events: none;
}

/* === TABLET (≥744px <1440px) — pokaż numer, ale też przy burgerze === */
@media (min-width: 744px) and (max-width: 1439px) {
  .header__call {
    right: 94px; /* 🔑 ten sam mechanizm odstępu co na mobile */
    padding: 10px 14px;
    gap: 10px;
  }
  .header__call-text {
    display: inline;
    opacity: 0.95;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }
}
/* === LAPTOP & DESKTOP (≥1440px) — ukryj === */
@media (min-width: 1440px) {
  .header__call {
    display: none;
  }
}
/* ABOUT: podwieszona belka, używa tego samego autohide JS co index */
body.about .header .container.header__top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding-inline: var(--content-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 31;
  background: rgba(23, 23, 23, 0.4); /* mobile/tablet */
  backdrop-filter: blur(1px);
  border-bottom: 1px solid rgb(0, 0, 0);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
}

/* Laptop+: transparentne tło (jak na index) */
@media (min-width: 1440px) {
  body.about .header .container.header__top {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
}
/* Przesunięcie treści pod fixed belkę */
body.about main {
  padding-top: var(--nav-h);
}

/* === INDEX — NAV + MENU FIX (mobile & tablet) === */
@media (max-width: 1439px) {
  /* 0) bez pułapek dla fixed */
  .header,
  .header__wrap {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    z-index: auto !important;
  }
  /* 1) belka: fixed, nad treścią, dzieci klikalne */
  .header .container.header__top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    padding-inline: var(--content-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10000 !important;
    /* brak blur i brak przyciemniania (utrzymujemy Twój wygląd) */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
    pointer-events: none !important;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
  }
  .header .container.header__top > * {
    pointer-events: auto !important;
  }
  /* 2) autohide */
  .nav-hidden .header .container.header__top {
    transform: translateY(-100%);
  }
  /* 3) overlay menu */
  #mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
    z-index: 10001 !important;
  }
  #mobile-menu[aria-hidden=true] {
    display: none !important;
    pointer-events: none !important;
  }
  #mobile-menu[aria-hidden=false] {
    display: block !important;
    pointer-events: auto !important;
  }
  /* 4) odsunięcie treści */
  body.home main,
  body.index main,
  .header + main {
    padding-top: var(--nav-h) !important;
  }
  /* 5) dekoracje nie łapią klików */
  .header::before, .header::after, .header__overlay, .header__video {
    pointer-events: none !important;
    z-index: 0 !important;
  }
  /* 6) (opcjonalny) reset pozycji w mob/tablet, żeby nie zbić desktop fixed */
  .header .container.header__top {
    position: fixed !important;
  } /* już mamy fixed w tym bloku */
}
/* Belka tła — DOTYCZY TYLKO ≤1439px (drugi, dublujący blok usuń) */
/* === DESKTOP (≥1440) — belka fixed + autohide (logo już masz fixed) === */
@media (min-width: 1440px) {
  .header, .header__wrap {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  .header .container.header__top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    z-index: 10000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .header .container.header__top > * {
    pointer-events: auto;
  }
  .header__logo {
    position: fixed !important;
    top: 0;
    left: var(--content-x);
    height: var(--nav-h);
    z-index: 10001;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  /* autohide: chowamy belkę i logo */
  .nav-hidden .header .container.header__top {
    transform: translateY(-100%) !important;
  }
  .nav-hidden .header__logo {
    transform: translateY(-100%) !important;
  }
}
/* === GLOBAL: brak blur wszędzie (uciszenie lintera, zero zmiany wyglądu) === */
.header .container.header__top {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* odsunięcie treści (fallback) */
.header + main, body.home main, body.index main {
  padding-top: var(--nav-h);
}

/* === AUTOHIDE: LAPTOP+DESKTOP — przesuń WSZYSTKIE możliwe „belki” === */
@media (min-width: 1440px) {
  /* przygotuj elementy do animacji */
  .header .container.header__top,
  .header .header__top,
  .header__wrap {
    will-change: transform;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
    transform: translateZ(0); /* Safari/GPU nudge */
  }
  /* chowaj pasek przy .nav-hidden – obejmij każdy wariant */
  html.nav-hidden .header .container.header__top,
  html.nav-hidden .header .header__top,
  html.nav-hidden .header__wrap {
    transform: translate3d(0, -100%, 0) !important;
  }
  /* logo już masz – dorzucam 3D dla spójności */
  html.nav-hidden .header__logo {
    transform: translate3d(0, -100%, 0) !important;
  }
}
@media (min-width: 1440px) {
  /* belka — zostaje jak jest */
  .header .container.header__top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    z-index: 10000; /* pasek poniżej logo */
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: transform;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  /* LOGO — ten selektor jest bardziej specyficzny niż .header__logo */
  .header .header__logo {
    position: fixed !important;
    top: 0;
    left: var(--content-x);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    z-index: 11000 !important; /* ↑ nad belką */
    pointer-events: auto;
    will-change: transform;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
    transform: translateZ(0);
  }
  .header__logo img {
    display: block;
    height: 60px;
    width: 138px;
  }
  /* autohide: chowaj obie warstwy */
  html.nav-hidden .header .container.header__top {
    transform: translate3d(0, -100%, 0) !important;
  }
  html.nav-hidden .header .header__logo {
    transform: translate3d(0, -100%, 0) !important;
  }
}
.header {
  padding-top: 20px;
}

/* =========================================================
   Sekcja: MISJA (mobile first)
   ========================================================= */
/* ——— Ustawienia ——— */
/* Gradient z Figmy — podmień HEX-y, jeśli masz dokładne */
/* ——— Sekcja ——— */
.mission {
  position: relative;
  /* wyżej niż zwykłe tła z poprzedniej sekcji */
  isolation: isolate; /* nowy stacking context, kontrola blendów/filtrów */
  /* 🔼 podciągnięcie sekcji o 30px */
  --lift: -10px;
  /* steruje wejściem kropek w padding kontenera */
  --pad-x: 20px; /* mobile */
  /* promienie rogów obrazu */
  --img-r-tl: 60px;
  --img-r-tr: 0px;
  --img-r-br: 0px;
  --img-r-bl: 0px;
  transform: translateY(calc(-1 * var(--lift)));
  margin-bottom: calc(-1 * var(--lift));
  /* MOBILE: padding boczny 20 + dół 40 */
  padding: 0 20px 40px;
  box-sizing: border-box;
  margin-top: -15px;
}
.mission .container {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding: 0; /* na 744+ padding ustawia się niżej wg Figmy */
}
.mission {
  /* ===== GRID (mobile) — 4 kol., gap 20, content 335 ===== */
}
.mission__content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 20px;
  max-width: 335px;
  width: 100%;
  margin: 0 auto;
  align-items: start;
  justify-items: start;
  min-width: 0;
}
.mission {
  /* ===== OBRAZ (mobile) 335×375 ===== */
}
.mission__image-wrapper {
  grid-column: 1/-1;
  width: 335px;
  height: 375px;
  position: relative;
  overflow: visible; /* kropki mogą wychodzić */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15);
  margin-top: 40px;
  /* parallax PRZENIESIONY na IMG — jak w why-us */
  transform: none;
  will-change: auto;
}
.mission__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  will-change: transform;
  /* 🔒 TWARDY KLIP NA OBRAZIE (działa mimo overflow: visible na wrapperze) */
  border-top-left-radius: var(--img-r-tl);
  border-top-right-radius: var(--img-r-tr);
  border-bottom-right-radius: var(--img-r-br);
  border-bottom-left-radius: var(--img-r-bl);
  /* clip-path zapewnia, że róg nie „pęka” przy dużym scale() */
  clip-path: inset(0 round var(--img-r-tl) var(--img-r-tr) var(--img-r-br) var(--img-r-bl));
  /* mały trick kompozycyjny przeciw artefaktom na krawędzi */
  outline: 1px solid transparent;
  /* Apple-like: parallax + lift zsumowane NA OBRAZIE + zoom-out */
  transform: translateY(calc((1 - var(--p-img)) * (var(--img-parallax) + var(--img-lift)))) scale(calc(var(--img-scale-start) - (var(--img-scale-start) - 1) * var(--p-img)));
  transform-origin: center;
  transition: none;
}
.mission {
  /* ===== KROPKI ===== */
}
.mission__dots {
  position: absolute;
  top: -20px;
  right: calc(var(--pad-x) * -1); /* wchodzą w padding kontenera */
  width: 123px;
  height: auto;
  pointer-events: none;
  z-index: 1;
}
.mission {
  /* ===== DIVIDER ===== */
}
.mission__divider {
  grid-column: 1/-1;
  width: 229px;
  height: 4px;
  background: linear-gradient(90deg, #b86b31 0%, #0b0b0c 100%);
  border-radius: 2px;
  margin-top: 1px;
}
.mission {
  /* ===== COPY ===== */
}
.mission__copy {
  grid-column: 1/-1;
  width: 100%;
  max-width: 335px;
  text-align: left;
}
.mission__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0.07em;
  font-style: italic;
  color: #1d1f2c;
  align-self: start;
}
.mission__text-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.07em;
  font-style: italic;
  color: #1d1f2c;
  margin-top: 16px;
  align-self: start;
}
.mission__text {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.05em;
  color: #1d1f2c;
  margin-top: 24px;
  align-self: start;
}
.mission {
  /* ===== Button ===== */
}
.mission__button {
  grid-column: 1/-1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 335px;
  height: 56px;
  border-radius: 0 16px 0 0;
  background: #0b0b0c;
  color: #ffffff;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin-top: 20px;
  transition: transform 0.06s ease, opacity 0.15s ease;
}
.mission__button:hover {
  opacity: 0.95;
}
.mission__button:active {
  transform: translateY(1px);
}
.mission__button:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.2);
  outline-offset: 2px;
}
.mission__button-arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-left: 8px;
}
.mission {
  /* ——— TABLET (744–1439) — padding tylko na .container ——— */
}
@media (min-width: 744px) and (max-width: 1439px) {
  .mission {
    --pad-x: 42px;
    padding-left: 0;
    padding-right: 0;
  }
  .mission .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--pad-x); /* Figma 42px */
  }
  .mission__content {
    width: 100%;
    margin: 0; /* centrowanie robi padding kontenera */
    max-width: none;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 24px;
  }
  .mission {
    /* OBRAZ: pełna siatka 8 kol. i ratio 660×624 */
  }
  .mission__image-wrapper {
    grid-column: 1/-1;
    width: 100%;
    height: auto;
    aspect-ratio: 660/624;
    border-radius: 80px 0 0 0;
    overflow: visible;
  }
  .mission__image {
    height: 100%;
    border-radius: inherit;
  }
  .mission {
    /* kropki wchodzą w padding 42px */
  }
  .mission__dots {
    top: -14px;
    right: calc(var(--pad-x) * -1);
  }
  .mission {
    /* COPY */
  }
  .mission__copy {
    grid-column: 1/span 8;
    max-width: none;
    width: 100%;
  }
  .mission__divider {
    grid-column: 1/span 3;
    width: 100%;
    height: 4px;
    margin-top: 12px;
  }
  .mission__title {
    grid-column: 1/span 5;
    font-weight: 600;
    font-style: italic;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0.07em;
    color: #1d1f2c;
  }
  .mission__text-title {
    grid-column: 1/span 5;
    margin-top: 14px;
  }
  .mission__text {
    grid-column: 1/span 8;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: var(--gray-black-500);
  }
  .mission {
    /* Jesteśmy w: .mission { ... } */
  }
  .mission__button {
    /* zostawiasz swoje style jak są; tylko rozszerzamy transition */
    transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.15s ease;
    /* LIFT na hover (bez kombinowania z top) */
  }
  .mission__button:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }
  .mission__button:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
  }
}

/* ← domknięcie .mission !!! */
/* ==== HARD RESET dla WHY-US na MOBILE (0–743) ==== */
/* Zawsze 2 kafelki obok siebie i bez 'areas' */
@media (max-width: 743px) {
  .why-us__stats,
  .why_us__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 0;
    grid-template-areas: none;
  }
  .why-us__image-wrapper,
  .why_us__image-wrapper,
  .why-us__projects,
  .why_us__projects {
    grid-area: auto;
  }
}
@media (max-width: 743px) {
  .why-us__stats,
  .why-us .why-us__stats,
  .why-us .why_us__stats {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kafelki obok siebie */
    column-gap: 16px; /* 16px */
    row-gap: 0;
    grid-template-areas: none; /* kasuje wymuszoną kolejność */
  }
  .why-us {
    /* elementy wracają do zwykłego przepływu */
  }
  .why-us__image-wrapper, .why-us__projects {
    grid-area: auto;
  }
}
/* ——— LAPTOP (1440–1919) ——— */
@media (min-width: 1440px) and (max-width: 1919px) {
  .mission {
    --pad-x: 40px;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 0;
    padding-right: 0;
  }
  .mission .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--pad-x); /* 40px po bokach */
  }
  .mission__content {
    align-items: stretch;
    width: 100%;
    margin: 0;
    max-width: none;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 28px;
    align-items: end; /* tekst dosunięty do dołu obrazu */
    min-width: 0;
  }
  .mission__image-wrapper {
    grid-column: 7/13;
    grid-row: 1;
    width: 100%;
    min-height: 657px;
    aspect-ratio: 613/657;
    border-radius: 96px 0 0 0;
    overflow: hidden;
    position: relative;
    margin-top: 0;
  }
  .mission__image {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    object-position: 60% center;
    border-radius: inherit;
  }
  .mission__dots {
    top: -24px;
    right: calc(var(--pad-x) * -1);
    z-index: 2;
    width: 192px;
    height: 220px;
  }
  .mission__copy {
    grid-column: 1/7;
    grid-row: 1;
    align-self: end;
    max-width: none;
    width: 100%;
    min-width: 0;
    position: relative;
    padding-top: 24px;
  }
  .mission__copy::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 192px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b86b31 0%, #0b0b0c 100%);
    pointer-events: none;
    z-index: 2;
  }
  .mission__divider {
    display: none;
  }
  .mission__title {
    grid-column: 1/7;
    grid-row: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: 0.07em;
    color: #1d1f2c;
    margin-top: 0;
  }
  .mission__text-title {
    grid-column: 1/7;
    grid-row: 1;
    margin-top: 14px;
  }
  .mission__text {
    grid-column: 1/7;
    grid-row: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: var(--gray-black-500);
  }
  .mission__button {
    grid-column: 1/span 3;
    grid-row: 1;
    width: auto;
    min-width: 200px;
    height: 56px;
    padding: 0 24px;
    margin-top: 66px;
    border-radius: 0 16px 0 0;
  }
}
/* ——— DESKTOP (≥1920) ———
   Grid: 12 × 88px, gap 24px, content 1320px, marginesy boczne 300px
---------------------------------------------------------------- */
@media (min-width: 1920px) {
  .mission {
    /* wymiar sekcji (łącznie z paddingiem) */
    --pad-x: 300px;
    height: 857px;
    box-sizing: border-box;
    padding: 100px var(--pad-x); /* top/bottom 100, left/right 300 */
    transform: none;
    margin-bottom: 0;
    /* kontener przejmuje wysokość; brak własnego paddingu */
  }
  .mission > .container {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0; /* ← padding tylko na .mission */
  }
  .mission {
    /* siatka: content 1320px i pełna wysokość sekcji */
  }
  .mission > .container > .mission__content {
    max-width: 1320px; /* 12×88 + 11×24 */
    width: 100%;
    height: 100%; /* 857 - 2×100 = 657px na treść */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr; /* 1 rząd na pełną wysokość */
    column-gap: 24px;
    row-gap: 32px;
    align-content: stretch;
    align-items: stretch;
    min-width: 0;
  }
  .mission {
    /* prawa połówka – obraz */
  }
  .mission__image-wrapper {
    grid-column: 7/13;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* dopasuj wg Figmy jeśli potrzeba */
    border-radius: 104px 0 0 0;
    position: relative;
    overflow: visible;
  }
  .mission__image {
    height: 100%;
    border-radius: inherit;
    display: block;
  }
  .mission {
    /* kropki wchodzą w margines 300px */
  }
  .mission__dots {
    top: -32px;
    right: calc(var(--pad-x) * -0.5);
    z-index: 2;
    width: 192px;
    height: 220px;
  }
  .mission {
    /* lewa połówka – copy od góry/lewej */
  }
  .mission__copy {
    grid-column: 1/7;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    max-width: none;
    width: 100%;
    min-width: 0;
    position: relative;
    padding-top: 32px; /* odstęp od dividera do tytułu */
  }
  .mission__copy::before {
    margin-top: 299px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 192px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b86b31 0%, #0b0b0c 100%);
    pointer-events: none;
    z-index: 2;
  }
  .mission__divider {
    display: none;
  }
  .mission {
    /* wyłączamy stary element dividera */
    /* typografia */
  }
  .mission__title {
    grid-column: 1/7;
    grid-row: 1;
    font: italic 600 48px/1.2 "DM Sans", sans-serif;
    letter-spacing: 0.07em;
    color: #1d1f2c;
    margin-top: 306px;
  }
  .mission__text-title {
    grid-column: 1/7;
    grid-row: 1;
    margin-top: 14px;
  }
  .mission__text {
    grid-column: 1/7;
    grid-row: 1;
    font: 400 16px/1.5 "DM Sans", sans-serif;
    letter-spacing: 0.05em;
    color: var(--gray-black-500);
    margin-top: 18px;
  }
  .mission__button {
    grid-column: 1/span 3;
    grid-row: 1;
    min-width: 210px;
    height: 56px;
    padding: 0 24px;
    margin-top: 24px;
    border-radius: 0 16px 0 0;
  }
}
/* FIX: Mission — allow-all, deny dekoracje */
.mission {
  position: relative;
  z-index: 0;
  pointer-events: none; /* rodzic nie łapie */
  isolation: isolate;
}

/* otwieramy interakcje dla całego poddrzewa */
.mission * {
  pointer-events: auto;
}

/* ale dekoracje NIGDY nie łapią */
.mission::before,
.mission::after {
  pointer-events: none;
}

/* typowe warstwy dekoracyjne w Mission */
.mission__dots,
.mission__divider,
.mission__veil,
.mission__overlay,
.mission__image-wrapper,
.mission__image,
[aria-hidden=true],
[data-decor],
.is-decor {
  pointer-events: none;
}

/* jeśli divider jest pseudo-elementem na copy, wyłącz też jego PE */
.mission__copy::before {
  pointer-events: none;
}

/* scss/layout/calculator.scss
   Mobile-first wariant „karta”.
   Od ≥768px karta ma szerokość równą szerokości kontenera .container,
   czyli marginesy boczne identyczne jak reszta contentu na stronie.
*/
.calculator {
  position: relative;
  /* overlap pod header – delikatny */
  --calc-offset: clamp(-64px, -4vh, 20px);
  margin-top: var(--calc-offset);
}

/* === KARTA (MOBILE DOMYŚLNIE – wąska, wysoka, TR mocno zaokrąglony) === */
.calc-card {
  /* rozmiary mobile */
  --card-max-w: 360px;
  --card-min-h: 420px;
  --card-pad-x: 16px;
  --card-pad-y: 16px;
  --card-radius: 16px;
  --card-radius-TR: 56px;
  width: min(100% - 32px, var(--card-max-w));
  min-height: var(--card-min-h);
  margin-inline: auto;
  padding: var(--card-pad-y) var(--card-pad-x);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--card-radius) var(--card-radius-TR) var(--card-radius) var(--card-radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  row-gap: 12px;
  /* defensywnie – brak dziwnych transformów */
  transform: none !important;
  transition: none !important;
}

.calc-card__title {
  margin: 0;
  line-height: 1.15;
  font-weight: 800;
  font-size: clamp(22px, 6.2vw, 28px);
  text-align: center;
}

.calc-card__subtitle {
  margin: 6px 0 0;
  text-align: center;
  line-height: 1.4;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.72);
}

.calc-card__accent {
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.18;
  justify-self: center;
  margin-top: 6px;
}

/* siatka pól na mobile: 2 kolumny */
.calc-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.calc-card__field {
  display: grid;
  gap: 6px;
}

.calc-card__label {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.65);
}

.calc-card__control {
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* akcje (przycisk) – pod siatką na mobile */
.calc-card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-top: 8px;
}

.calc-card__submit {
  /* jeżeli masz globalną .btn – zostaw obie klasy: class="calc-card__submit btn" */
  min-height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}

/* =================== TABLET ≥768px =================== */
/* Tu kartę robimy na pełną szerokość .container */
@media (min-width: 768px) {
  .calculator {
    --calc-offset: clamp(-72px, -4vh, 24px);
  }
  .calc-card {
    width: 100%; /* <<< klucz: szerokość równa .container */
    max-width: none;
    min-height: 400px;
    /* karta bardziej „płaska”, większe oddechy */
    --card-pad-x: 24px;
    --card-pad-y: 18px;
    --card-radius-TR: 36px; /* nadal zaokrąglony prawy-górny, ale mniejszy */
    border-radius: 16px var(--card-radius-TR) 16px 16px;
    row-gap: 16px;
  }
  /* siatka pól – ciaśniejsze odstępy */
  .calc-card__grid {
    gap: 16px 16px;
  }
}
/* =================== LAPTOP ≥1024px =================== */
@media (min-width: 1024px) {
  .calculator {
    --calc-offset: clamp(-88px, -5vh, 24px);
  }
  .calc-card {
    width: 100%; /* pełna szerokość kontenera */
    min-height: 360px;
    --card-pad-x: 28px;
    --card-pad-y: 20px;
    --card-radius-TR: 28px;
    border-radius: 16px var(--card-radius-TR) 16px 16px;
    row-gap: 18px;
  }
  /* na szerokości siatka 4 kolumny (pola) */
  .calc-card__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 18px;
  }
}
/* =================== DESKTOP ≥1440px =================== */
@media (min-width: 1440px) {
  .calculator {
    --calc-offset: clamp(-104px, -6vh, 24px);
  }
  .calc-card {
    width: 100%; /* pełna szerokość kontenera */
    min-height: 340px;
    --card-pad-x: 32px;
    --card-pad-y: 22px;
    --card-radius-TR: 24px; /* jeszcze subtelniej, jak na layoutach desktop */
    border-radius: 16px var(--card-radius-TR) 16px 16px;
    row-gap: 20px;
  }
  .calc-card__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 24px;
  }
}
/* ===== Fallbacki ===== */
/* ===================== TOKENS — MOBILE ===================== */
/* ===================== TOKENS — TABLET (744) ===================== */
/* ===================== TOKENS — LAPTOP (1440–1919) ===================== */
/* ===================== TOKENS — DESKTOP (≥1920) ===================== */
/* =========================================================
   FOOTER — mobile-first; płynny grid
   ========================================================= */
.footer {
  position: relative;
  isolation: isolate;
  background-color: #000000;
  color: #ffffff;
  padding: 60px 0 30px;
  /* Korzeń nie przechwytuje klików — interakcje tylko w zawartości */
  pointer-events: none;
  /* ——— CONTAINER ——— */
}
.footer > .container {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 20px; /* mobile padding */
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  justify-content: normal;
  align-items: start;
  min-width: 0;
  position: relative;
  z-index: 1;
  pointer-events: auto; /* zawartość klikalna */
}
.footer {
  /* BRAND */
}
.footer__top {
  grid-column: 1/-1;
}
.footer__logo-link {
  display: inline-block;
  line-height: 0;
}
.footer__logo {
  width: 130px;
  height: auto;
  margin-bottom: 20px;
  display: block;
}
.footer__description {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  max-width: 400px;
  text-align: left;
}
.footer {
  /* LINKI */
}
.footer__links {
  grid-column: 1/-1;
}
.footer__heading {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  line-height: 150%;
  font-weight: 600;
  margin-bottom: 20px;
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__link:hover {
  color: #ffffff;
}
.footer__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
  border-radius: 2px;
}
.footer {
  /* KONTAKT */
}
.footer__contact {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__address {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.5;
  font-style: normal;
}
.footer {
  /* SOCIAL */
}
.footer__socials {
  grid-column: 1/-1;
}
.footer__social-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer__social-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s ease;
}
.footer__social-link img {
  display: block;
  width: 20px;
  height: 20px;
}
.footer__social-link:hover {
  transform: scale(1.06);
}
.footer__social-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}
.footer {
  /* BOTTOM */
}
.footer__bottom {
  grid-column: 1/-1;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center; /* mobile */
}
.footer__copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.footer__main-content {
  display: contents;
}
.footer__bottom-nav {
  display: none;
}
.footer {
  /* =================== TABLET (≥744) =================== */
}
@media (min-width: 744px) {
  .footer {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .footer > .container {
    padding-inline: 42px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    justify-content: normal;
  }
  .footer__top {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .footer__links {
    grid-column: 1/span 2;
    grid-row: 2;
  }
  .footer__contact {
    grid-column: 3/span 3;
    grid-row: 2;
  }
  .footer__socials {
    grid-column: 6/span 3;
    grid-row: 2;
    display: block;
  }
  .footer__bottom {
    grid-column: 1/-1;
    grid-row: 3;
    margin-top: 24px;
    padding-top: 0;
    border: none;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
    text-align: left;
  }
  .footer__copyright {
    grid-column: 1/span 4;
    font-size: 12.5px;
  }
  .footer__bottom-nav {
    grid-column: 5/span 4;
    justify-self: end;
    display: flex;
    gap: 16px;
  }
  .footer {
    /* typografia */
  }
  .footer__logo {
    width: 140px;
    margin-bottom: 16px;
  }
  .footer__description {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
  }
  .footer__heading {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .footer__list {
    gap: 12px;
  }
  .footer__link, .footer__contact a, .footer__address {
    font-size: 14px;
    line-height: 1.6;
  }
  .footer__social-icons {
    gap: 16px;
  }
  .footer__social-link {
    width: 32px;
    height: 32px;
  }
  .footer__social-link img {
    width: 18px;
    height: 18px;
  }
}
.footer {
  /* =================== LAPTOP (1440–1919) =================== */
}
@media (min-width: 1440px) and (max-width: 1919px) {
  .footer {
    padding-top: 80px;
    padding-bottom: 40px;
  }
  .footer > .container {
    max-width: 100%;
    padding-inline: 40px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    justify-content: normal;
  }
  .footer__top {
    grid-column: 1/span 4;
    grid-row: 1;
  }
  .footer__links {
    grid-column: 5/span 2;
    grid-row: 1;
  }
  .footer__contact {
    grid-column: 7/span 3;
    grid-row: 1;
  }
  .footer__socials {
    grid-column: 10/span 3;
    grid-row: 1;
  }
  .footer__bottom {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
  }
  .footer__logo {
    width: 160px;
    margin-bottom: 24px;
  }
  .footer__description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
  }
  .footer__heading {
    font-size: 24px;
    margin-bottom: 24px;
  }
  .footer__list {
    gap: 14px;
  }
  .footer__link, .footer__contact a, .footer__address {
    font-size: 16px;
    line-height: 1.6;
  }
  .footer__social-icons {
    gap: 16px;
  }
  .footer__social-link {
    width: 44px;
    height: 44px;
  }
  .footer__copyright {
    font-size: 14px;
  }
}
.footer {
  /* =================== DESKTOP (≥1920) =================== */
}
@media (min-width: 1920px) {
  .footer {
    padding-top: 88px;
    padding-bottom: 40px;
  }
  .footer > .container {
    max-width: 100%;
    padding-inline: 300px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    justify-content: normal;
  }
  .footer__top {
    grid-column: 1/span 4;
    grid-row: 1;
  }
  .footer__links {
    grid-column: 5/span 3;
    grid-row: 1;
  }
  .footer__contact {
    grid-column: 8/span 3;
    grid-row: 1;
  }
  .footer__socials {
    grid-column: 11/span 2;
    grid-row: 1;
  }
  .footer__bottom {
    grid-column: 1/-1;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 28px;
    padding-top: 24px;
    text-align: left;
  }
  .footer__logo {
    width: 172px;
  }
  .footer__description {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
  }
  .footer__heading {
    font-size: 24px;
    margin-bottom: 24px;
  }
  .footer__list {
    gap: 14px;
  }
  .footer__link, .footer__contact a, .footer__address {
    font-size: 16px;
    line-height: 1.65;
  }
  .footer__social-icons {
    gap: 16px;
  }
  .footer__social-link {
    width: 48px;
    height: 48px;
  }
  .footer__social-link img {
    width: 22px;
    height: 22px;
  }
}

/* =========================================================
   Sekcja: DLACZEGO MY (mobile first)
   ========================================================= */
/* ——— Sekcja ——— */
.why-us {
  padding: 0 0 40px;
  box-sizing: border-box;
  background-color: #faf7f4;
}
.why-us .container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--content-x, 20px); /* mobile: boczne 20px */
  padding-top: 40px;
}
.why-us {
  /* Divider */
}
.why-us__divider {
  --div-p: 0;
  grid-column: 1/-1;
  width: 229px;
  height: 4px;
  background: linear-gradient(90deg, #b86b31 0%, #0b0b0c 100%);
  border-radius: 2px;
  justify-self: start;
  margin-top: 4px;
  /* Figma: stroke + drop shadow */
  box-shadow: inset 0 0 0 1px #979797, 0 2px 8px rgba(0, 0, 0, 0.25); /* drop shadow */
}
.why-us {
  /* GRID (mobile) — 4 kol., gap 16, content płynny */
}
.why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 16px;
  row-gap: 20px;
  width: 100%;
  margin: 0 auto;
  align-items: start;
  justify-items: start;
  min-width: 0;
}
.why-us {
  /* Duże foto (mobile) – płynna wysokość */
}
.why-us__review-card {
  grid-column: 1/-1;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1.2546816479;
  overflow: hidden;
  border-top-right-radius: 62px;
  background: #faf7f4;
}
.why-us__review-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  will-change: transform;
  /* efekt sterowany wyłącznie var(--w-img) */
  transform: translate3d(0, calc((1 - var(--w-img)) * (var(--img-parallax) + var(--img-lift))), 0) scale(calc(var(--img-scale-start) - (var(--img-scale-start) - 1) * var(--w-img)));
}
.why-us {
  /* Kafle: badge + mini-foto (mobile — obok siebie) */
}
.why-us__stats {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 0;
  width: 100%;
  align-items: stretch;
}
.why-us__projects {
  background: #fff3e2;
  border-radius: 0 62px 0 0;
  width: 100%;
  /* 🔒 blokada proporcji zamiast stałej wysokości */
  height: auto;
  aspect-ratio: 159/115; /* proporcja z mobile: ~159.5×115 */
  min-height: 115px; /* nie mniejszy niż dotychczas */
  box-sizing: border-box; /* padding wliczony w pudełko */
  padding: 16px;
  /* pin do dołu wiersza (zostawiamy jak wcześniej) */
  margin-top: 0;
  place-self: end start;
  align-self: end;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.why-us__projects::before {
  content: "";
  flex: 1 1 auto;
  width: 100%;
}
.why-us__image-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 159/190;
  overflow: hidden;
  border-radius: 0 62px 0 0;
  background: #e9eef2;
}
.why-us__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.why-us {
  /* Teksty */
}
.why-us__text {
  grid-column: 1/-1;
  width: 100%;
  max-width: 335px;
}
.why-us__heading {
  margin: 4px 0 0;
}
.why-us__title {
  font: italic 600 24px/1.26 "DM Sans", sans-serif;
  letter-spacing: 0.07em;
  color: #070707;
}
.why-us__description-title {
  margin-top: 16px;
  font: italic 600 16px/1 "DM Sans", sans-serif;
  color: #070707;
}
.why-us__description {
  margin-top: 16px;
  font: 400 16px/1.6 "DM Sans", sans-serif;
  color: #070707;
}
.why-us__list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: 16px;
  font: 600 14px/1.26 "DM Sans", sans-serif;
}
.why-us__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  align-items: center;
}
.why-us__check-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.why-us {
  /* =========================================================
    TABLET (744–1439) — 8 kolumn, gap 20, aspect-ratio lock
    ========================================================= */
}
@media (min-width: 744px) and (max-width: 1439px) {
  .why-us {
    --pad-x: 42px;
    padding-left: 0;
    padding-right: 0;
  }
  .why-us .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    padding-top: 40px;
  }
  .why-us {
    /* GRID sekcji — płynny 8-kolumnowy */
  }
  .why-us__grid, .why-us .why_us__grid {
    --g: 20px;
    display: grid;
    width: 100%;
    max-width: none !important;
    margin: 0 auto;
    grid-template-columns: repeat(8, minmax(0, calc((100% - 7 * var(--g)) / 8)));
    column-gap: var(--g);
    grid-template-rows: auto auto auto;
    row-gap: 28px;
    align-items: start;
    justify-items: start;
    min-width: 0;
  }
  .why-us {
    /* LEWE DUŻE FOTO (1–4) — blokada proporcji 292×512 */
  }
  .why-us__review-card {
    grid-column: 1/5;
    grid-row: 1;
    /* 🔑 kluczowe zmiany */
    width: 100%;
    height: auto; /* usuwamy sztywne 512px */
    aspect-ratio: 341/512; /* blokada proporcji 341×512 */
    margin-right: calc(var(--g) * -1); /* bleed w gap jak w Figmie */
    border-top-right-radius: 62px;
    overflow: hidden;
  }
  .why-us__review-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .why-us {
    /* PRAWA KOLUMNA (5–8) — obrazek ↑, badge ↓ */
  }
  .why-us__stats {
    grid-column: 5/9;
    grid-row: 1;
    --stats-inset: 12px;
    padding-left: var(--stats-inset);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "badge";
    row-gap: 20px;
    min-width: 0;
  }
  .why-us {
    /* MAŁE FOTO — blokada proporcji ~350×352 */
  }
  .why-us__image-wrapper {
    grid-area: img;
    width: 100%;
    /* zamiast height:352px */
    height: auto;
    aspect-ratio: 0.9943181818;
    min-height: 352px;
    overflow: hidden;
    border-radius: 0 42px 0 0;
  }
  .why-us__image {
    width: 105% !important;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    border-radius: 0 42px 0 0;
  }
  .why-us {
    /* BADGE 26+ — blokada proporcji, min 136px wysokości */
  }
  .why-us__projects {
    grid-area: badge;
    width: 100%;
    height: auto;
    aspect-ratio: 2.1470588235; /* szer. kolumny ~292 przy 660 content */
    min-height: 136px;
    margin-top: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .why-us__projects::before {
    content: none;
  }
  .why-us__projects {
    background: #fff3e2;
    border-radius: 0 62px 0 0;
  }
  .why-us {
    /* Wiersze: divider + tekst */
  }
  .why-us__divider {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: start;
  }
  .why-us__text {
    grid-column: 1/-1;
    grid-row: 3;
    width: 100%;
    max-width: none !important;
  }
  .why-us {
    /* alias z podkreśleniem */
  }
  .why-us .why_us__stats {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "badge";
    row-gap: 20px;
  }
  .why-us .why_us__stats .why-us__image-wrapper {
    grid-area: img;
  }
  .why-us .why_us__stats .why-us__projects {
    grid-area: badge;
  }
}
.why-us {
  /* =========================================================
     LAPTOP (1440–1919) — stałe gapy, zero overlapów
     ========================================================= */
}
@media (min-width: 1440px) and (max-width: 1919px) {
  .why-us .why-us {
    --pad-x: 40px;
    padding-left: 0;
    padding-right: 0;
  }
  .why-us .why-us .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    padding-top: 48px;
  }
  .why-us .why-us {
    /* PŁYNNY GRID 12 kolumn: gap stały 24px */
  }
  .why-us .why-us__grid,
  .why-us .why-us .why_us__grid {
    --g: 24px;
    display: grid;
    width: 100%;
    max-width: none !important;
    margin: 0 auto;
    grid-template-columns: repeat(12, minmax(0, calc((100% - 11 * var(--g)) / 12)));
    column-gap: var(--g);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    align-items: stretch;
    justify-items: stretch;
    min-width: 0;
  }
  .why-us .why-us {
    /* LEWE DUŻE FOTO — BEZ BLEEDU, gap po prawej */
  }
  .why-us .why-us__review-card {
    grid-column: 1/4;
    grid-row: 1;
    position: relative;
    z-index: 0;
    justify-self: stretch; /* ← rozciągaj po torze */
    width: auto;
    margin-right: 0;
    height: auto;
    aspect-ratio: 0.666015625;
    min-height: 512px;
    border-top-right-radius: 62px;
    overflow: hidden;
  }
  .why-us .why-us__review-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .why-us .why-us {
    /* PRAWY STACK (4–6) — rośnie na wysokość wiersza, badge przy dole */
    /* Prawa kolumna – JEDNA kolumna, obrazek ↑, badge ↓ */
  }
  .why-us .why-us__stats {
    grid-column: 4/7;
    grid-row: 1;
    position: relative;
    z-index: 1;
    padding-left: 0;
    display: grid;
    /* ⬇⬇⬇ twardy reset mobile */
    grid-template-columns: 1fr !important; /* było: 1fr 1fr z mobile */
    grid-auto-flow: row;
    column-gap: 0; /* reset gapu z mobile */
    grid-template-areas: "img" "badge";
    grid-template-rows: 1fr auto; /* badge przy dole */
    row-gap: 24px;
    justify-self: stretch;
    width: 100%;
    /* NIE ustawiaj height:100% – niech szerokość steruje wysokością (AR) */
    min-width: 0;
  }
  .why-us .why-us {
    /* Górne małe foto — wypełnia 1fr */
  }
  .why-us .why-us__image-wrapper {
    grid-area: img;
    width: 100%;
    height: auto;
    aspect-ratio: 0.9943181818;
    min-height: 352px;
    border-radius: 0 62px 0 0;
    overflow: hidden;
    align-self: stretch;
  }
  .why-us .why-us__image {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
  }
  .why-us .why-us {
    /* Badge — na dole */
  }
  .why-us .why-us__projects {
    grid-area: badge;
    width: 100%;
    height: auto;
    aspect-ratio: 2.1470588235;
    min-height: 136px;
    margin-top: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    background: #fff3e2;
    border-radius: 0 62px 0 0;
  }
  .why-us .why-us {
    /* Teksty po prawej (7–12) — bez zmian */
  }
  .why-us .why-us__divider {
    grid-column: 7/-1;
    grid-row: 1;
    justify-self: start;
  }
  .why-us .why-us__text {
    grid-column: 7/-1;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }
  .why-us .why-us__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 16px;
  }
}
.why-us {
  /* =========================================================
     DESKTOP (≥1920) — 12×88, gap 24, content 1320, pad 300
     ========================================================= */
}
@media (min-width: 1920px) {
  .why-us {
    --pad-x: 300px;
    padding-left: 0;
    padding-right: 0;
  }
  .why-us .container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    padding-top: 56px;
  }
  .why-us__grid, .why-us .why_us__grid {
    --g: 24px;
    display: grid;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: repeat(12, 88px);
    column-gap: var(--g);
    row-gap: 32px;
    align-items: start;
    justify-items: start;
    min-width: 0;
  }
  .why-us__review-card {
    grid-column: 1/span 4;
    grid-row: 1;
    height: 512px;
    border-top-right-radius: 62px;
    overflow: hidden;
  }
  .why-us__review-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .why-us {
    /* obrazek ↑, badge ↓ */
  }
  .why-us__stats {
    grid-column: 5/span 3;
    grid-row: 1;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "badge";
    row-gap: 24px;
    min-width: 0;
  }
  .why-us__image-wrapper {
    width: 100%;
    height: 352px;
    border-radius: 0 62px 0 0;
    overflow: hidden;
    grid-area: img;
  }
  .why-us__image {
    width: 100% !important;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
  }
  .why-us__projects {
    width: 100%;
    height: 136px;
    margin-top: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .why-us__projects::before {
    content: none;
  }
  .why-us__projects {
    grid-area: badge;
  }
  .why-us__divider {
    grid-column: 8/-1;
    grid-row: 1;
    justify-self: start;
  }
  .why-us__text {
    grid-column: 8/-1;
    grid-row: 1;
    max-width: none;
    width: 100%;
  }
  .why-us__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 16px;
  }
  .why-us {
    /* alias */
  }
  .why-us .why_us__stats {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "badge";
    row-gap: 24px;
  }
  .why-us .why_us__stats .why-us__image-wrapper {
    grid-area: img;
  }
  .why-us .why_us__stats .why-us__projects {
    grid-area: badge;
  }
}

/* FIX: sekcja Why-us — allow-all, deny dekoracje */
.why-us,
.why_us {
  position: relative;
  z-index: 0;
  pointer-events: none; /* sekcja sama nie łapie */
  isolation: isolate; /* własny stacking context */
}

/* wszystko w środku przepuszcza kliknięcia */
.why-us *,
.why_us * {
  pointer-events: auto;
}

/* ALE — dekoracje nigdy nie łapią */
.why-us::before,
.why-us::after,
.why_us::before,
.why_us::after {
  pointer-events: none;
}

.why-us__divider,
.why-us__image-wrapper,
.why-us__image,
.why-us__projects::before,
[aria-hidden=true],
[data-decor],
.is-decor {
  pointer-events: none;
}

/* =========================================================
   SERVICES — MOBILE-FIRST
   Płynnie: 0–1919 • Sztywno: ≥1920
   ========================================================= */
/* ——— Tokeny sekcji ——— */
/* ——— Baza sekcji (wspólne) ——— */
.services img,
.services svg,
.services picture,
.services video,
.services canvas,
.services a,
.services button,
.services .services__slider,
.services .services__track,
.services .services__card,
.services .services__card *,
.services .services__nav,
.services .services__arrow,
.services .services__button {
  pointer-events: auto;
}
.services {
  background: #fff;
  position: relative;
  padding: 40px 0;
  box-sizing: border-box;
  /* WYŁĄCZ pseudo-elementy SEKCJI (to był parawan) */
}
.services::before, .services::after {
  content: none;
  pointer-events: none;
}
.services {
  /* Tytuł */
}
.services__title {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 140%;
  color: #1D1F2C;
  margin: 0;
}
.services__title::before {
  content: "";
  display: block;
  width: 225px;
  height: 4px;
  background: linear-gradient(90deg, #DC9B59 0%, #000000 100%);
  border-radius: 2px;
  margin: 0 0 20px;
}
.services {
  /* Slider – viewport */
}
.services__slider {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 36px;
  display: flex;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  /* przewijanie ukryte – tor przesuwa JS */
  overflow-x: hidden;
  overflow-y: visible;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* maski na brzegi (mobile) */
}
.services__slider::before, .services__slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  background: #fff;
  z-index: 0;
  pointer-events: none;
}
.services__slider::before {
  right: 100%;
}
.services__slider::after {
  left: 100%;
}
.services__slider {
  /* Kadr mobilny */
  max-width: 375px; /* 375 */
  /* Hierarchia warstw (czytelnie, bez hacków) */
}
.services__slider__track {
  position: relative;
  z-index: 1;
}
.services__slider__card {
  position: relative;
  z-index: 1;
}
.services__slider__button {
  position: absolute;
  z-index: 2;
}
.services__slider__nav {
  position: relative;
  z-index: 3;
}
.services {
  /* Tor slidera */
}
.services__track {
  display: flex;
  gap: 16px; /* spójnie z siatką mobile */
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  position: relative;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}
.services {
  /* Karta */
}
.services__card {
  isolation: isolate;
  position: relative;
  padding-bottom: 28px;
  overflow: visible;
  flex-shrink: 0;
  width: 300px; /* 336 */
  box-sizing: border-box;
  background-color: #FAF7F4;
  scroll-snap-align: start;
  border-top-right-radius: 60px;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 280ms ease;
  box-shadow: 0 4px 4px rgba(202, 200, 200, 0.25);
}
.services__card.is-active {
  transform: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}
.services__card {
  position: relative;
  z-index: 1;
}
.services__image {
  width: 100%;
  height: 218px;
  object-fit: cover;
  border-top-left-radius: 0;
  border-top-right-radius: 40px;
  display: block;
  position: relative;
  z-index: 0;
}
.services .services__icon-wrapper {
  width: 93px;
  height: 93px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 218px;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #FAF7F4;
  box-shadow: 0 4px 4px rgba(202, 200, 200, 0.25);
}
.services .services__icon {
  color: #000; /* kolor obrysu */
  width: 93px;
  height: 93px;
  display: block;
}
.services .services {
  /* -- Pusta kartka -- */
}
.services .services__icon [data-draw] {
  fill: none !important;
  stroke: transparent !important;
  stroke-dasharray: var(--drawLen, 1) !important;
  stroke-dashoffset: var(--drawLen, 1) !important;
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  vector-effect: non-scaling-stroke;
}
.services .services {
  /* -- Rysowanie -- */
}
.services .services__icon.is-drawn [data-draw] {
  stroke: currentColor;
  stroke-dashoffset: 0;
}
.services .services {
  /* (opcjonalnie) lekkie opóźnienie kolejnych elementów */
}
.services .services .services__icon.is-drawn [data-draw]:nth-of-type(2) {
  transition-delay: 0.08s;
}
.services .services .services__icon.is-drawn [data-draw]:nth-of-type(3) {
  transition-delay: 0.16s;
}
.services .services .services__icon.is-drawn [data-draw]:nth-of-type(4) {
  transition-delay: 0.24s;
}
.services .services .services__icon.is-drawn [data-draw]:nth-of-type(5) {
  transition-delay: 0.32s;
}
.services__card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: -50px;
}
.services__card-title {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 126%;
  letter-spacing: 0.07em;
  color: #000;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 25px;
  margin-top: 100px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.services__card-text {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 126%;
  letter-spacing: 0.07em;
  text-align: center;
  color: #000;
  margin-bottom: 36px;
  margin-top: 30px;
}
.services__button {
  width: 174px;
  height: 56px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background: #000000;
  color: #ffffff;
  border-radius: 0 20px 0 0;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.services {
  /* Nawigacja */
}
.services__nav {
  width: 100%;
  max-width: 335px; /* mobile */
  height: 37px;
  margin: 14px auto 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  position: relative;
  position: relative;
  z-index: 3;
}
.services__arrow {
  border: 0;
  background: none;
  height: 37px;
  width: 37px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.services__arrow img {
  width: 16px;
  height: auto;
  display: block;
}
.services__arrow:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.2);
  outline-offset: 2px;
  border-radius: 6px;
}
.services__arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* =========================================================
   MOBILE (0–743) — nav pod sliderem
   ========================================================= */
@media (max-width: 743px) {
  .services > .container {
    display: grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    column-gap: 16px;
    row-gap: 24px;
    padding-inline: 20px;
    grid-template-areas: "title title title title" "slider slider slider slider" "nav    nav    nav    nav";
  }
  .services {
    /* wrapper lewej kolumny jest neutralny w tym MQ */
  }
  .services > .container > .services__left {
    display: contents;
  }
  .services {
    /* przypięcie areas */
  }
  .services > .container .services__title {
    grid-area: title;
  }
  .services > .container .services__slider {
    grid-area: slider;
  }
  .services > .container .services__nav {
    grid-area: nav;
    margin: 14px auto 0;
    justify-content: center;
    gap: 16px;
  }
}
/* =========================================================
   TABLET (744–1439)
   2 pełne karty, nav pod sliderem, bez podwójnych paddingów
   ========================================================= */
@media (min-width: 744px) and (max-width: 1439px) {
  .services {
    /* wyzeruj padding sekcji – rama jest na .container */
    padding-inline: 0;
  }
  .services > .container {
    display: grid;
    grid-template-columns: repeat(8, minmax(65px, 1fr));
    column-gap: 20px;
    row-gap: 24px;
    /* content 660 + padding 42+42 = 744 */
    max-width: 660px;
    padding-inline: 42px;
    margin-inline: auto;
    box-sizing: content-box;
    grid-template-areas: "title title title title title title title title" "slider slider slider slider slider slider slider slider" "nav    nav    nav    nav    nav    nav    nav    nav";
    /* stałe tabletu */
    --svcs-content: 660px;
    --svcs-gap: 20px;
    --svcs-cards: 2;
    --svcs-card-w: calc(
      (var(--svcs-content) - (var(--svcs-gap) * (var(--svcs-cards) - 1)))
      / var(--svcs-cards)
    ); /* 320px */
  }
  .services > .container > .services__left {
    display: contents;
  }
  .services > .container .services__title {
    grid-area: title;
  }
  .services > .container .services__slider {
    grid-area: slider;
    width: 100%;
    max-width: var(--svcs-content); /* 660 */
    margin-inline: auto;
    margin-left: 0; /* reset ewentualnych offsetów */
    overflow-x: hidden;
    scroll-snap-type: none; /* ruchem steruje JS */
  }
  .services > .container .services__slider::before, .services > .container .services__slider::after {
    display: none;
  }
  .services > .container .services__track {
    gap: var(--svcs-gap);
  }
  .services > .container .services__card {
    width: var(--svcs-card-w);
  }
  .services { /* 320 */ }
  .services > .container .services__nav {
    grid-area: nav;
    margin: 14px auto 0;
    justify-content: center;
    gap: var(--svcs-gap);
    max-width: none;
    padding: 0;
  }
}
/* =========================================================
   LAPTOP (1440–1919)
   Lewa 1/4 (center Y), Prawa 4/13, 2×400 + 24, offset 39
   ========================================================= */
@media (min-width: 1440px) and (max-width: 1919px) {
  .services > .container {
    display: grid;
    grid-template-columns: repeat(12, minmax(78px, 1fr));
    column-gap: 24px;
    padding-inline: 40px;
    max-width: 1280px;
    margin-inline: auto;
    align-items: stretch;
    --svcs-gap: 24px;
    --svcs-card-w: 400px; /* Figma */
    --svcs-viewport: calc(var(--svcs-card-w)*2 + var(--svcs-gap)); /* 824px */
    --svcs-offset-left: 39px; /* odsunięcie od linii grida */
  }
  .services {
    /* lewy blok – jeden wrapper, wyśrodkowany pionowo */
  }
  .services > .container > .services__left {
    grid-column: 1/4;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center; /* ⬅ centrum w pionie */
    gap: 24px;
    min-height: 100%;
  }
  .services > .container > .services__left .services__title {
    margin: 0;
  }
  .services > .container > .services__left .services__nav {
    justify-content: flex-start;
    gap: 24px;
  }
  .services {
    /* prawy blok – slider */
  }
  .services > .container > .services__slider {
    grid-column: 4/13;
    max-width: var(--svcs-viewport); /* 824 = 2×400 + 24 */
    margin-left: var(--svcs-offset-left); /* 39px */
    scroll-snap-type: none;
  }
  .services > .container > .services__slider::before, .services > .container > .services__slider::after {
    display: none;
  }
  .services > .container .services__track {
    gap: var(--svcs-gap);
  }
  .services > .container .services__card {
    width: var(--svcs-card-w);
  }
  .services { /* 400 */ }
  .services > .container .services__image {
    height: 218px;
  }
}
/* =========================================================
   DESKTOP (≥1920) — SZTYWNY
   Jak laptop: lewa 1/4 (center Y), prawa 4/13
   Content 1320 (12×88) + gap 24, sekcja p-x 300
   ========================================================= */
@media (min-width: 1920px) {
  .services {
    padding-inline: 300px; /* margines sekcji */
  }
  .services > .container {
    display: grid;
    grid-template-columns: repeat(12, 88px); /* SZTYWNO */
    column-gap: 24px;
    padding-inline: 0;
    max-width: 1320px; /* SZTYWNO */
    margin-inline: auto;
    align-items: stretch;
    --svcs-gap: 24px;
    --svcs-card-w: 400px;
    --svcs-viewport: calc(var(--svcs-card-w)*2 + var(--svcs-gap)); /* 824 */
    --svcs-offset-left: 39px;
  }
  .services > .container > .services__left {
    grid-column: 1/4;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    min-height: 100%;
  }
  .services > .container > .services__left .services__title {
    margin: 0;
  }
  .services > .container > .services__left .services__nav {
    justify-content: flex-start;
    gap: 24px;
  }
  .services > .container > .services__slider {
    grid-column: 4/13;
    max-width: var(--svcs-viewport); /* 824 */
    margin-left: var(--svcs-offset-left); /* 39 */
    scroll-snap-type: none;
  }
  .services > .container > .services__slider::before, .services > .container > .services__slider::after {
    display: none;
  }
  .services > .container .services__track {
    gap: var(--svcs-gap);
  }
  .services > .container .services__card {
    width: var(--svcs-card-w);
  }
  .services > .container .services__image {
    height: 218px;
  }
}
/* =========================================================
   DOSTĘPNOŚĆ
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .services .services__track,
  .services .services__card {
    transition: none;
  }
}
/* =========================================================
   3D RING — bez zmian w logice
   ========================================================= */
.services .services__ring {
  position: relative;
  height: clamp(320px, 48vw, 520px);
  transform-style: preserve-3d;
  transition: transform var(--svcs-duration, 700ms) var(--svcs-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  will-change: transform;
  transform: rotateX(var(--svcs-tilt, -6deg)) rotateY(var(--svcs-rotation, 0deg));
}
.services .services__ring > .services__card {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: clamp(220px, 38vw, 320px);
  aspect-ratio: 4/5;
  transform-style: preserve-3d;
  background: #fff;
  border-radius: 20px;
  border-top-right-radius: 48px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--svcs-duration, 700ms) var(--svcs-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), box-shadow 300ms ease;
}
.services .services__ring > .services__card.is-center {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}
.services .services__ring > .services__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.35), 0 20px 40px rgba(0, 0, 0, 0.14);
}
.services .services__ring > .services__card .services__image {
  height: 52%;
  width: 100%;
  object-fit: contain;
  display: block;
}

/* =========================================================
   FIX: sekcja Services — overlay nie przechwytuje eventów
   ========================================================= */
.services {
  pointer-events: none; /* rodzic nie klikalny */
  isolation: isolate; /* odcina stacking context */
  position: relative;
  z-index: 0;
}
.services::before, .services::after {
  pointer-events: none; /* pseudo zawsze martwe */
}

/* Dzieciaki normalnie działają */
.services * {
  pointer-events: auto;
}

/* ALE dekoracje pozostają martwe */
.services__image,
.services__icon,
.services__icon-wrapper,
.services__track::before,
.services__track::after,
.services__slider::before,
.services__slider::after {
  pointer-events: none;
}

/* =========================================================
   PROJECTS — mobile-first: 1 karta w kadrze
   Współpraca z /js/projects-slider.js (tworzy .projects__track)
   Tor = GRID na .projects__track
   ========================================================= */
/* Tokeny (mobile) */
/* rama M */
/* szer. kolumny/karty w torze */
/* gap na mobile */
/* Breakpointy */
/* --- Blok: projects --- */
.projects {
  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #F6F6F6;
}
.projects__title {
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: #2a2a2a;
  margin: 0 0 16px 0;
  text-align: center;
}
.projects__lead {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 0 24px 0;
  text-align: center;
}
.projects {
  /* === Viewport (maski, overflow) === */
}
.projects__cards-container {
  position: relative;
  width: 100%;
  max-width: 375px; /* 375px */
  margin: 0 auto;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.projects__cards-container::-webkit-scrollbar {
  display: none;
}
.projects__cards-container {
  /* Maski po bokach w kolorze tła sekcji */
}
.projects__cards-container::before, .projects__cards-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  padding: 440px;
}
.projects__cards-container::before {
  right: 100%;
}
.projects__cards-container::after {
  left: 100%;
}
.projects {
  /* === TOR (GRID) — JS steruje transform === */
}
.projects__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 336px; /* 336px */
  column-gap: 60px; /* 60px */
  align-items: start;
  justify-content: start;
}
.projects {
  /* w torze projektowa karta ma wypełniać kolumnę */
}
.projects__track > .project-card {
  width: 100%;
  min-width: 0;
  flex: initial;
}

/* =========================================================
   TABLET: 744–1439
   - viewport 660
   - 1 karta 601×869
   - gap 20
   - maska odsunięta, żeby karta mogła wejść -60px w lewo (JS)
   ========================================================= */
@media (min-width: 744px) and (max-width: 1439px) {
  .projects__cards-container {
    max-width: 660px;
    overflow: visible;
  }
  .projects__cards-container::before {
    right: calc(100% + 60px);
  }
  .projects__cards-container { /* odsuwamy maskę */ }
  .projects__track {
    grid-auto-columns: 601px;
    column-gap: 20px;
  }
}
/* =========================================================
   LAPTOP: 1440–1919
   - content 1280
   - karta w torze 1191px, gap 24
   - maski na krawędzi viewportu
   ========================================================= */
@media (min-width: 1440px) and (max-width: 1919px) {
  .projects__cards-container {
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
  }
  .projects__cards-container::before {
    right: 100%;
  }
  .projects__cards-container::after {
    left: 100%;
  }
  .projects__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1191px;
    column-gap: 24px;
    position: relative;
    z-index: 1;
  }
}
/* =========================================================
   DESKTOP: ≥1920
   - content 1320
   - układ jak laptop
   ========================================================= */
@media (min-width: 1920px) {
  .projects__cards-container {
    max-width: 1320px;
    margin: 0 auto;
    overflow: hidden;
  }
  .projects__cards-container::before {
    right: 100%;
  }
  .projects__cards-container::after {
    left: 100%;
  }
  .projects__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1191px;
    column-gap: 24px;
    position: relative;
    z-index: 1;
  }
}
/* =========================================================
   PROJECT CARD — baza mobile (flex kolumna)
   ========================================================= */
.project-card {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
  min-height: 677px;
  /* Obraz */
}
.project-card__image-wrapper {
  position: relative; /* bez wpływu na układ CTA, ale przydatne pod overlay */
  width: 100%; /* 20px z lewej + 20px z prawej */
  max-width: 294px; /* jak w Figmie */
  height: 211px; /* KLUCZ: stała wysokość */
  margin: 0 auto;
  border-radius: 16px;
  border-top-right-radius: 32px;
  overflow: hidden;
  aspect-ratio: auto; /* wyłącz wszelkie wcześniejsze 4/3 */
  flex-shrink: 0;
}
.project-card__image {
  width: 100%;
  height: 100%; /* teraz 100% = 211px */
  object-fit: cover;
  object-position: center;
  display: block;
}
.project-card {
  /* Pasek nawigacji */
}
.project-card__header-info,
.project-card .project-card_header-info {
  width: 245px;
  height: 24px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  column-gap: 12px;
  margin-top: 52px;
  margin-bottom: 30px;
  color: #666;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  box-sizing: border-box;
}
.project-card__header-arrow,
.project-card img.project-card_header-arrow {
  display: block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.project-card__header-number, .project-card__header-count,
.project-card .project-card_header-count {
  white-space: nowrap;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.project-card__header-divider,
.project-card .project-card_header-divider {
  height: 1px;
  background: #979797;
  opacity: 0.8;
}
.project-card__header-divider-img {
  width: 100%;
  height: 2px;
  display: block;
}
.project-card {
  /* Teksty */
}
.project-card__title {
  font: 800 20px/1.25 "DM Sans", sans-serif;
  color: #243041;
  margin: 0 0 16px;
}
.project-card__description {
  font: 400 14px/1.6 "DM Sans", sans-serif;
  color: #495260;
  margin: 0 0 8px;
}
.project-card {
  /* Meta */
}
.project-card__meta {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
  margin-bottom: 16px;
}
.project-card__meta-item {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  position: relative;
}
.project-card__meta-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #777980;
  transform: scaleY(0.3);
  transform-origin: bottom;
}
.project-card__meta-label {
  font: 600 10px/150% "DM Sans", sans-serif;
  color: #000;
}
.project-card__meta-value {
  font: 400 10px/120% "DM Sans", sans-serif;
  color: #777980;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.project-card {
  /* CTA */
}
.project-card__cta, .project-card__button,
.project-card .project-card__button,
.project-card a.project-card__button,
.project-card a.project-card__button[data-open-configurator] {
  margin-top: 32px;
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 16px;
  border-radius: 0 12px 0 0;
  background: #DC9B59;
  color: #FFFFFF;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.project-card__cta:hover, .project-card__button:hover,
.project-card .project-card__button:hover,
.project-card a.project-card__button:hover,
.project-card a.project-card__button[data-open-configurator]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.project-card__cta:active, .project-card__button:active,
.project-card .project-card__button:active,
.project-card a.project-card__button:active,
.project-card a.project-card__button[data-open-configurator]:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* --- OCHRONA PRZED STARYMI REGUŁAMI --- */
/* Jeśli gdzieś indziej w projekcie zostało aspect-ratio na wrapperze, nadpiszemy: */
.project-card__image-wrapper {
  aspect-ratio: auto !important;
}

/* Jeśli gdzieś resetuje linki z data-open-configurator, dobijamy specyficznością: */
a.project-card__button[data-open-configurator] {
  all: unset;
} /* <- użyj tylko jeśli widzisz, że coś resetuje do zera */
a.project-card__button[data-open-configurator] {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
  font: 800 16px/48px "DM Sans", sans-serif;
  border-radius: 0 12px 0 0;
  background: #DC9B59;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* =========================================================
   TABLET: 744–1439 (obraz na dole, 351px)
   ========================================================= */
@media (min-width: 744px) and (max-width: 1439px) {
  .project-card {
    height: 869px;
    padding: 48px;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
  }
  .project-card__content {
    order: 1;
  }
  .project-card__image-wrapper {
    order: 2;
    margin-top: 32px;
    aspect-ratio: auto;
    height: 351px; /* fix: stała wysokość */
    border-radius: 20px;
    overflow: hidden;
  }
  .project-card__image {
    height: 100%;
  }
  .project-card {
    /* Pasek */
  }
  .project-card__header-info {
    width: 415px;
    height: 24px;
    margin: 24px 0 32px;
    grid-template-columns: auto auto 1fr auto;
  }
  .project-card__header-arrow {
    margin-right: 16px;
  }
  .project-card__header-number:first-of-type {
    margin-right: 24px;
  }
  .project-card__header-divider-img {
    margin-right: 24px;
  }
  .project-card {
    /* Typo/spacing */
  }
  .project-card__title {
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0.06em;
    color: #0C0C0C;
    margin: 0 0 18px;
  }
  .project-card__description {
    font-size: 16px;
    line-height: 150%;
    color: #4A4C56;
    margin: 0 0 24px;
  }
  .project-card__meta {
    row-gap: 40px;
    margin-bottom: 32px;
  }
  .project-card__meta-label {
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #000;
  }
  .project-card__meta-value {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.04em;
    color: #777980;
  }
  /* CTA: nie rozciąga się */
  .projects .project-card .project-card__button,
  .projects .project-card .project-card__cta {
    width: 192px;
    height: 50px;
    line-height: 50px;
    border-radius: 16px;
    align-self: flex-start;
    justify-self: start;
  }
}
/* =========================================================
   LAPTOP: 1440–1919 (tekst lewo, obraz prawo)
   ========================================================= */
@media (min-width: 1440px) and (max-width: 1919px) {
  .project-card {
    height: 576px;
    padding: 56px;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
    /* Siatka 7:5 + gap 48px */
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 48px;
    align-items: start;
  }
  .project-card__content {
    grid-column: 1;
    grid-row: 1;
  }
  .project-card__image-wrapper {
    grid-column: 2;
    grid-row: 1;
    height: 436px;
    border-radius: 20px;
    overflow: hidden;
    margin-left: 0;
  }
  .project-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .project-card {
    /* Pasek */
  }
  .project-card__header-info {
    width: 415px;
    height: 24px;
    margin: 0 0 32px;
    grid-template-columns: auto auto 1fr auto;
  }
  .project-card__header-arrow {
    margin-right: 16px;
  }
  .project-card__header-number:first-of-type {
    margin-right: 24px;
  }
  .project-card__header-divider-img {
    margin-right: 24px;
  }
  .project-card {
    /* Typografia */
  }
  .project-card__title {
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.06em;
    color: #0C0C0C;
    margin: 0 0 18px;
    text-align: left;
  }
  .project-card__description {
    font-size: 16px;
    line-height: 150%;
    color: #4A4C56;
    margin: 0 0 60px;
    text-align: left;
  }
  .project-card__meta {
    row-gap: 40px;
    margin-bottom: 32px;
  }
  .project-card__meta-label {
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #000;
  }
  .project-card__meta-value {
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.04em;
    color: #777980;
  }
  /* CTA: 192×50, radius dla laptopa */
  .projects .project-card .project-card__button,
  .projects .project-card .project-card__cta {
    width: 192px;
    height: 50px;
    line-height: 50px;
    border-radius: 0 12px 0 0;
    align-self: start;
    justify-self: start;
  }
}
/* =========================================================
   DESKTOP: ≥1920 (jak laptop)
   ========================================================= */
@media (min-width: 1920px) {
  .project-card {
    height: 576px;
    padding: 56px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 48px;
    align-items: start;
  }
  .project-card__content {
    grid-column: 1;
    grid-row: 1;
  }
  .project-card__image-wrapper {
    grid-column: 2;
    grid-row: 1;
    height: 436px;
    border-radius: 20px;
    overflow: hidden;
    margin-left: 0;
  }
  .project-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .projects .project-card .project-card__button,
  .projects .project-card .project-card__cta {
    width: 192px;
    height: 50px;
    line-height: 50px;
    border-radius: 0 12px 0 0;
    align-self: start;
    justify-self: start;
  }
}
/* =========================================================
   PARTNERZY — full-bleed marquee (mobile-first + MQ)
   ========================================================= */
/* Breakpointy */
/* Content widths (tytuł/opis) */
/* Odstęp między kaflami */
/* Kafle – wspólne */
/* Rozmiary per MQ (TOTAL wysokość, z paddingiem) */
/* total 80 */
/* total 80 */
/* total 157 */
/* =========================================================
   MOBILE-FIRST (0–743)
   ========================================================= */
.partners {
  isolation: isolate;
  width: 100%;
  background: #f8f8f8;
  padding: 20px;
}
.partners__container {
  text-align: center;
  box-sizing: border-box;
}
.partners__title {
  font: 700 24px/1.2 "DM Sans", sans-serif;
  margin: 0 0 20px;
  color: #070707;
  letter-spacing: 0.06em;
}
.partners__description {
  font: 400 14px/1.6 "DM Sans", sans-serif;
  margin: 0 auto 24px;
  max-width: 640px;
  color: #0c0c0c;
}
.partners {
  /* Taśmy full-bleed */
}
.partners__logos {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.partners__row {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  height: 80px !important; /* 80 — przebija inline z JS */
}
.partners__marquee {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  height: 100%;
}
.partners {
  /* === KAFEL (MOBILE) — total height = 80; padding 14/14 => logo 32 === */
}
.partners__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* 80 zawiera padding */
  height: 80px; /* total */
  width: auto; /* ELASTYCZNE */
  max-width: 140px; /* clamp do 140 */
  padding: 14px 14px; /* ⬅ zmniejszamy logo paddingiem */
  margin-right: 16px; /* 16 */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden; /* tnij pion gdyby co */
  flex: 0 0 auto;
}
.partners {
  /* obraz: ustawiamy wprost, aby nie zależał od globalnego $pad-y */
}
.partners__logo-icon {
  display: block;
  height: 32px !important; /* ⬅ mobile: logo 32 */
  width: auto !important;
  max-width: calc(140px - 32px); /* <= 108 */
  object-fit: contain;
}

/* =========================================================
   TABLET (744–1439) — total height 80; padding 15/15 => logo 50
   ========================================================= */
@media (min-width: 744px) and (max-width: calc(1440px - 1px)) {
  .partners {
    padding: 42px;
  }
  .partners__logos {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
  }
  .partners__title {
    font: 700 32px/1.2 "DM Sans", sans-serif;
    margin: 0 0 20px;
    color: #070707;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
  }
  .partners__description {
    font: 400 14px/1.6 "DM Sans", sans-serif;
    margin: 0 auto 24px;
    max-width: 640px;
    color: #0c0c0c;
  }
  .partners__container {
    max-width: 660px;
    margin: 0 auto;
    padding: 0 42px;
    box-sizing: border-box;
  }
  .partners__row {
    height: 80px !important;
  }
  .partners { /* 80 */ }
  .partners__marquee {
    height: 100%;
  }
  .partners__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 80px; /* total 80 */
    width: auto; /* ELASTYCZNE */
    max-width: 160px; /* clamp do 160 */
    padding: 15px 15px; /* ⬅ 15/15 => img 50 */
    margin-right: 16px; /* 16 */
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    flex: 0 0 auto;
  }
  .partners__logo-icon {
    display: block;
    height: 50px !important; /* ⬅ tablet: logo 50 */
    width: auto !important;
    max-width: calc(160px - 32px); /* <= 128 */
    object-fit: contain;
  }
}
/* =========================================================
   LAPTOP (1440–1919) — total height 157; padding 53.5/53.5 => logo 50
   ========================================================= */
@media (min-width: 1440px) and (max-width: calc(1920px - 1px)) {
  .partners {
    padding: 80px 40px;
  }
  .partners__title {
    font: 700 48px/1.12 "DM Sans", sans-serif;
    margin: 0 0 20px;
    color: #070707;
    letter-spacing: 0.06em;
    margin-bottom: 56px;
  }
  .partners__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
  }
  .partners__row {
    height: 157px !important;
  }
  .partners { /* 157 */ }
  .partners__marquee {
    height: 100%;
  }
  .partners__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* 157 zawiera padding */
    height: 157px; /* total 157 */
    width: auto; /* ELASTYCZNE */
    max-width: 320px; /* clamp do 320 */
    padding: 53.5px 118px; /* ⬅ 53.5/53.5 => img 50 */
    margin-right: 19.5px; /* 19.5 */
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    flex: 0 0 auto;
  }
  .partners__logo-icon {
    display: block;
    height: 50px !important; /* ⬅ laptop: logo 50 */
    width: auto !important;
    max-width: calc(320px - 32px); /* <= 288 */
    object-fit: contain;
  }
}
/* =========================================================
   DESKTOP (≥1920) — jak laptop (padding 53.5/53.5 => logo 50)
   ========================================================= */
@media (min-width: 1920px) {
  .partners {
    padding: 100px 300px;
  }
  .partners__title {
    font: 700 48px/1.12 "DM Sans", sans-serif;
    margin: 0 0 20px;
    color: #070707;
    letter-spacing: 0.06em;
    margin-bottom: 56px;
  }
  .partners__container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 300px;
    box-sizing: border-box;
  }
  .partners__row {
    height: 157px !important;
  }
  .partners { /* 157 */ }
  .partners__marquee {
    height: 100%;
  }
  .partners__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 157px;
    width: auto; /* ELASTYCZNE */
    max-width: 320px; /* 320 */
    padding: 53.5px 118px; /* ⬅ 53.5/53.5 => img 50 */
    margin-right: 19.5px; /* 19.5 */
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    flex: 0 0 auto;
  }
  .partners__logo-icon {
    display: block;
    height: 50px !important; /* ⬅ desktop: logo 50 */
    width: auto !important;
    max-width: 100%; /* <= 288 */
    object-fit: contain;
  }
}
/* =========================================================
   SEKCJA: BOOKING — baza + siatka + MQ (mobile-first)
   Siatka:
   - Mobile (0–743):   4 × 72px, gap 16px, content 336px
   - Tablet (≥744):    8 × 65px, gap 20px, content 660px
   - Laptop (≥1440):  12 × 78px, gap 24px, content 1280px
   - Desktop (≥1920): 12 × 88px, gap 24px, content 1320px
   ========================================================= */
.booking {
  position: relative;
  background-image: url(".//../..//photos/main/booking.jpg");
  /* TODO: podmień na właściwą */
  background-size: cover;
  background-position: center;
  color: #ffffff;
  overflow: hidden;
}
.booking::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: inherit;
}
.booking {
  /* ——— GRID w obrębie sekcji ——— */
}
.booking .container {
  position: relative;
  z-index: 2;
  /* MOBILE (0–743) */
  display: grid;
  grid-template-columns: repeat(4, 72px);
  column-gap: 16px;
  row-gap: 16px;
  /* tory grida wyśrodkowane POZIOMO */
  justify-content: center;
  /* 👉 kotwiczenie do GÓRY w osi pionowej */
  align-items: start;
  align-content: start;
  /* triki bezpieczeństwa */
  margin-inline: auto;
  min-width: 0;
}
.booking {
  /* Kontent sekcji */
}
.booking__content {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500px;
  justify-self: center;
  /* 👇 dodaj to */
  align-self: start;
  /* ustawia blok przy górze toru grida */
}
.booking__title {
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  margin: 80px 0 32px 0;
}
.booking__text {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  max-width: 335px;
  margin: 0 0 42px 0;
  opacity: 0.9;
}
.booking__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 335px;
  height: 50px;
  background-color: #D99D5D;
  border-radius: 0 20px 0 0;
  border: none;
  margin-bottom: 80px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #F7F7F7;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.booking__button:hover {
  background-color: rgb(212.155, 144.505, 72.345);
}
.booking {
  /* =======================================================
     TABLET (≥744 px) — 8 × 65px, gap 20px, content 660px
     ======================================================= */
}
@media (min-width: 744px) {
  .booking .container {
    grid-template-columns: repeat(8, 65px);
    column-gap: 20px;
    row-gap: 20px;
    justify-content: center;
    /* <— utrzymaj centrowanie torów */
  }
  .booking__content {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
    justify-self: center;
    /* 👇 dodaj to */
    align-self: start;
    /* ustawia blok przy górze toru grida */
  }
  .booking__title {
    font-family: "DM Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    margin: 80px 0 16px 0;
  }
  .booking__text {
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    max-width: 5600px;
    margin: 0 0 32px 0;
    opacity: 0.9;
  }
  .booking__content {
    grid-column: 1/-1;
    justify-self: center;
  }
}
.booking {
  /* =======================================================
     LAPTOP (≥1440 px) — 12 × 78px, gap 24px, content 1280px
     ======================================================= */
}
@media (min-width: 1440px) {
  .booking .container {
    grid-template-columns: repeat(12, 78px);
    column-gap: 24px;
    row-gap: 24px;
    justify-content: center;
    /* <— centrowanie torów */
  }
  .booking__content {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    justify-self: center;
    /* 👇 dodaj to */
    align-self: start;
    /* ustawia blok przy górze toru grida */
  }
  .booking__title {
    font-family: "DM Sans", sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    margin: 80px 0 16px 0;
    height: 100%;
  }
  .booking__text {
    font-family: "DM Sans", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    max-width: 700px;
    margin: 0 0 32px 0;
    opacity: 0.9;
  }
  .booking__content {
    grid-column: 1/-1;
    justify-self: center;
  }
}
.booking {
  /* =======================================================
     DESKTOP (≥1920 px) — 12 × 88px, gap 24px, content 1320px
     ======================================================= */
}
@media (min-width: 1920px) {
  .booking .container {
    grid-template-columns: repeat(12, 88px);
    column-gap: 24px;
    row-gap: 24px;
    justify-content: center;
    /* <— centrowanie torów */
  }
  .booking__content {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    justify-self: center;
    /* 👇 dodaj to */
    align-self: start;
    /* ustawia blok przy górze toru grida */
  }
  .booking__title {
    font-family: "DM Sans", sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    margin: 185px 0 16px 0;
    height: 100%;
  }
  .booking__text {
    font-family: "DM Sans", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    max-width: 700px;
    margin: 0 0 32px 0;
    opacity: 0.9;
  }
  .booking__content {
    grid-column: 1/-1;
    justify-self: center;
  }
  .booking__button {
    border: none;
    margin-bottom: 184px;
  }
}

/* FIX: sekcja Booking — precyzyjne przywracanie interakcji */
.booking {
  pointer-events: none; /* rodzic nie klikalny */
  isolation: isolate; /* własny stacking context */
}

/* dekoracyjne pseudo-elementy — zawsze off */
.booking::before,
.booking::after {
  pointer-events: none;
}

/* przywracamy PE wyłącznie interaktywnym elementom */
.booking :is(a,
button,
input,
select,
textarea,
[role=button],
[tabindex],
.booking__button,
.booking__content) {
  pointer-events: auto;
}

/* =========================================================
   Sekcja: TESTIMONIALS — MOBILE FIRST (375px)
   ========================================================= */
.testimonials {
  background-color: #FAF7F4;
  padding: 40px 0 60px;
}
.testimonials .container {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* GRID — mobile (płynny): 4 kolumny, gap 16, centrowanie torów */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
  min-width: 0;
}
.testimonials {
  /* Tytuł */
}
.testimonials__title {
  grid-column: 1/-1;
  font-family: "DM Sans", sans-serif;
  font-size: 32px;
  line-height: 1.3;
  font-weight: 600;
  text-align: center;
  color: #1D1F2C;
  margin-bottom: 40px;
  min-width: 0;
}
.testimonials {
  /* Slider — fallback */
}
.testimonials__slider {
  grid-column: 1/-1;
  display: block;
  overflow: visible;
  position: relative;
  min-width: 0;
}
.testimonials__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testimonials__slide + .testimonials__slide {
  margin-top: 16px;
}
.testimonials {
  /* Slider — tryb z JS */
}
.testimonials.is-slider-ready .testimonials__slider {
  overflow: hidden;
}
.testimonials.is-slider-ready .testimonials__track {
  display: flex;
  will-change: transform;
}
.testimonials.is-slider-ready .testimonials__track > .testimonials__slide {
  flex: 0 0 100%;
}
.testimonials {
  /* Karta (mobile) — stack img + card z overlapem */
}
.testimonials__image-wrapper {
  width: 100%;
  max-width: 335px;
  height: 266px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 50px;
}
.testimonials__image {
  width: 100%;
  height: auto;
  aspect-ratio: 335/266;
  object-fit: cover;
  display: block;
}
.testimonials__card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 335px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  margin-top: -40px; /* overlap na mobile */
  position: relative;
  z-index: 2;
  height: 300px;
}
.testimonials {
  /* Typografia — mobile bazowa */
}
.testimonials__headline {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1D1F2C;
  margin-bottom: 12px;
}
.testimonials__text {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 20px;
}
.testimonials__stars {
  font-size: 20px;
  color: #FF9705;
  margin-bottom: 20px;
  letter-spacing: 4px;
}
.testimonials__author {
  margin-bottom: 24px;
}
.testimonials__author strong {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: inherit;
}
.testimonials__author span {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: #888;
}
.testimonials {
  /* Linia przerywana — mobile (lekka) */
}
.testimonials__line {
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, #E8E8E8 50%, transparent 50%);
  background-position: left;
  background-size: 8px 1px;
  background-repeat: repeat-x;
}
.testimonials {
  /* Nawigacja */
}
.testimonials__nav {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  min-width: 0;
}
.testimonials__arrow {
  border: 0;
  background: none;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.testimonials__arrow img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
.testimonials__arrow:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.2);
  outline-offset: 2px;
  border-radius: 6px;
}
.testimonials__arrow.is-disabled, .testimonials__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  filter: none;
}

/* === Hover tylko dla aktywnej karty === */
.testimonials__slide.is-active .testimonials__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonials__slide.is-active .testimonials__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   TABLET (744–1439 px) — FLUID 8 kol, gap 20, boki 42
   Wysokość obraz + karta = 403 px (stała).
   ========================================================= */
@media (min-width: 744px) {
  .testimonials {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .testimonials .container {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    justify-content: center;
    min-width: 0;
  }
  .testimonials__title {
    grid-column: 1/-1;
    text-align: center;
    font-size: 32px;
    line-height: 150%;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 40px;
  }
  .testimonials__slider {
    grid-column: 1/-1;
  }
  .testimonials {
    /* SLIDE = lokalny grid fluid 8-kolumnowy */
  }
  .testimonials__slide {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
    justify-content: center;
    margin: 0;
  }
  .testimonials {
    /* Obraz: 1 / 5 — stała wysokość 403 px */
  }
  .testimonials__image-wrapper {
    grid-column: 1/5;
    border-radius: 10px;
    overflow: hidden;
    max-width: none;
    height: 403px; /* ← stała */
  }
  .testimonials__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }
  .testimonials {
    /* Karta: 5 / 9 — ta sama wysokość 403 px */
  }
  .testimonials__card {
    grid-column: 5/9;
    margin-top: 0;
    max-width: none;
    height: 403px; /* ← stała */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    background: #fff;
  }
  .testimonials {
    /* Typografia wg Figmy */
  }
  .testimonials__headline {
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
    font-weight: 500;
    margin-bottom: 12px;
  }
  .testimonials__text {
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
  }
  .testimonials__stars {
    font-size: 24px;
    line-height: 1;
    letter-spacing: 4px;
    color: #FF9705;
    margin-bottom: 20px;
  }
  .testimonials__author {
    margin-bottom: 24px;
  }
  .testimonials__author strong {
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: #FF9705;
    margin-bottom: 4px;
  }
  .testimonials__author span {
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0;
    font-weight: 400;
    color: #000;
  }
  .testimonials {
    /* Linia przerywana */
  }
  .testimonials__line {
    margin-top: auto;
    height: 1px;
    background: repeating-linear-gradient(to right, #000 0 8px, transparent 8px 16px);
    background-repeat: repeat-x;
    background-size: 16px 1px;
  }
  .testimonials {
    /* Nawigacja */
  }
  .testimonials__nav {
    grid-column: 1/-1;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
  }
  .testimonials__arrow {
    width: 36px;
    height: 36px;
  }
  .testimonials__arrow img {
    width: 36px;
    height: auto;
  }
}
/* =========================================================
   LAPTOP (1440–1919 px) — FLUID 12 kol, gap 24, boki 40
   Wysokość obraz + karta = 486 px (stała), docelowy wymiar 427×486.
   ========================================================= */
@media (min-width: 1440px) and (max-width: 1919px) {
  .testimonials {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .testimonials .container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    justify-content: center;
  }
  .testimonials__title {
    grid-column: 1/-1;
    text-align: center;
    margin-bottom: 64px;
  }
  .testimonials__slider {
    grid-column: 1/-1;
  }
  .testimonials {
    /* SLIDE = lokalny grid fluid 12-kolumnowy */
  }
  .testimonials__slide {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
    justify-content: center;
  }
  .testimonials {
    /* Obraz: kol. 1–6 — stała wysokość 486 px */
  }
  .testimonials__image-wrapper {
    grid-column: 1/7;
    border-radius: 10px;
    overflow: hidden;
    height: 486px; /* ← stała */
  }
  .testimonials__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .testimonials {
    /* Karta: kol. 7–13 — ta sama wysokość 486 px */
  }
  .testimonials__card {
    grid-column: 7/13;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    background: #fff;
    overflow: hidden;
    height: 486px; /* ← stała */
  }
  .testimonials__line {
    margin-top: auto;
  }
  .testimonials__nav {
    grid-column: 1/-1;
    justify-content: center;
    gap: 32px;
    margin-top: 48px;
  }
  .testimonials {
    /* Arrow — laptop */
  }
  .testimonials__arrow {
    width: 46px;
    height: 46px;
  }
  .testimonials__arrow img {
    width: 46px;
    height: 46px;
  }
}
/* =========================================================
   DESKTOP (≥1920 px) — SZTYWNY 12×88, gap 24, boki 300
   Wysokość obraz + karta = 486 px (stała), docelowy wymiar 427×486.
   ========================================================= */
@media (min-width: 1920px) {
  .testimonials {
    padding-top: 88px;
    padding-bottom: 88px;
  }
  .testimonials .container {
    grid-template-columns: repeat(12, 88px);
    column-gap: 24px;
    row-gap: 24px;
    justify-content: center;
  }
  .testimonials__title {
    grid-column: 1/-1;
    text-align: center;
    margin-bottom: 72px;
  }
  .testimonials__slider {
    grid-column: 1/-1;
  }
  .testimonials {
    /* SLIDE na sztywnej siatce desktopowej */
  }
  .testimonials__slide {
    display: grid;
    grid-template-columns: repeat(12, 88px);
    column-gap: 24px;
    align-items: start;
    justify-content: center;
  }
  .testimonials {
    /* Obraz 1–6 — stała wysokość 486 px */
  }
  .testimonials__image-wrapper {
    grid-column: 1/7;
    border-radius: 10px;
    overflow: hidden;
    height: 486px; /* ← stała */
  }
  .testimonials__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .testimonials {
    /* Karta 7–13 — ta sama wysokość 486 px */
  }
  .testimonials__card {
    grid-column: 7/13;
    display: flex;
    flex-direction: column;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06);
    background: #fff;
    overflow: hidden;
    height: 486px; /* ← stała */
  }
  .testimonials__line {
    margin-top: auto;
  }
  .testimonials__nav {
    grid-column: 1/-1;
    justify-content: center;
    gap: 32px;
    margin-top: 56px;
  }
  .testimonials {
    /* Arrow — desktop */
  }
  .testimonials__arrow {
    width: 62px;
    height: 62px;
  }
  .testimonials__arrow img {
    width: 62px;
    height: 62px;
  }
}
/* Rodzic przezroczysty dla eventów */
.testimonials {
  pointer-events: none;
  isolation: isolate;
}

/* Przywracamy PE tym, co faktycznie klika/draguje w tej sekcji */
.testimonials :is(a,
button,
input,
select,
textarea,
[role=button],
[tabindex],
.testimonials__arrow,
.testimonials__nav,
.testimonials__slider,
.testimonials__track,
.testimonials__card,
.testimonials__image-wrapper) {
  pointer-events: auto;
}

/* dekoracje nigdy nie łapią */
.testimonials::before,
.testimonials::after {
  pointer-events: none;
}

/* Fallbacki breakpointów */
/* =========================================================
   Sekcja: CONTACT — MOBILE FIRST (375px)
   ========================================================= */
.contact {
  position: relative;
  isolation: isolate;
  padding: 60px 0;
  /* Sekcja nie przechwytuje klików */
  pointer-events: none;
  /* Tło z overlayem */
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("../photos/main/contact.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  /* Treść sekcji – włączamy interakcje */
}
.contact > .container {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.contact {
  /* GRID */
}
.contact__main {
  display: grid;
  grid-template-columns: repeat(4, 72px);
  column-gap: 16px;
  row-gap: 16px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  align-items: start;
}
.contact__intro, .contact__form-wrapper {
  grid-column: 1/-1;
  min-width: 0;
}
.contact__intro {
  text-align: left;
}
.contact__title {
  font-size: 24px;
  font-weight: 600;
  text-align: left;
  line-height: 1.2;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.contact__description {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.contact__socials {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 18px;
}
.contact__social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.contact__social-link:hover {
  transform: scale(1.1);
}
.contact {
  /* Karta formularza */
}
.contact__form-wrapper {
  background-color: rgba(48, 48, 48, 0.4);
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 24px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact__form-header {
  text-align: left;
  margin-bottom: 24px;
}
.contact__form-supertitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}
.contact__form-title {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-style: italic;
  line-height: 1.2;
}
.contact__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.contact__input, .contact__textarea {
  width: 100%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: #ffffff;
  transition: border-color 0.3s ease;
}
.contact__input::placeholder, .contact__textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.contact__input:focus, .contact__textarea:focus {
  outline: none;
  border-color: #ffffff;
}
.contact__textarea {
  resize: vertical;
  min-height: 120px;
}
.contact {
  /* Checkbox */
}
.contact__form-group--checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.contact__checkbox-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  padding-left: 32px;
}
.contact__checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.contact__checkbox-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.contact__checkbox-input:checked + .contact__checkbox-label::before {
  background-color: #ffffff;
  border-color: #ffffff;
}
.contact__checkbox-label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #1D1F2C;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.contact__checkbox-input:checked + .contact__checkbox-label::after {
  opacity: 1;
}
.contact__submit-button {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: none;
  background-color: #DC9B59;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 36px;
}
.contact__submit-button:hover {
  background-color: rgb(215.5597014925, 142.3134328358, 67.9402985075);
}
.contact {
  /* TABLET */
}
@media (min-width: 744px) {
  .contact__main {
    grid-template-columns: repeat(8, 65px);
    column-gap: 20px;
    row-gap: 20px;
    justify-content: center;
  }
  .contact__intro {
    grid-column: 1/-1;
  }
  .contact__form-wrapper {
    grid-column: 1/-1;
    max-width: none;
    width: 100%;
  }
}
.contact {
  /* LAPTOP */
}
@media (min-width: 1440px) {
  .contact__main {
    grid-template-columns: repeat(12, 78px);
    column-gap: 24px;
    row-gap: 24px;
    justify-content: center;
  }
  .contact__intro {
    grid-column: 1/span 6;
  }
  .contact__form-wrapper {
    grid-column: 7/span 6;
  }
}
.contact {
  /* DESKTOP */
}
@media (min-width: 1920px) {
  .contact__main {
    grid-template-columns: repeat(12, 88px);
  }
  .contact__intro {
    grid-column: 1/span 6;
  }
  .contact__form-wrapper {
    grid-column: 7/span 6;
  }
}

/* =========================================
   NAVIGATION
   - 0–1439: burger overlay (fixed, pełnoekranowy)
   - ≥1440 : belka (fixed, full-width), linki środkiem, CTA po prawej
   ========================================= */
/* --- MOBILE/TABLET (overlay) --- */
.header__nav {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  z-index: 2147483646;
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 240ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.header__nav.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.header__nav-link {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
}

/* Zamykacz overlayu */
.header__nav-close {
  position: fixed;
  top: 0;
  right: 20px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2147483647;
}
.header__nav-close img {
  display: block;
  width: 20px;
  height: 20px;
}

/* CTA domyślnie ukryte (pokazujemy dopiero w belce ≥1440) */
.button--nav {
  display: none;
}

/* --- Tablet kosmetyka --- */
@media (min-width: 744px) and (max-width: 1439px) {
  .header__nav {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .header__nav-list {
    row-gap: 20px;
  }
}
/* =========================================
   LAPTOP (≥1440 <1920) — NAV nad belką, bez blur; zawsze widoczny
   ========================================= */
@media (min-width: 1440px) and (max-width: 1919px) {
  nav#mobile-menu.header__nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    padding: 0 40px; /* content 1280 */
    min-height: 0;
    overflow: visible;
    padding-inline: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-family: dm sans, sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    /* klucz: szybka z blurem */
    z-index: 30;
    background: transparent;
    backdrop-filter: none;
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  nav#mobile-menu.header__nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1; /* pod linkami, nad stroną */
    background: rgba(17, 17, 17, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
  }
  nav#mobile-menu .header__nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: auto;
  }
  nav#mobile-menu .header__nav-link {
    color: rgba(255, 255, 255, 0.92);
    z-index: 20;
  }
  nav#mobile-menu .button--nav {
    display: inline-flex;
    min-width: 174px;
    height: 56px;
    margin-left: 24px;
    padding: 0 16px;
    border: 0;
    border-radius: 0 16px 0 0;
    background: #DC9B59;
    color: #000;
    text-decoration: none;
    line-height: 56px;
  }
  .header__nav-close {
    display: none;
  }
}
/* =========================================
   DESKTOP (≥1920) — NAV nad belką, bez blur; zawsze widoczny
   ========================================= */
@media (min-width: 1920px) {
  nav#mobile-menu.header__nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    padding: 0 40px; /* content 1280 */
    min-height: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-family: dm sans, sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    /* klucz: szybka z blurem */
    z-index: 30;
    background: transparent;
    backdrop-filter: none;
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  nav#mobile-menu.header__nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1; /* pod linkami, nad stroną */
    background: rgba(17, 17, 17, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
  }
  nav#mobile-menu .header__nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: auto;
  }
  nav#mobile-menu .header__nav-link {
    color: rgba(255, 255, 255, 0.92);
  }
  nav#mobile-menu .button--nav {
    display: inline-flex;
    min-width: 174px;
    height: 56px;
    margin-left: 24px;
    padding: 0 16px;
    border: 0;
    border-radius: 0 16px 0 0;
    background: #DC9B59;
    color: #000;
    text-decoration: none;
    line-height: 56px;
  }
  .header__nav-close {
    display: none;
  }
}
/* NAV ma taki sam padding jak header__content */
@media (min-width: 1440px) and (max-width: 1919px) {
  nav#mobile-menu.header__nav {
    padding-inline: var(--content-x);
  }
}
@media (min-width: 1920px) {
  nav#mobile-menu.header__nav {
    padding-inline: var(--content-x);
  }
}
/* (opcjonalnie) bez dodatkowego odsunięcia przy prawej krawędzi */
nav#mobile-menu .button--nav {
  margin-right: 0;
}

/* ===== AUTO-HIDE NAV (tylko ≥1440) ===== */
@media (min-width: 1440px) {
  nav#mobile-menu.header__nav {
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
  }
  /* nie chowamy, gdy overlay menu jest otwarty */
  nav#mobile-menu.header__nav.is-hidden:not(.is-open) {
    transform: translateY(-100%);
  }
}
/* === CTA w overlayu (0–1439) — ukryj całkowicie === */
.header__nav .button--nav {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

/* === Laptop/desktop (≥1440) — pokaż na belce === */
@media (min-width: 1440px) {
  nav#mobile-menu.header__nav .button--nav {
    display: inline-flex !important;
    pointer-events: auto;
    visibility: visible;
  }
}
/* ===== Kontakty w overlay menu (mobile/tablet) ===== */
.header__nav-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.header__nav-phone {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.header__nav-hours {
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
}

/* Na desktopowej belce nie pokazujemy tego bloku */
@media (min-width: 1440px) {
  .header__nav-contacts {
    display: none;
  }
}
.m-0 {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.m-1 {
  margin-top: 0.25rem !important;
  margin-right: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.m-2 {
  margin-top: 0.5rem !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.m-3 {
  margin-top: 0.75rem !important;
  margin-right: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  margin-left: 0.75rem !important;
}

.m-4 {
  margin-top: 1rem !important;
  margin-right: 1rem !important;
  margin-bottom: 1rem !important;
  margin-left: 1rem !important;
}

.m-5 {
  margin-top: 1.25rem !important;
  margin-right: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  margin-left: 1.25rem !important;
}

.m-6 {
  margin-top: 1.5rem !important;
  margin-right: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.m-7 {
  margin-top: 1.75rem !important;
  margin-right: 1.75rem !important;
  margin-bottom: 1.75rem !important;
  margin-left: 1.75rem !important;
}

.m-8 {
  margin-top: 2rem !important;
  margin-right: 2rem !important;
  margin-bottom: 2rem !important;
  margin-left: 2rem !important;
}

.m-top-0 {
  margin-top: 0rem !important;
}

.m-top-1 {
  margin-top: 0.25rem !important;
}

.m-top-2 {
  margin-top: 0.5rem !important;
}

.m-top-3 {
  margin-top: 0.75rem !important;
}

.m-top-4 {
  margin-top: 1rem !important;
}

.m-top-5 {
  margin-top: 1.25rem !important;
}

.m-top-6 {
  margin-top: 1.5rem !important;
}

.m-top-7 {
  margin-top: 1.75rem !important;
}

.m-top-8 {
  margin-top: 2rem !important;
}

.m-right-0 {
  margin-right: 0rem !important;
}

.m-right-1 {
  margin-right: 0.25rem !important;
}

.m-right-2 {
  margin-right: 0.5rem !important;
}

.m-right-3 {
  margin-right: 0.75rem !important;
}

.m-right-4 {
  margin-right: 1rem !important;
}

.m-right-5 {
  margin-right: 1.25rem !important;
}

.m-right-6 {
  margin-right: 1.5rem !important;
}

.m-right-7 {
  margin-right: 1.75rem !important;
}

.m-right-8 {
  margin-right: 2rem !important;
}

.m-bottom-0 {
  margin-bottom: 0rem !important;
}

.m-bottom-1 {
  margin-bottom: 0.25rem !important;
}

.m-bottom-2 {
  margin-bottom: 0.5rem !important;
}

.m-bottom-3 {
  margin-bottom: 0.75rem !important;
}

.m-bottom-4 {
  margin-bottom: 1rem !important;
}

.m-bottom-5 {
  margin-bottom: 1.25rem !important;
}

.m-bottom-6 {
  margin-bottom: 1.5rem !important;
}

.m-bottom-7 {
  margin-bottom: 1.75rem !important;
}

.m-bottom-8 {
  margin-bottom: 2rem !important;
}

.m-left-0 {
  margin-left: 0rem !important;
}

.m-left-1 {
  margin-left: 0.25rem !important;
}

.m-left-2 {
  margin-left: 0.5rem !important;
}

.m-left-3 {
  margin-left: 0.75rem !important;
}

.m-left-4 {
  margin-left: 1rem !important;
}

.m-left-5 {
  margin-left: 1.25rem !important;
}

.m-left-6 {
  margin-left: 1.5rem !important;
}

.m-left-7 {
  margin-left: 1.75rem !important;
}

.m-left-8 {
  margin-left: 2rem !important;
}

.m-x-0 {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}

.m-x-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.m-x-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.m-x-3 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.m-x-4 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.m-x-5 {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}

.m-x-6 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.m-x-7 {
  margin-left: 1.75rem !important;
  margin-right: 1.75rem !important;
}

.m-x-8 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.m-y-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.m-y-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.m-y-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.m-y-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.m-y-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.m-y-5 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.m-y-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.m-y-7 {
  margin-top: 1.75rem !important;
  margin-bottom: 1.75rem !important;
}

.m-y-8 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.p-0 {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.p-1 {
  padding-top: 0.25rem !important;
  padding-right: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.p-2 {
  padding-top: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.p-3 {
  padding-top: 0.75rem !important;
  padding-right: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-left: 0.75rem !important;
}

.p-4 {
  padding-top: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 1rem !important;
}

.p-5 {
  padding-top: 1.25rem !important;
  padding-right: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  padding-left: 1.25rem !important;
}

.p-6 {
  padding-top: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.p-7 {
  padding-top: 1.75rem !important;
  padding-right: 1.75rem !important;
  padding-bottom: 1.75rem !important;
  padding-left: 1.75rem !important;
}

.p-8 {
  padding-top: 2rem !important;
  padding-right: 2rem !important;
  padding-bottom: 2rem !important;
  padding-left: 2rem !important;
}

.p-top-0 {
  padding-top: 0rem !important;
}

.p-top-1 {
  padding-top: 0.25rem !important;
}

.p-top-2 {
  padding-top: 0.5rem !important;
}

.p-top-3 {
  padding-top: 0.75rem !important;
}

.p-top-4 {
  padding-top: 1rem !important;
}

.p-top-5 {
  padding-top: 1.25rem !important;
}

.p-top-6 {
  padding-top: 1.5rem !important;
}

.p-top-7 {
  padding-top: 1.75rem !important;
}

.p-top-8 {
  padding-top: 2rem !important;
}

.p-right-0 {
  padding-right: 0rem !important;
}

.p-right-1 {
  padding-right: 0.25rem !important;
}

.p-right-2 {
  padding-right: 0.5rem !important;
}

.p-right-3 {
  padding-right: 0.75rem !important;
}

.p-right-4 {
  padding-right: 1rem !important;
}

.p-right-5 {
  padding-right: 1.25rem !important;
}

.p-right-6 {
  padding-right: 1.5rem !important;
}

.p-right-7 {
  padding-right: 1.75rem !important;
}

.p-right-8 {
  padding-right: 2rem !important;
}

.p-bottom-0 {
  padding-bottom: 0rem !important;
}

.p-bottom-1 {
  padding-bottom: 0.25rem !important;
}

.p-bottom-2 {
  padding-bottom: 0.5rem !important;
}

.p-bottom-3 {
  padding-bottom: 0.75rem !important;
}

.p-bottom-4 {
  padding-bottom: 1rem !important;
}

.p-bottom-5 {
  padding-bottom: 1.25rem !important;
}

.p-bottom-6 {
  padding-bottom: 1.5rem !important;
}

.p-bottom-7 {
  padding-bottom: 1.75rem !important;
}

.p-bottom-8 {
  padding-bottom: 2rem !important;
}

.p-left-0 {
  padding-left: 0rem !important;
}

.p-left-1 {
  padding-left: 0.25rem !important;
}

.p-left-2 {
  padding-left: 0.5rem !important;
}

.p-left-3 {
  padding-left: 0.75rem !important;
}

.p-left-4 {
  padding-left: 1rem !important;
}

.p-left-5 {
  padding-left: 1.25rem !important;
}

.p-left-6 {
  padding-left: 1.5rem !important;
}

.p-left-7 {
  padding-left: 1.75rem !important;
}

.p-left-8 {
  padding-left: 2rem !important;
}

.p-x-0 {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

.p-x-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.p-x-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.p-x-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.p-x-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.p-x-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.p-x-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.p-x-7 {
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

.p-x-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.p-y-0 {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.p-y-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.p-y-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.p-y-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.p-y-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.p-y-5 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.p-y-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.p-y-7 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

.p-y-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* scss/layout/button.scss */
/* === PALETA PRZYCISKÓW (liczona przez Sass) === */
/* Wystawiamy też jako CSS Custom Properties – ale TYLKO do odczytu w CSS */
:root {
  --button-bg: #dc9b59;
  --button-fg: #000000;
  --button-bg-hover: rgb(214.671641791, 139.776119403, 63.728358209);
  --button-bg-active: rgb(204.6507462687, 124.5164179104, 43.1492537313);
}

/* === BAZA PRZYCISKU === */
.button {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 0;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: 16px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0;
  background: var(--button-bg);
  color: var(--button-fg);
  transition: background-color 0.15s ease, transform 0.06s ease;
}
.button img,
.button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  pointer-events: none;
}
.button:hover {
  background: var(--button-bg-hover);
}
.button:active {
  background: var(--button-bg-active);
  transform: translateY(1px);
}
.button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* === WARIANT: CTA w HEADERZE (mobile first) === */
.button--header {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 20px;
  border-top-right-radius: 16px;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0;
}
.button--header img,
.button--header svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* === WARIANT „ghost” === */
.button--ghost {
  background: transparent;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.button--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}
.button--ghost:active {
  background: rgba(0, 0, 0, 0.07);
}

/* Utility */
.button--full {
  width: 100%;
}

/* =========================================================
   MEDIA QUERIES – MOBILE FIRST STRUKTURA
   ========================================================= */
/* Tablet (744–1439px) */
@media (min-width: 744px) and (max-width: 1439px) {
  .button {
    font-size: 14px;
    gap: 12px;
  }
  .button img,
  .button svg {
    width: 20px;
    height: 20px;
  }
  .button--header {
    height: 44px;
    font-size: 14px;
  }
}
/* Laptop (1440–1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .button {
    font-size: 16px;
    gap: 14px;
  }
  .button img,
  .button svg {
    width: 22px;
    height: 22px;
  }
  .button--header {
    height: 48px;
    font-size: 16px;
  }
}
/* Desktop (≥1920px) */
@media (min-width: 1920px) {
  .button {
    gap: 16px;
    font-family: dm sans, sans-serif;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0;
    font-weight: 800;
    padding-inline: 20px;
  }
  .button img,
  .button svg {
    width: 24px;
    height: 24px;
  }
  .button--header {
    height: 52px;
    font-size: 18px;
  }
}
/* =========================================================
   AI BOX — entrance:
   - background: fade-in
   - badge: fade-in
   - title + sub (lead): fade-in + lift
   - benefits: fade-in + stagger li
   ========================================================= */
.configurator-prompt,
body.about .configurator-prompt {
  --ai-bg: #ffffff;
  --ai-enter-duration: .65s;
  --ai-enter-delay: .12s;
  --ai-ease: cubic-bezier(.2,.6,.2,1);
  --ai-text-lift: 5px; /* tylko dla title/sub */
  position: relative;
}

/* tło fade-in */
.configurator-prompt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ai-bg);
  opacity: 0;
  transition: opacity var(--ai-enter-duration) var(--ai-ease);
  transition-delay: var(--ai-enter-delay);
  pointer-events: none;
  z-index: 0;
}

/* treść nad tłem */
.configurator-prompt > * {
  position: relative;
  z-index: 1;
}

/* badge — fade */
.configurator-prompt__badge {
  opacity: 0;
  transition: opacity var(--ai-enter-duration) var(--ai-ease);
  transition-delay: var(--ai-enter-delay);
}

/* title + sub — fade + lift */
.configurator-prompt__title,
.configurator-prompt__sub {
  opacity: 0;
  transform: translateY(var(--ai-text-lift, 20px));
  transition: opacity var(--ai-enter-duration) var(--ai-ease), transform var(--ai-enter-duration) var(--ai-ease);
}

.configurator-prompt__title {
  transition-delay: calc(var(--ai-enter-delay) + 0.08s);
}

.configurator-prompt__sub {
  transition-delay: calc(var(--ai-enter-delay) + 0.16s);
}

/* benefits — kontener fade-in */
.configurator-prompt__benefits {
  opacity: 0;
  transition: opacity var(--ai-enter-duration) var(--ai-ease);
  transition-delay: calc(var(--ai-enter-delay) + 0.28s); /* po sub */
}

/* benefits — każdy li z delikatnym staggerem */
.configurator-prompt__benefits li {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--ai-enter-duration) var(--ai-ease), transform var(--ai-enter-duration) var(--ai-ease);
}

.configurator-prompt.ai-animate .configurator-prompt__benefits {
  opacity: 1;
}

.configurator-prompt.ai-animate .configurator-prompt__benefits li {
  opacity: 1;
  transform: none;
}

/* Stagger per li */
.configurator-prompt.ai-animate .configurator-prompt__benefits li:nth-child(1) {
  transition-delay: calc(var(--ai-enter-delay) + 0.36s);
}

.configurator-prompt.ai-animate .configurator-prompt__benefits li:nth-child(2) {
  transition-delay: calc(var(--ai-enter-delay) + 0.44s);
}

.configurator-prompt.ai-animate .configurator-prompt__benefits li:nth-child(3) {
  transition-delay: calc(var(--ai-enter-delay) + 0.52s);
}

.configurator-prompt.ai-animate .configurator-prompt__benefits li:nth-child(4) {
  transition-delay: calc(var(--ai-enter-delay) + 0.6s);
}

/* aktywacja */
.configurator-prompt.ai-animate::before {
  opacity: 1;
}

.configurator-prompt.ai-animate .configurator-prompt__badge {
  opacity: 1;
}

.configurator-prompt.ai-animate .configurator-prompt__title,
.configurator-prompt.ai-animate .configurator-prompt__sub {
  opacity: 1;
  transform: translateY(0);
}

/* A11y */
@media (prefers-reduced-motion: reduce) {
  .configurator-prompt::before {
    transition: none;
    opacity: 1;
  }
  .configurator-prompt__badge,
  .configurator-prompt__title,
  .configurator-prompt__sub,
  .configurator-prompt__benefits,
  .configurator-prompt__benefits li {
    transition: none;
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================================
   Mission — Apple-like scroll-synced wejście
   Obraz: zoom-out + parallax (BEZ opacity) — NIE RUSZAMY
   Typografia: fade-in (0→1) + lift 20px→0 (CTA z subtelnym pop)
   ========================================================================== */
.mission {
  /* Globalny progress (0..1) — sterowany z JS */
  --p: 0;
  /* Sub-progresy elementów (0..1) — sterowane z JS */
  --p-img: 0;
  --p-dots: 0;
  --p-div: 0;
  --p-title: 0;
  --p-sub: 0;
  --p-text: 0;
  --p-btn: 0;
  /* Tokeny obrazu (Apple-like preset) — NIE ZMIENIAMY LOGIKI OBRAZU */
  --img-scale-start: 1.40;
  --img-parallax: min(20vh, 80px);
  --img-lift: 28px;
  --img-dim: 0.0; /* przyciemnienie wyłączone (0..1) */
  /* Tokeny wejścia typografii — zgodnie z ustaleniami */
  --enter-lift: 20px; /* było 5px */
  --opacity-start: 0; /* było .5 */
  /* Per-element overrides (opcjonalne) */
  --title-lift: var(--enter-lift);
  --title-opacity-start: var(--opacity-start);
  --sub-lift: var(--enter-lift);
  --sub-opacity-start: var(--opacity-start);
  --text-lift: var(--enter-lift);
  --text-opacity-start: var(--opacity-start);
  --btn-lift: var(--enter-lift);
  --btn-opacity-start: var(--opacity-start);
  /* Sub-progresy RUCHU (0..1) — niezależne od opacity; fallback = dotychczasowe */
  --p-title-move: var(--p-title);
  --p-sub-move: var(--p-sub);
  --p-text-move: var(--p-text);
  --p-btn-move: var(--p-btn);
  /* Performance */
  contain: layout paint style;
  will-change: transform;
  transform-style: preserve-3d;
  /* === Obraz — zoom-out + parallax (bez opacity) === */
}
.mission__image-wrapper {
  position: relative;
  overflow: clip;
  backface-visibility: hidden;
  transform: translateY(calc((1 - var(--p-img)) * var(--img-parallax)));
  transition: none;
  will-change: transform;
}
.mission .mission__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  will-change: transform;
  transform: translateY(calc((1 - var(--p-img, 0)) * var(--img-lift, 20vh))) scale(calc(var(--img-scale-start, 1.2) - (var(--img-scale-start, 1.2) - var(--img-scale-end, 1)) * var(--p-img, 0)));
  transform-origin: center center;
  transition: none;
}
.mission {
  /* === Dots / Divider === */
}
.mission__dots {
  transform: translateX(calc((1 - var(--p-dots)) * 24px));
  opacity: var(--p-dots);
  transition: none;
  will-change: transform, opacity;
}
.mission__divider {
  transform-origin: left center;
  transform: scaleX(var(--p-div));
  opacity: calc(0.4 + 0.6 * var(--p-div));
  will-change: transform, opacity;
}
.mission {
  /* === Typografia — fade-up (0→1, 20px→0) === */
  /* === Typografia — fade-up (0→1, 20px→0) === */
}
.mission__title, .mission__text-title, .mission__text, .mission__button {
  animation: none !important;
  transition: none !important;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(20px);
}
.mission__title.reveal--in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.mission__text-title.reveal--in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 90ms, opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) 90ms;
}
.mission__text.reveal--in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 180ms, opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}
.mission__button.reveal--in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 270ms, opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) 270ms;
}
.mission {
  /* === Motion accessibility === */
}
@media (prefers-reduced-motion: reduce) {
  .mission__image-wrapper, .mission__image, .mission__dots, .mission__divider, .mission__title, .mission__text-title, .mission__text, .mission__button {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Mission – teksty: stan startowy + wejście po .reveal--in */
.mission {
  /* start: ukryte + lekkie opuszczenie */
}
.mission__title, .mission__text-title, .mission__text, .mission__button {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: none !important; /* animuje JS przez klasę */
}
.mission {
  /* wejście: fade-in + lift (0.72s, decelerate) */
}
.mission__title.reveal--in, .mission__text-title.reveal--in, .mission__text.reveal--in, .mission__button.reveal--in {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.mission__title.reveal--in, .mission__text-title.reveal--in, .mission__text.reveal--in, .mission__button.reveal--in {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ==========================================================================
   _why-us-anim.scss — foto (zoom-out + parallax) + title lift
   + divider (0→1) + Apple-reveal (lead/desc/list)
   ========================================================================== */
.why-us {
  /* —— Gałki obrazu —— */
  /* Apple-like preset */
  --img-scale-start: 1.85; /* mocny zoom-in na starcie (1.7–1.95) */
  --img-parallax: min(60vh, 600px); /* parallax skalujący się z viewportem */
  --img-lift: 28px;
  /* —— Gałki typografii —— */
  --opacity-start: .5;
  --title-lift: 20px;
  --enter-lift: 5px; /* legacy: lead/desc/list */
  /* —— Progresy (0..1). Domyślnie 1 (bez JS) —— */
  --w-img: 1;
  --w-div: 1;
  --w-title: 1;
  --w-title-move: 1;
  --w-lead: 1;
  --w-desc: 1;
  --w-list: 1;
  /* Uzbrojenie sekcji — NIE resetujemy --w-div */
}
.why-us.armed {
  --w-img: 0;
  /* --w-div: 0; */
  --w-title: 0;
  --w-title-move: 0;
  --w-lead: 0;
  --w-desc: 0;
  --w-list: 0;
}
.why-us {
  /* ===== KARTA Z DUŻYM ZDJĘCIEM ===== */
}
.why-us .why-us__review-card {
  position: relative;
  overflow: hidden;
}
.why-us {
  /* ===== OBRAZ — fallback (bez JS) ===== */
}
.why-us .why-us__review-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}
.why-us {
  /* mniejsze foto (opcjonalnie) */
}
.why-us .why-us__image-wrapper {
  overflow: hidden;
}
.why-us .why-us__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  will-change: transform;
  /* Apple-like: pełny parallax + skala od --img-scale-start do 1.00 */
  transform: translateY(calc((1 - var(--w-img)) * (var(--img-parallax) + var(--img-lift)))) scale(calc(var(--img-scale-start) - (var(--img-scale-start) - 1) * var(--w-img)));
  transform-origin: center;
  transition: none;
}
.why-us {
  /* ===== DIVIDER — sterowany --div-p (fallback: --w-div) ===== */
}
.why-us .why-us__divider {
  height: 4px;
  transform-origin: left center;
  transform: scaleX(var(--div-p, var(--w-div)));
  opacity: calc(0.4 + 0.6 * var(--div-p, var(--w-div)));
  will-change: transform, opacity;
  transition: none;
}
.why-us {
  /* ===== TITLE (bez zmian) ===== */
}
.why-us .why-us__title {
  display: inline-block;
  opacity: calc(var(--opacity-start) + (1 - var(--opacity-start)) * var(--w-title));
  translate: 0 calc((1 - var(--w-title-move)) * var(--title-lift));
  will-change: translate, opacity;
  transition: none;
}
.why-us {
  /* Legacy lead/desc/list — zostaną przykryte przez reveal */
}
.why-us .why-us__lead,
.why-us .why-us__description-title {
  opacity: calc(var(--opacity-start) + (1 - var(--opacity-start)) * var(--w-lead));
  transform: translateY(calc((1 - var(--w-lead)) * var(--enter-lift)));
  will-change: transform, opacity;
  transition: none;
}
.why-us .why-us__description {
  opacity: calc(var(--opacity-start) + (1 - var(--opacity-start)) * var(--w-desc));
  transform: translateY(calc((1 - var(--w-desc)) * var(--enter-lift)));
  will-change: transform, opacity;
  transition: none;
}
.why-us .why-us__item {
  --p-li: 1;
  opacity: var(--p-li);
  transform: translateY(calc((1 - var(--p-li)) * var(--enter-lift)));
  will-change: transform, opacity;
  transition: none;
}
.why-us {
  /* A11y globalnie */
}
@media (prefers-reduced-motion: reduce) {
  .why-us .why-us__review-image,
  .why-us .why-us__image,
  .why-us .why-us__divider,
  .why-us .why-us__title,
  .why-us .why-us__lead,
  .why-us .why-us__description,
  .why-us .why-us__item {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ========================================================================== */
/* Apple-like reveal (FADE-IN + LIFT) dla lead/desc/list — twarde nadpisanie   */
/* ========================================================================== */
.why-us .why-us__lead.reveal,
.why-us .why-us__description-title.reveal,
.why-us .why-us__description.reveal,
.why-us .why-us__list .why-us__item.reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  /* !important na KOŃCU deklaracji — poprawny zapis */
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform, opacity;
}

.why-us .why-us__lead.reveal.reveal--in,
.why-us .why-us__description-title.reveal.reveal--in,
.why-us .why-us__description.reveal.reveal--in,
.why-us .why-us__list .why-us__item.reveal.reveal--in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* A11y — reveal bez animacji */
@media (prefers-reduced-motion: reduce) {
  .why-us .why-us__lead.reveal,
  .why-us .why-us__description-title.reveal,
  .why-us .why-us__description.reveal,
  .why-us .why-us__list .why-us__item.reveal,
  .why-us .why-us__lead.reveal.reveal--in,
  .why-us .why-us__description-title.reveal.reveal--in,
  .why-us .why-us__description.reveal.reveal--in,
  .why-us .why-us__list .why-us__item.reveal.reveal--in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =======================
   SERVICES – wejście sekcji
   ======================= */
/* Tytuł „wjeżdża” (opacity/slide) dopiero po uzbrojeniu */
section.services.is-armed .services__title {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Divider: rysowanie od lewej */
section.services.is-armed .services__title::before {
  content: "";
  display: block;
  width: 229px;
  height: 4px;
  margin: 0 0 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, #DC9B59 0%, #000000 100%);
  transform-origin: left center;
  transform: scaleX(0) !important;
  transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Stan końcowy po wejściu */
section.services.is-armed.is-inview .services__title {
  opacity: 1;
  transform: none;
}

section.services.is-armed.is-inview .services__title::before {
  transform: scaleX(1) !important;
}

/* ===== Litera-po-literze: kolor ===== */
section.services .services__title em {
  display: inline-block;
  white-space: pre-wrap;
}

section.services .services__title .char {
  display: inline-block;
  color: #6B7280 !important; /* start jaśniejszy – przebija dziedziczenie */
  will-change: color;
}

@keyframes svcCharColor {
  to {
    color: #1D1F2C;
  }
}
section.services.is-armed.is-inview .services__title .char {
  animation: svcCharColor 600ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 35ms); /* tempo liter */
}

/* Motion a11y */
@media (prefers-reduced-motion: reduce) {
  section.services.is-armed .services__title,
  section.services.is-armed .services__title::before,
  section.services.is-armed .services__title .char {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    color: #1D1F2C !important;
  }
}
/* _header-anim.scss */
/* Animacje wejścia dla headera: tylko opacity/translate; brak zmian layoutu */
@media (prefers-reduced-motion: reduce) {
  .header.hero-armed .header__title,
  .header.hero-armed .header__description,
  .header.hero-armed .button--header,
  .header.hero-animate .header__title,
  .header.hero-animate .header__description,
  .header.hero-animate .button--header {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Stan uzbrojony — ukryj elementy zanim włączymy transition */
.header.hero-armed .header__title,
.header.hero-armed .header__description,
.header.hero-armed .button--header {
  opacity: 0;
  transform: translateY(14px);
}

/* Po włączeniu — ustaw jednolite przejścia */
.header.hero-animate .header__title,
.header.hero-animate .header__description,
.header.hero-animate .button--header {
  transition: opacity 0.55s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform, opacity; /* tylko na animowanych */
}

/* Ujawnione */
.header .hero-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Subtelny "pop" dla przycisku w momencie wejścia (bez layout shift) */
.header .button--header.hero-pop {
  transition: opacity 0.55s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.header .button--header.hero-pop.hero-revealed {
  /* lekki overshoot — wyłącznie transform (brak wpływu na layout) */
  transform: translateY(0) scale(1.01);
}

.header .button--header.hero-pop:is(:hover, :focus-visible) {
  transform: translateY(-1px) scale(1.01);
}

/* ===== AI BOX — mobile-first ===== */
.configurator-prompt,
body.about .configurator-prompt {
  /* === Wymiary ramki — ŚCIŚLE (MOBILE) === */
  grid-column: 1/span 3;
  justify-self: start;
  align-self: start;
  /* wymagane odstępy */
  margin-left: 70px;
  margin-right: 55px;
  /* zachowaj proporcje wizualne jak w Figmie, wysokość rośnie wraz z szerokością */
  width: calc(100% - 70px - 55px);
  height: 434px;
  /* UNIESIENIE NAD HEADER (MOBILE) */
  --ai-lift: 50px;
  margin-top: calc(var(--ai-lift) * -1); /* uniesienie bez tworzenia stacking contextu */
  position: relative;
  will-change: auto;
  z-index: 20;
  /* ustawienie wewnętrzne, żeby nic nie wychodziło */
  overflow: hidden;
  background: #fff;
  border-radius: 0 42px 0 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.configurator-prompt .configurator-prompt__content,
body.about .configurator-prompt .configurator-prompt__content {
  /* wypełnia całość ramki 218 × 360 */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px; /* góra/dół 12px, boki 16px */
  box-sizing: border-box;
}
.configurator-prompt,
body.about .configurator-prompt {
  /* --- badge --- */
}
.configurator-prompt .configurator-prompt__badge,
body.about .configurator-prompt .configurator-prompt__badge {
  align-self: flex-start;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-600, #c88b42);
  background: rgba(200, 139, 66, 0.12);
  border-radius: 999px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.configurator-prompt,
body.about .configurator-prompt {
  /* --- tytuł --- */
}
.configurator-prompt .configurator-prompt__title,
body.about .configurator-prompt .configurator-prompt__title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 6px 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.configurator-prompt,
body.about .configurator-prompt {
  /* --- subhead --- */
}
.configurator-prompt .configurator-prompt__sub,
body.about .configurator-prompt .configurator-prompt__sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b6b6b;
  margin: 0 0 10px 0;
}
.configurator-prompt,
body.about .configurator-prompt {
  /* --- lista korzyści --- */
}
.configurator-prompt .configurator-prompt__benefits,
body.about .configurator-prompt .configurator-prompt__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}
.configurator-prompt .configurator-prompt__benefits li,
body.about .configurator-prompt .configurator-prompt__benefits li {
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.configurator-prompt,
body.about .configurator-prompt {
  /* --- mikro-zaufanie --- */
}
.configurator-prompt .configurator-prompt__trust,
body.about .configurator-prompt .configurator-prompt__trust {
  font-size: 11px;
  line-height: 1.3;
  color: #8e8e8e;
  margin: 0 0 10px 0;
}
.configurator-prompt,
body.about .configurator-prompt {
  /* === CTA: konfigurator AI === */
}
.configurator-prompt .configurator-prompt__button,
body.about .configurator-prompt .configurator-prompt__button {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border: none;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #DC9B59, #000000);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* pulsująca poświata */
  box-shadow: 0 0 0 0 rgba(220, 155, 89, 0.6);
  animation: pulseGlow 2.5s infinite;
}
.configurator-prompt .configurator-prompt__button:hover,
body.about .configurator-prompt .configurator-prompt__button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgb(221.75, 160, 97.3), rgb(12.75, 12.75, 12.75));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.configurator-prompt .configurator-prompt__button:active,
body.about .configurator-prompt .configurator-prompt__button:active {
  transform: scale(0.98);
}
.configurator-prompt,
body.about .configurator-prompt {
  /* animacja pulsującego glow */
}
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 155, 89, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(220, 155, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 155, 89, 0);
  }
}
.configurator-prompt .configurator-prompt__link,
body.about .configurator-prompt .configurator-prompt__link {
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  color: var(--brand-600, #c88b42);
  background: transparent;
  border: none;
  cursor: pointer;
  margin-bottom: 6px;
  margin-top: 20px;
  display: block; /* link zajmie całą szerokość */
  text-align: center; /* i wyśrodkuje tekst */
}
.configurator-prompt .configurator-prompt__link,
body.about .configurator-prompt .configurator-prompt__link {
  display: block;
  width: 100%; /* zajmuje pełną szerokość kolumny */
  text-align: center; /* tekst w środku */
}
.configurator-prompt,
body.about .configurator-prompt {
  /* --- nota prawna --- */
}
.configurator-prompt .configurator-prompt__legal,
body.about .configurator-prompt .configurator-prompt__legal {
  font-size: 10px;
  line-height: 1.3;
  color: #8e8e8e;
  margin: 0;
}

/* =========================================================
   TABLET (744–1439 px) — PŁYNNY GRID
   Content: full width • Grid: 8 kol • Gap: 20px • Margins: 42px
   ========================================================= */
@media (min-width: 744px) and (max-width: 1439px) {
  .configurator-prompt,
  body.about .configurator-prompt {
    width: calc(100% - 84px); /* = pełna szerokość - marginesy */
    margin-left: 42px;
    margin-right: 42px;
    margin-bottom: 40px;
    height: auto;
    min-height: 209px;
    --ai-lift: 40px;
  }
  .configurator-prompt .configurator-prompt__content,
  body.about .configurator-prompt .configurator-prompt__content {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 12px;
    padding: 24px 42px; /* boki 42px, góra/dół 24px */
    min-height: 209px;
    align-content: start;
  }
  .configurator-prompt .configurator-prompt__content > *,
  body.about .configurator-prompt .configurator-prompt__content > * {
    min-width: 0;
  }
  .configurator-prompt .configurator-prompt__content,
  body.about .configurator-prompt .configurator-prompt__content { /* zabezpieczenie przed overflowem */ }
  .configurator-prompt,
  body.about .configurator-prompt {
    /* ROZMIESZCZENIE W 8-KOLUMNOWEJ SIATCE (bez zmian w treści) */
  }
  .configurator-prompt .configurator-prompt__badge,
  body.about .configurator-prompt .configurator-prompt__badge {
    /* NIE rozciągaj w kolumnach grida */
    /* grid-column: 1 / span 3;   <- usuń */
    display: inline-flex; /* szerokość = treść */
    align-items: center;
    width: fit-content; /* awaryjnie, gdyby grid chciał rozciągać */
    white-space: nowrap; /* jedna linia */
    padding: 3px 8px; /* oddech kapsułki */
    line-height: 1; /* bez dodatkowej wysokości z body (1.5) */
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-600, #c88b42);
    background: rgba(200, 139, 66, 0.12);
    border-radius: 999px;
    margin-bottom: 6px;
    /* box-sizing dziedziczy border-box – ok */
  }
  .configurator-prompt .configurator-prompt__title,
  body.about .configurator-prompt .configurator-prompt__title {
    grid-column: 1/span 6;
    margin: 0;
    font-family: dm sans, sans-serif;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 6px 0;
  }
  .configurator-prompt .configurator-prompt__sub,
  body.about .configurator-prompt .configurator-prompt__sub {
    grid-column: 1/span 6;
    font-size: 16px;
    line-height: 1.4;
    color: #6b6b6b;
    margin: 0 0 10px 0;
  }
  .configurator-prompt .configurator-prompt__benefits,
  body.about .configurator-prompt .configurator-prompt__benefits {
    grid-column: 1/span 6;
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
  }
  .configurator-prompt .configurator-prompt__benefits li,
  body.about .configurator-prompt .configurator-prompt__benefits li {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .configurator-prompt .configurator-prompt__cta,
  body.about .configurator-prompt .configurator-prompt__cta {
    grid-column: 7/span 2; /* obszar CTA */
    justify-self: end; /* dosuń do prawej linii grida */
    margin-right: 24px; /* 24px „powietrza” od prawej */
    align-items: flex-end; /* zawartość w prawo */
    text-align: right;
  }
  .configurator-prompt .configurator-prompt__button,
  body.about .configurator-prompt .configurator-prompt__button {
    height: 80px;
    width: auto;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
  }
  .configurator-prompt .configurator-prompt__link,
  body.about .configurator-prompt .configurator-prompt__link {
    white-space: nowrap;
  }
}
/* =========================================================
   LAPTOP (1440–1919 px)
   Grid: 12 kol • Gap: 24px
   Powietrze: left 55px, right 25px (asymetrycznie)
   ========================================================= */
@media (min-width: 1440px) and (max-width: 1919px) {
  .configurator-prompt {
    /* szerokość = pełne 100% minus powietrze (55 + 25 = 80) */
    width: calc(100% - 80px);
    margin-left: 55px;
    margin-right: 25px;
    height: auto;
    min-height: 235px;
    --ai-lift: 72px; /* jak wcześniej */
    /* UNIESIENIE NAD HEADER (MOBILE) */
    --ai-lift: 30px; /* 72–128px zwykle wygląda dobrze */
    transform: translateY(calc(var(--ai-lift) * -1));
    z-index: 20;
    position: relative;
    will-change: transform;
  }
  .configurator-prompt .configurator-prompt__content {
    /* płynny grid: 12 × 1fr, stały gap 24 */
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 12px;
    /* wewnętrzne paddingi zostawiamy 42px po bokach, 24px góra/dół */
    padding: 24px 42px;
    align-content: start;
    min-height: 209px;
  }
  .configurator-prompt .configurator-prompt__content > * {
    min-width: 0;
  }
  .configurator-prompt {
    /* układ elementów (bez zmian) */
  }
  .configurator-prompt .configurator-prompt__badge {
    display: inline-flex; /* szerokość = treść */
    align-items: center;
    width: fit-content; /* awaryjnie, gdyby grid chciał rozciągać */
    white-space: nowrap; /* jedna linia */
    padding: 3px 8px; /* oddech kapsułki */
    line-height: 1; /* bez dodatkowej wysokości z body (1.5) */
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-600, #c88b42);
    background: rgba(200, 139, 66, 0.12);
    border-radius: 999px;
    margin-bottom: 6px;
    /* box-sizing dziedziczy border-box – ok */
  }
  .configurator-prompt .configurator-prompt__title {
    grid-column: 1/span 8;
    margin: 0;
    font-family: dm sans, sans-serif;
    font-size: 60px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 6px 0;
  }
  .configurator-prompt .configurator-prompt__sub {
    grid-column: 1/span 8;
    margin: 0;
    font-family: dm sans, sans-serif;
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    margin: 0 0 6px 0;
  }
  .configurator-prompt .configurator-prompt__benefits {
    grid-column: 1/span 8;
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
  }
  .configurator-prompt .configurator-prompt__benefits li {
    font-size: 30px;
    line-height: 50px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .configurator-prompt .configurator-prompt__cta {
    grid-column: 11/span 2; /* obszar CTA */
    justify-self: end; /* dosuń do prawej linii grida */
    margin-right: 24px; /* 24px „powietrza” od prawej */
    align-items: flex-end; /* zawartość w prawo */
    text-align: right;
  }
  .configurator-prompt .configurator-prompt__button {
    height: 60px;
    width: 235px;
  }
  .configurator-prompt .configurator-prompt__link {
    white-space: nowrap;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 1px;
    margin-top: 12px;
  }
}
/* =========================================================
   DESKTOP (≥1920 px)
   Content: 1320px • Grid: 12 kol • Gap: 24px • Margins: 300px
   ========================================================= */
@media (min-width: 1920px) {
  .configurator-prompt {
    /* szerokość boxa trzyma 1320px + marginesy 300px po bokach */
    width: 1320px;
    min-height: 255px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    z-index: 20; /* pod NAV(30) i LOGO(40), nad headerem */
    --ai-lift: 50px;
  }
  .configurator-prompt .configurator-prompt__content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 16px;
    padding: 24px 42px; /* boki 42px, góra/dół 24px */
    height: 100%;
    align-content: start;
    grid-auto-rows: min-content;
  }
  .configurator-prompt .configurator-prompt__content > * {
    min-width: 0;
  }
  .configurator-prompt {
    /* Lewa część (tekst + lista) */
  }
  .configurator-prompt .configurator-prompt__badge {
    /* NIE rozciągaj w kolumnach grida */
    /* grid-column: 1 / span 3;   <- usuń */
    display: inline-flex; /* szerokość = treść */
    align-items: center;
    width: fit-content; /* awaryjnie, gdyby grid chciał rozciągać */
    white-space: nowrap; /* jedna linia */
    padding: 3px 8px; /* oddech kapsułki */
    line-height: 1; /* bez dodatkowej wysokości z body (1.5) */
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-600, #c88b42);
    background: rgba(200, 139, 66, 0.12);
    border-radius: 999px;
    margin-bottom: 6px;
    /* box-sizing dziedziczy border-box – ok */
  }
  .configurator-prompt .configurator-prompt__title {
    grid-column: 1/span 8;
    margin: 0;
    font-family: dm sans, sans-serif;
    font-size: 60px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 6px 0;
  }
  .configurator-prompt .configurator-prompt__sub {
    grid-column: 1/span 8;
    margin: 0;
    font-family: dm sans, sans-serif;
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    margin: 0 0 6px 0;
  }
  .configurator-prompt .configurator-prompt__benefits {
    grid-column: 1/span 8;
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
  }
  .configurator-prompt .configurator-prompt__benefits li {
    font-size: 30px;
    line-height: 50px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .configurator-prompt {
    /* Prawa część (CTA + link) */
  }
  .configurator-prompt .configurator-prompt__cta {
    grid-column: 11/span 2; /* obszar CTA */
    justify-self: end; /* dosuń do prawej linii grida */
    margin-right: 24px; /* 24px „powietrza” od prawej */
    align-items: flex-end; /* zawartość w prawo */
    text-align: right;
  }
  .configurator-prompt .configurator-prompt__button {
    height: 60px;
    width: 235px;
  }
  .configurator-prompt .configurator-prompt__link {
    white-space: nowrap;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 1px;
    margin-top: 12px;
  }
}
/* BASE (poza animacją) – przywróć normalny rendering na about */
body.about .configurator-prompt:not(.ai-armed):not(.ai-animate) .configurator-prompt__title,
body.about .configurator-prompt:not(.ai-armed):not(.ai-animate) .configurator-prompt__sub {
  opacity: 1 !important;
  transform: none !important;
  background-image: none !important;
  background-size: auto !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #111 !important;
}

body.about .configurator-prompt:not(.ai-armed):not(.ai-animate) .configurator-prompt__sub {
  color: #6b6b6b !important;
}

/* FINAL — jeśli używasz klasy .ai-revealed, także ją zresetuj na about */
body.about .configurator-prompt .configurator-prompt__title.ai-revealed,
body.about .configurator-prompt .configurator-prompt__sub.ai-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  background-image: none !important;
  -webkit-text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #111 !important;
}

body.about .configurator-prompt .configurator-prompt__sub.ai-revealed {
  color: #6b6b6b !important;
}

/* FIX dla listy korzyści na about */
body.about .configurator-prompt .configurator-prompt__benefits li {
  opacity: 1 !important;
  transform: none !important;
  /* odetnij ewentualny clip/transparent z innych styli */
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  /* kolor jak na index (zmień jeśli chcesz jaśniejszy) */
  color: #111 !important;
}

/* jeśli w li masz <span> z ikoną/emoji i tekstem, też zresetuj */
body.about .configurator-prompt .configurator-prompt__benefits li > * {
  -webkit-text-fill-color: initial !important;
  background-image: none !important;
}

/* === HARD FIX dla listy korzyści – tylko na about === */
body.about .configurator-prompt .configurator-prompt__benefits,
body.about .configurator-prompt .configurator-prompt__benefits *,
body.about .configurator-prompt.ai-armed .configurator-prompt__benefits,
body.about .configurator-prompt.ai-armed .configurator-prompt__benefits *,
body.about .configurator-prompt.ai-animate .configurator-prompt__benefits,
body.about .configurator-prompt.ai-animate .configurator-prompt__benefits * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  /* odetnij wszelkie „clipy” i transparenty */
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #111 !important; /* tekst jak na index */
}

/* jeśli chcesz szary dla opisu w li (druga linia), dopnij selektor np.: */
/* body.about .configurator-prompt .configurator-prompt__benefits li small { color:#6b6b6b !important; } */
/* =========================================
   SMARTBAR — mobilny pasek akcji
   ========================================= */
.smartbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 10px 16px 12px;
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(6px);
  z-index: 2147483645;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 220ms;
}
.smartbar.is-hidden {
  transform: translateY(100%);
  opacity: 0;
}
.smartbar[hidden] {
  display: none !important;
}

.smartbar__btn {
  flex: 1 1 0;
  max-width: 420px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #111;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}
.smartbar__btn img {
  display: block;
  width: 20px;
  height: 20px;
}
.smartbar__btn:active {
  transform: translateY(1px);
}

.smartbar__btn--call {
  background: #fff;
  color: #111;
}

.smartbar__btn--ai {
  background: #DC9B59;
  color: #111;
}

/* tylko mobile (0–743px) */
@media (min-width: 744px) {
  .smartbar {
    display: none;
  }
}
/* gdy overlay menu otwarte — schowaj */
html.nav-open .smartbar {
  display: none !important;
}

/* CTA konfiguratora (jeden plik - bez zadnych nakladek) */
/* KONFIGURATOR (jeden agregat) */
/* =========================================================
   CALLBACK POPUP — czysty, responsywny, bez wycieków
   ========================================================= */
/* --- Breakpointy (zgodnie z Twoimi progami) --- */
/* --- Scroll lock — kompensacja paska tylko na body --- */
html.cb-lock {
  overflow-y: hidden;
}

body.cb-lock {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
  width: 100%;
}

/* --- Root popupa (port) --- */
.callback-pop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* oddech + notche */
  padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  pointer-events: none; /* zamknięty nie łapie klików */
  overflow-x: hidden; /* anty poziomy scroll */
}
.callback-pop.is-active {
  pointer-events: auto;
}

/* --- Overlay --- */
.callback-pop__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.callback-pop.is-active .callback-pop__overlay {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .callback-pop__overlay {
    transition: none;
  }
}

/* --- Karta (content) --- */
.callback-pop__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* nie wyjdzie poza ekran – uwzględnia padding kontenera (24+24) */
  max-width: min(520px, 100dvw - 48px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  padding: 20px;
  transform: scale(0.96);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform 0.18s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.18s ease;
}
.callback-pop.is-active .callback-pop__card {
  transform: scale(1);
  opacity: 1;
}
@media (min-width: 744px) {
  .callback-pop__card {
    padding: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .callback-pop__card {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* --- Zamknij --- */
.callback-pop__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  transition: background 0.15s ease, transform 0.06s ease;
}
.callback-pop__close:hover {
  background: rgba(0, 0, 0, 0.05);
}
.callback-pop__close:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  .callback-pop__close {
    transition: none;
  }
}

/* --- Head --- */
.callback-pop__title {
  margin: 0 36px 6px 0; /* miejsce dla X */
  font-size: 20px;
  font-weight: 700;
  color: #0b0b0c;
}
@media (min-width: 744px) {
  .callback-pop__title {
    font-size: 22px;
  }
}

.callback-pop__lead {
  margin: 0 0 14px;
  font-size: 14px;
  color: #555;
}
@media (min-width: 744px) {
  .callback-pop__lead {
    font-size: 15px;
  }
}

/* --- Forma --- */
.callback-pop__form {
  display: grid;
  gap: 12px;
}

/* Imię + Nazwisko (2 kolumny, na wąskich jedna) */
.callback-pop__row {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.callback-pop__row--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 480px) {
  .callback-pop__row--2 {
    grid-template-columns: 1fr;
  }
}

.callback-pop__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.callback-pop__label {
  font-weight: 600;
  font-size: 14px;
  color: #222;
}

/* Telefon + przycisk — PRZYCISK POD INPUTEM (pełna szerokość) */
.callback-pop__field {
  display: grid;
  grid-template-columns: 1fr; /* 1 kolumna: input pełny, pod nim button */
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

/* Inputy */
.callback-pop__input {
  height: 48px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 16px;
  color: #111;
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.callback-pop__input::placeholder {
  color: #bbb;
}
.callback-pop__input:focus {
  border-color: #DC9B59;
  box-shadow: 0 0 0 4px rgba(220, 155, 89, 0.2);
}
.callback-pop__input.is-invalid {
  border-color: #e25454;
  box-shadow: 0 0 0 4px rgba(226, 84, 84, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .callback-pop__input {
    transition: none;
  }
}

/* Button (100% szerokości pod telefonem) */
.callback-pop__btn {
  height: 48px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(135deg, #DC9B59 0%, #000000 100%);
  color: #fff;
  transition: transform 0.06s ease, opacity 0.2s ease;
}
.callback-pop__btn:active {
  transform: translateY(1px);
}
.callback-pop__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .callback-pop__btn {
    transition: none;
  }
}

/* Checkbox + opis */
.callback-pop__consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  font-size: 13px;
  color: #444;
}
.callback-pop__consent a {
  color: #DC9B59;
  text-decoration: underline;
}
.callback-pop__consent a:hover {
  text-decoration: none;
}
.callback-pop__consent input[type=checkbox] {
  inline-size: 18px;
  block-size: 18px;
  accent-color: #DC9B59; /* nowoczesny UA */
}

/* Hint i status */
.callback-pop__hint {
  font-size: 12px;
  color: #777;
  margin: 0;
}

.callback-pop__status {
  font-size: 14px;
  min-height: 20px;
  color: #2b2b2b;
}

/* Honeypot */
.callback-pop__hp {
  display: none !important;
}

/* Widok sukcesu */
.callback-pop__success {
  display: grid;
  gap: 12px;
}
.callback-pop__success .callback-pop__btn {
  width: 100%;
}

/* Hard hide gdy globalny reset psuje [hidden] */
.callback-pop [hidden] {
  display: none !important;
}

/* --- Micro-fixy anty-overflow (wszystko w box-sizing: border-box) --- */
.callback-pop__card,
.callback-pop__card * {
  box-sizing: border-box;
  min-width: 0;
}

/* --- Dodatkowe dopasowanie do szerokości viewportu na dużych ekranach --- */
@media (min-width: 1440px) {
  .callback-pop__card {
    max-width: 560px;
  }
}
@media (min-width: 1920px) {
  .callback-pop__card {
    max-width: 600px;
  }
}
/* =========================================================
   Opcjonalny układ INLINE na szerokich (gdybyś chciał kiedyś
   mieć telefon + button w 1 rzędzie na >= laptop)
   — Wystarczy dodać modyfikator na kontener: .callback-pop__field--inline
   ========================================================= */
@media (min-width: 1440px) {
  .callback-pop__field--inline {
    grid-template-columns: minmax(0, 1fr) auto; /* input + wąski button */
    align-items: center;
  }
  .callback-pop__field--inline .callback-pop__btn {
    width: auto; /* przycisk dopasowany do treści */
    justify-self: end;
    white-space: nowrap;
  }
}
/* =========================================================
   POPUP KONFIGURATORA — stała ramka i zachowanie
   (przeniesione z <style id="cfg-fixed-frame-css">)
   ========================================================= */
#cfg-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  place-content: center;
  padding: 24px;
  z-index: 10000;
}
#cfg-modal.is-hidden {
  display: none;
}
#cfg-modal .cfg__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 0;
}
#cfg-modal .cfg__panel {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  height: min(88vh, 880px);
  width: min(1080px, 100vw - 32px);
  max-width: 1080px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
#cfg-modal .cfg__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
#cfg-modal .cfg__close:hover {
  opacity: 1;
}
#cfg-modal .cfg-stepper {
  grid-row: 1/2;
  min-height: 0;
}
#cfg-modal .cfg-step {
  grid-row: 2/3;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline: 8px;
  padding-bottom: 16px;
}
#cfg-modal .cfg-step[hidden] {
  display: none;
}
#cfg-modal .cfg-nav {
  grid-row: 3/4;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 12px;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* Tablet */
@media (max-width: 1024px) {
  #cfg-modal {
    padding: 16px;
  }
  #cfg-modal .cfg__panel {
    height: min(92vh, 820px);
    width: min(100vw - 16px, 960px);
  }
}
/* Mobile */
@media (max-width: 480px) {
  #cfg-modal {
    padding: 8px;
  }
  #cfg-modal .cfg__panel {
    height: 92vh;
    width: calc(100vw - 12px);
    border-radius: 12px;
  }
  #cfg-modal .cfg-step {
    padding-inline: 6px;
  }
}
/* Blokada scrolla tła podczas otwartego modala */
html.cfg-open,
body.cfg-open {
  overflow: hidden;
}

/* scss/components/_booking-modal.scss */
/* === BOOKING MODAL — kompletny, Dart Sass 3-ready === */
.booking-modal {
  /* domyślnie ukryty (zgodne ze starą logiką JS) */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* ponad burger overlay */
  align-items: center;
  justify-content: center;
  /* safe-arey iOS + oddechy */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.55);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1D1F2C;
  /* Pokaż, gdy stara logika doda klasę/atrybut */
}
.booking-modal.is-open, .booking-modal.is-active, .booking-modal[data-open=true], .booking-modal[open], .booking-modal[aria-hidden=false] {
  display: flex;
}
.booking-modal[hidden] {
  display: none !important;
}
.booking-modal {
  /* === KARTA === */
}
.booking-modal .booking-modal__card {
  width: min(520px, 100% - 32px);
  /* iOS: dvh/svh + limit, przewijanie w środku karty */
  max-height: min(88dvh, 88svh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #1D1F2C;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 20px;
}
.booking-modal .booking-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #1D1F2C;
  font-size: 22px;
  cursor: pointer;
}
.booking-modal .booking-modal__title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.07em;
  margin: 0 0 6px;
}
.booking-modal .booking-modal__lead {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 14px;
}
.booking-modal .booking-modal__subtitle {
  font-size: 15px;
  font-weight: 700;
  margin: 8px 0;
}
.booking-modal {
  /* === STICKY akcje na dole (zawsze widoczne przyciski) === */
}
.booking-modal .bm-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 30%);
  padding-top: 10px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.booking-modal .bm-btn {
  flex: 1;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border: 1px solid rgba(151, 151, 151, 0.35);
  background: #ffffff;
  color: #1D1F2C;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.booking-modal .bm-btn:hover {
  background: #FAF7F4;
  border-color: rgba(151, 151, 151, 0.55);
}
.booking-modal .bm-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.booking-modal .bm-btn--primary {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.booking-modal .bm-btn--primary:hover {
  filter: brightness(1.06);
}
.booking-modal {
  /* === STEP 1 — TYPE === */
}
.booking-modal [data-step=type] .bm-type {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0 14px;
}
.booking-modal [data-step=type] .bm-type__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(151, 151, 151, 0.35);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.booking-modal [data-step=type] .bm-type__opt:hover {
  background: rgb(253.1875, 252.1, 251.0125);
  border-color: rgba(151, 151, 151, 0.55);
}
.booking-modal [data-step=type] .bm-type__opt input {
  width: 18px;
  height: 18px;
  accent-color: #DC9B59;
}
.booking-modal [data-step=type] .bm-type__opt span {
  font-size: 15px;
  font-weight: 500;
}
.booking-modal #bmLeadTime {
  margin-top: 8px;
  font-size: 13px;
  color: #6B7280;
}
.booking-modal [data-step=type] .bm-actions {
  margin-top: 18px;
}
.booking-modal [data-step=type] .bm-actions .bm-btn--primary {
  width: 100%;
  border-radius: 14px;
}
.booking-modal {
  /* === STEP 2 — SLOTS === */
}
.booking-modal .bm-slots {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  margin-bottom: 10px;
}
.booking-modal .bm-empty {
  font-size: 13px;
  color: #6B7280;
  margin: 12px 0;
}
.booking-modal .bm-day {
  margin-top: 10px;
}
.booking-modal .bm-day:first-child {
  margin-top: 0;
}
.booking-modal .bm-day__header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  color: #1D1F2C;
  padding: 8px 2px 6px;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.booking-modal .bm-day__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0 6px;
}
.booking-modal .bm-chosen {
  font-size: 13px;
  color: #6B7280;
  margin: 6px 0 0;
}
.booking-modal .bm-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  white-space: nowrap;
  border-radius: 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  background: #FAF7F4;
  color: #1D1F2C;
  border: 1px solid rgba(151, 151, 151, 0.35);
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.booking-modal .bm-slot strong {
  display: none;
}
.booking-modal .bm-slot:hover {
  background: rgb(253.1875, 252.1, 251.0125);
  border-color: rgba(151, 151, 151, 0.55);
}
.booking-modal .bm-slot:active {
  transform: translateY(1px);
}
.booking-modal .bm-slot.is-active {
  background: #DC9B59;
  border-color: #DC9B59;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 155, 89, 0.25);
}
.booking-modal .bm-slot:focus-visible {
  outline: 2px solid #DC9B59;
  outline-offset: 2px;
}
.booking-modal .bm-more {
  display: flex;
  justify-content: center;
  margin: 8px 0 2px;
}
.booking-modal #bmMoreBtn {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(151, 151, 151, 0.35);
  background: #F0F0F0;
  color: #1D1F2C;
}
.booking-modal #bmMoreBtn:hover {
  background: #EAEAEA;
}
.booking-modal {
  /* === STEP 3 — FORM === */
}
.booking-modal .bm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.booking-modal .bm-field label {
  font-size: 13px;
  font-weight: 700;
}
.booking-modal .bm-field input, .booking-modal .bm-field textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(151, 151, 151, 0.35);
  border-radius: 10px;
  padding: 10px;
}
.booking-modal .bm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.booking-modal .bm-check input {
  margin-top: 2px;
  accent-color: #000000;
}
.booking-modal .bm-error {
  min-height: 16px;
  color: #B00020;
  font-size: 12px;
}
.booking-modal {
  /* === RESPONSYWNOŚĆ siatki slotów === */
}
@media (min-width: 460px) {
  .booking-modal .bm-day__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 720px) {
  .booking-modal .bm-day__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.booking-modal {
  /* === DARK MODE === */
}
@media (prefers-color-scheme: dark) {
  .booking-modal .booking-modal__card {
    background: #1A1A1A;
    color: #EAEAEA;
  }
  .booking-modal .booking-modal__close {
    color: #EAEAEA;
  }
  .booking-modal .bm-day__header {
    background: #1A1A1A;
    color: #EAEAEA;
    border-bottom-color: #333;
  }
  .booking-modal .bm-slot {
    background: #242424;
    border-color: #2E2E2E;
    color: #DDD;
  }
  .booking-modal .bm-slot:hover {
    background: #282828;
    border-color: #3A3A3A;
  }
  .booking-modal .bm-slot.is-active {
    background: #DC9B59;
    border-color: #DC9B59;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(220, 155, 89, 0.25);
  }
  .booking-modal #bmMoreBtn {
    background: #2A2A2A;
    color: #EEE;
    border-color: #3A3A3A;
  }
  .booking-modal #bmMoreBtn:hover {
    background: #323232;
  }
  .booking-modal .bm-btn {
    background: #222;
    border-color: #333;
    color: #EAEAEA;
  }
  .booking-modal .bm-btn--primary {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
  }
  .booking-modal #bmLeadTime {
    color: #9AA0A6;
  }
}

/* blokada scrolla tła gdy modal otwarty */
html.cb-lock, body.cb-lock {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
  touch-action: none;
}

/* ABOUT */
/* =================================================================
   ABOUT — GLOBAL CONTAINER (grid + padding per breakpoint)
   ================================================================= */
/* Bazowo: pełna szerokość, brak max-width, padding 20px */
body.about .about__container {
  box-sizing: border-box;
  margin-inline: auto;
  width: 100% !important;
  max-width: none !important;
  padding-inline: 20px !important; /* MOBILE */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Rozpuść wszystkie wewnętrzne "container" z sekcji z indexu,
   żeby nie zawężały siatki na About */
body.about .about__container .container {
  display: contents !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 744px) {
  body.about .about__container {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 50px;
    padding-inline: 42px !important; /* TABLET */
  }
}
@media (min-width: 1440px) {
  body.about .about__container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    padding-inline: 40px !important; /* LAPTOP */
  }
}
@media (min-width: 1920px) {
  body.about .about__container {
    padding-inline: 300px !important; /* DESKTOP */
  }
}
/* =================================================================
   ABOUT → PROJECTS (embed z indexu) — pełny span + siatka jak na index
   ================================================================= */
/* Sekcja projects jest dzieckiem about__container → span na cały grid */
body.about section.about-featured > .about__container > section.projects.projects--embed {
  grid-column: 1/-1 !important;
  width: 100%;
  pointer-events: none;
}

/* Kontener kart — wymuszamy grida (bo MQ z indexu tu nie dochodzą) */
body.about section.about-featured > .about__container > section.projects.projects--embed > .projects__cards-container {
  display: grid !important;
  grid-template-columns: 1fr; /* mobile */
  gap: 24px !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-items: stretch;
  align-items: stretch;
}

/* MQ aliasy — jak na index (tablet/laptop) */
@media (min-width: 744px) {
  body.about section.about-featured > .about__container > section.projects.projects--embed > .projects__cards-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1440px) {
  body.about section.about-featured > .about__container > section.projects.projects--embed > .projects__cards-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* Karta ma wypełniać kolumnę */
body.about section.about-featured > .about__container > section.projects.projects--embed > .projects__cards-container > .project-card {
  width: 100% !important;
  min-width: 0 !important;
}

/* --- FIX: About container nie może być „martwy” --- */
@media (min-width: 1440px) {
  body.about .about__container {
    pointer-events: auto !important;
  }
}
@media (min-width: 1920px) {
  body.about .about__container {
    pointer-events: auto !important;
  }
}
/* =========================================================
   HERO
   ========================================================= */
.about-hero {
  padding: 0;
}
.about-hero .about__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.about-hero__content {
  grid-column: 1/-1;
  color: #1D1F2C;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.about-hero .section-divider {
  grid-column: 1/-1;
  margin: 20px 0 16px;
}
.about-hero__title {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
  margin: 0 0 16px;
}
.about-hero__lead {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #1D1F2C;
  margin: 0 0 20px;
}
.about-hero__cta {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 40px;
}
.about-hero__cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 16px;
  margin-top: 20px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  background: #DC9B59;
  border: 0;
  border-radius: 0 18px 0 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.about-hero__photo {
  position: relative;
  grid-column: 1/-1;
  margin-top: 16px;
}
.about-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 94px 0 0 0;
  /* Mobile */
  position: relative;
  z-index: 2;
}
.about-hero__certificate {
  width: 150px;
  position: relative; /* ma być elementem gridu, nie absolute */
  grid-column: 3/5; /* działa, jeśli jest bezpośrednim dzieckiem .about__container */
  justify-self: start; /* opcjonalnie: wyrównanie w kolumnie */
  align-self: start; /* opcjonalnie: wyrównanie w wierszu */
  z-index: 3; /* nad zdjęciem, jeśli trzeba */
}
.about-hero .about-hero__dots {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 140px;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* ====== TABLET (≥744) ====== */
@media (min-width: 744px) {
  /* HERO */
  .about-hero {
    padding: 2px 0 48px;
  }
  .about-hero .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .about-hero__content {
    grid-column: 1/-1;
  }
  .about-hero__photo {
    grid-column: 1/-1;
    margin-top: 20px;
  }
  .about-hero__photo img {
    border-radius: 154px 0 0 0;
  }
}
/* ====== LAPTOP (≥1440) ====== */
@media (min-width: 1440px) {
  /* HERO */
  .about-hero {
    padding: 120px 0 56px;
  }
  .about-hero .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
    align-items: center;
    grid-auto-rows: auto;
  }
  .about-hero__content {
    grid-column: 1/span 6;
    grid-row: 1;
    margin: 0;
    align-self: center;
  }
  .about-hero__photo {
    grid-column: 7/span 6;
    grid-row: 1;
    margin: 0;
  }
  .about-hero .about-hero__dots {
    top: -32px;
    right: -32px;
    width: 180px;
  }
}
/* === ABOUT HERO — LISTA W WIERSZU 3 === */
.about-hero__content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 20px;
}

/* W1 + W2 zostają jak masz: */
.about-hero__title {
  grid-column: 1/-1;
}

.about-hero__lead {
  grid-column: 1/-1;
}

/* --- W3: LISTA + CERTYFIKAT --- */
.about-hero__list {
  grid-column: 1/3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-rows: min-content;
  align-self: center; /* wyśrodkuj całą listę względem sąsiedniego elementu w gridzie rodzica */
  row-gap: 19px; /* dokładnie 19 px między wierszami */
}

.about-hero__list li {
  display: grid;
  grid-template-columns: 16px auto; /* ikonka + tekst */
  column-gap: 12px;
  align-items: center;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 14px;
  line-height: 1.26;
  color: #1D1F2C;
}

/* Ikona ptaszka (vectorbird.svg), kolor #DC9B59 */
.about-hero__list li::before {
  content: "";
  width: 16px;
  height: 16px;
  /* mask pozwala kolorować SVG jednym kolorem */
  background-color: #dc9b59;
  -webkit-mask: url("/photos/pages/about/Vectorbird.svg") no-repeat center;
  mask: url("/photos/pages/about/Vectorbird.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Fallback gdy mask nie wspierany */
@supports not ((mask: url("/photos/pages/about/Vectorbird.svg")) or (-webkit-mask: url("/pages/about/vectorbird.svg"))) {
  .about-hero__list li::before {
    background: url("/photos/pages/about/Vectorbird.svg") no-repeat center/contain;
  }
}
/* Certyfikat – prawa strona wiersza 3 */
.about-hero__certificate {
  grid-column: 3/5;
  justify-self: end;
  align-self: start;
  width: 150px;
  z-index: 3;
}

/* --- W4: CTA --- */
.about-hero__cta {
  grid-column: 1/4;
}

.about-values {
  background: #FAF7F4;
  padding: 40 0;
  padding-bottom: 40px;
}
.about-values .about__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.about-values .section-divider {
  grid-column: 1/-1;
  margin: 20px 0 16px;
}
.about-values .section-title {
  grid-column: 1/-1;
  margin: 0 0 8px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.about-values .section-lead {
  grid-column: 1/-1;
  margin: 0 0 24px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #1D1F2C;
  opacity: 0.9;
}
.about-values .about-values__grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
  justify-items: center;
}

.value-card {
  --badge-size: 73px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 320/491;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border-radius: 0 40px 0 0;
  overflow: hidden;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.value-card__media {
  position: relative;
  overflow: hidden;
}
.value-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  border-radius: 0 40px 0 0;
}
.value-card {
  /* Badge przyklejony do dołu zdjęcia */
}
.value-card .value-card__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 310px;
}
.value-card .value-card__badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.value-card__body {
  background: #ffffff;
  color: #000;
  padding: 28px 24px 80px;
  position: relative;
  z-index: 1;
}
.value-card__title {
  margin: calc(var(--badge-size) * 0.9) 0 12px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: #000;
}
.value-card__text {
  margin: 0 0 12px;
  margin-top: 30px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #000;
  opacity: 0.8;
}
.value-card__btn {
  position: absolute;
  left: 24px;
  right: auto;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 174px;
  padding: 0 24px;
  background: #DC9B59;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0 12px 0 0;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.2s ease;
}
.value-card__btn:hover {
  filter: brightness(0.97);
}
.value-card__btn:active {
  transform: translateY(1px);
}
.value-card__btn {
  display: none;
}

@media (min-width: 744px) {
  .about-values .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
    padding-top: 30px;
  }
  .about-values .about-values__grid {
    display: contents;
  }
  .about-values .section-divider {
    grid-column: 1/-1;
    grid-row: 1;
    margin: 20px 0 16px;
  }
  .about-values .section-title {
    grid-column: 1/5;
    grid-row: 1;
    margin: 42px 0 0;
    text-align: left;
  }
  .about-values .section-lead {
    grid-column: 1/5;
    grid-row: 2;
    margin: 16px 0 0;
    text-align: left;
  }
  .about-values .about-values__grid > .value-card {
    justify-self: stretch;
    width: 100%;
    height: auto;
  }
  .about-values .about-values__grid > .value-card:nth-of-type(1) {
    grid-column: 5/9;
    grid-row: 1/span 2;
  }
  .about-values .about-values__grid > .value-card:nth-of-type(2) {
    grid-column: 1/5;
    grid-row: 3;
  }
  .about-values .about-values__grid > .value-card:nth-of-type(3) {
    grid-column: 5/9;
    grid-row: 3;
  }
}
@media (min-width: 1440px) {
  .about-values .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .about-values .about-values__grid {
    display: contents;
  }
  .about-values .section-title {
    grid-column: 1/4;
    grid-row: 1;
    margin: 70px 0 0;
    font-size: 28px;
  }
  .about-values .section-lead {
    grid-column: 1/4;
    grid-row: 2;
    margin: 12px 0 0;
    font-size: 16px;
  }
  .about-values .about-values__grid > .value-card {
    justify-self: stretch;
    width: 100%;
    height: auto;
    margin-top: 50px;
  }
  .about-values {
    /* 3 karty w jednej linii (kolumny 4–13) */
  }
  .about-values .about-values__grid > .value-card:nth-of-type(1) {
    grid-column: 4/7;
    grid-row: 1/span 2;
  }
  .about-values .about-values__grid > .value-card:nth-of-type(2) {
    grid-column: 7/10;
    grid-row: 1/span 2;
  }
  .about-values .about-values__grid > .value-card:nth-of-type(3) {
    grid-column: 10/13;
    grid-row: 1/span 2;
  }
  .about-values .value-card {
    container-type: inline-size; /* <— potrzebne do cqw; NIE zmienia layoutu */
  }
  .about-values .value-card__media {
    aspect-ratio: 320/218;
  }
  .about-values .value-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .about-values {
    /* === BADGE (ikona) — stabilnie na dole zdjęcia ===
       aspect-ratio 320/218 → wysokość media = 68.125% szerokości karty = 68.125cqw */
  }
  .about-values .value-card__badge {
    position: absolute;
    left: 50%;
    top: calc(68.125cqw - var(--badge-size) / 2); /* ⬅ kluczowa linia */
    transform: translateX(-50%);
    width: var(--badge-size);
    height: var(--badge-size);
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .about-values .value-card__badge img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
}
@media (min-width: 1920px) {
  .about-values .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
}
/* About → Testimonials (embed z indexu) */
body.about section.about-testimonials > .about__container > section.testimonials {
  grid-column: 1/-1 !important;
}

/* ---------- Utility ---------- */
body.about .header {
  min-height: 0 !important;
  height: auto;
}

/* =========================================================
   TIMELINE — „Moja droga” (mobile-first, full file)
   ========================================================= */
.about-timeline {
  padding: 40px 0;
  background: #ffffff;
  /* --- GLOBALNY FIX dla osi timeline --- */
}
.about-timeline .about-timeline {
  position: relative;
  /* tworzy kontekst */
  isolation: isolate;
  /* własna warstwa (żeby pseudo overlaye z zewnątrz nie wchodziły nad nią) */
}
.about-timeline .about-timeline .timeline-grid::before,
.about-timeline .about-timeline::before,
.about-timeline .about-timeline::after {
  pointer-events: none;
  /* dekoracje osi nie blokują klików */
}
.about-timeline {
  /* KONTENER (MOBILE): 4 kol., gap 16, pad 20 */
}
.about-timeline .about__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.about-timeline {
  /* Nagłówek sekcji */
}
.about-timeline .section-divider {
  grid-column: 1/-1;
  margin: 0 0 16px;
}
.about-timeline .section-title {
  grid-column: 1/-1;
  margin: 5px 0 8px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
  text-align: start;
}
.about-timeline .section-lead {
  grid-column: 1/-1;
  margin: 16px 0 32px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #1D1F2C;
  text-align: start;
}
.about-timeline {
  /* Siatka kart */
}
.about-timeline .timeline-grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  /* mobile: jedna kolumna */
  gap: 44px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  /* baza pod linię czasu */
  counter-reset: step;
  /* numeracja kart */
  /* pionowa przerywana linia czasu */
}
.about-timeline .timeline-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #DC9B59 0 8px, transparent 8px 16px);
  z-index: 0;
}
.about-timeline {
  /* Karta na osi czasu */
}
.about-timeline .timeline-card {
  /* rozmiary ikony + obrazka w kółku */
  --icon-size: 64px;
  /* średnica kółka (mobile) */
  --icon-img: 70%;
  /* procent średnicy dla <img> w środku */
  /* niezależne kotwiczenie do dołu media: */
  --media-h: 75cqw;
  /* mobile: aspect-ratio 4/3 => 3/4 = 75% szerokości karty */
  --icon-nudge: 0px;
  /* drobna korekta gdyby trzeba było (opcjonalna) */
  position: relative;
  z-index: 1;
  counter-increment: step;
  container-type: inline-size;
  /* <--- pozwala używać cqw (nie zmienia layoutu) */
  background: #FAF7F4;
  border-radius: 0 16px 0 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: 100%;
  text-align: center;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* marker na osi */
}
.about-timeline .timeline-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #DC9B59;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.about-timeline .timeline-card {
  /* numer kroku nad markerem */
}
.about-timeline .timeline-card::before {
  content: counter(step);
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  padding: 2px 6px;
  font: 700 12px/1 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1D1F2C;
  background: #fff;
  border: 1px solid #E6E2DD;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.about-timeline .timeline-card {
  /* zdjęcie */
}
.about-timeline .timeline-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  /* MOBILE default */
  height: auto;
  overflow: hidden;
  border-radius: 0 16px 0 0;
}
.about-timeline .timeline-card__media .timeline-card__photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.about-timeline .timeline-card {
  /* kółko z ikoną — zakotwiczone do DOŁU MEDIA (nie do karty, nie do tekstu) */
}
.about-timeline .timeline-card__icon {
  position: absolute;
  left: 50%;
  top: 0;
  /* kotwica: górna krawędź karty */
  transform: translateX(-50%);
  /* pozycja = wysokość media - połowa ikony (+ ewentualna korekta) */
  margin-top: calc(var(--media-h) - var(--icon-size) / 2 + var(--icon-nudge));
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.about-timeline .timeline-card {
  /* tytuł i tekst */
}
.about-timeline .timeline-card__title {
  margin: calc(var(--icon-size) / 2 + 12px) 16px 6px;
  /* odsunięcie spod ikony */
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: #1D1F2C;
}
.about-timeline .timeline-card__text {
  margin: 0 16px 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #6B7280;
}
.about-timeline {
  /* IMG w środku kółka (globalnie, by nie zależeć od zagnieżdżenia) */
}
.about-timeline .timeline-card__icon-img {
  width: var(--icon-img);
  height: var(--icon-img);
  display: block;
  object-fit: contain;
  /* nie rozciąga proporcji */
  object-position: center;
  margin: 0 auto;
}

/* ====== TABLET (≥744) ====== */
@media (min-width: 744px) {
  .about-timeline .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .about-timeline .timeline-grid {
    gap: 80px;
  }
  .about-timeline .timeline-grid::before {
    width: 2.5px;
  }
  .about-timeline .section-title {
    font-size: 42px;
  }
  .about-timeline .section-lead {
    font-size: 24px;
  }
  .about-timeline .timeline-card {
    --icon-size: 72px;
    /* większe kółko */
    --icon-img: 72%;
    --media-h: 50cqw;
    /* aspect-ratio 6/3 => 1/2 szerokości karty */
    /* --icon-nudge: 0px; // opcjonalnie, jeśli potrzebujesz korekty */
  }
  .about-timeline .timeline-card__media {
    aspect-ratio: 6/3;
  }
  .about-timeline .timeline-card__title {
    font-size: 20px;
    margin-top: calc(var(--icon-size) / 2 + 12px);
  }
  .about-timeline .timeline-card__text {
    font-size: 15px;
    line-height: 1.55;
  }
}
/* ================== LAPTOP+ (≥1440) – TIMELINE clean ================== */
/* ================== LAPTOP+ (≥1440) – TIMELINE clean ================== */
@media (min-width: 1440px) {
  /* tylko w sekcji about-cta przy AI Boxie */
  .about-cta > .container {
    pointer-events: auto;
  }
  :root {
    --container-max: 1280px;
    --container-pad: 40px;
  }
  .about__container {
    box-sizing: border-box;
    width: min(100%, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }
  /* GAŁKI */
  :root {
    --tl-col-gap: 24px;
    --tl-row-h: 600px; /* WYSOKOŚĆ WIERSZA */
    --tl-pad-x: 20px; /* wewnętrzny pad L/P elementów */
    --row-pad-y: 20px; /* pad góra/dół całego wiersza */
    --tl-icon-size: 92px;
    --tl-row-bg-odd: #FAF7F4;
    --tl-row-bg-even: #FAF7F4;
    /* padding kontenera strony (gutter) – dopasuj do projektu */
    --container-pad: 40px;
  }
  .about-timeline .timeline-grid {
    gap: 280px;
  }
  /* WIERSZ/KARTA – full-bleed tło, treść w gutterach strony */
  .about-timeline .timeline-card__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, var(--tl-row-h));
    grid-auto-rows: 0;
    column-gap: var(--tl-col-gap);
    /* full-bleed: tło przez cały viewport */
    width: calc(100vw - (100vw - 100%));
    margin-left: calc(50% - 50vw + (100vw - 100%) / 2);
    margin-right: calc(50% - 50vw + (100vw - 100%) / 2);
    height: var(--tl-row-h);
    background: var(--row-bg, var(--tl-row-bg-odd));
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* brak poziomego scrolla */
  }
  .about-timeline .timeline-card:nth-child(odd) .timeline-card__row {
    --row-bg: var(--tl-row-bg-odd);
  }
  .about-timeline .timeline-card:nth-child(even) .timeline-card__row {
    --row-bg: var(--tl-row-bg-even);
  }
  /* wszystkie dzieci jadą w JEDNYM rzędzie */
  .about-timeline .timeline-card__row > * {
    grid-row: 1;
    min-height: 0;
    position: relative;
    z-index: 2; /* nad przewodem */
  }
  /* PRZEWÓD z JS */
  .timeline-wires {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* nad tłem, pod treścią */
    background: transparent !important;
  }
  .timeline-wire {
    fill: none !important;
    stroke: #DC9B59 !important;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
  }
  /* MEDIA – dokładnie w obrębie wiersza (uwzględnia pad wiersza) */
  .about-timeline .timeline-card__media {
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 600px;
  }
  .about-timeline .timeline-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0 60px 0 0;
  }
  /* foto w DRUGIEJ .timeline-card */
  .about-timeline :nth-child(2 of .timeline-card) .timeline-card__photo {
    /* Twoje inne ustawienia: */
    border-radius: 60px 0 0 0;
    object-position: top;
  }
  /* TEKSTY */
  .about-timeline .timeline-card__title {
    font-family: dm sans, sans-serif;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 0.1em;
    text-align: left;
  }
  .about-timeline .timeline-card__text {
    font-family: dm sans, sans-serif;
    font-size: 24px;
    align-self: center;
    overflow: hidden;
    text-align: left;
    margin-top: 150px;
  }
  /* IKONA */
  .about-timeline .timeline-card__icon {
    place-self: center;
    width: var(--tl-icon-size);
    height: var(--tl-icon-size);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 4;
    display: none;
  }
  .about-timeline .timeline-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  /* POZYCJE (Twój układ – tylko kolumny, wiersz zawsze = 1) */
  .about-timeline .timeline-card:nth-child(1) .timeline-card__media {
    grid-column: 1/7;
  }
  .about-timeline .timeline-card:nth-child(1) .timeline-card__title,
  .about-timeline .timeline-card:nth-child(1) .timeline-card__text {
    grid-column: 7/13;
  }
  .about-timeline .timeline-card:nth-child(1) .timeline-card__icon {
    grid-column: 7;
  }
  .about-timeline .timeline-card:nth-child(2) .timeline-card__media {
    grid-column: 7/13;
  }
  .about-timeline .timeline-card:nth-child(2) .timeline-card__title,
  .about-timeline .timeline-card:nth-child(2) .timeline-card__text {
    grid-column: 1/7;
  }
  .about-timeline .timeline-card:nth-child(2) .timeline-card__icon {
    grid-column: 7;
  }
  .about-timeline .timeline-card:nth-child(3) .timeline-card__media {
    grid-column: 1/7;
  }
  .about-timeline .timeline-card:nth-child(3) .timeline-card__title,
  .about-timeline .timeline-card:nth-child(3) .timeline-card__text {
    grid-column: 7/13;
  }
  .about-timeline .timeline-card:nth-child(3) .timeline-card__icon {
    grid-column: 7;
  }
  /* Wyłącz pionową oś/markery z CSS (bo rysuje to JS) */
  .about-timeline .timeline-grid::before,
  .about-timeline .timeline-card::before,
  .about-timeline .timeline-card::after {
    display: none !important;
    content: none !important;
  }
}
/* =========================================================
   DESKTOP (≥1920) — delikatne powiększenie przez zmienne
   ========================================================= */
@media (min-width: 1920px) {
  :root {
    --tl-row-gap: 112px;
    --tl-row-pad-y: 48px;
    --tl-media-height: 600px;
    /* wyższy wrapper na desktopie */
    --tl-icon-size: 100px;
    --tl-title-size: 24px;
    --tl-text-size: 17px;
  }
}
@media (min-width: 1440px) {
  /* 1) Kontener About nigdy nie większy niż viewport (i nie powiększany przez dzieci) */
  body.about .about__container {
    box-sizing: border-box;
    inline-size: 100%; /* = width, ale w writing-mode safe */
    max-inline-size: 100%;
    margin-inline: auto;
    /* Twoje pady jak chcesz; ważne by były wewnątrz boxu */
    padding-inline: 40px !important;
    /* kluczowe – dzieci nie rozszerzą inline-size kontenera */
    overflow-x: clip; /* albo: hidden */
  }
  /* 1a) Grid items nie mogą rozszerzać kolumn przez intrinsic sizing */
  body.about .about__container > * {
    min-width: 0;
  }
  /* 2) Full-bleed timeline: „scrollbar-safe” zamiast gołego 100vw */
  .about-timeline .timeline-card__row {
    width: calc(100vw - (100vw - 100%));
    margin-left: calc(50% - 50vw + (100vw - 100%) / 2);
    margin-right: calc(50% - 50vw + (100vw - 100%) / 2);
  }
}
/* === TIMELINE — WIRES (≥1440) =================================== */
@media (min-width: 1440px) {
  .about-timeline {
    position: relative;
  }
  /* SVG kontener */
  .about-timeline .timeline-wires {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* pod treścią, nad tłem */
    background: transparent !important;
  }
  /* OŚ i SZYNY */
  .timeline-rail {
    fill: none;
    stroke: #E9B785; /* jaśniejsza baza */
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.85;
    filter: url(#tl-glow);
  }
  .timeline-axis {
    stroke-dasharray: 8 8; /* oś z „kropek” */
    animation: tl-dash 6s linear infinite;
  }
  /* ŁĄCZNIKI */
  .timeline-wire {
    fill: none;
    stroke: #DC9B59;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#tl-glow);
    stroke-dasharray: 12 12; /* subtelny „flow” po przewodzie */
    animation: tl-dash 5.5s linear infinite;
  }
  /* WĘZŁY (nody przy kartach + start/end) */
  .timeline-node {
    fill: #fff;
    stroke: #DC9B59;
    stroke-width: 3;
    filter: url(#tl-glow);
  }
  .timeline-cap {
    fill: #fff;
    stroke: #E9B785;
    stroke-width: 2.5;
    filter: url(#tl-glow);
  }
  /* lekka aureola */
  @keyframes tl-dash {
    to {
      stroke-dashoffset: -20;
    }
  }
}
.about-process {
  padding: 40px 0;
  background: #F6F1EA;
  /* ===== KONTENER — MOBILE FIRST ===== */
}
.about-process .about__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.about-process {
  /* >>> FIX: na mobile intro ma pełną szerokość grida */
}
.about-process .process-intro {
  grid-column: 1/-1; /* pełna szerokość na mobile */
  display: block; /* bez flexa na mobile */
}
.about-process {
  /* ===== NAGŁÓWEK + OPIS — MOBILE ===== */
}
.about-process .section-divider {
  margin-bottom: 20px;
}
.about-process .section-title {
  margin: 0 0 12px;
  text-align: left;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.about-process .section-description {
  margin: 0 0 24px;
  max-width: 70ch;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #6B7280;
}
.about-process {
  /* ===== GRID kart — MOBILE: 1 kolumna ===== */
}
.about-process .process-grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow: visible;
  position: relative;
}
.about-process {
  /* ===== KARTA ===== */
}
.about-process .process-grid article {
  --progress: 0%;
  --track: rgba(0,0,0,.12);
  --fill: #DC9B59;
  position: relative;
  background: #fff;
  border-radius: 0 16px 0 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  padding: 20px 20px 56px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  overflow: visible;
  isolation: isolate;
}
.about-process .process-grid article:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.about-process .process-grid article h3 {
  margin: 0 0 8px;
  font: 600 16px/1.3 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1D1F2C;
  padding-bottom: 10px;
  border-bottom: 4px solid rgba(220, 155, 89, 0.15);
  border-radius: 2px;
}
.about-process .process-grid article p {
  margin: 8px 0 0;
  font: 400 14px/1.5 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.05em;
  color: #6B7280;
}
.about-process .process-grid article::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
  opacity: 0.85;
  z-index: 0;
}
.about-process .process-grid article .progress-fill {
  position: absolute;
  left: 20px;
  bottom: 14px;
  height: 4px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #DC9B59 0%, #000 100%);
  transition: width 0.25s ease;
  pointer-events: none;
  z-index: 1;
}
.about-process .process-grid article .progress-dot {
  position: absolute;
  bottom: 12px;
  left: calc(20px + (100% - 40px) * var(--progress) / 100);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
  z-index: 2;
}
.about-process .process-grid article:hover .progress-fill, .about-process .process-grid article:focus-within .progress-fill {
  width: calc((100% - 40px) * var(--progress) / 100);
}
.about-process .process-grid article .drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  transform-origin: top;
  transform: translateY(8px) scaleY(0);
  opacity: 0;
  pointer-events: none;
  background: #FFFFFF;
  border-radius: 0 16px 16px 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  padding: 16px 20px;
  transition: transform 0.22s ease, opacity 0.18s ease;
  z-index: 25;
}
.about-process .process-grid article.is-open {
  z-index: 30;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.about-process .process-grid article.is-open .drawer {
  transform: translateY(8px) scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

/* ===== TABLET (≥744) ===== */
@media (min-width: 744px) {
  .about-process {
    margin-top: 80px;
  }
  .about-process .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .about-process .section-title {
    margin-bottom: 12px;
    font-size: 36px;
  }
  .about-process .section-description {
    grid-column: 1/-1;
    margin-bottom: 28px;
    font-size: 18px;
    line-height: 1.55;
    max-width: 72ch;
    font-weight: 600;
    margin-top: 40px;
  }
  .about-process .process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .about-process .process-grid article {
    padding: 24px 24px 60px;
  }
  .about-process .process-grid article h3 {
    font-size: 18px;
  }
  .about-process .process-grid article p {
    font-size: 15px;
    line-height: 1.55;
  }
}
/* ===== LAPTOP (≥1440) ===== */
@media (min-width: 1440px) {
  .about-process .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    /* ten sam wiersz, pełna wysokość */
  }
  .about-process {
    /* LEWA POŁOWA — 1 wiersz, 4 kolumny */
  }
  .about-process .process-intro {
    grid-column: 1/span 4;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* <-- tekst cały doklejony do dołu */
    align-self: stretch;
    /* wypełnia pełną wysokość wiersza */
  }
  .about-process .section-title {
    margin: 0 0 12px;
    text-align: left;
    font-size: 48px;
    margin-bottom: 60px;
  }
  .about-process .section-description {
    margin: 0;
    max-width: none;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 250px;
  }
  .about-process {
    /* PRAWA POŁOWA — karty 2 kolumny w tym samym wierszu */
  }
  .about-process .process-grid {
    grid-column: 5/-1;
    /* 5–12 */
    grid-row: 1;
    /* ten sam wiersz co lewy panel */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-content: start;
  }
  .about-process .process-grid article {
    padding: 28px 28px 64px;
  }
  .about-process .process-grid article h3 {
    font-size: 19px;
  }
  .about-process .process-grid article p {
    font-size: 16px;
    line-height: 1.6;
  }
}
/* ===== DESKTOP (≥1920) =====
   Większe oddechy + stabilny podział 6/6 kolumn
   --------------------------------------------------------------- */
@media (min-width: 1920px) {
  .about-process .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .about-process .section-title {
    grid-column: 1/span 5;
    margin-bottom: 16px;
  }
  .about-process .section-description {
    grid-column: 1/span 5;
    font-size: 18px;
    line-height: 1.7;
    max-width: 80ch;
    /* komfort czytania na dużych ekranach */
  }
  .about-process .process-grid {
    grid-column: 5/-1;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .about-process .process-grid article {
    padding: 32px 32px 68px;
  }
  .about-process .process-grid article .progress-dot {
    width: 14px;
    height: 14px;
  }
}
.about-process .process-grid article.is-open .drawer {
  box-shadow: none !important;
}

/* =========================================================
   CTA — karta w kontenerze
   ========================================================= */
.about-cta {
  margin: 0;
  padding: 0;
}
.about-cta .about__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.about-cta__box {
  grid-column: 1/-1;
  background: #0F8B8D;
  color: #ffffff;
  border-radius: 24px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
}
.about-cta__box > h2 {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
}
.about-cta__box > p {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  opacity: 0.95;
}
.about-cta .btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
  max-width: 335px;
  margin-left: 0;
}
.about-cta .btns .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  margin: 0;
  width: 100%;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  background: transparent;
  text-decoration: none;
}
.about-cta .btns .btn:hover,
.about-cta .btns .btn:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* CTA */
MQ .about-cta .about__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 20px;
  padding-inline: 42px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
MQ .about-cta__box {
  padding: 32px;
  row-gap: 18px;
}
MQ .about-cta .btns {
  gap: 14px;
}
MQ .about-cta .btns .btn {
  min-height: 44px;
}

/* ====== DESKTOP (≥1920) ====== */
@media (min-width: 1920px) {
  /* CTA */
  .about-cta .about__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .about-cta__box {
    padding: 48px;
  }
  .about-cta .btns .btn {
    min-height: 52px;
  }
}
/* Featured Projects osadzone na ABOUT */
.about-featured {
  /* spraw, by blok .projects zajął pełną szerokość kontenera strony */
}
.about-featured .projects {
  grid-column: 1/-1;
  width: 100%;
}
.about-featured {
  /* Uwaga na nazwę klasy kontenera kart:
     - jeśli w HTML masz "projects__cards-container" (BEM, podwójny _),
       to pierwszy selektor zadziała;
     - jeśli przez przypadek jest "projects_cards-container" (pojedynczy _),
       to drugi selektor łapie fallback. */
}
.about-featured .projects__cards-container,
.about-featured .projects_cards-container {
  display: grid; /* K L U C Z */
  grid-template-columns: 1fr; /* mobile: 1 kolumna */
  gap: 16px;
  width: 100%;
}
.about-featured {
  /* karty mogą zostać tak jak są – ale upewnijmy się, że wypełnią kolumnę */
}
.about-featured .project-card {
  width: 100%;
}

/* Tablet (≥744): 2 kolumny */
@media (min-width: 744px) {
  .about-featured .projects__cards-container,
  .about-featured .projects_cards-container {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
/* Laptop (≥1440): 3 kolumny */
@media (min-width: 1440px) {
  .about-featured .projects__cards-container,
  .about-featured .projects_cards-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
/* ================== ABOUT › STATS ================== */
.about-stats {
  background: #fff; /* biały kontener */
  padding: 40px 40px;
  margin-bottom: 100px;
}
.about-stats .stats {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr; /* mobile: jeden pod drugim */
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-stats .stats li {
  background: #F6F1EA; /* beżowe kafelki */
  border-radius: 12px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}
.about-stats .stats li:hover {
  transform: translateY(-2px);
}
.about-stats .stats li .stat__value {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #1D1F2C;
}
.about-stats .stats li .stat__label {
  margin-top: 6px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #1D1F2C;
  opacity: 0.9;
}

/* TABLET (≥744) – 2 kolumny */
@media (min-width: 744px) {
  .about-stats .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .about-stats .stats li .stat__value {
    font-size: 32px;
  }
  .about-stats .stats li .stat__label {
    font-size: 15px;
  }
}
/* LAPTOP (≥1440) – 4 kolumny */
@media (min-width: 1440px) {
  .about-stats .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .about-stats .stats li .stat__value {
    font-size: 38px;
  }
  .about-stats .stats li .stat__label {
    font-size: 16px;
  }
}
/* DESKTOP (≥1920) – większy oddech */
@media (min-width: 1920px) {
  .about-stats .stats {
    gap: 32px;
  }
}
/* === wrapper strony kontaktu (namespace) === */
.contact-page .contact__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.contact-page { /* mobile */ }
@media (min-width: 744px) {
  .contact-page .contact__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
}
@media (min-width: 1440px) {
  .contact-page .contact__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
}
@media (min-width: 1920px) {
  .contact-page .contact__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
}

/* ===== Sekcja główna ===== */
.contact-hero {
  background: #ffffff;
  padding-block: 40px;
}
.contact-hero .contact-title {
  grid-column: 1/-1;
  margin: 0 0 8px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.contact-hero .contact-lead {
  grid-column: 1/-1;
  margin: 0 0 24px;
  max-width: 70ch;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #6B7280;
}
.contact-hero .contact-info {
  grid-column: 1/-1;
}
.contact-hero .contact-form {
  grid-column: 1/-1;
}
@media (min-width: 744px) {
  .contact-hero .contact-title {
    font-size: 28px;
    line-height: 1.3;
  }
  .contact-hero .contact-lead {
    font-size: 15px;
  }
  .contact-hero .contact-info {
    grid-column: 1/span 4;
  }
  .contact-hero .contact-form {
    grid-column: 5/span 4;
  }
}
@media (min-width: 1440px) {
  .contact-hero .contact-title {
    font-size: 32px;
    line-height: 1.35;
  }
  .contact-hero .contact-lead {
    font-size: 16px;
  }
  .contact-hero .contact-info {
    grid-column: 1/span 4;
  }
  .contact-hero .contact-form {
    grid-column: 5/span 8;
  }
}
@media (min-width: 1920px) {
  .contact-hero .contact-title {
    font-size: 40px;
    line-height: 1.4;
  }
  .contact-hero .contact-lead {
    font-size: 18px;
  }
}

/* box z danymi */
.contact-info {
  background: #FAF7F4;
  border-radius: 12px;
  padding: 20px;
  color: #1D1F2C;
}
.contact-info .contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.contact-info .contact-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}
.contact-info .contact-list a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.55);
}

/* formularz */
.contact-form {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 20px;
}
.contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 744px) {
  .contact-form .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@media (min-width: 1440px) {
  .contact-form .form-grid {
    gap: 20px;
  }
}
.contact-form .form-grid .span-2 {
  grid-column: 1/-1;
}
.contact-form .field {
  display: grid;
  gap: 6px;
}
.contact-form .field span {
  font: 600 14px/1.3 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1D1F2C;
}
.contact-form .field input, .contact-form .field textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  font: 400 14px/1.4 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1D1F2C;
  background: #fff;
  outline: none;
}
.contact-form .field input:focus, .contact-form .field textarea:focus {
  border-color: #DC9B59;
  box-shadow: 0 0 0 3px rgba(220, 155, 89, 0.15);
}
.contact-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  font: 700 15px/1 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
  color: #fff;
  background: #DC9B59;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.contact-form .btn:hover {
  filter: brightness(0.97);
}
.contact-form .btn:active {
  transform: translateY(1px);
}

/* (opcjonalnie) gdyby stary globalny .contact miał tło – wyzeruj je na stronie kontaktu */
body.contact-page .contact {
  background: none !important;
}

/* ===== Header na stronie kontaktu ===== */
body.contact-page .header {
  background: url("../../photos/pages/contact/contact_picture_header.webp") center/cover no-repeat;
  min-height: 350px; /* mobile default */
  position: relative;
}
@media (min-width: 744px) {
  body.contact-page .header {
    min-height: 600px;
  }
}
@media (min-width: 1440px) {
  body.contact-page .header {
    min-height: 560px;
  }
}
@media (min-width: 1920px) {
  body.contact-page .header {
    min-height: 560px;
  }
}

body.contact-page .header__wrap,
body.contact-page .header__nav {
  position: relative;
  z-index: 2; /* żeby menu nie znikło pod zdjęciem */
}

body.contact-page .header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* opcjonalne przyciemnienie */
  z-index: 1;
}

/* ===== CONTACT: belka fixed + autohide ===== */
/* Header tło + overlay zostają, ale belka wychodzi nad to */
body.contact-page .header {
  position: relative;
  z-index: 1;
}

/* Podwieszona belka */
body.contact-page .header .container.header__top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding-inline: var(--content-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 32; /* nad overlayem headera */
  background: rgba(23, 23, 23, 0.4); /* mobile/tablet – szkło jak na index */
  backdrop-filter: blur(1px);
  border-bottom: 1px solid rgb(0, 0, 0);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
}

/* Laptop+ – transparentne jak na index */
@media (min-width: 1440px) {
  body.contact-page .header .container.header__top {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
}
/* Dajemy miejsce pod belką, żeby treść nie wpadała pod nią */
body.contact-page main,
body.contact-page .pages__container {
  padding-top: var(--nav-h);
}

/* === AUTOHIDE (wykorzystuje ten sam JS co index) === */
body.contact-page.nav-hidden .header .container.header__top {
  transform: translateY(-100%);
}

/* animacja logo (opcjonalnie, jak na index) */
@media (min-width: 1440px) {
  body.contact-page .header__logo {
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  body.contact-page.nav-hidden .header__logo {
    transform: translateY(-100%);
  }
}
/* ===== Podwieszona belka NAV na contact.html ===== */
body.contact-page .header .container.header__top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding-inline: var(--content-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 32;
  background: rgba(23, 23, 23, 0.4);
  backdrop-filter: blur(1px);
  border-bottom: 1px solid rgb(0, 0, 0);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
}

/* Laptop+ → transparentna belka jak na index */
@media (min-width: 1440px) {
  body.contact-page .header .container.header__top {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
}
/* Padding-top, żeby treść nie wjeżdżała pod belkę */
body.contact-page main,
body.contact-page .pages__container {
  padding-top: var(--nav-h);
}

/* === Autohide (to samo co na index) === */
body.contact-page.nav-hidden .header .container.header__top {
  transform: translateY(-100%);
}

/* ===== CONTACT: belka ZAWSZE nad treścią ===== */
/* 1) Wyłącz ewentualne konteksty malowania na przodkach belki */
body.contact-page .header,
body.contact-page .header__wrap {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* 2) Belka: fixed do viewportu + bardzo wysoki z-index */
body.contact-page .header .container.header__top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000 !important; /* przebija wszystko na stronie */
  height: var(--nav-h);
  padding-inline: var(--content-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  /* szkło na mobile/tablet; na laptop+ zrobisz jak niżej */
  background: rgba(23, 23, 23, 0.4);
  backdrop-filter: blur(2px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.86);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
}

/* 3) Laptop+: przezroczysta jak na index */
@media (min-width: 1440px) {
  body.contact-page .header .container.header__top {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
}
/* 4) Treść podsunąć poniżej belki */
body.contact-page main,
body.contact-page .pages__container {
  padding-top: var(--nav-h) !important;
  position: relative; /* utwórz „słabszy” stacking context dla treści */
  z-index: 0;
}

/* 5) Na wszelki wypadek: te sekcje trzymać POD belką */
body.contact-page .contact-hero,
body.contact-page .contact-info,
body.contact-page .contact-form {
  position: relative;
  z-index: 0 !important;
}

/* 6) Autohide korzysta z istniejącego JS (class 'nav-hidden' na <body>) */
body.contact-page.nav-hidden .header .container.header__top {
  transform: translateY(-100%);
}

body.contact-page .header {
  background: url("../../photos/pages/contact/contact_picture_header.webp") center/cover no-repeat;
  position: relative;
  /* === MOBILE (do 744px) === */
  min-height: 460px;
  background-position: center bottom;
  /* === TABLET (744px+) === */
}
@media (min-width: 744px) {
  body.contact-page .header {
    min-height: 600px;
    background-position: center top;
  }
}
body.contact-page .header {
  /* === LAPTOP (1440px+) === */
}
@media (min-width: 1440px) {
  body.contact-page .header {
    min-height: 700px;
    background-position: center bottom;
  }
}
body.contact-page .header {
  /* === DESKTOP (1920px+) === */
}
@media (min-width: 1920px) {
  body.contact-page .header {
    min-height: 900px;
    background-position: center bottom;
  }
}

/* ===== Namespace strony ===== */
.services-page {
  /* FIX: kontenery sekcji nie mogą wychodzić poza viewport */
}
.services-page .services-hero__container,
.services-page .services-list__container,
.services-page .services-process__container,
.services-page .services-faq__container {
  box-sizing: border-box !important; /* przebija mixin (content-box) */
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
.services-page .header {
  position: relative;
  min-height: 450px; /* MOBILE */
  background: url("../../photos/pages/services/services-header.webp") center/cover no-repeat;
  /* belka leży NA zdjęciu */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 60px;
}
.services-page {
  /* Przyciemnienie zdjęcia – opcjonalnie */
}
.services-page .header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.services-page .header__wrap,
.services-page .header__nav {
  position: relative;
  z-index: 3;
}

/* ===== HERO ===== */
.services-hero {
  background: #ffffff;
  padding-block: 40px;
}
.services-hero .services-hero__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.services-hero .services-hero__title {
  grid-column: 1/-1;
  margin: 0 0 8px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.services-hero .services-hero__lead {
  grid-column: 1/-1;
  margin: 0 0 20px;
  max-width: 70ch;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #6B7280;
}
.services-hero .services-hero__cta-row {
  grid-column: 1/-1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.services-hero .services-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 0 12px 0 0;
  text-decoration: none;
  font: 700 15px/1 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.services-hero .services-hero__btn--primary {
  background: #DC9B59;
  color: #fff;
}
.services-hero .services-hero__btn--ghost {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1D1F2C;
}
.services-hero .services-hero__btn:hover {
  filter: brightness(0.97);
}
.services-hero .services-hero__btn:active {
  transform: translateY(1px);
}

/* ===== LISTA USŁUG ===== */
.services-list {
  background: #FAF7F4;
  padding-block: 32px;
}
.services-list .services-list__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.services-list .services-list__title {
  grid-column: 1/-1;
  margin: 0 0 16px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.services-list {
  /* GRID + tryb slidera (aktywny tylko na mniejszych ekranach przez JS) */
}
.services-list .services-grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  overflow: visible;
}
.services-list .services-grid.is-slider {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding-bottom: 12px;
}
.services-list .services-grid.is-slider .service-card {
  flex: 0 0 80%; /* ~80% viewportu na mobile */
  scroll-snap-align: start;
}
.services-list {
  /* Strzałki (rodzeństwo grida) */
}
.services-list .services-slider-nav {
  grid-column: 1/-1;
  width: 100%;
  display: none; /* pokaż tylko gdy grid ma .is-slider */
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.services-list .snav {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.035);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.2s;
}
.services-list .snav img {
  width: 20px;
  height: 20px;
  display: block;
}
.services-list .snav:hover {
  filter: brightness(0.97);
}
.services-list .snav:active {
  transform: translateY(1px);
}
.services-list .services-grid.is-slider + .services-slider-nav {
  display: flex;
}
.services-list .service-card {
  background: #fff;
  border-radius: 0 42px 0 0;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.035);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  margin-top: 30px;
}
.services-list .service-card .service-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.services-list .service-card .service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.services-list .service-card .service-card__body {
  padding: 20px;
}
.services-list .service-card .service-card__title {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: #1D1F2C;
}
.services-list .service-card .service-card__text {
  margin: 0 0 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #6B7280;
}
.services-list .service-card .service-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 6px;
}
.services-list .service-card .service-card__bullet {
  padding-left: 18px;
  position: relative;
  font-size: 14px;
  color: #1D1F2C;
}
.services-list .service-card .service-card__bullet::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}
.services-list .service-card .service-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 0 12px 0 0;
  text-decoration: none;
  background: #DC9B59;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.services-list .service-card .service-card__btn:hover {
  filter: brightness(0.97);
}
.services-list .service-card .service-card__btn:active {
  transform: translateY(1px);
}

/* ===== FAQ ===== */
.services-faq {
  background: #F6F1EA;
  padding-block: 40px;
}
.services-faq .services-faq__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
}
.services-faq .services-faq__title {
  grid-column: 1/-1;
  margin: 0 0 12px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.services-faq .faq-list {
  grid-column: 1/-1;
  display: grid;
  gap: 10px;
}
.services-faq .faq-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.services-faq .faq-item__toggle {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
}
.services-faq .faq-item__question {
  font-weight: 600;
  font-size: 16px;
  color: #1D1F2C;
}
.services-faq .faq-item__icon {
  font-weight: 700;
  font-size: 20px;
  color: #1D1F2C;
}
.services-faq .faq-item__content {
  padding: 0 18px 16px;
}
.services-faq .faq-item__answer {
  margin: 0;
  font-size: 14px;
  color: #6B7280;
}

/* =============================================================================
   MEDIA QUERIES — T / L / D
   ========================================================================== */
/* ===== Tablet ===== */
@media (min-width: 744px) {
  .services-page .header {
    min-height: 536px;
    padding-bottom: 72px;
  }
  .services-hero .services-hero__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-hero .services-hero__title {
    font-size: calc(24px + 2px);
  }
  .services-hero .services-hero__lead {
    margin-bottom: 24px;
    font-size: 15px;
  }
  .services-hero .services-hero__btn {
    height: 50px;
    padding: 0 24px;
    font-size: 15px;
  }
  .services-list .services-list__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-list .services-list__title {
    font-size: calc(24px + 2px);
    margin-bottom: 18px;
  }
  .services-list .services-grid:not(.is-slider) {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .services-list .services-grid.is-slider .service-card {
    flex-basis: 70%;
  }
  .services-list .services-slider-nav {
    margin-top: 14px;
    gap: 14px;
  }
  .services-list .snav {
    width: 48px;
    height: 48px;
  }
  .services-list .snav img {
    width: 22px;
    height: 22px;
  }
  .services-list .service-card .service-card__body {
    padding: 22px;
  }
  .services-list .service-card .service-card__title {
    font-size: 19px;
  }
  .services-list .service-card .service-card__text {
    font-size: 15px;
  }
  .services-list .service-card .service-card__btn {
    height: 46px;
    padding: 0 20px;
  }
  /* (USUNIĘTO: tabletowe reguły dla services-process/timeline) */
  .services-faq .services-faq__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-faq .services-faq__title {
    font-size: calc(24px + 2px);
  }
  .services-faq .faq-item__toggle {
    padding: 18px 20px;
  }
  .services-faq .faq-item__answer {
    font-size: 15px;
  }
}
/* ===== Laptop ===== */
@media (min-width: 1440px) {
  .services-page .header {
    min-height: 860px;
    padding-bottom: 84px;
  }
  .services-hero .services-hero__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-hero .services-hero__title {
    font-size: calc(24px + 6px);
  }
  .services-hero .services-hero__lead {
    font-size: 16px;
    max-width: 75ch;
  }
  .services-hero .services-hero__btn {
    height: 52px;
    padding: 0 26px;
    font-size: 16px;
  }
  .services-list .services-list__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-list .services-list__title {
    font-size: calc(24px + 6px);
    margin-bottom: 20px;
  }
  .services-list .services-grid:not(.is-slider) {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .services-list .services-grid.is-slider .service-card {
    flex-basis: 60%;
  }
  .services-list .service-card .service-card__body {
    padding: 24px;
  }
  .services-list .service-card .service-card__title {
    font-size: 20px;
  }
  .services-list .service-card .service-card__text {
    font-size: 16px;
  }
  .services-list .service-card .service-card__btn {
    height: 48px;
    padding: 0 22px;
    font-size: 15px;
  }
  /* (USUNIĘTO: laptopowe reguły dla services-process/timeline) */
  .services-faq .services-faq__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-faq .services-faq__title {
    font-size: calc(24px + 6px);
  }
  .services-faq .faq-item__toggle {
    padding: 20px 22px;
  }
}
/* ===== Desktop ===== */
@media (min-width: 1920px) {
  .services-page .header {
    min-height: 860px;
    padding-bottom: 96px;
  }
  .services-hero .services-hero__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-hero .services-hero__title {
    font-size: calc(24px + 10px);
  }
  .services-hero .services-hero__lead {
    font-size: 17px;
    max-width: 80ch;
  }
  .services-hero .services-hero__btn {
    height: 54px;
    padding: 0 28px;
    font-size: 16px;
  }
  .services-list .services-list__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-list .services-list__title {
    font-size: calc(24px + 10px);
  }
  .services-list .services-grid.is-slider .service-card {
    flex-basis: 50%;
  }
  .services-list .service-card .service-card__body {
    padding: 26px;
  }
  .services-list .service-card .service-card__title {
    font-size: 21px;
  }
  .services-list .service-card .service-card__text {
    font-size: 17px;
  }
  .services-list .service-card .service-card__btn {
    height: 50px;
    padding: 0 24px;
  }
  /* (USUNIĘTO: desktopowe reguły dla services-process/timeline) */
  .services-faq .services-faq__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
}
/* ===== SERVICES: belka fixed + autohide, parity z index ===== */
/* Hero może mieć tło/::after, ale belka ma być ponad tym */
.services-page .header {
  position: relative;
  z-index: 1;
}

.services-page .header__wrap,
.services-page .header__nav {
  position: relative;
  z-index: 3;
}

/* Podwieszenie belki do góry ekranu */
.services-page .header .container.header__top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding-inline: var(--content-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 32; /* ponad tłem/overlayem headera */
  background: rgba(23, 23, 23, 0.4); /* mobile/tablet szkło, jak index */
  backdrop-filter: blur(1px);
  border-bottom: 1px solid rgb(0, 0, 0);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
}

/* Laptop+ — przezroczysta (tak jak index) */
@media (min-width: 1440px) {
  .services-page .header .container.header__top {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
}
/* Treść nie może wpadać pod fixed belkę */
.services-page main {
  padding-top: var(--nav-h);
}

/* Autohide — body dostaje .nav-hidden z tego samego JS co na index */
.services-page.nav-hidden .header .container.header__top {
  transform: translateY(-100%);
}

/* Na wszelki wypadek: sekcje pod belką, nie nad */
.services-page .services-hero,
.services-page .services-list,
.services-page .services-faq {
  position: relative;
  z-index: 0;
}

/* Jeśli gdzieś na przodkach jest transform/filter, zdejmij
   (bo to potrafi „uwięzić” position: fixed) */
.services-page .header,
.services-page .header__wrap {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* Gdy globalny .container ma pointer-events:none — odblokuj w belce */
.services-page .header .container.header__top {
  pointer-events: auto !important;
}

/* ========= HARD FIX: belka zawsze NA WIERZCHU na services ========= */
/* 0) Wyzeruj konteksty które więżą fixed */
.services-page,
.services-page .header,
.services-page .header__wrap {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  perspective: none !important;
  will-change: auto !important;
  isolation: auto !important;
  z-index: auto !important;
}

/* 1) Na wszelki wypadek nadajemy headerowi własne „piętro”, a belce jeszcze wyższe */
.services-page .header {
  position: relative !important;
  z-index: 2147483646 !important; /* pod belką, ale nad resztą */
}

/* 2) Sama belka – fixed do viewportu + MAX z-index */
.services-page .header .container.header__top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding-inline: var(--content-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2147483647 !important; /* praktycznie sufit */
  pointer-events: auto !important;
  /* szkło na mobile/tablet; laptop+ robi się transparent */
  background: rgba(23, 23, 23, 0.4);
  backdrop-filter: blur(2px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.86);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
}

@media (min-width: 1440px) {
  .services-page .header .container.header__top {
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* 3) Odsuń treść pod belką */
.services-page main {
  padding-top: var(--nav-h) !important;
}

/* 4) Problemowe sekcje – kasujemy im własne warstwy */
.services-page .process-steps,
.services-page .process-steps *,
.services-page .timeline,
.services-page .timeline *,
.services-page .process-card,
.services-page .process-card *,
.services-page .services-hero,
.services-page .services-list,
.services-page .services-faq {
  position: relative !important;
  z-index: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  will-change: auto !important;
}

/* 5) Autohide (JS z index) */
.services-page.nav-hidden .header .container.header__top {
  transform: translateY(-100%);
}

/* ===== SERVICES: mobile menu nad belką ===== */
/* menu ma przykrywać cały viewport */
.services-page .header__nav {
  position: fixed; /* niech nie „siedzi” w headerze */
  inset: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(2px);
  z-index: 2147483646; /* domyślnie tuż POD belką (gdy zamknięte) */
}

/* gdy otwarte – idzie NA belkę */
.services-page .header__nav[aria-hidden=false] {
  z-index: 2147483647 !important; /* > z-index belki */
  pointer-events: auto; /* klikalne */
  visibility: visible;
  opacity: 1;
}

/* pomocniczo: belkę daj minimalnie niżej, żeby menu mogło ją przykryć */
.services-page .header .container.header__top {
  z-index: 2147483646 !important;
}

/* jeżeli globalnie chowasz menu display:none – zostaw to,
   ale upewnij się, że gdy otwarte, jest blokiem i łapie klik */
@media (max-width: 1439px) {
  #mobile-menu[aria-hidden=true] {
    display: none !important;
  }
  #mobile-menu[aria-hidden=false] {
    display: block !important;
  }
}
/* ===== SERVICES: wysokość i kadr zdjęcia w headerze per MQ ===== */
/* USTAWIAMY TYLKO min-height + background-position, bez podmiany obrazka */
body.services-page .header {
  /* MOBILE (do 744px) */
  min-height: 380px !important;
  background-position: center 28% !important; /* przesuwaj kadr: mniejsza wartość = wyżej */
  /* TABLET (744–1439) */
}
@media (min-width: 744px) {
  body.services-page .header {
    min-height: 540px !important;
    background-position: center 32% !important;
  }
}
body.services-page .header {
  /* LAPTOP (1440–1919) */
}
@media (min-width: 1440px) {
  body.services-page .header {
    min-height: 680px !important;
    background-position: center 50% !important; /* środek */
  }
}
body.services-page .header {
  /* DESKTOP (≥1920) */
}
@media (min-width: 1920px) {
  body.services-page .header {
    min-height: 700px !important;
    background-position: center 40% !important; /* niżej – pokaż dół kadru */
  }
}

/* === SERVICES: naprawa klikalności belki === */
/* 1) Nic w headerze nie przechwytuje klików ponad belką */
.services-page .header::before,
.services-page .header::after,
.services-page .header__overlay,
.services-page .header__video {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 2) Belka podwieszona i nad wszystkim */
.services-page .header .container.header__top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding-inline: var(--content-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10000 !important; /* ponad overlayami/treścią */
  pointer-events: auto !important; /* belka klikalna */
}

/* 3) Mobilne menu nad belką i stroną */
.services-page .header__nav {
  position: fixed; /* jak na innych podstronach */
  inset: 0; /* pełny ekran */
  z-index: 10001 !important;
  pointer-events: auto !important;
}

/* 4) Na wszelki wypadek: wrapper headera nie tworzy wyższych kontekstów */
.services-page .header,
.services-page .header__wrap {
  position: relative;
  z-index: 0 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* === SERVICES: belka zawsze nad overlayem, logo NA WIERZCHU (≥1440) === */
/* 1) Overlay headera trzymamy pod belką */
.services-page .header::after {
  z-index: 0 !important;
}

/* 2) Sama belka nad overlayem */
.services-page .header__wrap,
.services-page .header .container.header__top {
  position: relative;
  z-index: 10 !important;
}

/* 3) Laptop+ – belka przezroczysta jak na index (bez „dymienia”) */
@media (min-width: 1440px) {
  .services-page .header .container.header__top {
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* 4) LOGO absolutnie na wierzchu względem wszystkiego */
@media (min-width: 1440px) {
  .services-page .header__logo {
    position: fixed !important;
    top: 0;
    left: var(--content-x);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    /* klucz: największy z-index w aplikacji + własny stacking (isolate) */
    z-index: 2147483647 !important;
    isolation: isolate; /* tworzy własny stacking context */
    pointer-events: auto !important;
  }
  /* kapsułka wokół logo też wynosimy na wierzch, bez blendów/filtrów */
  .services-page .header__logo-bg {
    position: relative;
    z-index: 1;
    mix-blend-mode: normal;
    filter: none !important;
    background: rgba(255, 255, 255, 0.9); /* jak na index */
    border-radius: 0 6px 0 0;
    padding: 4px 8px;
    box-shadow: 0 4px 3.5px rgba(12, 12, 12, 0.35);
  }
}
/* 5) Na wszelki wypadek – overlay nie zasłania klików */
.services-page .header::after {
  pointer-events: none !important;
}

/* === SERVICES: LOGO NAD OVERLAYEM === */
body.services-page .header__logo,
body.services-page .header__logo a,
body.services-page .header__logo-img,
body.services-page .header_logo-bg {
  position: relative;
  z-index: 12000 !important; /* wyżej niż nav i overlay */
  pointer-events: auto !important;
}

/* === FIX: Logo zawsze nad nav overlay (services) === */
/* === /services — NAV FIX (tylko ≥ laptop) === */
@media (min-width: 1440px) {
  /* 0) wyłącz konteksty „stacking” nad belką */
  .services-page,
  .services-page .header,
  .services-page .header__wrap {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    z-index: auto !important;
  }
  /* 1) belka zawsze na wierzchu i PRZYTWIERDZONA do topu */
  .services-page .header__top,
  .services-page .header .container.header__top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    padding-inline: var(--content-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2147483646 !important; /* ponad treścią i overlayami */
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
  /* 2) logo absolutnie nad wszystkim (gdy obrazki mają z-index) */
  .services-page .header__logo {
    position: relative !important;
    z-index: 2147483647 !important;
    isolation: isolate;
    pointer-events: auto !important;
  }
  /* 3) treść nie wchodzi pod fixed belkę */
  .services-page main {
    padding-top: var(--nav-h) !important;
  }
  /* 4) sekcje pod spodem nie tworzą „pięter” nad belką */
  .services-page .services-hero,
  .services-page .services-list,
  .services-page .services-faq,
  .services-page .process-steps,
  .services-page .timeline,
  .services-page .process-card {
    position: relative !important;
    z-index: 0 !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  /* 5) overlaye / pseudo-elementy w headerze nie łapią klików */
  .services-page .header::before,
  .services-page .header::after,
  .services-page .header__overlay,
  .services-page .header__video {
    pointer-events: none !important;
    z-index: 0 !important;
  }
}
@media (min-width: 1440px) {
  /* kontener belki nie łapie klików */
  .services-page .header .container.header__top {
    pointer-events: none !important;
  }
  /* ale jego dzieci normalnie klikalne */
  .services-page .header .container.header__top > * {
    pointer-events: auto !important;
  }
}
/* === /services — NAV & MENU FIX (mobile + tablet) === */
@media (max-width: 1439px) {
  /* 0) nic w headerze nie tworzy „pułapki” dla fixed */
  .services-page .header,
  .services-page .header__wrap {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    z-index: auto !important;
  }
  /* 1) BELKA: fixed na topie, ponad contentem, klikalne dzieci */
  .services-page .header .container.header__top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    padding-inline: var(--content-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10000 !important; /* nad sekcjami */
    background: rgba(17, 17, 17, 0.72); /* jak na mobile/tablet */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
    pointer-events: none !important; /* kontener nie blokuje klików */
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
  }
  .services-page .header .container.header__top > * {
    pointer-events: auto !important; /* ale logo/burger/telefon klikają się */
  }
  /* 2) AUTOHIDE – jak na index (body dostaje .nav-hidden) */
  .services-page.nav-hidden .header .container.header__top {
    transform: translateY(-100%);
  }
  /* 3) MENU MOBILNE: pełny ekran i NA WIERZCHU nad belką */
  .services-page .header__nav {
    position: fixed !important;
    inset: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
    z-index: 10001 !important; /* > z-index belki */
  }
  #mobile-menu[aria-hidden=true] {
    display: none !important;
  }
  #mobile-menu[aria-hidden=false] {
    display: block !important;
  }
  /* 4) Treść strony odsunięta pod belkę */
  .services-page main {
    padding-top: var(--nav-h) !important;
  }
  /* 5) Sekcje nie wchodzą ponad belkę (zero „pięter”) */
  .services-page .services-hero,
  .services-page .services-list,
  .services-page .services-faq,
  .services-page .process-steps,
  .services-page .timeline,
  .services-page .process-card {
    position: relative !important;
    z-index: 0 !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  /* 6) Overlaye w headerze nie łapią klików */
  .services-page .header::before,
  .services-page .header::after,
  .services-page .header__overlay,
  .services-page .header__video {
    pointer-events: none !important;
    z-index: 0 !important;
  }
}
/* ===========================
   SERVICES 3D PRO (Three.js)
   =========================== */
.services-3d-pro {
  padding: 40px 0;
  background: #ffffff;
  /* Kontener sekcji (mobile: 4 kolumny, 16px gap, padding inline z tokens) */
}
.services-3d-pro__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
  max-width: 1320px;
}
.services-3d-pro {
  /* Header pełnej szerokości grida */
}
.services-3d-pro__header {
  grid-column: 1/-1;
  margin-bottom: 16px;
}
.services-3d-pro__title {
  margin: 0 0 6px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.services-3d-pro__lead {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #6B7280;
}
.services-3d-pro {
  /* Layout: viewer + panel (na mobile jeden pod drugim) */
}
.services-3d-pro__layout {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.services-3d-pro {
  /* Viewer (canvas) */
}
.services-3d-pro__viewer {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f6f6f6;
}
.services-3d-pro__viewer canvas {
  display: block;
  width: 100%;
  height: auto;
}
.services-3d-pro {
  /* Toolbar na viewerze */
}
.services-3d-pro__toolbar {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  padding: 8px;
  border-radius: 999px;
}
.services-3d-pro__toolbar .s3d-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: #000000;
  background: #DC9B59;
}
.services-3d-pro__toolbar .s3d-btn:hover {
  filter: brightness(1.06);
}
.services-3d-pro__toolbar .s3d-btn:active {
  transform: translateY(1px);
}
.services-3d-pro {
  /* Panel z opisem */
}
.services-3d-pro__panel {
  background: #101010;
  color: #ffffff;
  border-radius: 16px;
  padding: 16px;
}
.services-3d-pro__panel .panel__title {
  margin: 0 0 6px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}
.services-3d-pro__panel .panel__text {
  margin: 0 0 12px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}
.services-3d-pro__panel .panel__media {
  width: 100%;
  aspect-ratio: 16/9;
  background: #222;
  border-radius: 12px;
  margin: 12px 0;
}
.services-3d-pro__panel .panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #DC9B59;
  color: #101010;
  text-decoration: none;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}
.services-3d-pro__panel {
  /* Fallback 2D */
}
.services-3d-pro__panel .s3d-fallback {
  margin-top: 12px;
  background: #ffffff;
  color: #1D1F2C;
  border-radius: 12px;
  padding: 8px;
}
.services-3d-pro__panel .s3d-fallback__svg {
  width: 100%;
  height: auto;
  display: block;
}
.services-3d-pro__panel .s2d.clickable {
  cursor: pointer;
}
.services-3d-pro {
  /* ========= BREAKPOINTS ========= */
  /* Tablet: 12 kolumn + układ 7/5 */
}
@media (min-width: 744px) {
  .services-3d-pro__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 20px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
    max-width: 1320px;
  }
  .services-3d-pro__title {
    font-size: 28px;
  }
  .services-3d-pro__layout {
    grid-template-columns: 7fr 5fr;
    gap: 24px;
  }
}
.services-3d-pro {
  /* Laptop: więcej oddechu + większe tytuły */
}
@media (min-width: 1440px) {
  .services-3d-pro {
    padding: 56px 0 64px;
  }
  .services-3d-pro__title {
    font-size: 32px;
  }
  .services-3d-pro__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 20px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
    max-width: 1320px;
  }
}
.services-3d-pro {
  /* Desktop: typografia */
}
@media (min-width: 1920px) {
  .services-3d-pro__title {
    font-size: 36px;
  }
}

/* ===============================
   Sekcja: interaktywny obraz + hotspoty
   Plik:   scss/pages/_interactive-house.scss
   =============================== */
.interactive-house {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #FAF7F4; /* bezpieczne tło zanim załaduje się obraz */
  isolation: isolate; /* pewny stacking context */
  padding: 40px 20px;
  /* Obraz na pełną szerokość */
}
.interactive-house__image {
  width: 100%;
  /* jeśli chcesz stałe proporcje sekcji — odkomentuj:
  aspect-ratio: 16 / 9; 
  */
}
.interactive-house__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.interactive-house {
  /* Warstwa na hotspoty */
}
.interactive-house .hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none; /* same hotspoty włączają zdarzenia */
  z-index: 2;
}
.interactive-house {
  /* Pojedynczy hotspot */
}
.interactive-house .hotspot {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #DC9B59;
  background: rgba(255, 255, 255, 0.9);
  color: #DC9B59;
  display: grid;
  place-items: center;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  /* Stan :hover / :focus */
}
.interactive-house .hotspot:hover, .interactive-house .hotspot:focus-visible {
  background: #DC9B59;
  color: #ffffff;
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  outline: none;
}
.interactive-house .hotspot {
  /* Aktywne (np. po kliknięciu — możesz dodać klasę .is-active w JS) */
}
.interactive-house .hotspot.is-active {
  background: #DC9B59;
  color: #ffffff;
  transform: scale(1.08);
}
.interactive-house .hotspot {
  /* Prost y tooltip (tytuł) — czyta atrybut data-title */
}
.interactive-house .hotspot::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  translate: -50% 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.interactive-house .hotspot {
  /* Strzałka pod tooltipem */
}
.interactive-house .hotspot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% 0;
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.interactive-house .hotspot {
  /* Pokazuj tooltip na hover/focus */
}
.interactive-house .hotspot:hover::after, .interactive-house .hotspot:hover::before, .interactive-house .hotspot:focus-visible::after, .interactive-house .hotspot:focus-visible::before, .interactive-house .hotspot.is-active::after, .interactive-house .hotspot.is-active::before {
  opacity: 1;
  visibility: visible;
}

/* ====== TABLET (≥744px) ====== */
@media (min-width: 744px) {
  .interactive-house .hotspot {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-width: 2px;
  }
  .interactive-house .hotspot::after {
    font-size: 13px;
    padding: 9px 12px;
  }
}
/* ====== LAPTOP (≥1440px) ====== */
@media (min-width: 1440px) {
  .interactive-house .hotspot {
    width: 48px;
    height: 48px;
    font-size: 22px;
    border-width: 2px;
  }
  .interactive-house .hotspot::after {
    font-size: 14px;
    padding: 10px 12px;
  }
}
/* Preferencje dostępności: ogranicz animacje */
@media (prefers-reduced-motion: reduce) {
  .interactive-house .hotspot {
    transition: none;
  }
}
/* ============================================================================
   SERVICES — PROCESS / TIMELINE (mobile-first)
   - Mobile   (<744):  1 kolumna, brak osi i pinów
   - Tablet   (≥744):  1 kolumna, karty szersze i wycentrowane, wciąż bez osi/pinów
   - Laptop   (≥1440): 2 kolumny naprzemiennie, oś SVG na środku, piny przy osi
   - Desktop  (≥1920): więcej oddechu, lekko większa typografia/padding
   ========================================================================== */
.services-process {
  position: relative;
  background: #ffffff;
  padding-block: 32px;
  /* PRZYCINANIE zawartości sekcji (oś/piny nie wejdą w następną sekcję) */
  overflow: clip;
}
@supports not (overflow: clip) {
  .services-process {
    overflow: hidden;
  }
}
.services-process {
  /* kontener sekcji */
}
.services-process .services-process__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  padding-inline: 20px;
  justify-content: center;
  margin-inline: auto;
  min-width: 0;
  box-sizing: content-box;
  box-sizing: border-box; /* bez !important */
}
.services-process {
  /* tytuł sekcji */
}
.services-process .services-process__title {
  grid-column: 1/-1;
  margin: 0 0 12px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: #1D1F2C;
}
.services-process {
  /* Jedyna oś — SVG w tle sekcji.
     Na mobile/tablet ukryta, pokazujemy od laptopa. */
}
.services-process .process-spine {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none; /* mobile + tablet */
}
.services-process .process-spine .spine-bg {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1.5;
  fill: none;
}
.services-process .process-spine .spine-fg {
  stroke: url(#spineGrad);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  /* 96 = umowna "długość" — JS wpisuje var(--spine-progress) w [0..1] */
  stroke-dasharray: 96;
  stroke-dashoffset: calc(96 - var(--spine-progress, 0) * 96);
  transition: stroke-dashoffset 0.12s linear;
}
.services-process {
  /* Lista kroków */
}
.services-process .process-steps {
  grid-column: 1/-1;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr; /* mobile: pojedyncza kolumna */
  gap: 16px;
}
.services-process {
  /* Pojedynczy krok — reveal na scroll (sterowany przez JS: --reveal) */
}
.services-process .process-step {
  --reveal: 0;
  position: relative;
  opacity: calc(0.35 + 0.65 * var(--reveal));
  transform: translateY(calc(8px * (1 - var(--reveal))));
  transition: opacity 0.45s ease, transform 0.45s ease;
  margin-top: 32px;
  /* PINEZKA przy osi — ukryta na mobile/tablet, pokazana od laptopa */
}
.services-process .process-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -10px);
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  z-index: 2;
  display: none; /* mobile + tablet */
}
.services-process .process-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.services-process {
  /* Karta wewnątrz kroku */
}
.services-process .process-card {
  width: 100%;
  text-align: center;
  background: #FAF7F4;
  border-radius: 0 18px 0 0;
  padding: 16px 16px 18px;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.035);
  border: 0;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  position: relative;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.services-process .process-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.services-process .process-card:active {
  transform: translateY(0);
}
.services-process .process-card:focus-visible {
  outline: 2px solid rgba(220, 155, 89, 0.6);
  outline-offset: 2px;
}
.services-process .process-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  margin: -32px auto 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  transform: translateY(calc(-6px * (1 - var(--reveal))));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.services-process .process-card__icon-img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  display: block;
}
.services-process .process-card__title {
  margin: 6px 0 4px;
  font-weight: 600;
  font-size: 16px;
  color: #1D1F2C;
}
.services-process .process-card__text {
  margin: 0;
  font-size: 14px;
  color: #6B7280;
}
.services-process {
  /* „Więcej” (rozwijane) — jeśli używasz aria-expanded w HTML/JS */
}
.services-process .process-card__more {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #1D1F2C;
}
.services-process .process-card[aria-expanded=false] .process-card__more {
  display: none;
}
.services-process .process-card[aria-expanded=true] .process-card__more {
  display: inline;
}
.services-process {
  /* ===== TABLET (≥744) — wciąż jedna kolumna, karty szersze i wycentrowane ===== */
}
@media (min-width: 744px) {
  .services-process .services-process__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    padding-inline: 42px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-process .process-steps {
    gap: 20px;
  }
  .services-process .process-card {
    max-width: 640px;
    margin-inline: auto;
  }
  .services-process .process-card__icon {
    width: 72px;
    height: 72px;
    margin-top: -36px;
  }
  .services-process .process-card__title {
    font-size: 17px;
  }
  .services-process .process-card__text,
  .services-process .process-card__more {
    font-size: 15px;
  }
}
.services-process {
  /* ===== LAPTOP (≥1440) — 2 kolumny naprzemiennie + oś i piny ===== */
}
@media (min-width: 1440px) {
  .services-process .services-process__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 40px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-process {
    /* pokazujemy oś SVG */
  }
  .services-process .process-spine {
    display: block;
  }
  .services-process .process-spine .spine-fg {
    stroke-width: 3;
  }
  .services-process .process-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 96px; /* rzędy, kolumny */
    position: relative;
    padding-top: 10px; /* miejsce na badge ikony nad kartą */
  }
  .services-process .process-step {
    margin-top: 22px;
    /* pokaż piny przy osi */
  }
  .services-process .process-step::after {
    display: block;
  }
  .services-process .process-step {
    /* lewa kolumna */
  }
  .services-process .process-step:nth-child(odd) {
    grid-column: 1;
  }
  .services-process .process-step:nth-child(odd)::after {
    left: auto;
    right: -6px;
    transform: none;
  }
  .services-process .process-step {
    /* prawa kolumna */
  }
  .services-process .process-step:nth-child(even) {
    grid-column: 2;
  }
  .services-process .process-step:nth-child(even)::after {
    left: -6px;
    transform: none;
  }
  .services-process .process-card {
    padding: 18px 18px 20px;
  }
  .services-process .process-card__icon {
    width: 80px;
    height: 80px;
    margin-top: -40px;
  }
  .services-process .process-card__title {
    font-size: 18px;
  }
  .services-process .process-card__text,
  .services-process .process-card__more {
    font-size: 16px;
  }
}
.services-process {
  /* ===== DESKTOP (≥1920) — więcej powietrza / rozm. kart ===== */
}
@media (min-width: 1920px) {
  .services-process .services-process__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    padding-inline: 300px;
    justify-content: center;
    margin-inline: auto;
    min-width: 0;
    box-sizing: content-box;
  }
  .services-process .process-steps {
    gap: 32px 120px;
  }
  .services-process .process-card {
    padding: 22px 24px 26px;
    max-width: 720px;
  }
  .services-process .process-card__title {
    font-size: 20px;
  }
  .services-process .process-card__text,
  .services-process .process-card__more {
    font-size: 17px;
  }
}
.services-process {
  /* ===== Dostępność: ograniczenie animacji ===== */
}
@media (prefers-reduced-motion: reduce) {
  .services-process .process-step {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .services-process .process-card__icon {
    transition: none;
    transform: none;
  }
  .services-process .process-spine .spine-fg {
    transition: none;
  }
}

/* =========================================
   SERVICE QUICK-VIEW MODAL (mobile-first)
   ========================================= */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: 1fr;
  align-items: end; /* sheet od dołu na mobile */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}
.service-modal[data-open=true] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.service-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  backdrop-filter: saturate(110%) blur(4px);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.service-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  transform: translateY(8%);
  opacity: 0.98;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease;
  max-height: min(92vh, 860px);
  overflow: auto;
}

.service-modal[data-open=true] .service-modal__backdrop {
  opacity: 1;
}

.service-modal[data-open=true] .service-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

/* Zawartość */
.service-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  font: 700 22px/1 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1D1F2C;
  cursor: pointer;
}

.service-modal__media {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f4f4f4;
}

.service-modal__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-modal__body {
  padding: 18px 18px 22px;
}

.service-modal__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 18px;
  color: #1D1F2C;
}

.service-modal__lead {
  margin: 0 0 12px;
  font-size: 15px;
  color: #6B7280;
}

.service-modal__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}

.service-modal__bullets li {
  padding-left: 18px;
  position: relative;
  font-size: 15px;
  color: #1D1F2C;
}

.service-modal__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

.service-modal__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.service-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 0 12px 0 0;
  text-decoration: none;
  background: #DC9B59;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.service-modal__btn:hover {
  filter: brightness(0.97);
}

.service-modal__btn:active {
  transform: translateY(1px);
}

/* mały sygnał „to jest klikalne” na kartach z quickview */
.service-card[data-quickview] {
  cursor: pointer;
}

/* ====== TABLET (≥744) ====== */
@media (min-width: 744px) {
  .service-modal {
    align-items: center;
  } /* modal na środku */
  .service-modal__panel {
    border-radius: 18px;
    max-width: 720px;
    margin-inline: auto;
  }
  .service-modal__title {
    font-size: 19px;
  }
  .service-modal__lead {
    font-size: 16px;
  }
}
/* ====== LAPTOP (≥1440) ====== */
@media (min-width: 1440px) {
  .service-modal__panel {
    max-width: 920px;
    border-radius: 22px;
    transform: translateY(0) scale(0.98);
  }
  .service-modal[data-open=true] .service-modal__panel {
    transform: scale(1);
  }
  .service-modal__body {
    padding: 22px 24px 26px;
  }
  .service-modal__title {
    font-size: 21px;
  }
  .service-modal__lead {
    font-size: 17px;
  }
}
/* ====== DESKTOP (≥1920) ====== */
@media (min-width: 1920px) {
  .service-modal__panel {
    max-width: 1080px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-modal,
  .service-modal__backdrop,
  .service-modal__panel {
    transition: none;
  }
}
/* =========================================================
   THANKS PAGE — scoped, bez „or”, czysty Sass
   ========================================================= */
.thanks-page {
  /* tło + domyślny kolor tekstu */
  background: #FAF7F4;
  color: #1D1F2C;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* (opcjonalnie) font z variables */
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif, sans-serif;
}

/* --- GŁÓWNA SEKCJA --- */
.thanks {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 64px 20px;
  min-height: 72dvh;
}
.thanks .container {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.thanks__title {
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  color: #1D1F2C;
  animation: thanks-fade 0.36s ease both;
}
.thanks__text {
  font-size: clamp(15px, 2.8vw, 18px);
  line-height: 1.6;
  color: #6B7280;
  margin: 0 0 28px;
  animation: thanks-fade 0.36s ease both 0.06s;
}
.thanks {
  /* --- PRZYCISK --- */
}
.thanks .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  animation: thanks-fade 0.36s ease both 0.12s;
}
.thanks .btn:hover {
  transform: translateY(-1px);
}
.thanks .btn:active {
  transform: translateY(0);
  opacity: 0.9;
}

/* --- ANIMACJA --- */
@keyframes thanks-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- BREAKPOINTY --- */
@media (min-width: 744px) {
  .thanks {
    padding: 96px 24px;
  }
}
@media (min-width: 1440px) {
  .thanks {
    padding: 120px 24px;
  }
}
/* WRAPPER */
.cfg-hide-scroll {
  overflow: hidden !important;
}

.cfg-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  justify-items: center;
  align-items: end;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.cfg-modal[hidden] {
  display: none !important;
}

.cfg-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* CARD */
.cfg-modal__card {
  position: relative;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  transform: translateY(6px) scale(0.992);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.22s ease;
  margin: 0;
  overflow: hidden;
}

.cfg-modal.is-open .cfg-modal__backdrop {
  opacity: 1;
}
.cfg-modal.is-open .cfg-modal__card {
  opacity: 1;
  transform: none;
}

.cfg-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}
.cfg-close:hover, .cfg-close:focus {
  color: #000;
  outline: none;
}

/* HEADER */
.cfg-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #EFEFEF;
  padding: 20px 16px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cfg-head__bar {
  height: 8px;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.cfg-head__progress {
  display: block;
  height: 100%;
  width: var(--cfg-progress, 0%);
  background: #DC9B59;
}

.cfg-title {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  font-size: 22px;
}

/* BODY */
.cfg-body {
  padding: 16px 16px;
  overflow: auto;
}

/* FOOTER */
.cfg-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: #F2F2F2;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cfg-foot__left, .cfg-foot__right {
  display: flex;
  gap: 8px;
}

/* BUTTONS */
.cfg-btn {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  padding: 12px 18px;
  border-radius: 0 12px 0 0;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-width: 143px;
  height: 53px;
}
.cfg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.cfg-btn:active {
  transform: translateY(0);
}
.cfg-btn--primary {
  background: #DC9B59;
  color: #fff;
  border-color: #DC9B59;
}

.cfg-link {
  appearance: none;
  background: none;
  border: none;
  padding: 12px 0;
  font-weight: 700;
  color: #333;
  cursor: pointer;
}

/* CLOSE */
/* LISTA OPCJI */
.cfg-list {
  display: block;
}

.cfg-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  position: relative;
}

.cfg-opt + .cfg-opt {
  border-top: 1px solid #EDEDED;
}

.cfg-opt__label {
  font-weight: 600;
}

.cfg-opt__sub {
  font-size: 13px;
  color: #6B6B6B;
}

/* RADIO — idle czarny, hover/active pomarańcz */
.cfg-dot {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #000;
  display: inline-grid;
  place-items: center;
  outline: none;
}
.cfg-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #DC9B59;
  transform: scale(0);
  transition: transform 0.16s ease;
}
.cfg-dot:hover {
  box-shadow: 0 0 0 3px color-mix(in oklab, #DC9B59 30%, transparent);
}
.cfg-dot:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, #DC9B59 45%, transparent);
}
.cfg-dot:checked {
  border-color: #DC9B59;
  border-width: 3px;
}
.cfg-dot:checked::after {
  transform: scale(1);
}

/* „Inny” inline */
.cfg-opt--other .cfg-other {
  display: none;
  margin-left: 30px;
  margin-top: 8px;
}
.cfg-opt--other .cfg-dot:checked ~ .cfg-other {
  display: block;
}

.cfg-input {
  width: 100%;
  max-width: 360px;
  padding: 10px 12px;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  font: inherit;
}

/* BŁĘDY */
.cfg-error {
  margin-top: 8px;
  font-size: 14px;
  color: #d93025;
}

/* EXIT-INTENT */
.cfg-exit[hidden] {
  display: none !important;
}

.cfg-exit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

.cfg-exit__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
}

.cfg-exit__card {
  position: relative;
  width: min(560px, 90vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  padding: 20px;
  display: grid;
  gap: 10px;
  animation: cfg-pop 0.22s ease both;
}

@keyframes cfg-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cfg-exit__title {
  margin: 0;
  font-weight: 800;
  font-size: 22px;
  text-align: center;
}

.cfg-exit__lead {
  margin: 6px 0 0;
  text-align: center;
}

.cfg-exit__sub {
  margin: 0;
  opacity: 0.8;
  text-align: center;
}

.cfg-exit__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* MQ */
@media (min-width: 744px) {
  .cfg-modal__card {
    width: 600px;
    height: 600px;
    max-height: none;
    border-radius: 0 36px 0 0;
  }
  .cfg-head {
    padding-right: 48px;
    padding-top: 28px;
  }
  .cfg-title {
    font-size: 24px;
  }
}
@media (min-width: 1440px) {
  .cfg-modal__card {
    width: 600px;
    height: 600px;
    border-radius: 0 42px 0 0;
  }
  .cfg-title {
    font-size: 26px;
  }
}
/* ===== Mobile default: fullscreen (do 743px) ===== */
.cfg-modal {
  display: grid;
  justify-items: stretch; /* karta rozciąga się na całą szerokość */
  align-items: stretch; /* i na całą wysokość */
  padding: 0; /* bez dolnego odstępu na mobile */
}

.cfg-modal__card {
  width: 100vw;
  /* porządek fallbacków dla różnych przeglądarek mobilnych */
  height: 100vh; /* stary fallback */
  height: 100svh; /* „small viewport” */
  height: 100dvh; /* „dynamic viewport” – najlepsze, gdy dostępne */
  max-height: none;
  border-radius: 0 var(--cfg-radius-m) 0 0; /* tylko prawy górny róg */
  overflow: hidden; /* nic nie wychodzi poza radius */
}

/* iOS fallback, gdy 100dvh/svh nie działa */
@supports (-webkit-touch-callout: none) {
  .cfg-modal__card {
    height: -webkit-fill-available;
  }
}
/* ===== ≥744 px: doklejona do dołu, 600 × 600 ===== */
@media (min-width: 744px) {
  .cfg-modal {
    justify-items: center;
    align-items: end;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .cfg-modal__card {
    width: 600px;
    height: 600px;
    max-height: none;
    overflow: hidden;
    border-radius: 0 40px 0 0;
  }
}
/* ===== ≥1440 px: ten sam rozmiar, większy promień ===== */
@media (min-width: 1440px) {
  .cfg-modal__card {
    width: 600px;
    height: 600px;
    overflow: hidden;
    border-radius: 0 48px 0 0;
  }
}
.cfg-list {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
  outline: 0;
}

/* Krok 2 – układ inline dla „Dokładnie m²” */
.cfg-opt--exact .cfg-exact__row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.cfg-opt--exact .cfg-exact__box {
  width: 120px;
}

/* bazowo ukryte */
.cfg-opt--other .cfg-other {
  display: none;
}

/* pokaż, gdy .is-open na etykiecie */
.cfg-opt--other.is-open .cfg-other {
  display: block;
}

/* ---- STEP 5: layout & visuals ---- */
/* podtytuł (szary tekst pod tytułem) */
.cfg-subtitle {
  font-size: 12px; /* było 14 – na życzenie 12 */
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  max-width: 560px;
  margin: 6px auto 0;
}

/* textarea */
.cfg-textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  resize: vertical;
}

.cfg-textarea:focus {
  outline: none;
  border-color: var(--cfg-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cfg-accent) 25%, transparent);
}

/* upload – pole z plusem 80x80 jak na refce */
.cfg-upload {
  margin-top: 10px;
}

.cfg-drop {
  width: 80px;
  height: 80px;
  border: 1px solid #D9D9D9;
  border-radius: 12px;
  background: #fff;
  display: inline-grid;
  place-items: center;
  margin: 8px auto 12px;
  cursor: pointer;
  position: relative;
}

.cfg-drop:is(:hover, .is-hover) {
  border-color: var(--cfg-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* plus – prosty krzyż */
.cfg-drop::before, .cfg-drop::after {
  content: "";
  position: absolute;
  background: #1A1A1A;
  border-radius: 2px;
}

.cfg-drop::before {
  width: 28px;
  height: 4px;
}

.cfg-drop::after {
  width: 4px;
  height: 28px;
}

/* lista plików – miniatury */
.cfg-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 744px) {
  .cfg-files {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cfg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #EEE;
  border-radius: 10px;
  background: #fff;
}

.cfg-file__preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 44px;
  background: #F8F8F8;
  display: grid;
  place-items: center;
}

.cfg-file__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cfg-file__icon {
  font-size: 20px;
  opacity: 0.75;
}

.cfg-file__name {
  font-weight: 600;
  font-size: 13px;
}

.cfg-file__sub {
  font-size: 12px;
  color: #777;
}

/* ukrywa natywny input file */
.sr-only[type=file] {
  display: none !important;
}

/* _configurator-steps.scss – dodatki do Step 8 */
.cfg-field {
  margin: 10px 0;
}

.cfg-field .cfg-error {
  margin-top: 6px;
  color: #d93025;
  font-size: 14px;
}

.cfg-check input[type=checkbox] {
  margin-top: 4px;
}

.price-step__tiers .is-active {
  border: 2px solid #DC9B59;
  background: #FFF7F0;
  color: #000;
}

/* MOBILE ≤743: przełączniki 100% szerokości, każdy taki sam */
@media (max-width: 743px) {
  .price-step__tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch; /* klucz: dzieci mają się rozciągać */
  }
  /* niezależnie czy przycisk ma wrappera czy nie — wszystko na 100% */
  .price-step__tiers > * {
    width: 100% !important;
    flex: 0 0 auto;
  }
  .price-step__tiers .cfg-btn {
    display: block; /* nie inline */
    width: 100% !important;
    min-width: 0 !important; /* nadpisuje 143px */
    box-sizing: border-box;
    height: auto;
    padding: 12px 14px;
    border-radius: 10px;
  }
}
/* --- KARTA PODSUMOWANIA (uspokojona) --- */
.cfg-price-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--elev-1);
  padding: 16px;
  display: grid;
  gap: 14px;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* pasek akcji u góry: Ulepsz ↔ Tabela cenowa */
.cfg-price-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cfg-price-card__top .cfg-btn {
  white-space: nowrap;
}

.cfg-price-card__top [data-cfg=open-price-table] {
  padding: 12px 0;
  font-weight: 700;
  color: #1D1F2C;
  text-decoration: underline;
}

/* przełączniki wariantów: 3 równe kolumny, spokojny wygląd */
.price-step__tiers {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 6px;
}

.price-step__tiers .cfg-btn {
  min-width: 0;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-weight: 700;
}

.price-step__tiers .is-active {
  border-color: #DC9B59;
  box-shadow: 0 0 0 2px color-mix(in oklab, #DC9B59 35%, transparent);
  background: #FAF7F4;
}

/* sekcja cen: kolumny „etykieta | wartość”, wartości do prawej */
#v2-tier .cfg-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

#v2-tier .cfg-row span,
#v2-tier label {
  color: #1D1F2C;
  font-weight: 600;
}

#v2-tier .cfg-row strong {
  text-align: right;
  font-weight: 800;
}

/* separator przed SUMĄ */
#v2-tier hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 8px 0;
}

/* wiersz z SUMĄ – mocniej */
#v2-tier [data-price=total] {
  font-size: 1.12rem;
}

#v2-tier [data-price=total-label] {
  font-weight: 800;
}

/* przypis o VAT – cichszy */
#v2-tier .price-vat {
  color: #6B7280;
  font-size: 12px;
  margin-top: 4px;
}

/* dolny blok akcji */
.cfg-price-card .cfg-btn[data-cfg=send-now] {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-weight: 800;
}

.cfg-price-card [data-cfg=price-details] {
  color: #1D1F2C;
  text-decoration: underline;
  font-weight: 700;
}

/* komunikat błędu – spokojny „chip” */
.cfg-error {
  background: #FAF7F4;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  color: #b00020;
  font-weight: 600;
}

/* drobne korekty responsywne */
@media (min-width: 744px) {
  .cfg-price-card {
    padding: 18px;
    gap: 16px;
  }
  #v2-tier [data-price=total] {
    font-size: 1.18rem;
  }
}
/* === MOBILE ≤743px: jedna kolumna, label nad wartością === */
@media (max-width: 743px) {
  /* każdy wiersz: jedna kolumna, mała przerwa */
  #v2-tier .cfg-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px;
    align-items: start;
    padding: 12px 0; /* troszkę powietrza pionowo */
  }
  /* etykieta (lewy tekst) idzie na górę, mniejsza i jaśniejsza */
  #v2-tier .cfg-row > span:first-child,
  #v2-tier .cfg-row label {
    order: 1;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #6B7280;
    margin: 0; /* zeruj ewent. marginesy */
    word-break: normal;
    overflow-wrap: break-word; /* bez „anywhere” */
    hyphens: auto;
  }
  /* wartości cenowe pod spodem – pełna szerokość, wyrównanie do lewej */
  #v2-tier [data-price=house],
  #v2-tier [data-price=slab],
  #v2-tier [data-price=total] {
    order: 2;
    justify-self: start;
    text-align: left;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    display: block;
  }
  /* rozmiary: suma minimalnie większa dla hierarchii */
  #v2-tier [data-price=house],
  #v2-tier [data-price=slab] {
    font-size: 16px;
    font-weight: 800;
  }
  #v2-tier [data-price=total] {
    font-size: 18px;
    font-weight: 800;
  }
  /* wiersz z checkboxem zachowuje się tak samo (etykieta nad wartością) */
  #v2-tier .cfg-row label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }
}
.ptm__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 30px;
  border-bottom: 1px solid #eee;
}

.ptm__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.ptm__close {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.ptm__close:hover, .ptm__close:focus {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

/* karta musi być relative, by X (absolute) miał punkt odniesienia */
.cfg-close:hover,
.cfg-close:focus {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

.cfg-head {
  padding-right: 36px;
} /* żeby tytuł nie podchodził pod X */
@media (min-width: 744px) {
  /* np. układ wielokolumnowy */
  #v2-tier .cfg-row {
    display: grid;
    grid-template-columns: 1fr auto auto; /* np. etykieta + 2 ceny */
    gap: 12px;
    align-items: center;
    padding: 16px 0;
  }
  /* etykieta po lewej, normalny rozmiar */
  #v2-tier .cfg-row > span:first-child,
  #v2-tier .cfg-row label {
    order: 1;
    font-size: 15px;
    font-weight: 600;
    color: #333; /* albo token zmiennej */
    margin: 0;
  }
  /* ceny obok siebie (nie pod spodem) */
  #v2-tier [data-price=house],
  #v2-tier [data-price=slab],
  #v2-tier [data-price=total] {
    order: 2;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    display: inline-block;
  }
  #v2-tier [data-price=house],
  #v2-tier [data-price=slab] {
    font-size: 16px;
    font-weight: 700;
  }
  #v2-tier [data-price=total] {
    font-size: 18px;
    font-weight: 800;
  }
}
/* ===== PRICE TABLE MODAL ===== */
.pt-modal[hidden] {
  display: none !important;
}

.pt-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
}

.pt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
}

.pt-card {
  position: relative;
  width: 600px;
  height: 800px;
  max-width: 95vw;
  max-height: 95vh;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pt-close {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 0;
  background: transparent;
  font-size: 22px;
  padding: 8px;
  cursor: pointer;
}

.pt-head {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

.pt-head h3 {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 20px;
}

.pt-sub {
  margin: 0;
  opacity: 0.75;
  font-size: 13px;
}

.pt-body {
  overflow: auto;
  padding: 12px;
}

.pt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.pt-table thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 1;
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.pt-col--name {
  width: 48%;
}

.pt-col--tier {
  width: 17.33%;
  text-align: center;
}

.pt-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: top;
}

.pt-sep td {
  background: #fbfbfb;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  color: #666;
  padding-top: 12px;
}

.pt-total td {
  background: #fff7ef;
  font-weight: 800;
}

.pt-vat-note {
  font-size: 12px;
  color: #666;
  padding: 8px 10px;
}

@media (max-width: 744px) {
  .pt-card {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-width: 100vw;
    max-height: 100vh;
  }
}
/* ==========================================================================
   PRICE TABLE MODAL (ptm) — zintegrowany z projektem
   Mobile-first: 375–743 pełny viewport, 744+ karta 600x800
   Używa zmiennych z projektu (padding kontenera, breakpoints, typografia, kolory)
   ========================================================================== */
/* ===== 0) PRESETY & INTEGRACJA Z ZMIENNYMI PROJEKTU ===== */
.ptm {
  /* szerokości kolumn na MOBILE (łatwa regulacja) — suma 100% */
  --col-h: 32%; /* lewa kolumna z tytułem (było 34%, zawęziłem) */
  --col-b: 22%;
  --col-c: 23%;
  --col-p: 23%;
  /* siatka linii tabeli (jak w ref.) */
  --grid: #EFEFEF;
  --headbg: #FAFAFA;
  --muted: $color-light-text;
  /* nagłówki B/C/P – rozmiary (desktop / mobile) */
  --thead-fs: 14px;
  --thead-py: 10px;
  --thead-fs-m: 12px;
  --thead-py-m: 8px;
}

/* ===== 1) OVERLAY + KARTA ===== */
.ptm-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(91, 90, 90, 0.27); /* z projektu */
  z-index: 100000; /* przykrywa inne modale */
  padding-left: max(16px, 20px);
  padding-right: max(16px, 20px);
}

.ptm {
  background: #ffffff;
  color: #1D1F2C;
  width: 100%;
  height: 100svh; /* stabilny viewport */
  height: 100dvh;
  border-radius: 0;
  box-shadow: var(--elev-modal);
  display: flex;
  flex-direction: column;
  outline: none;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ptm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #E6E6E6;
}

.ptm__title {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.07em;
}

.ptm__meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.ptm__close {
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ptm__body {
  padding: 14px 18px 18px;
  overflow: auto; /* przewija się tylko środek */
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* blokada scrolla tła, gdy modal otwarty */
body.is-ptm-open {
  overflow: hidden;
  touch-action: none;
}

/* ===== 2) TABELA ===== */
.ptm__table-wrap {
  width: 100%;
}

.ptm__table {
  width: 100%;
  border-collapse: separate; /* potrzebne do pionowych linii */
  border-spacing: 0;
  table-layout: fixed; /* stabilne kolumny */
}

.ptm__table thead th,
.ptm__table tbody td {
  border-bottom: 1px solid var(--grid);
}

.ptm__table thead th:not(:first-child),
.ptm__table tbody td:not(:first-child) {
  border-left: 1px solid var(--grid);
}

.ptm__table th,
.ptm__table td {
  padding: 10px 12px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.35;
  color: #1D1F2C;
}

.ptm__table thead th {
  font-weight: 800;
  text-align: left;
  background: var(--headbg);
  font-size: var(--thead-fs);
  padding-top: var(--thead-py);
  padding-bottom: var(--thead-py);
}

.ptm__table thead th:not(:first-child) {
  text-align: center;
  white-space: nowrap; /* nie łam „BASIC/COMFORT/PREMIUM” */
}

/* Tytuł pełny / skrót + podtytuł */
.ptm__title-full {
  display: inline;
}

.ptm__title-short {
  display: none;
  font-weight: 700;
}

.ptm__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* ✓ i — wyśrodkowane (teksty zostają do lewej) */
.ptm__check, .ptm__dash {
  display: block;
  text-align: center;
  font-weight: 800;
}

.ptm__dash {
  opacity: 0.6;
}

/* ===== 3) KARTY CEN — POD TABELĄ ===== */
.ptm__prices {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.ptm__card {
  border: 1px solid #EEE;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  background: #ffffff;
}

.ptm__card h4 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 14px;
}

.ptm__card .price {
  font-weight: 700;
  font-size: 14px;
}

/* Notka pod kartami */
.ptm__note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

/* ===== 4) MOBILE (≤ 743px) — brak h-scrolla, wszystko się mieści ===== */
@media (max-width: 743px) {
  .ptm {
    border-radius: 0;
  }
  .ptm__title-full {
    display: none;
  }
  .ptm__title-short {
    display: inline;
  }
  td.col-h .ptm__sub,
  td.col-h ul, td.col-h ol, td.col-h small {
    display: none !important;
  }
  .ptm__table th, .ptm__table td {
    padding: 6px 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }
  /* Twarde proporcje kolumn — dopasowanie do viewportu */
  .ptm__table thead th:first-child,
  .ptm__table tbody td.col-h {
    width: var(--col-h);
  }
  .ptm__table thead th:nth-child(2),
  .ptm__table tbody td.col-b {
    width: var(--col-b);
  }
  .ptm__table thead th:nth-child(3),
  .ptm__table tbody td.col-c {
    width: var(--col-c);
  }
  .ptm__table thead th:nth-child(4),
  .ptm__table tbody td.col-p {
    width: var(--col-p);
  }
  /* Nagłówki thead mniejsze */
  .ptm__table thead th {
    font-size: var(--thead-fs-m);
    padding-top: var(--thead-py-m);
    padding-bottom: var(--thead-py-m);
  }
  /* Karty cen pionowo (jedna pod drugą) */
  .ptm__prices {
    grid-template-columns: 1fr;
  }
  /* absolutnie zero poziomego scrolla */
  .ptm__body {
    overflow-x: hidden;
  }
  .ptm__table-wrap {
    overflow-x: hidden !important;
  }
}
/* ===== 5) TABLET/DESKTOP (≥ $bp-tablet) — karta 600x800, 3 karty w rzędzie ===== */
@media (min-width: 744px) {
  .ptm {
    width: 600px;
    max-height: 800px;
    height: auto;
    border-radius: 16px;
  }
  .ptm__body {
    /* 56px nagłówek + paddingi — bezpieczny calc */
    max-height: 712px;
    overflow: auto;
  }
  .ptm__title-full {
    display: inline;
  }
  .ptm__title-short {
    display: none;
  }
  .ptm__table th, .ptm__table td {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .ptm__prices {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  /* ładniejsze łamanie bardzo długich tytułów */
  .ptm__title-full {
    text-wrap: balance;
  }
}
/* ===== 6) DUŻE EKRANY (≥ $bp-laptop) – trzymamy 600x800 jak w projekcie ===== */
@media (min-width: 1440px) {
  .ptm {
    width: 600px;
    max-height: 800px;
  }
}
/* ======= KARTY CEN – SKÓRKA zgodna z projektem (tylko project variables) ======= */
/* użyte zmienne: $color-white, $color-black, $color-dark-text, $color-light-text,
   $color-beige-bg, $color-beige-light-bg, $color-gradient-start, $color-gradient-end,
   $color-stroke-grey, --elev-1, --elev-2                                          */
.ptm__prices {
  margin-top: 16px;
  gap: 14px;
}

/* baza */
.ptm__card {
  position: relative;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(151, 151, 151, 0.35);
  background: #ffffff;
  text-align: center;
  box-shadow: var(--elev-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ptm__card h4 {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1D1F2C;
}

/* cena – mocniejsza typografia + wariant gradientowego napisu (spójny z hero) */
.ptm__card .price {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
  color: #000000;
}

/* (chcesz gradientowy napis ceny? odkomentuj):
.ptm__card .price{
  background: linear-gradient(90deg, $color-gradient-start, $color-gradient-end);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
*/
.ptm__card .price small {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  font-size: 11px;
  color: #6B7280;
}

/* cienki pasek akcentu – gradient projektu */
.ptm__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #DC9B59, #000000);
  opacity: 0.75;
}

/* hover (desktop) */
@media (hover: hover) {
  .ptm__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
  }
}
/* subtelne tła zgodne z resztą strony – bez nowych kolorów */
.ptm__prices .ptm__card:nth-child(1) {
  background: #F6F1EA;
}

.ptm__prices .ptm__card:nth-child(2) {
  background: #FAF7F4;
}

.ptm__prices .ptm__card:nth-child(3) {
  background: #ffffff;
}

/* drobna różnica obramowania, żeby „premium” było wyraźniejsze, nadal w palecie */
.ptm__prices .ptm__card:nth-child(3) {
  border-color: rgba(151, 151, 151, 0.55);
}

/* mobile – pionowo i ciaśniej */
@media (max-width: 743px) {
  .ptm__card {
    padding: 12px 10px;
    border-radius: 12px;
  }
  .ptm__card .price {
    font-size: 15px;
  }
}
/* meta/nagłówek modala – dopasowanie do stylistyki strony */
.ptm__meta {
  font-size: 12px;
  color: #6B7280;
}

.ptm__title {
  font-size: 20px;
  font-weight: 700;
}

/* ====== Subtelne kolory tabeli (spójne z paletą projektu) ====== */
/* Header: lekko beżowe tło i delikatniejsza linia */
.ptm__table thead th {
  background: #FAF7F4; /* subtelny beż jak na sekcjach */
  border-bottom-color: rgba(151, 151, 151, 0.35);
}

/* Lewa kolumna (opisy): minimalny tint dla czytelności */
.ptm__table tbody td.col-h {
  background: rgba(246, 241, 234, 0.35);
}

/* Zebra rows — bardzo delikatne */
.ptm__table tbody tr:nth-child(odd) td {
  background: rgba(250, 247, 244, 0.35);
}

/* ✓ akcentem (gradient start), „—” przygaszone */
.ptm__check {
  color: #DC9B59;
}

.ptm__dash {
  color: #6B7280;
  opacity: 0.6;
}

/* Hover na desktopie – lekkie podbicie tła wiersza */
@media (hover: hover) {
  .ptm__table tbody tr:hover td {
    background: rgba(246, 241, 234, 0.55);
  }
}
/* Mobile: odrobinę słabsze tła, żeby nie „puchło” wizualnie */
@media (max-width: 743px) {
  .ptm__table tbody td.col-h {
    background: rgba(246, 241, 234, 0.28);
  }
  .ptm__table tbody tr:nth-child(odd) td {
    background: rgba(250, 247, 244, 0.28);
  }
}
/* ==== KROK 8 — Formularz kontaktowy (SCSS) ============================= */
[data-cfg=root] [data-cfg=step8] .cfg-form {
  background: #ffffff;
  border: 1px solid #EAEAEA;
  border-radius: 14px;
  box-shadow: var(--elev-modal);
  padding: 20px;
}
@media (min-width: 744px) {
  [data-cfg=root] [data-cfg=step8] .cfg-form {
    padding: 24px;
  }
}
@media (min-width: 1440px) {
  [data-cfg=root] [data-cfg=step8] .cfg-form {
    padding: 28px;
  }
}
[data-cfg=root] [data-cfg=step8] .cfg-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 744px) {
  [data-cfg=root] [data-cfg=step8] .cfg-form__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
  }
}
[data-cfg=root] [data-cfg=step8] .cfg-field {
  display: grid;
  gap: 6px;
}
[data-cfg=root] [data-cfg=step8] .cfg-label {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  line-height: 1.35;
}
[data-cfg=root] [data-cfg=step8] .cfg-input,
[data-cfg=root] [data-cfg=step8] .cfg-textarea {
  width: 100%;
  font: inherit;
  color: #1D1F2C;
  background: #ffffff;
  border: 1px solid #EAEAEA;
  border-radius: 10px;
  padding: 12px;
}
[data-cfg=root] [data-cfg=step8] .cfg-input::placeholder,
[data-cfg=root] [data-cfg=step8] .cfg-textarea::placeholder {
  color: rgb(127.6808510638, 134.6436170213, 148.5691489362);
}
[data-cfg=root] [data-cfg=step8] .cfg-input:focus,
[data-cfg=root] [data-cfg=step8] .cfg-textarea:focus {
  border-color: #DC9B59;
  box-shadow: 0 0 0 3px rgba(220, 155, 89, 0.25);
  outline: none;
}
[data-cfg=root] [data-cfg=step8] .cfg-input.is-invalid,
[data-cfg=root] [data-cfg=step8] .cfg-textarea.is-invalid {
  border-color: #C84141;
}
[data-cfg=root] [data-cfg=step8] .cfg-input.is-valid,
[data-cfg=root] [data-cfg=step8] .cfg-textarea.is-valid {
  border-color: #2E7D32;
}
[data-cfg=root] [data-cfg=step8] .cfg-textarea {
  min-height: 120px;
  resize: vertical;
}
[data-cfg=root] [data-cfg=step8] .cfg-error {
  font-size: 12px;
  color: #C84141;
}
[data-cfg=root] [data-cfg=step8] {
  /* zgoda RODO */
}
[data-cfg=root] [data-cfg=step8] .cfg-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px dashed #EAEAEA;
  border-radius: 10px;
  background: #ffffff;
}
[data-cfg=root] [data-cfg=step8] .cfg-consent input[type=checkbox] {
  accent-color: #DC9B59;
  margin-top: 3px;
}
[data-cfg=root] [data-cfg=step8] .cfg-consent.is-invalid {
  border-color: #C84141;
}
[data-cfg=root] [data-cfg=step8] .cfg-consent__text {
  font-size: 13px;
  color: #1D1F2C;
  line-height: 1.4;
}
[data-cfg=root] [data-cfg=step8] {
  /* stopka */
}
[data-cfg=root] [data-cfg=step8] .cfg-form__footer {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
[data-cfg=root] [data-cfg=step8] .btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
[data-cfg=root] [data-cfg=step8] .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-cfg=root] [data-cfg=step8] .btn--ghost {
  background: #ffffff;
  color: #1D1F2C;
  border-color: #EAEAEA;
}
[data-cfg=root] [data-cfg=step8] .btn--ghost:hover {
  border-color: rgb(215.28, 215.28, 215.28);
}
[data-cfg=root] [data-cfg=step8] .btn--accent {
  background: #DC9B59;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(220, 155, 89, 0.35);
}
[data-cfg=root] [data-cfg=step8] .btn--accent:hover {
  filter: brightness(0.96);
}
[data-cfg=root] [data-cfg=step8] .btn--accent:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 155, 89, 0.35);
}
@media (max-width: 743px) {
  [data-cfg=root] [data-cfg=step8] .cfg-form__footer {
    justify-content: stretch;
  }
  [data-cfg=root] [data-cfg=step8] .btn {
    flex: 1 1 auto;
  }
}

/* "Pusta kartka": chowamy tylko elementy do rysowania */
.services__icon [data-draw] {
  fill: none !important;
  stroke: transparent !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1 !important;
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Gdy karta jest aktywna → rysuj */
.services__icon.is-drawn [data-draw] {
  stroke: currentColor !important;
  stroke-dashoffset: 0 !important;
}

/* kosmetyka (tak jak miałeś) */
.services__icon-wrapper {
  width: 93px;
  height: 93px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 218px;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #FAF7F4;
  box-shadow: 0 4px 4px rgba(202, 200, 200, 0.25);
}

.services__icon {
  width: 93px;
  height: 93px;
  display: block;
  color: #0B0B0C;
}

/* About Process — klik zawsze trafia w kartę */
.about-process .process-grid .progress-fill,
.about-process .process-grid .progress-dot,
.about-process .process-grid [data-decor],
.about-process .process-grid svg,
.about-process .process-grid::before,
.about-process .process-grid::after {
  pointer-events: none;
}

/* header karty nad dekoracjami w 2-kolumnowym układzie (tablet) */
.about-process .process-grid article h3 {
  position: relative;
  z-index: 2;
}

/* otwarta karta nad sąsiadami */
.about-process .process-grid article.is-open {
  z-index: 3;
  position: relative;
}

#callbackSection[hidden] {
  display: none !important;
}

/*# sourceMappingURL=style.css.map */