/* =====================================================================
   STREFA MIESZKAJ - meble na wymiar (Sierpc)
   Arkusz stylów strony głównej.
   Kolejność: 1) tokeny  2) reset i baza  3) nawigacja  4) hero (scroll-story)
   5) kształty kuchni (etapy)  6) sekcje treści  7) stopka  8) responsywność
   ===================================================================== */

/* =====================================================================
   0. KROJE PISMA - z własnego serwera (fonts/), bez Google Fonts.
   Szybciej (bez osobnego połączenia z Google) i zgodnie z RODO (Google nie
   dostaje adresu IP odwiedzającego). Zestawy znaków: latin + latin-ext
   (polskie litery). Czcionki zmienne - jeden plik obsługuje wszystkie grubości.
   font-display: swap = tekst widać od razu, krój podmienia się po wczytaniu.
   ===================================================================== */
/* Cormorant Garamond italic 400 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond italic 400 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond italic 500 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond italic 500 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 400 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 400 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 500 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 500 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 600 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 600 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope normal 300 latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope normal 300 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope normal 400 latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope normal 400 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope normal 500 latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope normal 500 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope normal 600 latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope normal 600 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope normal 700 latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope normal 700 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Special Elite normal 400 latin-ext */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/special-elite-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Special Elite normal 400 latin */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/special-elite-strefa-normal-latin.woff2) format('woff2');   /* kopia z małym "i" w miejscu "I" - patrz NAGŁÓWKI niżej */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   1. TOKENY (zmienne) - jedno miejsce do zmiany kolorów, promieni, cieni
   ===================================================================== */
:root {
  /* Kolory bazowe z makiety: antracyt + złoto/musztarda + biel/kremy */
  --bg:        #f6f3ee;   /* główne tło - ciepła biel */
  --bg-alt:    #efeae1;   /* jaśniejsza sekcja przełamująca */
  --ink:       #14161a;   /* głęboki antracyt (ciemne sekcje) */
  --ink-soft:  #23262b;   /* prawie czarny - nagłówki na jasnym */
  --text:      #4a4e54;   /* tekst akapitowy na jasnym */
  --text-2:    #5a5e64;   /* tekst drugorzędny */
  --muted:     #6c7075;   /* podpisy, etykiety */
  --gold:      #c0954f;   /* złoto/musztarda - główny akcent */
  --gold-deep: #a67c33;   /* ciemniejsze złoto - linki na jasnym tle */
  --gold-text: #86622a;   /* złoto do drobnego tekstu na jasnym tle (kontrast 5:1, WCAG AA) */
  --gold-lite: #d6a860;   /* jaśniejsze złoto - hover */
  --sand:      #dcd6ca;   /* piaskowy - placeholdery, delikatne elementy */
  --line:      rgba(20, 22, 26, .10);   /* cienka linia na jasnym */
  --line-lite: rgba(246, 243, 238, .14); /* cienka linia na ciemnym */

  /* Zaokrąglenia - całość ma być miękka (zmiana względem makiety) */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* Cienie (delikatne, głębokie) */
  --shadow:    0 30px 60px rgba(20, 22, 26, .16);
  --shadow-sm: 0 14px 30px rgba(20, 22, 26, .12);

  /* Krzywa ruchu - JEDEN charakter animacji w całej stronie */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Logo (img/logo/strefa-mieszkaj-logo.png) - złote (#dbbe7c) na przezroczystym
     tle, jeden plik na całą stronę. Na ciemnym tle zostaje oryginalne, na jasnym
     (menu po przewinięciu) przyciemniamy złoto, bo cienkie linie jasnego złota
     na kremowym tle prawie znikają. */
  --logo-na-ciemnym: none;
  --logo-na-jasnym:  brightness(.62) saturate(1.25);
}

/* =====================================================================
   2. RESET I BAZA
   ===================================================================== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* nic nie wychodzi w bok (bezpiecznik dla animacji) */
}

/* Nagłówki: Special Elite (maszynopis z wizytówki klienta) na wszystkich
   h1-h4. Krój ma jedną grubość i nie ma kursywy, więc blokujemy sztuczne
   pogrubienie i skos - wyróżnienia (em) zostają samym kolorem. Znaki
   maszynopisu są szersze niż w Cormorant, dlatego rozmiary nagłówków
   w sekcjach są ok. 20% mniejsze niż wcześniej. */
h1, h2, h3, h4 {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: 400;
  font-synthesis: none;
  margin: 0;
  letter-spacing: .01em;
  line-height: 1.18;
}
h1 em, h2 em, h3 em, h4 em { font-style: normal; }

p { margin: 0; }

a {
  color: var(--gold-deep);
  text-decoration: none;
  transition: color .3s var(--ease);
}
a:hover { color: var(--gold-lite); }

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

::selection { background: var(--gold); color: var(--ink); }

/* Klasa pomocnicza - wyśrodkowany kontener treści */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

/* Nadtytuł sekcji (mała złota etykieta nad H2) */
.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}

/* Odstęp pionowy sekcji */
.section-pad { padding-block: clamp(80px, 11vw, 150px); }

/* =====================================================================
   3. NAWIGACJA (sticky - przyklejona przy scrollu)
   ===================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;                 /* top:0 left:0 right:0 */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(20px, 5vw, 64px);
  background: transparent;
  transition: background .5s var(--ease), box-shadow .5s var(--ease),
              padding .4s var(--ease), backdrop-filter .5s var(--ease);
}
/* Stan przyklejony (dodawany JS-em po przescrollowaniu hero) */
.nav.is-solid {
  background: rgba(246, 243, 238, .96);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 14px;
  backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------------
   LOGO - nagłówek, sekcja "Nasze realizacje", kafelki oferty, stopka.
   Plik: img/logo/strefa-mieszkaj-logo.png (przezroczyste tło).
   Gdyby pliku zabrakło, <img> sam się chowa (onerror="this.hidden=true"),
   a w nagłówku i stopce wraca dotychczasowy napis tekstowy.
   Kolor logo na ciemnym tle: tokeny --logo-na-ciemnym / --logo-na-jasnym.
   --------------------------------------------------------------------- */
.logo__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  filter: var(--logo-na-jasnym);
  transition: filter .5s var(--ease), opacity .4s var(--ease);
}
/* Logo się wczytało -> napis zastępczy znika (nazwę firmy niesie alt obrazka) */
.logo:has(.logo__img:not([hidden])) .logo__txt { display: none; }

/* Logo / marka */
.nav__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* obrazek logo nie rozciąga się na szerokość podpisu */
  line-height: 1;
  color: var(--ink-soft);
  transition: color .5s var(--ease);
}
.nav__brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .5px;
}
.nav__brand-sub {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  opacity: .75;
  margin-top: 3px;
}
/* Logo w nagłówku: wysokość ustalona, szerokość wynika z proporcji pliku,
   a max-width pilnuje, żeby szerokie logo nie wypchnęło menu na telefonie */
.nav__brand .logo__img {
  max-height: 56px;
  max-width: min(200px, 50vw);
}
.nav.on-dark .nav__brand .logo__img { filter: var(--logo-na-ciemnym); }
/* Logo zawiera już nazwę, więc podpis "meble na wymiar" pokazuje się tylko
   razem z napisem zastępczym (gdy pliku logo brak) */
.nav__brand.logo:has(.logo__img:not([hidden])) .nav__brand-sub { display: none; }
@media (max-width: 767px) {
  .nav__brand .logo__img { max-height: 46px; max-width: 52vw; }
}

/* Lista linków */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  font-size: 14px;
  font-weight: 500;
}
.nav__links a { color: var(--ink-soft); padding: 6px 0; }
.nav__links a:hover { color: var(--gold-deep); }

/* Nad ciemnym tłem hero linki są jasne (klasa sterowana JS-em) */
.nav.on-dark .nav__brand,
.nav.on-dark .nav__links > a,
.nav.on-dark .nav__item > a { color: var(--bg); }
.nav.on-dark .nav__links a:hover { color: var(--gold-lite); }

/* Pozycja z rozwijanym menu (Oferta) */
.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__caret { font-size: 9px; opacity: .7; }

/* Dropdown ofert */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: -8px;
  margin-top: 10px;
  min-width: 240px;
  background: var(--bg);
  border-radius: var(--r);
  box-shadow: 0 24px 50px rgba(20, 22, 26, .22);
  overflow: hidden;
  padding: 6px;
  /* domyślnie schowany - pokazujemy na hover/focus */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 1200;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown a {
  display: block;
  padding: 10px 16px;
  color: var(--ink-soft);
  font-size: 13.5px;
  border-radius: var(--r-sm);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__dropdown a:hover { background: var(--bg-alt); color: var(--gold-deep); }

/* Przyciski (współdzielony wygląd) */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
/* Wspólny hover przycisków: delikatne uniesienie + miękki cień
   (transform + boxShadow tylko na hover pojedynczego elementu = OK dla wydajności) */
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 22, 26, .18); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-lite); color: var(--ink); }
.btn--outline { background: transparent; border-color: rgba(246, 243, 238, .45); color: var(--bg); }
.btn--outline:hover { background: rgba(246, 243, 238, .12); border-color: rgba(246, 243, 238, .85); color: var(--bg); }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: var(--gold); color: var(--ink); }
/* "Umów pomiar" w menu. Selektor celowo mocniejszy niż ".nav__links a"
   (padding 6px 0) i niż kolory linków menu - wcześniej tamte reguły zjadały
   boczny margines pigułki i tekst ledwo się w niej mieścił.
   Rozmiar tekstu bez zmian, pigułka ok. 1,7x szersza i 1,55x wyższa. */
