@font-face{font-family:Satoshi;src:url('/assets/fonts/Satoshi-Regular.woff2?v=71a6023c08') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url('/assets/fonts/Satoshi-Medium.woff2?v=cd790237ed') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Sentient;src:url('/assets/fonts/Sentient-Light.woff2?v=2f84cc14e2') format('woff2');font-weight:300;font-display:swap}
/* Kolory zmieniane przez tryb ciemny jako typowane tokeny, żeby mogły przechodzić płynnie (base.css); initial-value jak w trybie jasnym */
@property --color-bg{syntax:'<color>';inherits:true;initial-value:#f1f0ef}
@property --color-ink{syntax:'<color>';inherits:true;initial-value:#170707}
@property --stone-surface{syntax:'<color>';inherits:true;initial-value:#e9e7e5}
@property --stone-active{syntax:'<color>';inherits:true;initial-value:#dedad6}
@property --stone-border{syntax:'<color>';inherits:true;initial-value:#cec5bc}
@property --stone-muted{syntax:'<color>';inherits:true;initial-value:#66615d}
@property --calc-ink{syntax:'<color>';inherits:true;initial-value:#170707}
@property --calc-muted{syntax:'<color>';inherits:true;initial-value:#66615d}
@property --calc-line{syntax:'<color>';inherits:true;initial-value:#cfc9c4}
@property --calc-field{syntax:'<color>';inherits:true;initial-value:#fafafa}
@property --calc-veil{syntax:'<color>';inherits:true;initial-value:rgb(241 240 239 / .7)}
@property --calc-veil-mini{syntax:'<color>';inherits:true;initial-value:rgb(241 240 239 / .45)}

:root {
  /* Wysokość ekranu stała podczas przewijania: skrypt w <head> (szablony/strona.php) wpisuje tu wysokość okna w px
     (przeglądarka Instagrama zmienia ją przy chowaniu paska i elementy skakały); bez skryptu 100svh */
  --ekran: 100svh;
  /* Paleta bazowa z brandingu: prawie czarny, średni szary, jasny. Tekst, linie i tła odwołują się do tych trzech */
  --color-dark: #170707;
  --color-grey: #66615d;
  --color-light: #f1f0ef;
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1440px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --font-body: Satoshi, Arial, sans-serif;
  --font-display: Sentient, Georgia, serif;
  --color-bg: var(--color-light);
  --color-on-dark: var(--color-light);
  --color-ink: var(--color-dark);
  --color-accent: #ff7b1d;
  /* Zaznaczenie tekstu myszą zamiast domyślnego niebieskiego (klient 2026-10-27) */
  --color-selection: #f8b585;
  --color-muted: #c5c1bd;
  --color-nav: rgb(23 7 7 / .8);
  --color-nav-active: #281d1c;
  --color-card-shade: #23130d;
  /* Tło kafli i wyróżnień na ciemnych sekcjach: wiersz etapu, karta opinii (Figma 525:3173) */
  --color-surface-dark: #201414;
  --button-base: var(--color-dark);
  --button-gradient: #2d0909;
  --button-hover: var(--button-gradient);
  --button-hover-scale: .985;
  --sample-lift: -4px;
  --space-edge: 2.5rem;
  --space-text: 1.5rem;
  --space-actions: 2.5rem;
  --ease-ui: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Przejście trybu ciemnego: kolory całej strony (base.css) i podświetlenie kamieni (modules/swiatlo.js); czas w sekundach */
  --theme-duration: .3s;
  --theme-ease: cubic-bezier(.455, .03, .515, .955);
  --sample-size: 2.24075rem;
  --sample-cell: 3.17rem;
  --sample-overlap: -1.8125rem;
  --stone-surface: #e9e7e5;
  --stone-active: #dedad6;
  --stone-border: #cec5bc;
  --stone-muted: var(--color-grey);
  --stone-glow: #fbd9ad;
  --color-section-dark: var(--color-dark);
  --color-text-soft: #b5b0ab;
  --color-copper: #b18a7c;
  --color-copper-dim: #3b231e;
  --color-label: var(--color-grey);
  --color-quiet: var(--color-grey);
  --color-footer-muted: #b18a7c;
  --color-text-muted: var(--color-grey);
  --color-unit: var(--color-grey);
  --color-danger: #ba2e00;
  /* Dostępność (kamień od ręki, doradca pod telefonem): zielony kwadrat z jasną obwódką, components/status-dot.css */
  --color-available: #6fb820;
  --color-available-ring: #cbe1b4;
  /* Tło pól formularza kontaktowego (components/field.css: sekcja i panel) */
  --color-field: #fafafa;
  --color-waste: #b45325;
  --color-price-lower: #386900;
  --calc-note-link: #171717;
  --color-waste-fill: rgb(255 122 26 / .35);
  --color-waste-line: rgb(255 122 26 / .85);
  --calc-ink: var(--color-dark);
  --calc-muted: var(--color-grey);
  --calc-line: #cfc9c4;
  /* Tło pól kalkulatora jak w Figmie (#fafafa), ten sam kolor co pola formularza kontaktowego */
  --calc-field: var(--color-field);
  --calc-field-error: #9a9188;
  --calc-veil: rgb(241 240 239 / .7);
  --calc-veil-mini: rgb(241 240 239 / .45);
  /* Linie i liczby wymiarów płyty: średni szary 70% */
  --calc-dimension: rgb(102 97 93 / .7);
  /* Obrys płyty, linia pola roboczego i kreskowany margines: średni szary 50% */
  --calc-slab-line: rgb(102 97 93 / .5);
  /* Zasłona strony pod panelami i lightboxem (components/blur-veil.css): jednolite rozmycie i przyciemnienie, wszędzie te same */
  --veil-blur: 6px;
  --veil-tint: rgb(23 7 7 / .7);
}

:root[data-theme=dark],.slab-preview[data-theme=dark]{--color-field:#1d1a16;--color-bg:var(--color-dark);--color-ink:#e8e4df;--stone-surface:#1d1a16;--stone-active:#2c2823;--color-price-lower:#8fc24a;--calc-note-link:#e8e4df;--stone-border:#3a352f;--stone-muted:#b5aea5;--calc-ink:#e8e4df;--calc-muted:#a39c95;--calc-line:#3a352f;--calc-field:#1d1a16;--calc-veil:rgb(23 7 7 / .7);--calc-veil-mini:rgb(23 7 7 / .45)}

/* Sekcja wyłączona z trybu ciemnego (data-theme-lock="light", cechy kamienia z ikonami 3D): te same tokeny ze stałymi wartościami
   jasnymi jak w :root (zmieniać razem), bez przejścia; strona i tak wraca do jasnego po wyjściu z sekcji nastroju (motyw.js) */
[data-theme-lock=light],.slab-preview[data-theme=light]{--color-field:#fafafa;--color-bg:var(--color-light);--color-ink:var(--color-dark);--stone-surface:#e9e7e5;--stone-active:#dedad6;--color-price-lower:#386900;--calc-note-link:#171717;--stone-border:#cec5bc;--stone-muted:var(--color-grey);--calc-ink:var(--color-dark);--calc-muted:var(--color-grey);--calc-line:#cfc9c4;--calc-field:var(--color-field);--calc-veil:rgb(241 240 239 / .7);--calc-veil-mini:rgb(241 240 239 / .45)}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--size-font);background:var(--color-bg);color:var(--color-ink)}
body{margin:0;font-family:var(--font-body);font-weight:400;-webkit-font-smoothing:antialiased}
/* Zaznaczony tekst zawsze ciemny, żeby był czytelny także na ciemnych sekcjach */
::selection{background:var(--color-selection);color:var(--color-dark)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{color:inherit}
img{display:block;max-width:100%}
h1,p{margin:0}
button:focus-visible,a:focus-visible{outline:1px solid var(--color-ink);outline-offset:6px}
/* Po dotknięciu palcem bez obwódek fokusu (klasa z main.js, znika po pierwszym klawiszu) */
html.is-touch-input :focus-visible{outline:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:200;padding:1rem;background:var(--color-bg);transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
.is-loading{overflow:hidden}
.heading__line{position:relative;display:block;width:max-content;max-width:100%;clip-path:inset(0);white-space:nowrap;padding-block:.06em;margin-block:-.06em;overflow:hidden}
.heading__mask{position:absolute;inset:0;background:currentColor;transform:translateX(101%);visibility:hidden;pointer-events:none}
/* Zmiana motywu (klasa z modules/motyw.js): przechodzą tokeny kolorów, elementy dziedziczą wartości pośrednie i zachowują własne przejścia */
:root.is-theme-changing{transition:--color-bg var(--theme-duration) var(--theme-ease),--color-ink var(--theme-duration) var(--theme-ease),--stone-surface var(--theme-duration) var(--theme-ease),--stone-active var(--theme-duration) var(--theme-ease),--stone-border var(--theme-duration) var(--theme-ease),--stone-muted var(--theme-duration) var(--theme-ease),--calc-ink var(--theme-duration) var(--theme-ease),--calc-muted var(--theme-duration) var(--theme-ease),--calc-line var(--theme-duration) var(--theme-ease),--calc-field var(--theme-duration) var(--theme-ease),--calc-veil var(--theme-duration) var(--theme-ease),--calc-veil-mini var(--theme-duration) var(--theme-ease)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;animation-duration:0s;transition-duration:0s}}

:root[data-page-transition]{overflow:hidden}
:root[data-page-transition] .scrollbar{visibility:hidden}
:root[data-page-transition]::after{content:"";position:fixed;inset:0;z-index:1000;background:#dedad6;pointer-events:auto;transform:translateY(0);animation-duration:400ms;animation-timing-function:cubic-bezier(.85,0,.15,1);animation-fill-mode:both}
:root[data-page-transition="covering"]::after{animation-name:page-mask-cover}
:root[data-page-transition="revealing"]::after{animation-name:page-mask-reveal}
@keyframes page-mask-cover{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes page-mask-reveal{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@media(prefers-reduced-motion:reduce){:root[data-page-transition]::after{animation:none}}

/* Zasłona strony (wspólna: panel kontaktu, mega menu i menu na telefonie, panel filtrów na telefonie, lightbox zdjęć): zwykłe,
   jednolite rozmycie tła i przyciemnienie, wszędzie te same (tokeny --veil-blur i --veil-tint w tokens.css). Od 2026-10-09 (klient):
   wcześniejsze rozmycia progresywne (sześć warstw z maskami) lagowały animacje. Element bez własnej przezroczystości (inaczej
   rozmycie w środku nie widziałoby strony): warstwa rozmycia i przyciemnienie gasną osobno */
.blur-veil{position:absolute;inset:0}
.blur-veil__layer{position:absolute;inset:0;-webkit-backdrop-filter:blur(var(--veil-blur));backdrop-filter:blur(var(--veil-blur))}
.blur-veil__tint{position:absolute;inset:0;background:var(--veil-tint)}

/* Karta usługi (Figma 517:10259 i 522:1896): zdjęcie na całą kartę, u dołu progresywne rozmycie i przyciemnienie z tytułem i linkiem.
   Wspólna dla karuzeli usług i mega menu (partials/service-card.php); rozmiary w zmiennych, warianty: --compact (mega menu)
   i --deep (wyższe przyciemnienie pod jasne zdjęcie) */
.service-card{--card-shade:12.5rem;--card-pad:2rem;--card-gap:1rem;--card-title:1.75rem;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--color-light)}
.service-card--deep{--card-shade:15.625rem}
.service-card--compact{--card-shade:7.5rem;--card-pad:1.5rem 1.25rem;--card-gap:.5rem;--card-title:1.25rem}
.service-card:focus-visible{outline-offset:-3px}
.service-card__media,.service-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-card__media{z-index:-2;transition:transform .7s var(--ease-out)}
.service-card:is(:hover,:focus-visible) .service-card__media{transform:scale(1.06)}
.service-card__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--card-gap);min-height:var(--card-shade);padding:var(--card-pad);background:linear-gradient(rgb(35 19 13 / 0),var(--color-card-shade))}
/* Z marką nad tytułem odstęp do linku rośnie do 24 px */
.service-card__content:has(.service-card__brand){gap:1.5rem}
.service-card__top{display:flex;flex-direction:column;gap:1rem}
.service-card__brand{display:flex;align-items:center;gap:.5rem;margin:0;font-size:max(12px,.75rem);font-weight:500;line-height:1rem;letter-spacing:.015rem;text-transform:uppercase;color:#e9e7e5}
.service-card__brand img{width:1.25rem;height:1.25rem}
.service-card__title{margin:0;font-size:var(--card-title);line-height:1.2;font-weight:500;letter-spacing:-.01em}
.service-card__more{display:flex;align-items:center;align-self:flex-start;gap:.125rem;font-size:max(10px,.625rem);line-height:1.6;font-weight:500;text-transform:uppercase;color:#dedad6;transition:color .3s}
.service-card__chevron{width:.75rem;height:.75rem;background:currentColor;mask:url('/assets/img/uslugi/wiecej.svg?v=384fefe06d') center / contain no-repeat}
.service-card:is(:hover,:focus-visible) .service-card__more{color:var(--color-accent)}
/* Progresywne rozmycie: sześć pasów o rosnącej sile, każdy z własną maską (od 0,75 px u góry do 24 px u dołu; od 2026-10-03 1,5 × pierwotnych,
   te same wartości w LEVELS w modules/rozmycie-karty.js) */
.service-card__blur{position:absolute;inset:auto 0 0;height:var(--card-shade);pointer-events:none;z-index:1}
.service-card__blur span{position:absolute;inset:0}
.service-card__blur span:nth-child(1){-webkit-backdrop-filter:blur(.75px);backdrop-filter:blur(.75px);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%);mask-image:linear-gradient(to bottom,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%)}
.service-card__blur span:nth-child(2){-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);-webkit-mask-image:linear-gradient(to bottom,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%);mask-image:linear-gradient(to bottom,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%)}
.service-card__blur span:nth-child(3){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(to bottom,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%);mask-image:linear-gradient(to bottom,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%)}
.service-card__blur span:nth-child(4){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%);mask-image:linear-gradient(to bottom,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%)}
.service-card__blur span:nth-child(5){-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(to bottom,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%);mask-image:linear-gradient(to bottom,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%)}
.service-card__blur span:nth-child(6){-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-mask-image:linear-gradient(to bottom,transparent 62.5%,#000 75%,#000 100%);mask-image:linear-gradient(to bottom,transparent 62.5%,#000 75%,#000 100%)}
/* To samo rozmycie policzone raz na płótnie (modules/rozmycie-karty.js, karuzela usług): w ruchu bez przeliczania warstw w każdej klatce */
.service-card__baked{position:absolute;inset:auto 0 0;width:100%;height:var(--card-shade);pointer-events:none}
.service-card.has-baked-blur .service-card__blur{display:none}
@media(prefers-reduced-motion:reduce){.service-card__media,.service-card__more{transition:none}
.service-card:is(:hover,:focus-visible) .service-card__media{transform:none}
}

/* Szklany kursor (efekt Glass): kalkulator i kafelki usług oraz kamieni */
.glass-cursor{position:absolute;left:0;top:0;z-index:3;width:2.5rem;height:2.5rem;pointer-events:none}
.glass-cursor__body{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:rgb(23 7 7 / .5);-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem);scale:0;transition:scale .35s var(--ease-out)}
.glass-cursor.is-visible .glass-cursor__body{scale:1;transition:scale .6s cubic-bezier(.34,1.56,.64,1)}
.glass-cursor__body[data-lens-ready]{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.glass-cursor__body canvas{position:absolute;inset:0;width:100%;height:100%}
.glass-cursor__icon{position:relative;width:1.5rem;height:1.5rem}
.has-glass-cursor{cursor:none}
@media(prefers-reduced-motion:reduce){.glass-cursor__body,.glass-cursor.is-visible .glass-cursor__body{transition:none}}

.site-header{position:fixed;isolation:isolate;color:var(--color-on-dark);top:.75rem;left:var(--space-edge);right:var(--space-edge);height:4rem;display:flex;align-items:center;justify-content:space-between;z-index:50}.site-header__glass::before{content:"";position:absolute;inset:0;background:var(--nav-surface,rgb(23 7 7 / .72));pointer-events:none;z-index:-1}.site-header__refraction{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;z-index:-2}
.site-header__brand{width:14.625rem;padding:1.25rem;flex-shrink:0}
.site-header__brand img{width:5.5rem;height:1.252rem}
.site-nav{display:flex;position:relative;align-items:center;isolation:isolate}
.site-nav__link{display:block;position:relative;padding:.75rem 1.25rem;margin-right:-.25rem;font-size:max(14px,.875rem);font-weight:500;line-height:1.5;white-space:nowrap;cursor:pointer;transition:color .3s}
.site-nav__link[aria-current],.site-nav__link:is(:hover,:focus-visible){color:var(--color-accent)}

.site-nav__indicator{position:absolute;left:0;top:0;z-index:-1;background:var(--color-nav-active);transition:transform .5s var(--ease-ui),width .5s var(--ease-ui),height .5s var(--ease-ui)}
.site-header__secondary{display:flex;align-items:center;gap:2.5rem;padding:0 2rem;font-size:max(14px,.875rem)}
.site-header__language{font-size:max(10px,.625rem);color:var(--color-muted);padding-right:2.5rem;border-right:1px solid rgb(189 185 181 / .55)}
.site-header__contact{font-weight:500;color:inherit;text-decoration:none;transition:color .3s ease;cursor:pointer}
/* Link do podstrony Kontakt: na niej w kolorze akcentu jak bieżąca pozycja menu */
.site-header__contact:is(:hover,:focus-visible,[aria-current]){color:var(--color-accent)}
.site-header__language{cursor:pointer}
.site-header__language-window{display:block;height:1.5em;overflow:hidden}
.site-header__language-line{display:block;line-height:1.5;transition:transform .45s var(--ease-out)}
/* Wersja po najechaniu: pełny akcent; Medium, bo 10 px Regular na ciemnym tle wyglądał na przygaszony (klient 2026-10-25) */
.site-header__language-line--accent{color:var(--color-accent);font-weight:500}
.site-header__language:is(:hover,:focus-visible) .site-header__language-line{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.site-nav__indicator,.site-header__language-line,.site-header__contact{transition:none}}
/* Pozycja z mega menu: kwadrat 6 px obok nazwy w kolorze tekstu pozycji (akcent przy najechaniu i otwartym menu) */
.site-nav__link--menu{display:flex;align-items:center;gap:.375rem}
.site-nav__dot{width:.375rem;height:.375rem;flex-shrink:0;background:currentColor}
.site-nav__link[aria-expanded="true"]{color:var(--color-accent)}
/* Wspólna szklana powierzchnia paska i rozwijanego panelu. */
.site-header__glass{position:absolute;inset:0 0 auto;height:4rem;isolation:isolate;pointer-events:none;z-index:-1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mega-menu{position:fixed;top:4.75rem;left:var(--space-edge);right:var(--space-edge);z-index:50;padding:2rem 1.25rem 1.25rem;background:transparent;color:var(--color-on-dark);visibility:hidden}
.mega-menu[hidden]{display:none}
.mega-menu.is-open{visibility:visible}
.mega-menu__veil{position:fixed;z-index:49;visibility:hidden}
.mega-menu__veil.is-open{visibility:visible}
.mega-menu__title{margin:0 0 .625rem;font-family:var(--font-display);font-weight:300;font-size:1.5rem;line-height:normal;letter-spacing:-2px}
.mega-menu__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.mega-menu__card{height:20rem}
/* Oddalenie zdjęcia karty przy otwarciu (mega-menu.js animuje --menu-zoom): osobna właściwość scale, więc powiększenie przy najechaniu (transform) działa */
.mega-menu__card .service-card__media{scale:var(--menu-zoom,1)}

.site-header.is-menu-open .site-header__refraction{visibility:hidden}
.site-header.is-menu-settled .site-header__glass{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Przycisk i panel menu telefonu oraz tabletu. */
.site-header__menu,.mobile-menu,.site-header__menu-label--tablet{display:none}

/* Wspólne zachowanie menu kompaktowego; telefon zachowuje pasek 52 px i odsunięcie 16 px od góry.
   menu w panelu pod paskiem na tej samej szklanej powierzchni co mega menu (modules/menu-mobilne.js): poziom 1 z pozycjami menu
   i Kontaktem, pozycja ze strzałką otwiera poziom 2 z listą usług, na dole język (wersja klienta z 2026-10-06) */
@media(width < 1100px){
:root[data-mobile] .site-header{top:1rem;height:3.25rem}
:root[data-mobile] .site-header__glass{height:3.25rem}
:root[data-mobile] .site-header__brand{width:auto;padding:1.0625rem 1rem}
:root[data-mobile] .site-header__brand img{width:5rem;height:1.125rem}
:root[data-mobile] :is(.site-nav,.site-header__secondary,.mega-menu){display:none}
:root[data-mobile] .site-header__menu{display:block;padding:.75rem 1rem;border:0;background:none;color:inherit;font-size:max(14px,.875rem);line-height:1.5;cursor:pointer}
:root[data-mobile] .site-header__menu-window{display:block;height:1.5em;overflow:hidden}
:root[data-mobile] .site-header__menu-line{display:block;text-align:right;white-space:nowrap;transition:transform .45s var(--ease-out)}
:root[data-mobile] .site-header__menu[aria-expanded=true] .site-header__menu-line{transform:translateY(-100%)}
:root[data-mobile] .mobile-menu{display:block;position:fixed;top:4.25rem;left:var(--space-edge);right:var(--space-edge);z-index:50;max-height:calc(var(--ekran) - 5.25rem);overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:.75rem;color:var(--color-on-dark);visibility:hidden}
:root[data-mobile] .mobile-menu[hidden]{display:none}
:root[data-mobile] .mobile-menu.is-open{visibility:visible}
:root[data-mobile] .mobile-menu__levels{display:grid}
:root[data-mobile] .mobile-menu__level{grid-area:1 / 1;min-width:0}
:root[data-mobile] .mobile-menu__level[hidden]{display:none}
/* Poziom 1: lista 40 px pod paskiem, pozycje 48 px (tekst 18 px) co 2 px, bieżąca pomarańczowa bez tła; „Usługi” ze strzałką 24 px
   12 px za nazwą */
:root[data-mobile] .mobile-menu__list{display:flex;flex-direction:column;gap:2px;margin:0;padding:2.5rem 0 0;list-style:none}
:root[data-mobile] .mobile-menu__link{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1.25rem;border:0;background:none;color:inherit;font:400 1.125rem/1.1111 var(--font-body);text-align:left;cursor:pointer;transition:color .3s}
:root[data-mobile] .mobile-menu__link[aria-current]{color:var(--color-accent)}
:root[data-mobile] :is(.mobile-menu__link,.mobile-menu__back,.mobile-menu__service):is(:hover,:focus-visible){color:var(--color-accent)}
:root[data-mobile] .mobile-menu__link:focus-visible,:root[data-mobile] .mobile-menu__back:focus-visible{outline-offset:-2px}
:root[data-mobile] .mobile-menu__sub-icon{flex-shrink:0;width:1.375rem;height:1.375rem;margin-block:-.1875rem;background:currentColor;mask:url('/assets/img/menu/podmenu.svg?v=6e31829574') center / contain no-repeat}
/* Poziom 2: powrót „Menu” (ikona 19 × 20, 16 px wersalikami) 8 px pod paskiem, 20 px niżej usługi co 12 px: miniatura 100 × 80,
   20 px odstępu, nazwa 18 px i strzałka 16 px 20 px od prawej krawędzi panelu */
:root[data-mobile] .mobile-menu__back{display:flex;align-items:center;gap:.5rem;width:100%;margin-top:.5rem;padding:.5rem 1.25rem;border:0;background:none;color:inherit;cursor:pointer;transition:color .3s}
:root[data-mobile] .mobile-menu__back-icon{flex-shrink:0;width:1.0625rem;height:1.125rem;background:currentColor;mask:url('/assets/img/menu/powrot.svg?v=46a863e85a') center / contain no-repeat}
:root[data-mobile] .mobile-menu__back-text{font:300 1rem/1.375rem var(--font-body);text-transform:uppercase}
:root[data-mobile] .mobile-menu__services{display:flex;flex-direction:column;gap:.75rem;margin:1.25rem 0 0;padding:0 0 0 1.25rem;list-style:none}
:root[data-mobile] .mobile-menu__service{display:flex;align-items:center;gap:1.25rem;color:inherit;transition:color .3s}
:root[data-mobile] .mobile-menu__service:focus-visible{outline-offset:2px}
:root[data-mobile] .mobile-menu__thumb{flex-shrink:0;width:6.25rem;height:5rem;object-fit:cover;background:var(--color-nav-active)}
:root[data-mobile] .mobile-menu__service-title{flex:1;min-width:0;font:400 1.125rem/1.2 var(--font-body);letter-spacing:-.01em}
:root[data-mobile] .mobile-menu__chevron{flex-shrink:0;width:1rem;height:1rem;margin-right:1.25rem;background:currentColor;mask:url('/assets/img/menu/chevron.svg?v=548743eb0d') center / contain no-repeat}
/* Na dole (tylko poziom 1) język 12 px, 40 px pod listą */
:root[data-mobile] .mobile-menu__foot{margin-top:2.5rem;padding:.75rem 1.25rem}
:root[data-mobile] .mobile-menu:has([data-mobile-level]:not([data-mobile-level=menu]):not([hidden])) .mobile-menu__foot{display:none}
:root[data-mobile] .mobile-menu:has([data-mobile-level]:not([data-mobile-level=menu]):not([hidden])){padding-bottom:1.25rem}
:root[data-mobile] .mobile-menu__language{font-size:.75rem;line-height:1.5;color:var(--color-muted)}
/* Strona pod otwartym menu się nie przewija */
:root[data-mobile].is-mobile-menu-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.site-header__menu-line,.mobile-menu__link{transition:none}}

/* Pasek przewijania strony (modules/przewijanie.js). Natywny pasek ukryty klasą z <head>, więc nie zabiera szerokości treści */
.has-custom-scrollbar{scrollbar-width:none}
.has-custom-scrollbar::-webkit-scrollbar{display:none}
.scrollbar{position:fixed;top:0;right:0;bottom:0;z-index:60;width:.75rem;touch-action:none}
/* Odstęp kreski 4 px od prawej, górnej i dolnej krawędzi okna; JS liczy pozycję względem toru */
.scrollbar__track{position:absolute;top:4px;right:4px;bottom:4px;width:4px}
/* Kolor według tła sekcji pod kreską: ciemna na jasnym tle, jasna (kolor tła strony) na ciemnym */
.scrollbar__thumb{position:absolute;top:0;right:0;width:2px;background:var(--color-dark);transition:width .25s var(--ease-out),background-color .3s var(--ease-out)}
.scrollbar.is-on-dark .scrollbar__thumb{background:var(--color-light)}
.scrollbar:is(:hover,.is-dragging) .scrollbar__thumb{width:4px}

@property --button-glow-x{syntax:'<percentage>';inherits:true;initial-value:100%}
@property --button-glow-y{syntax:'<percentage>';inherits:true;initial-value:50%}
.button{position:relative;isolation:isolate;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;padding:1.125rem 2rem;border:0;flex-shrink:0;font-size:1rem;line-height:1.6;background:linear-gradient(90deg,var(--button-base),var(--button-gradient));transition:transform .35s var(--ease-out),--button-glow-x .28s ease-out,--button-glow-y .28s ease-out;cursor:pointer}
.button__fill{position:absolute;inset:-1px;background:radial-gradient(ellipse 100% 175% at var(--button-glow-x) var(--button-glow-y),var(--button-hover),var(--button-base) 100%);opacity:0;transition:opacity .3s ease-out;z-index:-1;pointer-events:none}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible) .button__fill{opacity:1}
}
.button__text{position:relative;z-index:1}
/* Strzałka ↗: przy hover wylatuje w prawy górny róg kontenera, druga wlatuje z lewego dolnego */
.arrow-swap{position:relative;display:block;flex-shrink:0;width:1.5rem;height:1.5rem;overflow:hidden}
.arrow-swap__icon{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s var(--ease-out)}
.arrow-swap__icon--next{transform:translate(-100%,100%)}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible) .arrow-swap__icon{transform:translate(100%,-100%)}
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible) .arrow-swap__icon--next{transform:translate(0,0)}
}
.card-link-icon{display:block;flex-shrink:0;width:16px;height:16px;background:currentColor;mask:url('/assets/img/menu/podmenu.svg?v=6e31829574') center / contain no-repeat;transition:color .3s}
@media(min-width:1100px){.card-link-icon{width:18px;height:18px}}
:is(.stone-card,.article-card):is(:hover,:focus-visible) .card-link-icon{color:var(--color-accent)}
@media(width < 1100px){:root[data-mobile] :is(.stone-card,.article-card):hover .card-link-icon{color:inherit}}
@media(prefers-reduced-motion:reduce){.button,.button__fill,.arrow-swap__icon,.card-link-icon{transition:none}}

.cookies{color:var(--color-ink);background:var(--color-bg);font:400 14px/1.6 var(--font-body);border:0;padding:32px}
.cookies[hidden]{display:none}
.cookies--banner{position:fixed;z-index:190;right:32px;bottom:32px;width:598px;max-width:calc(100% - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;border:.5px solid var(--calc-line);display:flex;flex-direction:column;gap:20px;opacity:0;transition:opacity .22s ease}
.cookies--banner.is-visible{opacity:1}
.cookies__intro{display:flex;flex-direction:column;gap:8px}
.cookies__title{margin:0;font:300 24px/1.2 var(--font-display);letter-spacing:-.03em}
.cookies__title:focus{outline:none}
.cookies__copy{margin:0;color:var(--color-grey);font-size:14px;line-height:1.6}
.cookies__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.cookies .cookies__button{height:54px;min-width:0;padding:12px;color:var(--color-on-dark);font-size:14px;line-height:1.6;background:radial-gradient(ellipse 106% 78% at 25% 45%,var(--button-base) 54%,var(--button-gradient) 100%)}
.cookies .cookies__button--light{background:var(--stone-active);color:var(--color-ink)}
/* Preferencje: sam tekst bez tła i podkreślenia, na desktopie od lewej (Figma 814:2220); Zapisz wybrane: jasnoszare tło (Figma 814:2251) */
.cookies .cookies__button--text{background:none;color:var(--color-ink);justify-content:flex-start;padding-inline:0}
.cookies .cookies__button--text:is(:hover,:focus-visible){color:var(--color-accent)}
.cookies .cookies__button--soft{background:var(--stone-surface);color:var(--color-ink)}
.cookies--dialog{position:fixed;inset:0;margin:auto;width:960px;max-width:calc(100% - 64px);height:880px;max-height:calc(100dvh - 48px);overflow:hidden;opacity:0;transition:opacity .22s ease}
.cookies--dialog[open]{display:flex;flex-direction:column;gap:20px}
.cookies--dialog.is-visible{opacity:1}
/* Tło pod oknem: wspólne rozmycie i przyciemnienie zasłon strony (tokeny --veil-blur, --veil-tint; components/blur-veil.css) */
.cookies--dialog::backdrop{background:var(--veil-tint,rgb(23 7 7 / .7));-webkit-backdrop-filter:blur(var(--veil-blur,6px));backdrop-filter:blur(var(--veil-blur,6px));opacity:0;transition:opacity .22s ease}
.cookies--dialog.is-visible::backdrop{opacity:1}
.cookies__header{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-shrink:0}
.cookies__close{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;padding:0;border:0;background:none;color:var(--color-ink);cursor:pointer;transition:transform .45s var(--ease-out)}
.cookies__close:is(:hover,:focus-visible){transform:rotate(90deg)}
.cookies__close-icon{width:28px;height:28px;background:currentColor;mask:url('/assets/img/cookies/zamknij.svg?v=e8c1294bba') center / contain no-repeat}
/* Gradient przewijania jak w panelu kontaktu (contact-form.css): u góry po przewinięciu, na dole dopóki jest dalsza treść */
.cookies__viewport{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.cookies__viewport::before,.cookies__viewport::after{content:'';position:absolute;left:0;right:8px;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s ease;background:linear-gradient(var(--fade-direction),var(--color-bg) 0%,color-mix(in srgb,var(--color-bg) 92%,transparent) 18%,color-mix(in srgb,var(--color-bg) 64%,transparent) 40%,color-mix(in srgb,var(--color-bg) 28%,transparent) 65%,color-mix(in srgb,var(--color-bg) 6%,transparent) 85%,transparent 100%)}
.cookies__viewport::before{--fade-direction:to bottom;top:0;height:40px}
.cookies__viewport::after{--fade-direction:to top;bottom:0;height:56px;opacity:1}
.cookies__viewport.is-scrolled::before{opacity:1}
.cookies__viewport.is-end::after{opacity:0}
.cookies__scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--stone-border) transparent;padding-right:8px}
.cookies__category{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:112px;padding:16px 0;border-bottom:.5px solid var(--calc-line)}
.cookies__category-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.cookies__category-title{margin:0;font-size:16px;line-height:1.6;font-weight:400}
.cookies__choice{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 176px}
.cookies__state{font-size:12px;color:var(--color-grey);text-align:right}
.cookies__category[data-cookie-category=niezbedne] .cookies__state{color:var(--color-price-lower)}
.cookies__switch{position:relative;display:flex;align-items:center;flex:0 0 48px;width:48px;height:24px;padding:2px;border:1px solid var(--stone-border);background:var(--stone-active);cursor:pointer}
.cookies__switch::before{content:'';position:absolute;inset:-10px -2px}
.cookies__thumb{display:block;width:18px;height:18px;flex-shrink:0;background:var(--color-light);transform:translateX(0);transition:transform .18s ease,background .18s ease;pointer-events:none}
.cookies__switch[aria-checked=true] .cookies__thumb{transform:translateX(24px);background:var(--color-accent)}
.cookies__switch:disabled{opacity:.45;cursor:default}
.cookies__details{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.cookies__details-title{margin:0;font-size:16px;line-height:1.6;font-weight:400}
.cookies__table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.6}
.cookies__table th,.cookies__table td{font-weight:400;vertical-align:top;padding:12px 16px 12px 0;border-bottom:.5px solid var(--calc-line);overflow-wrap:anywhere}
.cookies__table thead th:first-child{width:29%}
/* Bez kreski pod ostatnim wierszem: dalej jest linia nad przyciskami, dwie obok siebie wyglądały źle (klient 2026-10-23) */
.cookies__table tbody tr:last-child :is(th,td){border-bottom:0}
.cookies__table thead th:nth-child(2){width:36%}
.cookies__table td{color:var(--color-grey)}
.cookies__table thead th{font-size:12px;color:var(--color-grey)}
.cookies__table th span{display:block;color:var(--color-grey)}
.cookies__footer{display:flex;flex-direction:column;gap:12px;flex-shrink:0;padding-top:16px;border-top:.5px solid var(--calc-line)}
.cookies--dialog .cookies__button{height:62px;font-size:16px}
.cookies__noscript{padding:16px 20px;font-size:14px;color:var(--color-ink);background:var(--color-bg)}
.site-footer__small-link[data-cookie-open]{display:inline;border:0;padding:0;background:none;font:inherit;text-align:inherit;cursor:pointer}
html.is-cookies-open{overflow:hidden}
.is-loading .cookies--banner,html[data-page-transition] .cookies--banner,html.is-mobile-menu-open .cookies--banner,html.is-sheet-open .cookies--banner{visibility:hidden}
@media(width < 1100px){
  .cookies{padding:20px}
  .cookies--banner{left:0;right:0;bottom:0;width:100%;max-width:none;max-height:calc(100dvh - 20px);padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .cookies__actions{grid-template-columns:minmax(0,1fr)}
  .cookies--banner{gap:20px}
  .cookies--banner .cookies__title{font-size:20px}
  .cookies--banner .cookies__copy{font-size:12px}
  .cookies--banner .cookies__button{height:52px}
  /* Telefon (Figma 901:1929): Preferencje i Odrzuć obok siebie, Akceptuj pod nimi na całą szerokość; Preferencje wyśrodkowane */
  .cookies--banner .cookies__actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cookies--banner .cookies__button:last-child{grid-column:1 / -1}
  .cookies--banner .cookies__button--text{justify-content:center}
  .cookies--dialog{width:calc(100% - 24px);max-width:none;max-height:calc(100dvh - 24px);gap:12px}
  .cookies--dialog[open]{gap:12px}
  .cookies__header{gap:12px;align-items:flex-start}
  .cookies__title{font-size:22px}
  .cookies__close,.cookies__close-icon{width:24px;height:24px}
  .cookies__viewport::before,.cookies__viewport::after{right:4px}
  .cookies__category{gap:12px;min-height:112px;align-items:flex-start}
  .cookies__choice{flex:0 0 auto;flex-direction:column-reverse;align-items:flex-end;gap:8px;padding-block:4px}
  .cookies__state{white-space:nowrap}
  .cookies__switch{flex-basis:24px}
  .cookies__category-title{font-size:16px}
  .cookies__scroll{padding-right:4px}
  .cookies__table thead{display:none}
  .cookies__table tbody,.cookies__table tr,.cookies__table th,.cookies__table td{display:block;width:100%}
  .cookies__table tr{padding:12px 0;border-bottom:.5px solid var(--calc-line)}
  .cookies__table tbody tr:last-child{border-bottom:0}
  .cookies__table th,.cookies__table td{border:0;padding:0 0 8px}
  .cookies__table td:last-child{padding:0;font-size:12px}
  .cookies__footer{padding-top:12px;gap:8px}
  .cookies--dialog .cookies__button{height:48px;font-size:14px}
}
@media(max-height:600px){
  .cookies--dialog>.cookies__copy{display:none}
  .cookies--dialog{padding:16px;gap:8px}
  .cookies--dialog .cookies__actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cookies--dialog .cookies__button{height:auto;min-height:44px;padding:8px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.cookies,.cookies::backdrop,.cookies__thumb,.cookies__close,.cookies__viewport::before,.cookies__viewport::after{transition:none}}

/* Okno „Our English website is coming soon” (Figma 941:7078, partials/jezyk-okno.php): wygląd okna ciasteczek (components/cookies.css),
   na środku ekranu, zasłona strony pod spodem; ikona globu 60 px w kolorze akcentu, tekst wyśrodkowany */
.language-dialog{position:fixed;inset:0;margin:auto;width:504px;max-width:calc(100% - 40px);height:fit-content;max-height:calc(100dvh - 48px);overflow-y:auto;padding:32px;border:.5px solid var(--calc-line);background:var(--color-bg);color:var(--color-ink);font:400 14px/1.6 var(--font-body);opacity:0;transition:opacity .22s ease}
.language-dialog[open]{display:flex;flex-direction:column;align-items:center;gap:20px}
.language-dialog.is-visible{opacity:1}
.language-dialog::backdrop{background:var(--veil-tint,rgb(23 7 7 / .7));-webkit-backdrop-filter:blur(var(--veil-blur,6px));backdrop-filter:blur(var(--veil-blur,6px));opacity:0;transition:opacity .22s ease}
.language-dialog.is-visible::backdrop{opacity:1}
.language-dialog__icon{display:block;width:60px;height:60px;color:var(--color-accent)}
.language-dialog__icon svg{display:block;width:100%;height:100%}
.language-dialog__copy{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.language-dialog__title{margin:0;font:300 24px/normal var(--font-display);letter-spacing:-.72px}
.language-dialog__title:focus{outline:none}
.language-dialog__text{max-width:432px;margin:0;font-size:14px;line-height:1.6;color:var(--color-grey)}
.language-dialog__email{font-size:16px;line-height:1.6;color:var(--color-ink);text-decoration:none;transition:color .3s}
.language-dialog__email:is(:hover,:focus-visible){color:var(--color-accent)}
/* Zamknięcie jak w oknie preferencji ciasteczek (krzyżyk obraca się przy najechaniu); w Figmie go nie ma, ale bez niego nie da się zamknąć okna na telefonie bez klawiatury */
.language-dialog__close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:var(--color-ink);cursor:pointer;transition:transform .45s var(--ease-out)}
.language-dialog__close:is(:hover,:focus-visible){transform:rotate(90deg)}
.language-dialog__close-icon{width:24px;height:24px;background:currentColor;mask:url('/assets/img/cookies/zamknij.svg?v=e8c1294bba') center / contain no-repeat}
@media(prefers-reduced-motion:reduce){.language-dialog,.language-dialog::backdrop,.language-dialog__close{transition:none}}
@media(width < 768px){.language-dialog{padding:32px 20px}}

/* Strzałki i pasek pod karuzelą na telefonie (wspólne: galeria realizacji, zespół na O nas; Figma 648:1548):
   strzałki 26 × 20 co 19 px po lewej, pasek postępu 2 px na resztę szerokości (modules/karuzela-mobilna.js) */
.carousel-nav{display:none}

@media(width < 1100px){
:root[data-mobile] .carousel-nav{display:flex;align-items:center;gap:1.4rem}
:root[data-mobile] .carousel-nav__controls{display:flex;gap:1.1875rem}
:root[data-mobile] .carousel-nav__arrow{width:1.65rem;height:1.2375rem;padding:0;border:0;background:var(--color-ink);mask:url('/assets/img/uslugi/strzalka-prawo-v2.svg?v=35fa48a52c') center / contain no-repeat;cursor:pointer;transition:opacity .3s}
:root[data-mobile] .carousel-nav__arrow--previous{mask-image:url('/assets/img/uslugi/strzalka-lewo-v2.svg?v=22f4a4c0c6')}
:root[data-mobile] .carousel-nav__arrow:disabled{opacity:.25;cursor:default}
:root[data-mobile] .carousel-nav__progress{flex:1;min-width:0;height:2px;overflow:hidden;background:var(--stone-border)}
:root[data-mobile] .carousel-nav__thumb{display:block;width:100%;height:100%;background:var(--color-ink);transform-origin:left;will-change:transform}
}

/* Lightbox galerii (wspólny komponent: opinie i galeria realizacji na stronie kamienia): zdjęcie leci z miniatury na środek (modules/lightbox.js),
   tło: wspólna zasłona strony (components/blur-veil.css), podpis i strzałki pod zdjęciem; markup w szablony/partials/lightbox.php */
.has-lightbox{overflow:hidden;scrollbar-gutter:stable}
/* --lightbox-side i --lightbox-y: wolne miejsce wokół zdjęcia w rem (bez jednostki, czyta modules/lightbox.js) */
.lightbox{--lightbox-side:8;--lightbox-y:6;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:transparent;color:var(--color-on-dark)}
.lightbox::backdrop{background:transparent}
.lightbox__stage{position:absolute;left:0;top:0}
.lightbox__frame{position:absolute;inset:0;overflow:hidden;background:var(--color-nav-active);transform-origin:0 0}
.lightbox__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.lightbox__bar{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-top:1.25rem}
.lightbox__caption{display:flex;flex-direction:column;gap:.25rem}
/* Etykieta w kolorze nazwy kamienia pod nią (klient 2026-10-25: szara ginęła na jasnym tle za zasłoną) */
.lightbox__label{font-size:max(10px,.625rem);text-transform:uppercase;color:var(--color-on-dark)}
.lightbox__stone{font-size:1rem;color:var(--color-on-dark)}
.lightbox__arrows{display:flex;gap:.9375rem;margin-right:-.75rem}
.lightbox__close{position:absolute;top:1.5rem;right:var(--space-edge);display:grid;place-items:center;width:3.25rem;height:3.25rem;border:0;padding:0;background:transparent;color:var(--color-on-dark);cursor:pointer}
.lightbox__cross{position:relative;width:1.5rem;height:1.5rem;transition:rotate .5s var(--ease-ui)}
.lightbox__cross::before,.lightbox__cross::after{content:'';position:absolute;left:50%;top:50%;width:100%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}
.lightbox__cross::after{rotate:-45deg}
.lightbox__close:is(:hover,:focus-visible) .lightbox__cross{rotate:90deg}
.lightbox__close:focus:not(:focus-visible){outline:none}
.lightbox__close:focus-visible{outline:2px solid var(--color-on-dark);outline-offset:2px}
/* Strzałki lightboxa (jak strzałki karuzeli opinii) */
.lightbox__arrow{display:grid;place-items:center;width:3.25rem;height:3.25rem;border:0;padding:0;background:transparent;color:var(--color-copper);cursor:pointer;transition:transform .35s var(--ease-out)}
.lightbox__arrow:is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.lightbox__arrow-icon{width:1.75rem;height:1.1875rem;background:currentColor;mask:url('/assets/img/opinie/strzalka.svg?v=608494ac92') center / contain no-repeat}
.lightbox__arrow--previous .lightbox__arrow-icon{rotate:180deg}
@media(prefers-reduced-motion:reduce){.lightbox__cross,.lightbox__arrow{transition:none}}

/* Telefon (html[data-mobile], do 767 px): zdjęcie na szerokość ekranu z marginesem strony (20 px z boku), w pionie z miejscem
   na przycisk zamknięcia nad zdjęciem (wcześniej marginesy z desktopu zostawiały zdjęcie szerokie na ok. 120 px) */
@media(width < 1100px){
:root[data-mobile] .lightbox{--lightbox-side:1.25;--lightbox-y:9.5}
}

/* Okno filmu (partials/lightbox-film.php, modules/lightbox-film.js): wygląd lightboxa galerii (components/lightbox.css),
   pod filmem kontrolki odtwarzania zamiast podpisu i czas filmu zamiast strzałek (Figma 937:1816, wyciszony i wstrzymany 938:4993).
   Kolory stałe, bo pasek leży na ciemnej zasłonie w obu motywach: wypełnienie i kwadrat suwaka #cec5bc (--stone-border jasnego motywu), reszta toru --color-light */
.lightbox--film{--film-fill:#cec5bc;--film-track:var(--color-light)}
/* Pasek na szerokość filmu, 12 px pod nim; pod bardzo wąskim filmem szerszy (wyśrodkowany), żeby kontrolki i czas się mieściły */
.lightbox--film .lightbox__bar{left:50%;right:auto;width:max(100%,min(23rem,calc(100vw - 2.5rem)));translate:-50% 0;gap:1rem;padding-top:.75rem}
.lightbox-film__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--color-nav-active);cursor:pointer}
.lightbox-film__controls{display:flex;align-items:center;gap:2rem}
.lightbox-film__group{display:flex;align-items:center;gap:.5rem}
/* Ikony 20 px (Phosphor, linia 1 px), pole kliknięcia większe niż ikona */
.lightbox-film__button{position:relative;display:grid;place-items:center;flex-shrink:0;width:1.25rem;height:1.25rem;border:0;padding:0;background:transparent;color:var(--color-light);cursor:pointer;transition:transform .35s var(--ease-out)}
.lightbox-film__button::after{content:'';position:absolute;inset:-.5rem}
.lightbox-film__button:is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.lightbox-film__button:focus:not(:focus-visible){outline:none}
.lightbox-film__button:focus-visible{outline:2px solid var(--color-light);outline-offset:2px}
.lightbox-film__icon{width:100%;height:100%;overflow:visible}
.lightbox--film:not(.is-paused) .lightbox-film__icon--play,.lightbox--film.is-paused .lightbox-film__icon--pause,
.lightbox--film:not(.is-muted) .lightbox-film__icon--muted,.lightbox--film.is-muted .lightbox-film__icon--sound{display:none}
/* Suwaki: tor 2 px, przebyty odcinek i kwadrat 10 px w kolorze --film-fill; postęp 120 px, głośność 66 px (klient 2026-10-29: +20 i +16 px względem Figmy; wyciszona: krycie 50%) */
.lightbox-film__slider{--film-value:0%;flex-shrink:0;width:7.5rem;height:2rem;margin:0;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}
.lightbox-film__slider--volume{width:4.125rem}
.lightbox--film.is-muted .lightbox-film__slider--volume{opacity:.5}
.lightbox-film__slider::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--film-fill) var(--film-value),var(--film-track) var(--film-value))}
.lightbox-film__slider::-webkit-slider-thumb{width:.625rem;height:.625rem;margin-top:calc(1px - .3125rem);border:0;border-radius:0;background:var(--film-fill);-webkit-appearance:none}
.lightbox-film__slider::-moz-range-track{height:2px;background:var(--film-track)}
.lightbox-film__slider::-moz-range-progress{height:2px;background:var(--film-fill)}
.lightbox-film__slider::-moz-range-thumb{width:.625rem;height:.625rem;border:0;border-radius:0;background:var(--film-fill)}
.lightbox-film__slider:focus:not(:focus-visible){outline:none}
.lightbox-film__slider:focus-visible{outline:2px solid var(--color-light);outline-offset:2px}
/* Czas: Satoshi Regular 12/1,6 (klient 2026-10-29: Medium z Figmy za grube) */
.lightbox-film__time{flex-shrink:0;margin:0;font-weight:400;font-size:max(12px,.75rem);line-height:1.6;font-variant-numeric:tabular-nums;text-transform:uppercase;white-space:nowrap;color:var(--color-light)}
@media(prefers-reduced-motion:reduce){.lightbox-film__button{transition:none}}

/* Kafelki, które otwierają film: hero i ramka filmu na O nas; z myszą zamiast kursora szklany kwadrat z ikoną odtwarzania (components/glass-cursor.css) */
[data-film-open]:not(.has-glass-cursor){cursor:pointer}
.hero-film[data-film-open]{position:relative}
[data-film-open]:focus:not(:focus-visible){outline:none}
[data-film-open]:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}

.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.section-header__title{margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}

/* Telefon (html[data-mobile], do 767 px; Figma 633:1422 i 646:1429): nagłówek 30 px */
@media(width < 1100px){
:root[data-mobile] .section-header__title{font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
}

/* O nas, start (Figma 395:3650): hero ze stosem zdjęć (układ jak CTA z próbkami, bez panelu i przycisku) i album 4 × 2 z ramkami;
   ruch w sections/album_o_nas.js; opis: o-nas/O-NAS-SPECYFIKACJA.md. overflow-x clip: karty popchnięte kursorem nie dają poziomego przewijania */
/* --album-scale: skala stosu w hero (punkty, karty, przycisk; telefon .62 wg Figmy 704:1477) */
.album{--album-scale:1;position:relative;overflow-x:clip;background:var(--color-bg);color:var(--color-ink)}

.album__hero{padding:8rem var(--space-edge)}

/* Powyżej Full HD hero ma co najmniej wysokość ekranu (treść na środku), żeby siatka albumu startowała poniżej progu przelotu
   (85% wysokości okna, album_o_nas.js): stos widać po wejściu, przelot rusza po przewinięciu, a po „Przywróć stos” da się go uruchomić ponownie */
@media(min-width:1921px){.album__hero{display:flex;flex-direction:column;justify-content:center;min-height:var(--ekran)}
}

.album__intro{position:relative;display:flex;align-items:center;justify-content:space-between;padding:2.5rem}

.album__heading{display:flex;flex-direction:column;align-items:flex-start;width:39.5rem;margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}

.album__heading .heading__line:first-child{margin-left:7.0625rem}

/* Punkty stosu z Figmy (ramka 403 × 559): środek, obrót i wielkość karty w hero (ramka 439 × 538); od spodu stosu */
/* Stos odsunięty od prawej krawędzi o 80 px i obniżony o 40 px względem Figmy (poprawki klienta 2026-09-28) */
.album__stack{position:relative;flex-shrink:0;width:calc(25.1875rem * var(--album-scale));height:calc(34.9375rem * var(--album-scale));translate:-5rem 2.5rem}

/* „Przywróć stos” (Figma 481:4216) na środku obszaru kart stosu (prostokąt obejmujący obrócone karty: środek 149,7 × 270,9 px w ramce stosu),
   więc przesuwa się razem ze stosem; 10 px, wielkie litery, ikona 12 px, odstęp 4 px */
.album__restore{position:absolute;left:calc(9.3563rem * var(--album-scale));top:calc(16.9313rem * var(--album-scale));z-index:1;display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 0;border:0;background:none;font:500 max(10px,.625rem)/1.6 var(--font-body);text-transform:uppercase;white-space:nowrap;color:var(--stone-muted);cursor:pointer;translate:-50% -50%;transition:color .3s}

.album__restore[hidden]{display:none}

.album__restore:is(:hover,:focus-visible){color:var(--color-accent)}

.album__restore-icon{width:.75rem;height:.75rem;background:currentColor;mask:url('/assets/img/o-nas/przywroc.svg?v=c925e21e96') center / contain no-repeat}

.album__spot{position:absolute;left:calc(var(--spot-left) * var(--album-scale));top:calc(var(--spot-top) * var(--album-scale));width:calc(27.4673rem * var(--album-scale));height:calc(33.6011rem * var(--album-scale));rotate:var(--spot-rotate);visibility:hidden}

.album__spot:nth-child(1){--spot-left:-8.5909rem;--spot-top:-3.5802rem;--spot-rotate:-8.72deg}

.album__spot:nth-child(2){--spot-left:-3.5733rem;--spot-top:-4.3616rem;--spot-rotate:-2.4deg}

.album__spot:nth-child(3){--spot-left:-.1578rem;--spot-top:-3.9586rem;--spot-rotate:8.7deg}

.album__spot:nth-child(4){--spot-left:-6.6576rem;--spot-top:.7291rem;--spot-rotate:.92deg}

.album__spot:nth-child(5){--spot-left:-.5208rem;--spot-top:3.8878rem;--spot-rotate:7.26deg}

.album__spot:nth-child(6){--spot-left:.7143rem;--spot-top:5.8686rem;--spot-rotate:-.89deg}

.album__spot:nth-child(7){--spot-left:-4.5807rem;--spot-top:1.2481rem;--spot-rotate:-4.41deg}

/* Album (Figma 395:3866): siatka 4 kolumny, ramki 328 × 396 z odstępem 16 px; nad hero, żeby karty ze stosu leżały na nim */
.album__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:3.75rem var(--space-edge) 8rem;list-style:none}

/* Proporcje ramki z Figmy (328 × 396) przy każdej szerokości; marginesy ramki w % szerokości (12 i 24 px przy 328), więc zdjęcie zawsze 304 × 360 w skali */
.album__slot{position:relative;aspect-ratio:328 / 396}

/* Puste miejsce o 1 px mniejsze od ramki: zdjęcie na miejscu zakrywa całą przerywaną linię. Linia z gradientów: kreski 12 px co 20 px
   (border dashed rysował przy 1 px krótkie, prawie kropki) */
.album__empty{--dash:var(--calc-line);position:absolute;inset:1px;display:grid;place-items:center;font-size:max(14px,.875rem);line-height:1.6;color:var(--calc-line);background:linear-gradient(90deg,var(--dash) 60%,transparent 0) top left / 1.25rem 1px repeat-x,linear-gradient(90deg,var(--dash) 60%,transparent 0) bottom left / 1.25rem 1px repeat-x,linear-gradient(180deg,var(--dash) 60%,transparent 0) top left / 1px 1.25rem repeat-y,linear-gradient(180deg,var(--dash) 60%,transparent 0) top right / 1px 1.25rem repeat-y}

/* Karta niesie ruch stosu, przelotu i przeciągania; ramka w środku (tło i marginesy) porusza się przy hover w hero razem ze zdjęciem.
   Warstwa 1: przesuwane karty zawsze nad pustymi miejscami innych miejsc (bez tego karta z wcześniejszego miejsca szła pod ramką późniejszego) */
.album__card{position:absolute;inset:0;z-index:1;margin:0;will-change:transform}

.album__frame{display:block;height:100%;padding:3.6585% 3.6585% 7.317%;background:var(--stone-surface)}

.album__photo{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}

.album.is-landed .album__card{cursor:grab}

/* Cień podniesionej karty: pierwotny miękki cień w dół, słabszy (krycie .12 zamiast .18, decyzja klienta po próbach ostrzejszego) */
.album.is-landed .album__card{transition:box-shadow .3s var(--ease-out)}

.album__card.is-dragging{cursor:grabbing;box-shadow:0 1.25rem 2.5rem rgb(23 7 7 / .12)}

.album > .glass-cursor{display:none}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
.album > .glass-cursor{display:block}
.album.is-landed.has-album-cursor{cursor:none}
.album.is-landed.has-album-cursor .album__card{cursor:none}
}

/* Telefon (Figma 704:1477; html[data-mobile], do 767 px): nagłówek 30 px płynie jak tekst, stos w skali .62 pod nim (48 px niżej,
   15 px w prawo od środka jak w Figmie), album jako karuzela w dwóch rzędach: dwie ramki na szerokość treści (163,5 px przy 375) co 8 px, tor do prawej krawędzi ekranu,
   pod nią wspólne strzałki i pasek (components/karuzela-mobilna.css). Przewijanie dopiero po wylądowaniu kart (is-landed),
   bo przewijany tor przycinałby karty leżące w stosie */
@media(width < 1100px){
:root[data-mobile] .album{--album-scale:.62;padding-bottom:4.5rem}
:root[data-mobile] .album__hero{padding:7.5rem var(--space-edge) 4.5rem}
:root[data-mobile] .album__intro{flex-direction:column;align-items:stretch;gap:3rem;padding:0}
:root[data-mobile] .album__heading{display:block;width:auto;font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .album__stack{align-self:center;margin-block:2.625rem;translate:.9644rem 0}
:root[data-mobile] .album__grid{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - .5rem) / 2);gap:.5rem;margin-left:var(--space-edge);padding:0 var(--space-edge) 0 0;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
:root[data-mobile] .album__grid::-webkit-scrollbar{display:none}
:root[data-mobile] .album.is-landed .album__grid{overflow-x:auto}
:root[data-mobile] .album__slot{scroll-snap-align:start}
:root[data-mobile] .album__empty{font-size:.75rem}
:root[data-mobile] .album .carousel-nav{margin:1.25rem var(--space-edge) 0}
}

/* Tablet (klient 2026-10-21): hero co najmniej na wysokość ekranu, żeby album startował poniżej progu przelotu (karty nie lądują od razu,
   „Przywróć stos” da się znowu uruchomić przewinięciem); ramki mniejsze: dwie kolumny i ponad połowa trzeciej do prawej krawędzi ekranu */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .album__hero{display:flex;flex-direction:column;justify-content:center;min-height:var(--ekran)}
:root[data-mobile] .album__grid{grid-auto-columns:calc((100% + var(--space-edge) - 1rem) / 2.6)}
}

.text-film{display:flex;align-items:center;gap:5rem;padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}

/* Wspólna szerokość nagłówka i opisu (opis tak szeroki jak tytuł nad nim) */
.text-film__text{--text-film-width:40rem;display:flex;flex:1 1 0;flex-direction:column;gap:1rem;min-width:0}

.text-film__heading{max-width:var(--text-film-width);margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:1.2;letter-spacing:-.1875rem}

/* Opis do najdłuższej linii tytułu (--text-film-line z sections/tekst_film.js); bez skryptu szerokość pudełka tytułu */
.text-film__lead{max-width:var(--text-film-line,var(--text-film-width));margin:0;font-size:1rem;line-height:1.6;color:var(--stone-muted)}

.text-film__media{position:relative;flex:1 1 0;min-width:0}

.text-film__frame{position:relative;overflow:hidden;aspect-ratio:640 / 630;background:var(--stone-active)}

.text-film__poster,.text-film__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

.text-film__video{opacity:0;transition:opacity .6s var(--ease-out)}

.text-film__video.is-playing{opacity:1}

.text-film__play{position:absolute;left:50%;top:50%;width:6.4952rem;height:5.625rem;transform:translate(-50%,-50%) translateX(.9375rem) rotate(90deg);pointer-events:none}

.text-film__doodle{position:absolute;left:-7.875rem;top:.75rem;width:6.75rem;height:4.1875rem;pointer-events:none}

.text-film__doodle[hidden]{display:none}

.text-film__doodle svg{display:block;width:100%;height:100%;overflow:visible}

.text-film__doodle path{--fill-0:var(--color-accent);--stroke-0:var(--color-accent);stroke-linecap:round;stroke-linejoin:round}

.text-film__doodle [id="Polygon 3"]{fill:none;stroke:var(--color-accent);stroke-width:.3}

@media(prefers-reduced-motion:reduce){.text-film__video{transition:none}
}

/* Telefon (Figma 704:1477; html[data-mobile], do 767 px): tekst nad filmem (odstęp 32 px), nagłówek 30 px, opis na całą szerokość,
   film 335 × 419, play o połowę mniejszy (60 px), „Zobacz video” w skali 1,35 na lewym górnym rogu filmu, bez strzałki */
@media(width < 1100px){
:root[data-mobile] .text-film{flex-direction:column;align-items:stretch;gap:2rem;padding:0 var(--space-edge) 4.5rem}
:root[data-mobile] .text-film__text{flex:none}
:root[data-mobile] .text-film__heading{max-width:none;font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .text-film__lead{max-width:none}
:root[data-mobile] .text-film__media{flex:none}
:root[data-mobile] .text-film__frame{aspect-ratio:335 / 419}
:root[data-mobile] .text-film__play{width:3.2476rem;height:2.8125rem;transform:translate(-50%,-50%) translateX(.4688rem) rotate(90deg)}
:root[data-mobile] .text-film__doodle{left:-1.25rem;top:-1.9563rem;width:9.1031rem;height:5.6474rem}
:root[data-mobile] .text-film__doodle :is([id="Vector 3"],[id="Polygon 3"]){display:none}
}

/* Tablet (klient 2026-10-21): film o 25% niższy niż na telefonie (419 × 0,75) */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .text-film__frame{aspect-ratio:335 / 314.25}
}

/* Zespół (Figma 476:757): cztery karty w ramkach jak w albumie; opis: o-nas/O-NAS-SPECYFIKACJA.md */
.team{display:flex;flex-direction:column;gap:2.5rem;padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}

.team__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}

.team__card{display:flex;flex-direction:column;gap:.75rem;padding:.75rem .75rem 1.25rem;background:var(--stone-surface)}

.team__photo{position:relative;display:block;overflow:hidden;aspect-ratio:304 / 360;background:var(--stone-active)}

.team__photo img{position:absolute;left:var(--photo-left);top:var(--photo-top);width:var(--photo-width);max-width:none;height:auto}

.team__text{display:flex;flex-direction:column;gap:.25rem}

.team__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}

.team__name{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.375rem;line-height:1;letter-spacing:-.04125rem}

.team__role{flex-shrink:0;padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;background:rgb(241 240 239 / .8);backdrop-filter:blur(10px);color:var(--color-dark)}

.team__about{margin:0;font-size:max(14px,.875rem);line-height:1.5;color:var(--stone-muted)}

/* Telefon (Figma 704:1477; html[data-mobile], do 767 px): karty jedna pod drugą co 12 px na całą szerokość, wnętrze karty w skali
   .8537 desktopu (marginesy, imię 18,8 px, rola 10,2 px, opis 12 px), zdjęcie 314,5 × 307,3 z tym samym kadrem */
@media(width < 1100px){
:root[data-mobile] .team{gap:1.5rem;padding:0 var(--space-edge) 4.5rem}
:root[data-mobile] .team__grid{grid-template-columns:minmax(0,1fr);gap:.75rem}
:root[data-mobile] .team__card{gap:.6402rem;padding:.6402rem .6402rem 1.0671rem}
:root[data-mobile] .team__photo{aspect-ratio:314.51 / 307.32}
:root[data-mobile] .team__text{gap:.2134rem}
:root[data-mobile] .team__name{font-size:1.25rem;letter-spacing:-.0352rem}
:root[data-mobile] .team__role{padding:.2134rem .4268rem;font-size:.75rem}
:root[data-mobile] .team__about{font-size:.875rem}
}

/* Tablet (768-1099 px): układ telefonu, karty po dwie w rzędzie */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .team__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* CTA z rombami kamieni (Figma 479:895): panel 1360 z paddingiem 40, kolumna 632 i sześć próbek 160 px obróconych o 45°; opis: o-nas/O-NAS-SPECYFIKACJA.md */
.cta-stones{padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}

.cta-stones__panel{display:flex;align-items:center;justify-content:space-between;padding:2.5rem;background:var(--stone-surface)}

.cta-stones__column{display:flex;flex-direction:column;align-items:flex-start;gap:1.75rem;width:39.5rem}

.cta-stones__title{display:flex;align-items:flex-end}

/* Linie nagłówka z danych jak w CTA z próbkami (wcięcie pierwszej linii, odsłanianie maską) (bez znacznika: trójkąty usunięte 2026-10-05, klient) */
.cta-stones__heading{display:flex;flex-direction:column;align-items:flex-start;width:39.5rem;margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}

.cta-stones__heading .heading__line:first-child{margin-left:6.0625rem}
.cta-stones__mobile-text{display:none}


.cta-stones__button{color:var(--color-on-dark)}

/* Romby: kwadraty 160 px obrócone o 45° (przekątna 226 px), co 106 px w rzędzie, rzędy co 161 px; kolejne zachodzą na poprzednie */
.cta-stones__tiles{position:relative;flex-shrink:0;width:29.0034rem;height:24.2218rem}

/* Kafel niesie ruch pod kursorem (sections/cta_romby.js), romb w środku stały obrót −45°; kursor łapie tylko romb, nie rogi kafla */
.cta-stones__tile{position:absolute;width:10rem;height:10rem;pointer-events:none}

.cta-stones__diamond{display:block;width:100%;height:100%;overflow:hidden;rotate:-45deg;background:var(--stone-active);pointer-events:auto}

.cta-stones__diamond img{display:block;width:100%;height:100%;object-fit:cover}

.cta-stones__tile:nth-child(1){left:2.0711rem;top:2.0711rem}

.cta-stones__tile:nth-child(2){left:8.7132rem;top:2.0711rem}

.cta-stones__tile:nth-child(3){left:15.3553rem;top:2.0711rem}

.cta-stones__tile:nth-child(4){left:2.0711rem;top:12.1507rem}

.cta-stones__tile:nth-child(5){left:8.7132rem;top:12.1507rem}

.cta-stones__tile:nth-child(6){left:15.3553rem;top:12.1507rem}

/* Telefon (Figma 639:1364; html[data-mobile], do 767 px): panel w kolumnie z paddingiem 24, romby nad tekstem (kwadraty 66 px, układ
   z desktopu w skali 0,413), nagłówek 30 px płynący jak tekst (skalowanie.css), przycisk pod nim */
@media(width < 1100px){
:root[data-mobile] .cta-stones{padding:0 var(--space-edge) 4.5rem}
/* Po FAQ (bez dolnego odstępu) taki sam odstęp jak nad FAQ (klient 2026-10-25) */
:root[data-mobile] .faq + .cta-stones{padding-top:4.5rem}
:root[data-mobile] .cta-stones__panel{flex-direction:column;align-items:flex-start;gap:2rem;padding:1.5rem}
:root[data-mobile] .cta-stones__column{width:100%}
:root[data-mobile] .cta-stones__title{width:100%}
:root[data-mobile] .cta-stones__heading{display:block;flex:1;width:auto;font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .cta-stones__heading .heading__line:first-child{margin-left:0}
:root[data-mobile] .cta-stones .cta-stones__heading .heading__line{display:none}
:root[data-mobile] .cta-stones__mobile-text{display:inline}
:root[data-mobile] .cta-stones__tiles{order:-1;width:11.982rem;height:10.0066rem}
:root[data-mobile] .cta-stones__tile{width:4.1313rem;height:4.1313rem}
:root[data-mobile] .cta-stones__tile:nth-child(-n+3){top:.8556rem}
:root[data-mobile] .cta-stones__tile:nth-child(n+4){top:5.0198rem}
:root[data-mobile] .cta-stones__tile:is(:nth-child(1),:nth-child(4)){left:.8556rem}
:root[data-mobile] .cta-stones__tile:is(:nth-child(2),:nth-child(5)){left:3.5996rem}
:root[data-mobile] .cta-stones__tile:is(:nth-child(3),:nth-child(6)){left:6.3437rem}
}

.site-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--color-section-dark);color:var(--color-copper)}
.site-footer__wordmark{position:absolute;left:57.44%;top:36.2125rem;z-index:-1;width:117.9%;max-width:none;height:auto;translate:-50% -50%;rotate:-7.74deg;pointer-events:none;user-select:none}
.site-footer__inner{display:flex;flex-direction:column;justify-content:space-between;min-height:38.1875rem;padding:3.75rem 3rem 2.5rem}
.site-footer__top{display:flex;align-items:center;gap:7.5rem}
.site-footer__menu{display:flex;align-items:flex-start;gap:7.5rem}
.site-footer__symbol{flex-shrink:0}
.site-footer__symbol img{width:3.4375rem;height:3.4375rem}
/* Odstęp między kolumnami linków o 8 px większy niż w projekcie (klient 2026-10-22, desktop; telefon i tablet mają własny) */
.site-footer__nav{display:flex;align-items:flex-start;gap:calc(2rem + 8px)}
/* Kolumna co najmniej 120 px jak w projekcie, szersza dla dłuższego linku (np. „Współprace marketingowe”, linki bez łamania przez animację) */
.site-footer__column{display:flex;flex-direction:column;gap:1.25rem;min-width:7.5rem}
.site-footer__title{font-size:max(10px,.625rem);font-weight:500;text-transform:uppercase;white-space:nowrap}
.site-footer__links{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none}
.site-footer__link{display:block;width:max-content;font-size:max(12px,.75rem);white-space:nowrap}
.site-footer__link-window{display:block;height:1.35em;overflow:hidden}
.site-footer__link-line{display:block;line-height:1.35;transition:transform .45s var(--ease-out)}
.site-footer__link-line--accent{color:var(--color-accent)}
.site-footer__link:is(:hover,:focus-visible) .site-footer__link-line{transform:translateY(-100%)}

/* Przekładane zdjęcia */
.site-footer__gallery{position:relative;flex-shrink:0;width:23.25rem;height:20.1625rem;margin-left:auto;margin-right:6.3125rem;touch-action:pan-y;cursor:grab;user-select:none}
.site-footer__gallery.is-dragging{cursor:grabbing}
.site-footer__gallery:focus-visible{outline:1px solid var(--color-ink);outline-offset:.75rem}
.site-footer__stack{position:absolute;inset:0}
.site-footer__photo{position:absolute;left:11.3838rem;top:50%;width:15.6722rem;height:19.6686rem;margin:-9.8343rem 0 0 -7.8361rem;overflow:hidden;background:var(--color-nav-active);will-change:transform}
.site-footer__photo:nth-child(1){z-index:3}
.site-footer__photo:nth-child(2){z-index:2;transform:translateX(3.5194rem) rotate(5.13deg) scale(.9605)}
.site-footer__photo:nth-child(3){z-index:1;transform:translateX(-3.1638rem) rotate(-4.34deg) scale(.9605)}
.site-footer__photo img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.site-footer__dots{position:absolute;left:3.625rem;top:20.9375rem;display:flex;gap:.25rem}
.site-footer__dot{position:relative;overflow:hidden;width:.8125rem;height:2px;background:var(--color-copper-dim);transition:width .6s var(--ease-ui)}
.site-footer__dot.is-active{width:2.125rem}
.site-footer__dot-fill{position:absolute;inset:0;background:var(--color-copper);transform:scaleX(0);transform-origin:left center}

.site-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem;font-size:max(12px,.75rem);font-weight:500;color:var(--color-footer-muted)}
.site-footer__legal{display:flex;align-items:center;gap:5.75rem}
.site-footer__legal-links{display:flex;gap:1.25rem;margin:0;padding:0;list-style:none}
.site-footer__small-link{transition:color .3s ease}
.site-footer__small-link:is(:hover,:focus-visible){color:var(--color-copper)}
@media(prefers-reduced-motion:reduce){.site-footer__link-line,.site-footer__dot,.site-footer__small-link{transition:none}}

/* Telefon (Figma 639:1384, od 2026-10-05 bez zdjęć; html[data-mobile], do 767 px): symbol, 48 px niżej kolumny linków 2 × 2, linki
   prawne jeden pod drugim, na dole prawa i autor; napis BELVIO (ten sam plik co na desktopie) u dołu poziomo, wyśrodkowany, 116,5% szerokości
   (po 8,3% poza krawędzie), widać 60% jego wysokości (Figma 877:1811, klient 2026-10-23; tablet tak samo). Wysokość napisu zależy od szerokości
   ekranu (26,5vw), więc dolny odstęp stopki też: widoczna część napisu (16vw) + 60 px przerwy (3.75rem, przy 375 px razem 120 px jak w projekcie) */
@media(width < 1100px){
:root[data-mobile] .site-footer__inner{justify-content:flex-start;gap:2.5rem;min-height:0;padding:3rem var(--space-edge) calc(16vw + 3.75rem)}
:root[data-mobile] .site-footer__top{flex-direction:column;align-items:flex-start}
:root[data-mobile] .site-footer__gallery{display:none}
:root[data-mobile] .site-footer__menu{flex-direction:column;gap:3rem;width:100%}
:root[data-mobile] .site-footer__nav{flex-wrap:wrap;gap:2.25rem 1.5rem;width:100%}
:root[data-mobile] .site-footer__column{width:calc(50% - .75rem)}
:root[data-mobile] .site-footer__title{font-size:.75rem}
:root[data-mobile] .site-footer__link{font-size:.875rem}
/* Telefon i tablet bez animacji po najechaniu: długi link (np. „Współprace marketingowe”) łamie się w swojej kolumnie */
:root[data-mobile] .site-footer__link{width:auto;white-space:normal}
:root[data-mobile] .site-footer__link-window{height:auto}
:root[data-mobile] .site-footer__link-line--accent{display:none}
:root[data-mobile] .site-footer__bottom{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:2.5rem 2rem;font-size:.875rem}
:root[data-mobile] .site-footer__legal{display:contents}
:root[data-mobile] .site-footer__legal-links{grid-row:1;grid-column:1 / -1;flex-direction:column;gap:.75rem}
:root[data-mobile] .site-footer__copy{grid-row:2}
:root[data-mobile] .site-footer__copy,:root[data-mobile] .site-footer__bottom > .site-footer__small-link{font-size:.75rem}
:root[data-mobile] .site-footer__wordmark{left:50%;top:calc(100% - 16vw);width:116.5%;translate:-50% 0;rotate:none}
}


/* Skalowanie według bazy 1680 px (OSMO, opis: 03-design/OSMO.md) dla stron z html[data-scale] (od 2026-10-02 wszystkie strony serwisu).
   Jednostka 16 px przy 1680, poniżej proporcjonalnie do 13,714 px przy 1440; od 1440 do 1152 bez dalszego zmniejszania (od 2026-10-03, klient:
   na małych monitorach treść, przyciski i nav jak przy 1440, a siatki kalkulatorów, w których coś się nie mieści, tracą kolumnę:
   modules/dopasuj-siatke.js); poniżej 1152 (tablet, jeszcze bez projektu) proporcjonalnie od rozmiarów z 1440, bo przy 1024 pasek nav
   by się nie mieścił: min(1440px, 125vw), 1440 / 1152 = 1,25. Powyżej 1680 typografia nie rośnie, pudełko treści 1680 → 1700 (1920) → 1720 px.
   Teksty bazowe 10–14 px zachowują swój rozmiar przy skalowaniu w dół. Reguły tylko strony głównej: sections/home-scaling.css; hero usługi (.product) do 4K: hero_produkt.css */
:root[data-scale]{--size-container-ideal:1680;--size-container-min:min(1440px,125vw);--size-container-max:1680px;--page-box:min(100%,1680px)}
@media(min-width:1680px){
  :root[data-scale]{--page-box:calc(1680px + (100vw - 1680px) / 12)}
}
@media(min-width:1920px){
  :root[data-scale]{--page-box:min(1720px,calc(1700px + (100vw - 1920px) / 96))}
}

/* Treść w pudełku strony; sekcje z tłem lub torem do krawędzi ekranu ustawiają pudełko same (home-scaling.css) */
html[data-scale] main>:is(section,article):not(.hero):not(.product):not(.about-film):not(.services):not(.steps):not(.reviews){width:var(--page-box);margin-inline:auto}
html[data-scale] :is(.site-header,.mega-menu){width:calc(var(--page-box) - 2 * var(--space-edge));left:0;right:0;margin-inline:auto}
html[data-scale] .site-footer__inner{width:var(--page-box);margin-inline:auto}

/* Minima drobnego tekstu we wspólnych elementach (nagłówek, stopka, karty) */
html[data-scale] :is(.site-header__language,.site-footer__title,.service-card__more){font-size:max(10px,.625rem)}
html[data-scale] :is(.site-footer__link,.stone-card__category,.stone-card__tag,.stone-card__badge,.stone-card__unit,.article-card__time,.article-card__category,.service-card__brand){font-size:max(12px,.75rem)}
html[data-scale] :is(.site-nav__link,.site-header__secondary){font-size:max(14px,.875rem)}

/* Minima na podstronach: filtry katalogu artykułów i mebli, data i podpisy wpisu, przycisk albumu i role zespołu (O nas) */
html[data-scale] :is(.blog__group legend,.blog__group>label,.post__date,.post__share-label,.post__share-status,.album__restore){font-size:max(10px,.625rem)}
html[data-scale] :is(.post__time,.team__role){font-size:max(12px,.75rem)}

/* Tekst z projektu mobile poza telefonem ukryty (reguły telefonu niżej) */
.text-mobile{display:none}

/* Telefon i tablet (do 1099 px, klient 2026-10-21: tablet na układzie telefonu, tylko większy) na stronach z projektem mobile
   (html[data-mobile] z flagi "mobile" strony; strona główna: Figma 633:1422 przy 375 px): stała jednostka 16 px zamiast skali 1680,
   margines strony 20 px, pudełko na całą szerokość. Reguły sekcji na końcu ich plików CSS (ten sam próg, poza etapami realizacji,
   które na tablecie zostają w układzie desktopu). Tablet (od 768 px): jednostka 18 px przy 768, 20 px przy 1024, margines 36-41 px,
   więc cały układ telefonu rośnie proporcjonalnie */
@media(width < 1100px){
  :root[data-mobile]{--size-font:16px;--space-edge:1.25rem;--page-box:100%}
  /* Linie nagłówków z danych zawijają się, gdy są dłuższe niż ekran (na desktopie jedna linia bez łamania) */
  :root[data-mobile] .heading__line{width:fit-content;white-space:normal}
  /* Nagłówki płynące jak zwykły tekst (Figma: etapy, CTA z rombami, hero O nas): linie w jednym akapicie, wejście bez masek (modules/heading.js) */
  :root[data-mobile] :is(.steps__heading,.cta-stones__heading,.album__heading) .heading__line{display:inline;overflow:visible;clip-path:none;padding:0;margin:0}
  :root[data-mobile] :is(.steps__heading,.cta-stones__heading,.album__heading) .heading__line+.heading__line::before{content:" "}
  :root[data-mobile] :is(.steps__heading,.cta-stones__heading,.album__heading) .heading__mask{display:none}
  /* Teksty z projektu mobile (klient: celowo krótsze albo pominięte): .text-mobile tylko na telefonie, .text-desktop poza nim */
  :root[data-mobile] .text-mobile{display:inline}
  :root[data-mobile] .text-desktop{display:none}
}
@media(min-width:768px) and (width < 1100px){
  :root[data-mobile]{--size-font:calc(12px + .78125vw);--space-edge:2rem}
}