.nav .nav__links a.btn.nav__cta {
  padding: 16px 34px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;   /* tekst zawsze w jednej linii... */
  flex-shrink: 0;        /* ...a pigułka nie daje się ścisnąć sąsiednim linkom */
}
.nav .nav__links a.btn.nav__cta:hover { color: var(--ink); }

/* Hamburger (widoczny tylko na mobile) */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  color: var(--ink-soft);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav.on-dark .nav__burger span { color: var(--bg); }

/* =====================================================================
   4. HERO - scroll-story (pin + scrub na desktopie)
   ===================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  min-height: 100vh;
}

/* Scena hero - to ona zostaje przyklejona (GSAP pin na desktopie,
   position:sticky na mobile). Wszystkie warstwy leżą na sobie. */
.hero__stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Canvas z sekwencją klatek - wypełnia całą scenę hero.
   Klatki rysujemy w JS (cover), więc canvas nie potrzebuje object-fit. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Przyciemnienie pod tekstem - czytelność CTA na jasnych klatkach */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(20, 22, 26, .45) 0%,
              rgba(20, 22, 26, .10) 35%,
              rgba(20, 22, 26, .30) 70%,
              rgba(20, 22, 26, .78) 100%);
}

/* Główny napis marki na hero - to samo co logo w nagłówku, tylko duże i na środku.
   GSAP przesuwa go dokładnie na pozycję logo w menu (i tam "chowa"). */
.hero__wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* fallback; GSAP przejmuje transform */
  transform-origin: center center;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--bg);
  line-height: 1;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .45);
  will-change: transform;
  white-space: nowrap;
}
.hero__wordmark:hover { color: var(--bg); }
.hero__wordmark-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(44px, 10vw, 150px);
  letter-spacing: 1px;
}
.hero__wordmark-sub {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(9px, 1.5vw, 20px);
  letter-spacing: .55em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: .55em;
}

/* Przyciemnienie finału - pojawia się pod koniec sekwencji, pod napisem H1 */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(20, 22, 26, .78) 0%, rgba(20, 22, 26, .55) 55%, rgba(20, 22, 26, .35) 100%),
    linear-gradient(180deg, rgba(20, 22, 26, .35), rgba(20, 22, 26, .6));
}

/* Napis finałowy nad winietą + delikatny cień dla czytelności */
.hero__final { z-index: 5; }
.hero__final h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }
.hero__final-sub { text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.hero__final-eyebrow { text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }

/* Preloader klatek - zasłania scenę, póki sekwencja się ładuje */
.hero__preloader {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.hero__preloader.is-hidden { opacity: 0; visibility: hidden; }

/* Rysowany mebel w preloaderze (linia -> korpus -> półka -> nóżki -> linia) */
.pl-svg {
  width: clamp(120px, 22vw, 190px);
  height: auto;
  overflow: visible;
}
.pl-draw {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hero__preloader-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 5vw, 46px);
  color: var(--gold);
  line-height: 1;
}
.hero__preloader-brand {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(246, 243, 238, .55);
}

/* Warstwa finalna - H1 + podtytuł + przyciski CTA */
.hero__final {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
}
.hero__final-eyebrow {
  font-size: 12px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.hero__final h1 {
  font-size: clamp(42px, 7.5vw, 96px);
  color: var(--bg);
  line-height: 1.02;
  max-width: 16ch;
}
.hero__final h1 em { color: var(--gold); font-style: italic; }
.hero__final-sub {
  margin-top: 22px;
  color: rgba(246, 243, 238, .82);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 300;
  max-width: 52ch;
}
.hero__final-cta {
  margin-top: 36px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Telefon w pionie: nagłówek wersalikami w maszynopisie jest szeroki (przy 42 px
   zajmował 7 linii i wypychał nadtytuł pod menu). Mniejszy krój, a warstwa
   zaczyna się pod paskiem menu (ok. 90 px). */
@media (max-width: 767px) {
  .hero__final { padding: 104px 24px 24px; justify-content: safe center; }
  .hero__final h1 { font-size: clamp(28px, 8.8vw, 40px); }
  .hero__final-eyebrow { letter-spacing: 4px; margin-bottom: 14px; }
  .hero__final-sub { margin-top: 16px; }
  .hero__final-cta { margin-top: 24px; gap: 12px; }
}
/* Telefon w poziomie (niski ekran, ok. 320-430 px): całość musi zmieścić się
   pod menu - mniejszy nagłówek w szerszych liniach, przyciski w jednym rzędzie. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero__final { padding: 84px 24px 10px; justify-content: safe center; }
  .hero__final-eyebrow { font-size: 10px; letter-spacing: 3px; margin-bottom: 8px; }
  .hero__final h1 { font-size: clamp(20px, 6.6vh, 28px); max-width: 30ch; }
  .hero__final-sub { margin-top: 8px; font-size: 13px; }
  .hero__final-cta { margin-top: 12px; gap: 10px; flex-wrap: nowrap; }
  .hero__final-cta .btn { padding: 10px 20px; font-size: 14px; }
  .hero__final .ocena-google--hero { margin-top: 10px; }
}

/* Zachęta do scrollowania - myszka z ruchomym kółkiem + strzałki */
.hero__hint {
  position: absolute;
  bottom: clamp(22px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--bg);
  pointer-events: none;
}
/* obrys myszki */
.hero__hint-mysz {
  position: relative;
  width: 30px;
  height: 48px;
  border: 2px solid rgba(246, 243, 238, .85);
  border-radius: 16px;
  display: block;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
/* kółko myszki - jedzie w dół i zanika (sama animacja = transform/opacity) */
.hero__hint-kolko {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 9px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--gold);
  animation: hintKolko 1.8s var(--ease) infinite;
}
@keyframes hintKolko {
  0%        { transform: translateY(0);    opacity: 0; }
  18%       { opacity: 1; }
  70%       { transform: translateY(18px); opacity: 0; }
  100%      { transform: translateY(18px); opacity: 0; }
}
.hero__hint-tekst {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
/* dwie strzałki mrugające jedna po drugiej */
.hero__hint-strzalki { display: flex; flex-direction: column; gap: 2px; color: var(--gold); }
.hero__hint-strzalki svg { width: 20px; height: 12px; display: block; }
.hero__hint-strzalki svg:nth-child(1) { animation: hintStrzalka 1.8s var(--ease) infinite; }
.hero__hint-strzalki svg:nth-child(2) { animation: hintStrzalka 1.8s var(--ease) .2s infinite; }
@keyframes hintStrzalka {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(3px); }
}

/* stary wariant podpowiedzi (zostawiony na wypadek użycia gdzie indziej) */
.hero__hint-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--gold), transparent);
}

/* =====================================================================
   5. O NAS / DUET
   ===================================================================== */
.onas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.onas__figure { position: relative; }
.onas__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.onas__badge {
  position: absolute;
  bottom: -28px;
  left: -28px;
  background: var(--ink);
  color: var(--bg);
  padding: 24px 28px;
  border-radius: var(--r);
  max-width: 230px;
}
.onas__badge-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
}
.onas__badge-txt { display: block; font-size: 13px; margin-top: 6px; opacity: .85; line-height: 1.4; }
.onas h2 { font-size: clamp(26px, 3.1vw, 40px); color: var(--ink-soft); }
.onas p {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  font-weight: 300;
}
.onas__stats { margin-top: 34px; display: flex; gap: 44px; flex-wrap: wrap; }
.onas__stat-k { font-family: 'Cormorant Garamond', serif; font-size: 44px; color: var(--ink-soft); }
.onas__stat-d { display: block; font-size: 13px; color: var(--muted); letter-spacing: 1px; margin-top: 2px; }

/* =====================================================================
   6. OFERTA (kafelki kategorii na ciemnym tle)
   ===================================================================== */
.oferta { background: var(--ink); }
.oferta__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 56px;
}
.oferta__head .eyebrow { color: var(--gold); }
.oferta__head h2 { font-size: clamp(28px, 3.5vw, 46px); color: var(--bg); max-width: 20ch; }
/* Logo nad nagłówkiem "Nasze realizacje" (ciemne tło -> jasna wersja logo) */
.oferta__logo { max-height: 104px; max-width: min(260px, 70vw); margin-bottom: 26px; filter: var(--logo-na-ciemnym); }
.oferta__head p { color: rgba(246, 243, 238, .6); font-size: 15px; font-weight: 300; max-width: 34ch; line-height: 1.7; }

.oferta__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tile {
  position: relative;
  padding: 34px 26px 28px;
  background: #191c21;
  border-radius: var(--r);
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: inherit;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.tile:hover { background: #22262d; transform: translateY(-4px); }
.tile__num { font-size: 12px; letter-spacing: 2px; color: var(--gold); }
.tile h3 { font-size: 21px; color: var(--bg); margin-bottom: 10px; }
.tile p { font-size: 13.5px; color: rgba(246, 243, 238, .55); line-height: 1.6; font-weight: 300; }
/* Znak wodny z logo w prawym dolnym rogu - bardzo słaby, pod tekstem.
   Rozmiar wynika z proporcji pliku, max-* trzymają go w ryzach. */
.tile > span,
.tile > div { position: relative; z-index: 1; }
.tile__logo {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: auto;
  height: auto;
  max-width: 56%;
  max-height: 40%;
  opacity: .07;
  filter: var(--logo-na-ciemnym);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.tile:hover .tile__logo,
.tile.is-focus .tile__logo { opacity: .12; }

/* =====================================================================
   6b. PROCES (4 kroki)
   ===================================================================== */
.proces__head { text-align: center; margin-bottom: 64px; }
.proces__head h2 { font-size: clamp(26px, 3.4vw, 44px); color: var(--ink-soft); }

/* Układ: przyklejona duża cyfra z lewej + przewijane kroki z prawej */
.proces__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}
/* Przyklejona cyfra kroku (zmienia się przy scrollu) */
.proces__aside {
  position: sticky;
  top: 24vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.proces__bignum {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(120px, 16vw, 220px);
  line-height: .9;
  color: var(--gold-deep);   /* kontrast 3,4:1 - wystarcza dla dużych cyfr (WCAG) */
}
.proces__biglabel {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink-soft);
}
/* Zdjęcie kroku w przyklejonym panelu (zmienia się razem z krokiem) */
.proces__foto {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-alt);
  margin-top: 6px;
}
.proces__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proces__foto-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #dcd6ca 0 12px, #d2ccbf 12px 24px);
}
.proces__foto-ph span { font-family: monospace; font-size: 11px; letter-spacing: 2px; color: #8a857a; }
.proces__foto-ph[hidden] { display: none; }

.proces__progress {
  margin-top: 10px;
  width: 100%;
  max-width: 340px;
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.proces__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  border-radius: 3px;
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
/* Kroki jako przewijana lista obok cyfry */
.proces__steps { display: flex; flex-direction: column; }
/* Każdy krok dostaje sporo wysokości - dzięki temu jest aktywny wyraźnie
   dłużej przy scrollu (wcześniej 02 przeskakiwał niezauważony). */
.krok {
  border-top: 1px solid var(--line);
  padding: clamp(34px, 4vw, 54px) 0;
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity .4s var(--ease);
}
.krok:last-child { border-bottom: 1px solid var(--line); }
.krok__num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--gold-deep);   /* kontrast 3,4:1 - wystarcza dla dużych cyfr (WCAG) */
  display: block;
  margin-bottom: 6px;
}
.krok h3 { font-size: clamp(20px, 2.3vw, 27px); color: var(--ink-soft); margin: 0 0 10px; }
.krok p { font-size: 16px; color: var(--text-2); line-height: 1.7; font-weight: 300; max-width: 46ch; }
/* Krok poza fokusem lekko przygaszony (desktop) */
.krok.is-dim { opacity: .4; }

/* =====================================================================
   6c. REALIZACJE (galeria)
   ===================================================================== */
.realizacje { background: var(--bg-alt); }
.realizacje__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 48px;
}
.realizacje__head h2 { font-size: clamp(26px, 3.4vw, 44px); color: var(--ink-soft); }
.realizacje__link { font-size: 14px; font-weight: 600; color: var(--gold-deep); letter-spacing: .5px; }
.galeria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.galeria figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
}
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.galeria figure:hover img { transform: scale(1.05); }
/* Placeholder na zdjęcie realizacji */
.galeria .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #dcd6ca 0 12px, #d2ccbf 12px 24px);
}
.galeria .placeholder span {
  font-size: 11px;
  letter-spacing: 2px;
  color: #8a857a;
  font-family: 'Manrope', monospace;
}
/* Rozmiary kafelków galerii */
.g-4x2 { grid-column: span 4; grid-row: span 2; }
.g-3x2 { grid-column: span 3; grid-row: span 2; }
.g-2x1 { grid-column: span 2; grid-row: span 1; }
.g-3x1 { grid-column: span 3; grid-row: span 1; }

/* =====================================================================
   6d. WSPÓŁPRACE (logo partnerów)
   ===================================================================== */
.wspolprace { text-align: center; }
.wspolprace h2 { font-size: clamp(25px, 3.1vw, 40px); color: var(--ink-soft); max-width: 24ch; margin: 0 auto; }
.loga {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.logo-box {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.logo-box span { font-family: monospace; font-size: 11px; letter-spacing: 2px; color: #a6a196; }

/* =====================================================================
   6e. FAQ (accordion)
   ===================================================================== */
.faq { background: var(--ink); }
.faq__head { text-align: center; margin-bottom: 56px; }
.faq__head .eyebrow { color: var(--gold); }
.faq__head h2 { font-size: clamp(26px, 3.4vw, 44px); color: var(--bg); }
.faq__list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line-lite); }
.faq__item { border-bottom: 1px solid var(--line-lite); }
.faq__q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 6px;
  text-align: left;
  color: var(--bg);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.3;
}
.faq__icon {
  color: var(--gold);
  font-size: 24px;
  flex-shrink: 0;
  transition: transform .35s var(--ease);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
/* Panel odpowiedzi - rozwijany przez grid-template-rows (płynne, bez skoków) */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  padding: 0 6px 26px;
  color: rgba(246, 243, 238, .66);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
}

/* =====================================================================
   6f. KONTAKT (formularz + dane)
   ===================================================================== */
/* Duże CTA typograficzne nad formularzem */
.kontakt__cta { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.kontakt__big {
  font-size: clamp(32px, 5.2vw, 62px);
  color: var(--ink-soft);
  line-height: 1.12;
  max-width: 20ch;
  margin: 6px auto 0;
}
.kontakt__big em { color: var(--gold); font-style: normal; }

.kontakt__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
}
.kontakt__intro { font-size: 17px; line-height: 1.75; color: var(--text); font-weight: 300; max-width: 44ch; }
.kontakt__dane { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; }
.kontakt__label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; }
.kontakt__val { font-size: 19px; color: var(--ink-soft); }

.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #fff;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(20, 22, 26, .1);
}
/* Floating labels - etykieta wjeżdża w górę przy fokusie/wypełnieniu (czysty CSS) */
.form__row { position: relative; }
.form__row input,
.form__row textarea {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--sand);
  background: transparent;
  padding: 22px 2px 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  color: var(--ink-soft);
  outline: none;
  transition: border-color .3s var(--ease);
  resize: vertical;
}
.form__row label {
  position: absolute;
  left: 2px;
  top: 22px;
  font-size: 16px;
  color: var(--muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
/* input/textarea ma placeholder=" ", więc :not(:placeholder-shown) = wypełnione */
.form__row input:focus + label,
.form__row input:not(:placeholder-shown) + label,
.form__row textarea:focus + label,
.form__row textarea:not(:placeholder-shown) + label {
  transform: translateY(-18px) scale(.72);
  color: var(--gold-deep);
}
.form__row input:focus,
.form__row textarea:focus { border-color: var(--gold); }
.form button { margin-top: 8px; width: 100%; border-radius: var(--r-sm); padding: 16px; }
.form button:disabled { opacity: .6; cursor: default; }
.form__note { font-size: 12px; color: #9a958a; text-align: center; }

/* Pułapka na boty - ukryta dla ludzi (także dla czytników ekranu),
   ale nadal wysyłana w formularzu. Nie używamy display:none, bo część
   botów to wykrywa. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Zgoda RODO */
.form__zgoda {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  cursor: pointer;
}
.form__zgoda input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--gold);
  cursor: pointer;
}
.form__zgoda a { color: var(--gold-deep); text-decoration: underline; }

/* Komunikat błędu wysyłki */
.form__err {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--r);
  background: #fdf3f2;
  border: 1px solid #e8c9c5;
  color: #8a3b32;
  font-size: 15px;
  line-height: 1.6;
}
.form__err a { color: #8a3b32; text-decoration: underline; }
/* Komunikat po wysłaniu */
.form__ok {
  background: #fff;
  padding: clamp(40px, 5vw, 60px);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(20, 22, 26, .1);
  text-align: center;
}
.form__ok-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 22px;
}
.form__ok h3 { font-size: 24px; color: var(--ink-soft); }
.form__ok p { margin-top: 12px; font-size: 16px; color: var(--text-2); line-height: 1.7; font-weight: 300; }
[hidden] { display: none !important; }

/* =====================================================================
   7. STOPKA
   ===================================================================== */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(60px, 8vw, 96px) clamp(20px, 5vw, 64px) 40px;
}
.footer__big {
  max-width: 1240px;
  margin: 0 auto clamp(48px, 7vw, 80px);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 7vw, 88px);
  line-height: 1.02;
  color: var(--bg);
}
.footer__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer__brand-name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; }
/* Logo w stopce (ciemne tło -> jasna wersja logo) */
.footer__logo { display: inline-flex; align-items: center; color: var(--bg); }
.footer__logo:hover { color: var(--bg); }
.footer__logo .logo__img { max-height: 110px; max-width: min(240px, 70vw); filter: var(--logo-na-ciemnym); }
.footer__brand p { margin-top: 16px; font-size: 14.5px; line-height: 1.7; color: rgba(246, 243, 238, .55); max-width: 34ch; font-weight: 300; }
.footer__col-title { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer__col-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer__col-links a, .footer__col-links span { color: rgba(246, 243, 238, .7); }
.footer__bottom {
  max-width: 1240px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(246, 243, 238, .12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(246, 243, 238, .4);
}

/* =====================================================================
   8. RESPONSYWNOŚĆ
   ===================================================================== */

/* --- Tablet --- */
@media (max-width: 1024px) {
  .oferta__grid { grid-template-columns: repeat(2, 1fr); }
  .loga { grid-template-columns: repeat(4, 1fr); }
}

/* --- Menu pod hamburgerem: telefony i tablety w pionie (do 959 px).
       Pełne menu w jednej linii mieści się dopiero od ok. 900 px - na iPadzie
       w pionie (768-834 px) pozycje łamały się na dwie linie. --- */
@media (max-width: 959px) {
  /* Menu chowamy pod hamburger */
  .nav__burger { display: flex; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 80px 32px;
    background: var(--bg);
    box-shadow: -20px 0 60px rgba(20, 22, 26, .25);
    transform: translateX(105%);
    transition: transform .4s var(--ease);
    font-size: 18px;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a,
  .nav.on-dark .nav__links > a,
  .nav.on-dark .nav__item > a { color: var(--ink-soft) !important; }
  .nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--bg-alt);
    margin-top: 6px;
    min-width: 0;
    width: 100%;
  }
  .nav__cta { margin-top: 10px; }
}

/* --- Telefon --- */
@media (max-width: 767px) {
  /* Sekcje do jednej kolumny */
  .onas { grid-template-columns: 1fr; }
  .onas__badge { position: static; margin-top: 20px; max-width: none; }
  .oferta__grid { grid-template-columns: 1fr; }
  .kontakt__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .loga { grid-template-columns: repeat(3, 1fr); }

  /* Proces: bez przyklejonej cyfry, kroki jako zwykła lista z własnym numerem */
  .proces__inner { grid-template-columns: 1fr; }
  .proces__aside { display: none; }
  .krok.is-dim { opacity: 1; }   /* na mobile nie przygaszamy */

  /* Galeria: prostszy układ w 2 kolumny */
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .g-4x2, .g-3x2 { grid-column: span 2; grid-row: span 2; }
  .g-2x1, .g-3x1 { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .loga { grid-template-columns: repeat(2, 1fr); }
}

/* --- Redukcja ruchu: bez animacji, od razu stan finalny --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { min-height: 100vh !important; }
  .hero__stage { position: relative !important; top: auto; height: 100vh; }
  * { transition-duration: .001ms !important; }
}

/* =====================================================================
   9. EFEKTY SYGNATUROWE I DODATKI (wg pliku inspiracji)
   ===================================================================== */

/* --- Złote "zamalowanie" kluczowego zdania (sygnatura) ---
   Pseudo-element z tłem złotym wjeżdża scaleX 0->1. Klasę .is-drawn dodaje JS
   przy wejściu w widok. Bez JS/klasy tekst jest po prostu normalny (fallback). */
.highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 .14em;
}
.highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  border-radius: 6px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease);
  z-index: -1;
}
.highlight.is-drawn::before { transform: scaleX(1); }
/* Gdy złote tło już wjedzie, tekst musi być ciemny - czytelność także
   w ciemnych sekcjach, gdzie tekst jest domyślnie jasny. */
.highlight { transition: color .3s var(--ease) .35s; }
.highlight.is-drawn { color: var(--ink); }

/* --- Przycisk z wypełnieniem "sweep" przy hover (ten sam mechanizm co highlight) --- */
.btn--sweep { position: relative; overflow: hidden; isolation: isolate; }
.btn--sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
  z-index: -1;
}
.btn--sweep:hover { color: var(--ink); }
.btn--sweep:hover::before { transform: scaleX(1); }

/* --- Liczniki w sekcji O nas --- */
.onas__liczby { margin-top: 28px; display: flex; gap: 44px; flex-wrap: wrap; }
.onas__liczby .onas__stat-k { color: var(--gold-deep); }

/* --- Oferta: hover premium (podkreślenie tytułu + strzałka) --- */
.tile { overflow: hidden; }
.tile h3 { position: relative; display: inline-block; }
.tile h3::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease);
}
.tile:hover h3::after { transform: scaleX(1); }
.tile::after {
  content: "→";
  position: absolute;
  top: 34px; right: 26px;
  color: var(--gold);
  font-size: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.tile:hover::after { opacity: 1; transform: translateX(0); }

/* --- Współprace: zdanie kontekstu pod nagłówkiem --- */
.wspolprace__ctx {
  max-width: 62ch;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  font-weight: 300;
}

/* --- FAQ: numeracja pytań + podświetlenie aktywnego --- */
.faq__q-text { display: inline-flex; align-items: baseline; gap: 16px; }
.faq__num {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--gold);
  flex-shrink: 0;
}
.faq__item {
  border-left: 2px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.faq__q { padding-left: 16px; }
.faq__item.is-open { background: rgba(192, 149, 79, .05); border-left-color: var(--gold); }

/* --- Galeria: zapas wysokości na paralaksę zdjęć --- */
.galeria figure img { height: 112%; }

/* --- Reveal tekstu słowo po słowie (data-split) --- */
[data-split] .word { display: inline-block; will-change: transform; }


/* =====================================================================
   12. GALERIA POZIOMA (realizacje na stronie głównej)
   Desktop: sekcja przypięta, zdjęcia jadą w bok razem ze scrollem.
   Telefon: zwykła siatka pionowa (bez pinu = lżej i pewniej).
   ===================================================================== */
.hgal { position: relative; }
.hgal__track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hgal__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg-alt);
  cursor: zoom-in;
}
.hgal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.hgal__item:hover img { transform: scale(1.05); }
.hgal__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 16px 13px;
  font-size: 12.5px;
  color: var(--bg);
  background: linear-gradient(to top, rgba(20, 22, 26, .75), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.hgal__item:hover figcaption { opacity: 1; transform: translateY(0); }

/* Telefon: proporcje kafelków w siatce */
@media (max-width: 767px) {
  .hgal__item { aspect-ratio: 4 / 5; }
  .hgal__item--l { grid-column: span 2; aspect-ratio: 4 / 3; }
}

/* Desktop: jeden poziomy pas o nierównych wysokościach */
@media (min-width: 768px) {
  .hgal { overflow: hidden; }
  .hgal__track {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.6vw, 22px);
    height: 62vh;
    width: max-content;
    will-change: transform;
  }
  .hgal__item { flex: 0 0 auto; height: 100%; }
  .hgal__item--l { width: clamp(320px, 30vw, 470px); height: 100%; }
  .hgal__item--m { width: clamp(240px, 22vw, 350px); height: 80%; }
  .hgal__item--s { width: clamp(200px, 18vw, 290px); height: 62%; }
  .hgal__item--low { align-self: flex-end; }
}

/* =====================================================================
   12b. PASEK POSTĘPU (hero + galeria pozioma)
   Pokazuje, ile zostało do końca sekcji, która "trzyma" ekran.
   Celowo wyraźny: gruby pasek + procent + podpis, co się właśnie dzieje.
   ===================================================================== */
.progres {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;                 /* nad menu (1000) */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
}
.progres.is-widoczny { opacity: 1; visibility: visible; transform: translateY(0); }

/* tor paska - ciemny, żeby złote wypełnienie było dobrze widoczne */
.progres__tor {
  height: 6px;
  width: 100%;
  background: rgba(20, 22, 26, .55);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.progres__wypelnienie {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--gold-lite));
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 14px rgba(192, 149, 79, .75);
}

/* etykieta pod paskiem: kropka + co się dzieje + procent.
   Umieszczona PONIŻEJ nawigacji (nav ma ~95 px z większym przyciskiem
   "Umów pomiar" i logo), żeby nie nachodziła na menu. */
.progres__etykieta {
  position: absolute;
  top: 108px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(192, 149, 79, .35);
  color: var(--bg);
  font-size: 12px;
  letter-spacing: .8px;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.progres__etykieta b { color: var(--gold); font-size: 13px; font-variant-numeric: tabular-nums; }
/* pulsująca kropka - sygnał "to się dzieje teraz" */
.progres__kropka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: progresPuls 1.4s ease-in-out infinite;
}
@keyframes progresPuls {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}

@media (max-width: 767px) {
  .progres__tor { height: 5px; }
  /* nav na telefonie ma ~86 px (z logo ~93 px), etykieta schodzi niżej */
  .progres__etykieta { font-size: 11px; padding: 6px 13px; gap: 8px; top: 104px; }
}
/* Finał hero (kuchnia gotowa, nagłówek na ekranie): etykieta zasłaniałaby
   nadtytuł, więc znika - zostaje sam pasek u góry. Klasę ustawia main.js. */
.progres__etykieta { transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.progres.is-final .progres__etykieta { opacity: 0; visibility: hidden; }

/* Redukcja ruchu: bez pulsowania i animacji podpowiedzi */
@media (prefers-reduced-motion: reduce) {
  .progres__kropka,
  .hero__hint-kolko,
  .hero__hint-strzalki svg { animation: none; }
}

/* =====================================================================
   13. LIGHTBOX (podgląd zdjęcia na pełnym ekranie)
   ===================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(12, 13, 16, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  object-fit: contain;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(246, 243, 238, .1);
  border: 1px solid rgba(246, 243, 238, .25);
  color: var(--bg);
  cursor: pointer;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  font-family: 'Manrope', sans-serif;
  line-height: 1;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: scale(1.08); }
.lightbox__close {
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 3vw, 30px);
  width: 46px; height: 46px;
  font-size: 26px;
}
.lightbox__nav {
  top: 50%;
  margin-top: -27px;
  width: 54px; height: 54px;
  font-size: 30px;
  padding-bottom: 4px;
}
.lightbox__nav--prev { left: clamp(10px, 2.5vw, 30px); }
.lightbox__nav--next { right: clamp(10px, 2.5vw, 30px); }
.lightbox__licznik {
  position: absolute;
  bottom: clamp(14px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(246, 243, 238, .75);
  font-size: 13px;
  letter-spacing: 2px;
}
/* Zdjęcia w siatkach podstron też są klikalne */
.foto-grid figure:not(.placeholder) { cursor: zoom-in; }


/* =====================================================================
   10. SEKCJE Z BRIEFU (manifest, wyróżniki, opinie) + realne zdjęcia
   ===================================================================== */

/* Manifest - duża typografia, dużo powietrza (obawa klientki o nadmiar) */
.manifest { text-align: center; }
.manifest__text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(23px, 2.9vw, 38px);   /* dłuższy tekst manifestu = mniejszy krój */
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 22em;                        /* ok. 50 znaków w linii */
  margin: 0 auto;
  font-weight: 500;
}
/* STREFA i MIESZKAJ - gra nazwą marki: maszynopis jak w logo + złote zamalowanie */
.manifest__text .highlight {
  white-space: nowrap;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: 400;
  font-size: .9em;
  letter-spacing: .04em;
}

/* Co nas wyróżnia */
.wyroznia__head { text-align: center; margin-bottom: 56px; }
.wyroznia__head h2 { font-size: clamp(26px, 3.4vw, 44px); color: var(--ink-soft); }

/* --- Accordion wyróżników (auto-przełączany, wzór z sekcji procesu Tech-Gres) --- */
.wyr-lista { border-top: 1px solid var(--line); }
.wyr-item { border-bottom: 1px solid var(--line); }
.wyr-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  padding: clamp(20px, 2.4vw, 30px) 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.wyr-item__num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  color: var(--sand);
  flex-shrink: 0;
  transition: color .4s var(--ease);
}
.wyr-item__title {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: clamp(17px, 1.9vw, 24px);
  color: var(--muted);
  line-height: 1.25;
  transition: color .4s var(--ease);
}
.wyr-item.is-active .wyr-item__num   { color: var(--gold); }
.wyr-item.is-active .wyr-item__title { color: var(--ink-soft); }

/* Rozwijanie bez animowania height (grid-template-rows 0fr -> 1fr) */
.wyr-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.wyr-item.is-active .wyr-item__body { grid-template-rows: 1fr; }
.wyr-item__inner { overflow: hidden; }
.wyr-item__inner > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
  font-weight: 300;
  max-width: 52ch;
  padding-bottom: 20px;
}
/* Zdjęcie obok tekstu na desktopie */
@media (min-width: 768px) {
  .wyr-item__inner {
    display: grid;
    grid-template-columns: 1fr .85fr;
    grid-template-areas: "txt media" "bar bar";
    gap: 0 clamp(24px, 4vw, 56px);
    align-items: start;
  }
  .wyr-item__inner > p     { grid-area: txt; }
  .wyr-item__media         { grid-area: media; }
  .wyr-item__inner .wyr-bar{ grid-area: bar; }
}
.wyr-item__media {
  overflow: hidden;
  border-radius: var(--r);
  margin-bottom: 20px;
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
}
.wyr-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pasek odliczania do następnego punktu */
.wyr-bar {
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 22px;
}
.wyr-bar__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
}
.wyroznia__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.wyroznik { border-top: 2px solid var(--gold); padding-top: 22px; }
.wyroznik__num { font-family: 'Cormorant Garamond', serif; font-size: 40px; color: var(--sand); line-height: 1; display: block; margin-bottom: 8px; }
.wyroznik h3 { font-size: 18px; color: var(--ink-soft); margin: 0 0 10px; }
.wyroznik p { font-size: 15px; color: var(--text-2); line-height: 1.7; font-weight: 300; }

/* Proces - zdanie wprowadzające */
.proces__lead { margin: 18px auto 0; font-size: 17px; line-height: 1.7; color: var(--text); font-weight: 300; max-width: 62ch; }

/* Galeria - podpisy lokalizacji (SEO), pokazują się na hover */
.galeria figure { position: relative; }
.galeria figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 18px 14px;
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--bg);
  background: linear-gradient(to top, rgba(20, 22, 26, .72), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.galeria figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* Opinie klientów */
.opinie { background: var(--bg-alt); }
.opinie__head { text-align: center; margin-bottom: 56px; }
.opinie__head h2 { font-size: clamp(25px, 3.1vw, 40px); color: var(--ink-soft); }
.opinie__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.opinia {
  margin: 0;
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.opinia p { font-family: 'Cormorant Garamond', serif; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45; color: var(--ink-soft); }
.opinia p::before { content: "\201E"; color: var(--gold); }
.opinia p::after { content: "\201D"; color: var(--gold); }
.opinia cite { font-style: normal; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-text); margin-top: auto; }

/* Logo partnerów - klikalne. Najechanie: kafelek rośnie i wychodzi na wierzch,
   a sąsiedzi delikatnie ustępują mu miejsca (tylko transformy = tanio). */
.loga { position: relative; }
.logo-box {
  position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.logo-box img {
  max-width: 72%;
  max-height: 54%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .65;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.logo-box:hover img { filter: none; opacity: 1; }
@media (hover: hover) {
  .logo-box:hover {
    transform: scale(1.55);
    z-index: 5;
    box-shadow: var(--shadow);
    border-color: var(--gold);
  }
  /* sąsiedzi po prawej odsuwają się w prawo... */
  .logo-box:hover ~ .logo-box { transform: translateX(16px); }
  /* ...a ci po lewej w lewo (:has - wspierane przez aktualne przeglądarki) */
  .logo-box:has(~ .logo-box:hover) { transform: translateX(-16px); }
}

/* Przyciski pod opiniami (Google) */
.opinie__akcje {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA pod listą FAQ */
.faq__cta {
  max-width: 900px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
}
.faq__cta p {
  color: rgba(246, 243, 238, .7);
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 18px;
}

/* Wyróżniony telefon i e-mail w kontakcie */
.kontakt__glowny {
  display: block;
  padding: 18px 22px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.kontakt__glowny:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 16px 34px rgba(20, 22, 26, .14);
}
.kontakt__glowny-val {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  color: var(--ink-soft);
  margin-top: 2px;
}
.kontakt__glowny:hover .kontakt__glowny-val { color: var(--gold-deep); }

/* Kafelek oferty podświetlony na mobile, gdy jest na środku ekranu */
.tile.is-focus { background: #22262d; transform: translateY(-4px); }
.tile.is-focus h3::after { transform: scaleX(1); }
.tile.is-focus::after { opacity: 1; transform: translateX(0); }

/* Kontakt - dane jako klikalne linki */
a.kontakt__val { color: var(--ink-soft); }
a.kontakt__val:hover { color: var(--gold-deep); }

/* Responsywność nowych sekcji */
@media (max-width: 1024px) {
  .wyroznia__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .wyroznia__grid { grid-template-columns: 1fr; }
  .opinie__grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   11. PODSTRONY (oferta, o nas, realizacje, kontakt, prawne)
   ===================================================================== */

/* Nagłówek podstrony - ciemny, ze zdjęciem tła i przyciemnieniem */
.subhero {
  position: relative;
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}
.subhero__media { position: absolute; inset: 0; z-index: 0; }
.subhero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.subhero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,22,26,.55) 0%, rgba(20,22,26,.5) 45%, rgba(20,22,26,.82) 100%);
}
.subhero__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(130px, 20vh, 190px);
  padding-bottom: clamp(56px, 9vh, 96px);
}
.subhero .eyebrow { color: var(--gold); }
.subhero h1 { font-size: clamp(38px, 6vw, 76px); color: var(--bg); line-height: 1.04; max-width: 20ch; }
.subhero h1 em { color: var(--gold); font-style: normal; }
.subhero__lead { margin-top: 20px; font-size: clamp(16px, 1.6vw, 19px); font-weight: 300; color: rgba(246,243,238,.82); max-width: 58ch; line-height: 1.7; }
.subhero__crumbs { margin-bottom: 18px; font-size: 12.5px; letter-spacing: .5px; color: rgba(246,243,238,.55); }
.subhero__crumbs a { color: rgba(246,243,238,.7); }
.subhero__crumbs a:hover { color: var(--gold-lite); }

/* Nagłówek sekcji (generyczny) */
.sec-head { margin-bottom: clamp(32px, 5vw, 52px); }
.sec-head h2 { font-size: clamp(25px, 3.1vw, 40px); color: var(--ink-soft); line-height: 1.18; max-width: 26ch; }

/* Blok tekstu */
.prose { max-width: 64ch; }
.prose p { font-size: 17px; line-height: 1.8; color: var(--text); font-weight: 300; margin-top: 18px; }
.prose p:first-child { margin-top: 0; }
.prose .highlight { white-space: nowrap; }

/* Układ dwukolumnowy (tekst + lista / zdjęcie) */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.split2--center { align-items: center; }
.split2 img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* Lista cech z checkmarkiem */
.cechy { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.cechy li { position: relative; padding-left: 40px; font-size: 16px; line-height: 1.65; color: var(--text-2); font-weight: 300; }
.cechy li strong { color: var(--ink-soft); font-weight: 600; }
.cechy li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

/* Siatka zdjęć (galeria kategorii / portfolio) */
.foto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.foto-grid figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--bg-alt); }
.foto-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.foto-grid figure:hover img { transform: scale(1.05); }
.foto-grid .placeholder { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #dcd6ca 0 12px, #d2ccbf 12px 24px); }
.foto-grid .placeholder span { font-size: 11px; letter-spacing: 2px; color: #8a857a; font-family: monospace; text-align: center; padding: 12px; }

/* Pasek CTA (dół podstron) */
.cta-band {
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  border-radius: var(--r-xl);
  padding: clamp(48px, 7vw, 92px) clamp(24px, 5vw, 64px);
}
.cta-band .eyebrow { color: var(--gold); }
.cta-band h2 { font-size: clamp(25px, 3.4vw, 42px); color: var(--bg); max-width: 26ch; margin: 0 auto; line-height: 1.18; }
.cta-band h2 em { color: var(--gold); font-style: normal; }
.cta-band p { margin-top: 16px; color: rgba(246,243,238,.75); font-weight: 300; font-size: 17px; max-width: 52ch; margin-left: auto; margin-right: auto; line-height: 1.7; }
.cta-band__actions { margin-top: 32px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Cytat wyróżniony (O nas) */
.cytat {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 28px;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  color: var(--ink-soft);
}

/* Strona prawna / tekstowa */
.legal { max-width: 820px; }
.legal h2 { font-size: clamp(19px, 2.3vw, 25px); color: var(--ink-soft); margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 16px; color: var(--ink-soft); margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.8; color: var(--text); font-weight: 300; }
.legal p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin-top: 12px; }
.legal a { color: var(--gold-deep); }

@media (max-width: 1024px) {
  .foto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .split2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foto-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WZÓR TŁA - ukośna kratka od klienta (zagnieżdżone romby).
   img/tlo-kratka.png to jeden okres wzoru (162x125 px) wycięty
   z pliku, który przysłał klient: 3 KB zamiast 111 KB, kafelkuje
   się bez szwów. Wzór ma własną przezroczystość i kolor
   rgb(227,198,128) przy ~7% krycia, więc kolor sekcji dalej
   pochodzi z CSS. Ciemne sekcje (.oferta, .faq) zostają czyste -
   na antracycie kratka robiłaby się brudna.
   Ten blok musi stać PO regułach .realizacje/.opinie itd., bo one używają
   skrótu "background", który wyzerowałby background-image.
   ============================================================ */
.manifest,
.wspolprace,
.realizacje,
.opinie {
  background-image: url("../img/tlo-kratka.png");
  background-repeat: repeat;
  background-size: 162px 125px;   /* 1:1 z kafelkiem - wzór zachowuje ostrość */
}

/* Na telefonie kratka nieco drobniejsza, żeby nie dominowała nad treścią */
@media (max-width: 767px) {
  .manifest,
  .wspolprace,
  .realizacje,
  .opinie {
    background-size: 120px 93px;
  }
}

/* ============================================================
   WSKAŹNIK DOCIĄGANIA KLATEK HERO
   Strona odsłania się po kilku pierwszych klatkach, reszta sekwencji
   leci w tle. Ten pasek w rogu informuje, że coś jeszcze się ładuje -
   ma być widoczny, ale nie może walczyć o uwagę z treścią.
   ============================================================ */
.hero__dociaganie {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;              /* pod paskiem postępu (1500), nad treścią */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--r-pill, 999px);
  background: rgba(20, 22, 26, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;       /* nie zasłania klikania */
}

.hero__dociaganie-txt {
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(246, 243, 238, .85);
  white-space: nowrap;
}

.hero__dociaganie-tor {
  position: relative;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: rgba(246, 243, 238, .22);
  overflow: hidden;
}

.hero__dociaganie-bar {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 560px) {
  .hero__dociaganie { right: 12px; bottom: 12px; padding: 8px 12px; }
  .hero__dociaganie-txt { font-size: 11px; }
  .hero__dociaganie-tor { width: 42px; }
}

/* ============================================================
   SPECIAL ELITE - czcionka maszynowa z wizytówki klienta.
   Od 12.09.2026 na WSZYSTKICH nagłówkach (decyzja klientki): reguła
   bazowa h1-h4 jest w sekcji 2, a tytuły wyróżników, pytania FAQ
   i etykieta kroku procesu mają krój przy swoich regułach.
   Tutaj zostają tylko nazwy zakładek (H1 podstron) wersalikami.
   ============================================================ */

/* Nazwy zakładek wersalikami. Maszynopis w wersalikach jest gęsty,
   więc dostaje więcej światła między literami i wierszami. */
.subhero h1 {
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.16;
  max-width: 26ch;               /* znaki maszynopisu są szersze niż w Cormorant */
  font-size: clamp(30px, 4.6vw, 58px);
}

/* Special Elite nie ma kursywy - przeglądarka wygenerowałaby sztuczny
   skos, który przy maszynopisie wygląda źle. Wyróżnienie zostaje kolorem. */
.hero__final h1 em,
.subhero h1 em {
  font-style: normal;
}

/* ============================================================
   KADRY PIONOWE
   Klient fotografuje telefonem, więc prawie cały materiał to 9:16.
   W poziomych kontenerach zdjęcia traciły przy kadrowaniu nawet 58%
   (galerie podstron) i 65% (wyróżniki). Poniżej kadry przestawione
   na pionowe - najwięcej zyskują galerie, gdzie 100% zdjęć jest pionowych.
   Blok na końcu pliku, żeby nadpisać wcześniejsze aspect-ratio.
   ============================================================ */

/* Galerie na podstronach: wszystkie zdjęcia pionowe, więc pionowy kadr */
.foto-grid figure { aspect-ratio: 3 / 4; }

/* Na telefonie galeria ma jedną kolumnę - tam mieści się pełny kadr 9:16,
   czyli dokładnie to, co wyszło z aparatu. Zero ucinania. */
@media (max-width: 560px) {
  .foto-grid figure { aspect-ratio: 9 / 16; }
}

/* Wyróżniki: materiał mieszany (pionowe i kwadratowe), więc lekki pion
   zamiast szerokiego 16/10 - kompromis, który nie masakruje żadnego z nich */
.wyr-item__media { aspect-ratio: 4 / 5; }

/* Galeria realizacji na home - kafle węższe, przez co bardziej pionowe.
   Wysokości (100/80/62%) zostają, bo na nich opiera się rytm kolażu. */
@media (min-width: 768px) {
  .hgal__item--l { width: clamp(260px, 24vw, 380px); }
  .hgal__item--m { width: clamp(190px, 17vw, 275px); }
  .hgal__item--s { width: clamp(160px, 14vw, 230px); }
}

/* Mobilna siatka realizacji: wyrównana do pionu, także kafel wyróżniony */
@media (max-width: 767px) {
  .hgal__item--l { aspect-ratio: 4 / 5; }
}

/* Podpis autora strony w stopce - dyskretny, ale z wyraźnym linkiem */
.footer__autor { color: rgba(246, 243, 238, .55); }
.footer__autor a {
  color: rgba(246, 243, 238, .8);
  border-bottom: 1px solid rgba(192, 149, 79, .5);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__autor a:hover { color: var(--gold-lite); border-color: var(--gold-lite); }

/* =====================================================================
   14. DODATKI PRZED TESTAMI NA VH (16.09.2026)
   ocena Google, taśma Instagrama, mapa, zgody na cookies, polityka
   ===================================================================== */

/* Tekst tylko dla czytników ekranu */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Ocena w Google (hero + sekcja opinii) --- */
.gwiazdki { color: var(--gold); letter-spacing: 2px; font-size: 15px; line-height: 1; }
.ocena-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.ocena-google b { font-weight: 700; }
@media (max-width: 560px) {
  .ocena-google { flex-wrap: wrap; justify-content: center; gap: 4px 10px; text-align: center; }
}
.ocena-google:hover { color: var(--ink-soft); transform: translateY(-2px); border-color: var(--gold); }
.ocena-google--hero {
  background: rgba(20, 22, 26, .45);
  border-color: rgba(246, 243, 238, .28);
  color: var(--bg);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: none;
}
.ocena-google--hero:hover { color: var(--bg); }

/* Opinie przeniesione na dół strony - gwiazdki w karcie */
.opinia .gwiazdki { font-size: 14px; }

/* --- Social media: nieskończona taśma zdjęć ---
   Bez JS taśmę przewija się zwykłym paskiem przewijania.
   Klasa .is-petla (dodaje ją JS po sklonowaniu kafli): ruch i przeciąganie
   prowadzi GSAP (js/main.js, sekcja 9), CSS tylko chowa pasek i ustawia kursor. */
.social__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.social__head h2 { font-size: clamp(26px, 3.4vw, 44px); color: var(--ink-soft); }
.social__lead { margin-top: 14px; max-width: 52ch; font-size: 16px; line-height: 1.7; color: var(--text-2); font-weight: 300; }
.social__linki { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.social__link { font-weight: 600; font-size: 14px; color: var(--gold-deep); }

.social__tasma {
  margin-top: clamp(36px, 5vw, 56px);
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 clamp(20px, 5vw, 64px) 8px;
}
.social__tasma.is-petla {
  /* clip, nie hidden: przy fokusie z klawiatury przeglądarka nie może sama
     przewinąć taśmy - pozycję trzyma wyłącznie GSAP (hidden = starsze Safari) */
  overflow: hidden;
  overflow: clip;
  padding: 0;
  cursor: grab;
  /* pion zostaje dla przewijania strony, poziomy ruch palca przesuwa taśmę */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.social__tasma.is-petla .social__kafel { cursor: inherit; -webkit-tap-highlight-color: transparent; }
.social__tasma.is-petla img { -webkit-user-drag: none; }
.social__tasma.is-ciagnieta { cursor: grabbing; }
.social__tor { display: flex; gap: 14px; width: max-content; }
.social__tasma.is-petla .social__tor { will-change: transform; }

.social__kafel {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(170px, 19vw, 250px);
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-alt);
}
.social__kafel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.social__kafel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 22, 26, .55), transparent 55%);
  opacity: .6;
  transition: opacity .35s var(--ease);
}
.social__kafel:hover img, .social__kafel:focus-visible img { transform: scale(1.06); }
.social__kafel:hover::after, .social__kafel:focus-visible::after { opacity: 1; }
.social__kafel:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.social__ikona {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
}
.social__kropka { fill: #fff; stroke: none; }

/* --- Mapa Google na stronie kontaktu --- */
.mapa { margin-top: clamp(56px, 8vw, 96px); }
.mapa__head { max-width: 62ch; margin-bottom: 24px; }
.mapa__head h2 { font-size: clamp(25px, 3.1vw, 40px); color: var(--ink-soft); }
.mapa__head p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--text-2); font-weight: 300; }
.mapa__ramka {
  position: relative;
  aspect-ratio: 16 / 7;
  min-height: 320px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: var(--bg-alt);
  background-image: url("../img/tlo-kratka.png");
  background-size: 162px 125px;
}
.mapa__ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__ramka.is-wlaczona .mapa__zgoda { display: none; }
.mapa__zgoda {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.mapa__zgoda p { max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.mapa__zgoda .mapa__zgoda-tytul { font-family: 'Special Elite', 'Courier New', monospace; font-size: 20px; color: var(--ink-soft); }
.mapa__zgoda-akcje { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.mapa__link { font-weight: 600; font-size: 14px; }
@media (max-width: 767px) {
  .mapa__ramka { aspect-ratio: 4 / 5; }
}

/* --- Zgody na cookies: baner (układ wg wzoru KU.drones, kolory Strefy) ---
   Jeden baner: tekst + "Akceptuję wszystko" / "Odrzucam wszystko" / "Ustawienia".
   "Ustawienia" rozwija kategorie z przełącznikami i listą plików. Rozwinięty baner
   bywa wyższy niż ekran telefonu - wtedy przewija się w środku. */
.zgody {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2vw, 24px);
  z-index: 1900;                 /* nad paskiem postępu (1500), pod lightboxem (2000) */
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--bg);
  border: 1px solid rgba(192, 149, 79, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: translateX(-50%);
  animation: zgodyWjazd .45s var(--ease) both;
}
.zgody[hidden], .zgody [hidden] { display: none !important; }
@keyframes zgodyWjazd { from { opacity: 0; transform: translate(-50%, 16px); } }
.zgody a { color: var(--gold-lite); text-decoration: underline; text-underline-offset: 2px; }
.zgody__glowna { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.zgody__tekst { flex: 1 1 340px; }
.zgody__tytul { font-family: 'Special Elite', 'Courier New', monospace; font-size: 18px; color: var(--gold-lite); margin-bottom: 8px; }
.zgody__opis { font-size: 13.5px; line-height: 1.6; color: rgba(246, 243, 238, .82); }
.zgody__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zgody__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  font: 600 14px/1.2 'Manrope', sans-serif;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.zgody__btn:hover { background: var(--gold-lite); border-color: var(--gold-lite); }
.zgody__btn:focus-visible { outline: 2px solid var(--gold-lite); outline-offset: 3px; }
.zgody__btn--obrys { background: transparent; color: var(--bg); border-color: rgba(246, 243, 238, .45); }
.zgody__btn--obrys:hover { background: rgba(246, 243, 238, .1); border-color: var(--bg); }
.zgody__btn--ustawienia { background: transparent; border-color: transparent; color: var(--gold-lite); padding-left: 10px; padding-right: 10px; }
.zgody__btn--ustawienia:hover { background: transparent; border-color: transparent; color: var(--bg); }
.zgody__btn svg, .zgody__kat-wiecej svg { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); }
.zgody__btn--ustawienia[aria-expanded="true"] svg,
.zgody__kat-rozwin[aria-expanded="true"] svg { transform: rotate(180deg); }

/* rozwinięte ustawienia: kategorie + lista plików */
.zgody__ustawienia { margin-top: 18px; border-top: 1px solid var(--line-lite); }
.zgody__kat { padding: 14px 0; border-bottom: 1px solid var(--line-lite); }
.zgody__kat-glowa { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.zgody__kat-rozwin {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--bg);
  font: inherit;
  text-align: left;
}
button.zgody__kat-rozwin { cursor: pointer; }
button.zgody__kat-rozwin:focus-visible { outline: 2px solid var(--gold-lite); outline-offset: 3px; border-radius: 4px; }
.zgody__kat-nazwa { font-family: 'Special Elite', 'Courier New', monospace; font-size: 16px; }
.zgody__kat-wiecej { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--gold-lite); }
.zgody__zawsze { font-size: 12.5px; font-weight: 600; color: rgba(246, 243, 238, .55); white-space: nowrap; }
.zgody__kat-opis { margin-top: 4px; max-width: 68ch; font-size: 13px; line-height: 1.55; color: rgba(246, 243, 238, .72); }
.zgody__pliki { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.zgody__plik { padding: 10px 14px; border-radius: var(--r-sm); background: rgba(246, 243, 238, .05); border: 1px solid var(--line-lite); }
.zgody__plik-gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.zgody__plik code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; font-weight: 600; color: var(--bg); word-break: break-all; }
.zgody__plik-gora span { font-size: 12px; color: rgba(246, 243, 238, .55); }
.zgody__plik p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: rgba(246, 243, 238, .72); }
.zgody__plik .zgody__plik-kto { margin-top: 2px; color: rgba(246, 243, 238, .5); }
.zgody__zapis { display: flex; justify-content: flex-end; padding-top: 16px; }

/* przełącznik kategorii */
.zgody__przelacznik { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.zgody__przelacznik input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zgody__tor { position: relative; width: 44px; height: 24px; border-radius: 99px; background: rgba(246, 243, 238, .22); transition: background .2s var(--ease); }
.zgody__tor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .2s var(--ease);
}
.zgody__przelacznik input:checked + .zgody__tor { background: var(--gold); }
.zgody__przelacznik input:checked + .zgody__tor::after { transform: translateX(20px); }
.zgody__przelacznik input:focus-visible + .zgody__tor { outline: 2px solid var(--gold-lite); outline-offset: 3px; }

/* ikonka cookies w lewym dolnym rogu - ustawienia w każdej chwili */
.zgody-ikona {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1850;                 /* pod banerem */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-lite);
  border: 1px solid rgba(192, 149, 79, .45);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.zgody-ikona:hover { transform: translateY(-2px); color: var(--bg); border-color: var(--gold-lite); }
.zgody-ikona:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.zgody-ikona svg { width: 21px; height: 21px; }

@media (max-width: 600px) {
  .zgody { padding: 16px 16px 14px; bottom: 10px; }
  .zgody__glowna { flex-direction: column; align-items: stretch; gap: 12px; }
  /* w kolumnie flex-basis liczyłby się jako wysokość tekstu - pusty pas pod spodem */
  .zgody__tekst { flex: none; }
  .zgody__tytul { font-size: 16px; margin-bottom: 6px; }
  .zgody__opis { font-size: 12.5px; line-height: 1.5; }
  /* "Akceptuję" i "Odrzucam" obok siebie, równej szerokości; "Ustawienia" pod nimi */
  .zgody__akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .zgody__btn { padding: 10px 8px; font-size: 13.5px; }
  .zgody__btn--ustawienia { grid-column: 1 / -1; padding: 4px 8px; }
  .zgody__zapis .zgody__btn { flex: 1 1 100%; }
  .zgody__kat-glowa { align-items: flex-start; }
  .zgody-ikona { left: 12px; bottom: 12px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .zgody { animation: none; }
}

/* --- Stopka: "Ustawienia cookies" --- */
.footer__cookies {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(246, 243, 238, .6);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer__cookies:hover { color: var(--gold-lite); }

/* --- Polityka prywatności: tabela cookies (przewijana na telefonie) --- */
.legal__tabela { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.legal table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.legal th, .legal td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; color: var(--text); }
.legal th { background: var(--bg-alt); color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.legal tr:last-child td { border-bottom: 0; }
.legal code { padding: 1px 5px; border-radius: 4px; background: var(--bg-alt); font-size: 13px; }
.legal .btn { margin-top: 16px; }
.legal__data { color: var(--muted); font-size: 14px; }

/* =====================================================================
   15. POPRAWKI NA TELEFONIE (17.09.2026)
   Menu boczne, "Oferta" bez linku, przyklejone zdjęcie w sekcji procesu,
   kafelki 2 w rzędzie na stronie Realizacje.
   ===================================================================== */

/* --- "Oferta" jest przyciskiem, nie linkiem (klik w nią nie przenosi nigdzie,
       tylko rozwija kategorie). Ma wyglądać dokładnie jak sąsiednie pozycje. --- */
.nav .nav__links button.nav__oferta {
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
}
.nav.on-dark .nav__links button.nav__oferta { color: var(--bg); }
.nav .nav__links button.nav__oferta:hover { color: var(--gold-deep); }
.nav.on-dark .nav__links button.nav__oferta:hover { color: var(--gold-lite); }
.nav__caret { display: inline-block; transition: transform .25s var(--ease); }
.nav__oferta[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Na komputerze lista rozwija się po najechaniu (jak dotąd) albo po kliknięciu */
@media (min-width: 960px) {
  .nav__item.is-otwarte .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__tlo { display: none; }
}
.nav__tlo[hidden] { display: none; }

@media (max-width: 959px) {
  /* BŁĄD, który rozjeżdżał menu: rozmycie tła w przyklejonym pasku tworzy
     "kontener" dla elementów fixed w jego środku, więc menu kurczyło się
     do wysokości paska i wychodziło na treść. Na telefonie zamiast rozmycia
     zwykłe, kryjące tło. */
  .nav.is-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(246, 243, 238, .98);
  }

  /* Panel menu: liczony od góry i przewijalny, żeby zmieścił się na każdym telefonie */
  .nav__links {
    z-index: 1150;
    height: 100vh;
    height: 100dvh;
    justify-content: flex-start;
    gap: 2px;
    padding: 86px 28px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links a { padding: 11px 0; }
  .nav .nav__links button.nav__oferta,
  .nav.on-dark .nav__links button.nav__oferta { color: var(--ink-soft); padding: 11px 0; }

  /* Hamburger zostaje nad panelem i zamienia się w krzyżyk */
  .nav__burger { position: relative; z-index: 1200; }
  .nav.is-menu .nav__burger span { color: var(--ink-soft); }
  .nav.is-menu .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-menu .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-menu .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Przyciemnione tło obok menu - dotknięcie zamyka */
  .nav__tlo {
    position: fixed;
    inset: 0;
    z-index: 999;                /* pod całym paskiem menu (1000), nad treścią strony */
    background: rgba(20, 22, 26, .5);
    border: 0;
    padding: 0;
    touch-action: none;          /* przesuwanie palcem po tle nie przewija strony pod spodem */
    animation: navTlo .3s var(--ease) both;
  }
  @keyframes navTlo { from { opacity: 0; } }

  /* Kategorie oferty domyślnie zwinięte, rozwija je dotknięcie "Oferta" */
  .nav__dropdown { display: none; }
  .nav__item.is-otwarte .nav__dropdown { display: block; }
}

@media (max-width: 767px) {
  /* --- Sekcja "Jak pracujemy": zdjęcie kroku przyklejone pod menu,
         przewija się sam tekst. Po kroku 04 sekcja się kończy i strona jedzie dalej. --- */
  .proces__inner { grid-template-columns: 1fr; gap: 0; }
  .proces__aside {
    display: flex;
    position: sticky;
    top: 66px;                   /* tuż pod przyklejonym paskiem menu */
    z-index: 3;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 0 12px;
    background: var(--bg);       /* tekst przewija się pod spodem, nie prześwituje */
  }
  .proces__foto { order: -1; width: 100%; max-width: none; aspect-ratio: 16 / 10; margin-top: 0; }
  .proces__bignum { font-size: 40px; line-height: 1; }
  .proces__biglabel { font-size: 15px; }
  .proces__progress { flex: 1 0 100%; max-width: none; margin-top: 0; }
  .krok { min-height: 32vh; padding: 24px 0; }
  .krok:first-child { border-top: 0; }
  .krok.is-dim { opacity: .45; }   /* widać, który krok pasuje do zdjęcia u góry */

  /* --- Galeria na stronie Realizacje: kafelki 2 w rzędzie (mniej przewijania) --- */
  .foto-grid--kafle { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .foto-grid--kafle figure { aspect-ratio: 3 / 4; }
}

/* Najwęższe telefony: reguła z sekcji 8 zwężała galerie do jednej kolumny -
   na stronie Realizacje zostają dwie. */
@media (max-width: 560px) {
  .foto-grid--kafle { grid-template-columns: repeat(2, 1fr); }
  .foto-grid--kafle figure { aspect-ratio: 3 / 4; }
}

/* --- Strona 404 (404.html): ciemna scena + rysunek szafki z brakującym modułem --- */
.e404__siatka {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(130px, 18vh, 180px);
  padding-bottom: clamp(64px, 10vh, 110px);
}
.e404__scena::after {            /* delikatna złota poświata za rysunkiem */
  content: "";
  position: absolute;
  right: -10%;
  top: 10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(192, 149, 79, .14), transparent);
  pointer-events: none;
}
.e404__scena h1 { font-size: clamp(34px, 5.2vw, 66px); line-height: 1.08; color: var(--bg); max-width: 16ch; }
.e404__scena h1 em { display: block; color: var(--gold); font-style: normal; }
.e404__lead { margin-top: 22px; max-width: 48ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; font-weight: 300; color: rgba(246, 243, 238, .82); }
.e404__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.e404__rysunek svg { display: block; width: 100%; max-width: 440px; height: auto; margin-left: auto; overflow: visible; }
.e404__kreska {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: e404Rys 1.1s var(--ease) var(--d, 0s) forwards;
}
.e404__puste { fill: rgba(214, 168, 96, .06); stroke: var(--gold-lite); stroke-width: 1.6; stroke-dasharray: 6 7; opacity: 0; animation: e404Pojaw .6s ease 1.7s forwards; }
.e404__cyfry { font-family: 'Special Elite', 'Courier New', monospace; font-size: 34px; fill: var(--gold-lite); opacity: 0; animation: e404Pojaw .6s ease 2s forwards; }
.e404__podloga { stroke: rgba(246, 243, 238, .18); stroke-width: 1; }
@keyframes e404Rys { to { stroke-dashoffset: 0; } }
@keyframes e404Pojaw { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .e404__kreska { animation: none; stroke-dashoffset: 0; }
  .e404__puste, .e404__cyfry { animation: none; opacity: 1; }
}
.e404__oferta {
  background-image: url("../img/tlo-kratka.png");
  background-size: 162px 125px;
}
.e404__kafle { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.e404__kafle a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 16px;
  text-transform: uppercase;      /* styl nagłówków klientki (małe "i" daje krój) */
  color: var(--ink-soft);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.e404__kafle a:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-sm); }
.e404__nr { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--gold-deep); }
@media (max-width: 860px) {
  .e404__siatka { grid-template-columns: 1fr; padding-top: 110px; }
  .e404__rysunek { order: -1; }
  .e404__rysunek svg { max-width: 250px; margin: 0; }
}

/* --- Stopka: profile społecznościowe (każda podstrona) --- */
.footer__social { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; }
.footer__social a { color: var(--gold-lite); font-size: 14px; font-weight: 600; letter-spacing: .3px; border-bottom: 1px solid rgba(214, 168, 96, .35); }
.footer__social a:hover { color: var(--bg); border-color: var(--bg); }

/* =====================================================================
   16. ZABEZPIECZENIA UKŁADU (test 14 stron x 16 rozmiarów ekranu, 24.09.2026)
   ===================================================================== */
/* Długie słowa (adresy e-mail, linki) łamią się zamiast wypychać stronę w bok */
body { overflow-wrap: break-word; }
.legal a, .kontakt__glowny-val { overflow-wrap: anywhere; }
/* Kolumna siatki nie może być szersza od ekranu tylko dlatego, że ma długi adres e-mail
   (na 320 px strefamieszkaj@gmail.com rozpychał formularz kontaktowy o 27 px) */
.kontakt__grid > * { min-width: 0; }
/* Mapa: przy min-height przeglądarka poszerzała ramkę, żeby utrzymać proporcje 16/7
   (na iPadzie mini wychodziła 17 px poza ekran). Stała szerokość = proporcje ustępują. */
.mapa__ramka { width: 100%; }

/* Link "Polityka prywatności" w stopce strony głównej - podkreślony jak "Ustawienia cookies" obok,
   żeby był rozpoznawalny nie tylko po kolorze */
.footer__prawne { color: rgba(246, 243, 238, .6); text-decoration: underline; text-underline-offset: 3px; }
.footer__prawne:hover { color: var(--gold-lite); }

/* --- Wyróżniki: wariant na dwa kafelki (strona O nas po usunięciu liczników) --- */
.wyroznia__grid--2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
@media (max-width: 560px) { .wyroznia__grid--2 { grid-template-columns: 1fr; } }

/* =====================================================================
   NAGŁÓWKI W STYLU KLIENTKI: WIELKIE LITERY, tylko "i" małe (jak "KUCHNiA"
   na jej wizytówce). To świadomy zamysł klientki - nie poprawiać.
   Jak to działa: w kopii kroju Special Elite (fonts/special-elite-strefa-*.woff2)
   wielka litera "I" ma kształt małego "i". CSS zamienia tekst na wielkie litery,
   więc każde "i" wychodzi małe. Teksty w HTML (i w panelu edycji, i dla Google)
   zostają zwykłe - bez skryptów i bez mignięcia przy ładowaniu.
   ===================================================================== */
h1, h2, h3, h4,
.faq__q, .wyr-item__title, .proces__biglabel, .manifest__text .highlight,
.mapa__zgoda .mapa__zgoda-tytul, .zgody__tytul, .zgody__kat-nazwa {
  text-transform: uppercase;
}

/* --- Opis pod nagłówkiem kategorii (strona Realizacje) --- */
.sec-head__opis { margin-top: 14px; max-width: 62ch; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--text); }
.sec-head .realizacje__link { display: inline-block; margin-top: 10px; }
.form__ok h2 { font-size: 24px; color: var(--ink-soft); }

/* --- Kontrast drobnego tekstu (WCAG AA 4,5:1, audyt Lighthouse 01.10.2026) ---
   Ciemniejsze złoto tylko na jasnym tle; w ciemnych sekcjach (oferta, FAQ,
   nagłówki podstron, pas CTA) zostają mocniejsze reguły z jasnym złotem. */
.eyebrow, .kontakt__label, .realizacje__link { color: var(--gold-text); }
.footer__bottom { color: rgba(246, 243, 238, .58); }
/* Linki w treści (polityka prywatności): ciemniejsze złoto + podkreślenie, żeby było
   je widać nie tylko po kolorze */
.legal a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.legal a.btn { text-decoration: none; }