@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}}

.mood{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}
/* Napis „Zrób klimat” od 2026-10-05 o 15% większy (klient; było 5,875 × 2,5463 rem), róg przy przełączniku bez zmian; tego samego dnia
   odchudzony (klient: subtelnie, od początku pisania): kreska łuku 0,25 i grotu 0,33 zamiast 0,45, litery cieńsze pod maską, która
   zjada ich brzegi (--doodle-thin w jednostkach rysunku, 0,1 z każdej strony); kreska pióra liter zostaje po napisaniu (jej gaśnięcie
   rozjaśniało brzegi i napis chudł jeszcze raz na końcu); ustawienia czyta modules/motyw.js (buildDoodle) */
.mood__doodle{--doodle-line:.25;--doodle-head:.33;--doodle-letter-stroke:1;--doodle-thin:.2;position:absolute;right:3.375rem;bottom:2.5rem;width:6.7563rem;height:2.9282rem;pointer-events:none}
.mood__doodle-art{display:block;width:100%;height:100%}
.mood__doodle-art--mobile{display:none}
.mood__doodle svg{display:block;width:100%;height:100%;overflow:visible}
.mood__doodle path{--fill-0:var(--color-accent);--stroke-0:var(--color-accent);stroke-linecap:round;stroke-linejoin:round}
.mood__doodle [id="Polygon 3"]{fill:none;stroke:var(--color-accent);stroke-width:.3}
.mood__toggle{position:relative;flex-shrink:0;width:4rem;height:2rem;padding:0;border:1px solid var(--stone-border);background:var(--stone-active);cursor:pointer}
.mood__knob{position:absolute;left:3px;top:calc(50% - .75rem);display:grid;place-items:center;width:1.5rem;height:1.5rem;background:var(--color-bg);transition:transform var(--theme-duration) var(--ease-out),background-color var(--theme-duration) var(--theme-ease)}
.mood__knob img{width:1rem;height:1rem}
.mood__toggle[aria-checked=true] .mood__knob{transform:translateX(2rem);background:var(--stone-glow)}
.mood__picker{appearance:none;width:7.5rem;height:2rem;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.mood__picker::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--color-light) 0%,#ffd195 30%,#ffa07a 45%,#ff7a1a 60%,#ff4038 80%,#8ed2ff 100%)}
.mood__picker::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--color-light) 0%,#ffd195 30%,#ffa07a 45%,#ff7a1a 60%,#ff4038 80%,#8ed2ff 100%)}
.mood__picker[data-glow-mode=bialy]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f1f0ef 0%,#ffdba9 71.4286%,#ffd092 100%)}
.mood__picker[data-glow-mode=bialy]::-moz-range-track{background:linear-gradient(90deg,#f1f0ef 0%,#ffdba9 71.4286%,#ffd092 100%)}
/* Moc podświetlenia (próba na Home): tor od 40% do pełnego koloru światła */
.mood__picker--power::-webkit-slider-runnable-track{background:linear-gradient(90deg,color-mix(in srgb,var(--stone-glow) 40%,transparent) 0%,var(--stone-glow) 100%)}
.mood__picker--power::-moz-range-track{background:linear-gradient(90deg,color-mix(in srgb,var(--stone-glow) 40%,transparent) 0%,var(--stone-glow) 100%)}
.mood__picker::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;margin-top:calc(2px - .5rem);border:1px solid var(--color-light);border-radius:0;background:var(--stone-glow)}
.mood__picker::-moz-range-thumb{width:1rem;height:1rem;box-sizing:border-box;border:1px solid var(--color-light);border-radius:0;background:var(--stone-glow)}
.mood__picker:focus-visible{outline:1px solid var(--color-ink);outline-offset:4px}
/* Suwaki z podpisami ($moodPower: katalog na Home, kalkulator blatów): podpis nad suwakiem, przełącznik równo z dołem suwaków; w trybie jasnym pola ukryte (reguły przeniesione z home-scaling.css) */
.mood--power{align-items:flex-end;min-height:3.8125rem}
.mood__field{display:flex;flex-direction:column;gap:.625rem}
.mood__field:has(input[hidden]){display:none}
.mood__label{font-size:max(10px,.625rem);line-height:1.6;text-transform:uppercase;color:var(--stone-muted)}
.mood__doodle[hidden],.mood__picker[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.mood__knob{transition:none}}

/* Telefon (html[data-mobile], do 767 px; katalog Figma 635:1366 i 679:1221, kalkulator 652:1429): przełącznik 72 × 36 bez ramki,
   napis „Zrób klimat” w wersji z projektu mobile (Figma 663:3845), suwak koloru 100 px, bez suwaka mocy i podpisów (moc 90% z
   modules/motyw.js); położenie napisu i suwaka w CSS sekcji */
@media(width < 1100px){
:root[data-mobile] .mood__toggle{width:4.5rem;height:2.25rem;border:0}
:root[data-mobile] .mood__knob{left:5px;top:calc(50% - .8125rem);width:1.625rem;height:1.625rem}
:root[data-mobile] .mood__knob img{width:1.125rem;height:1.125rem}
:root[data-mobile] .mood__toggle[aria-checked=true] .mood__knob{transform:translateX(2.25rem)}
:root[data-mobile] .mood__doodle{--doodle-line:.45;--doodle-head:.45;--doodle-letter-stroke:1;--doodle-thin:0;bottom:auto;width:4.3056rem;height:2.0237rem}
:root[data-mobile] .mood__doodle-art{display:none}
:root[data-mobile] .mood__doodle-art--mobile{display:block}
:root[data-mobile] .mood__field:has(.mood__picker--power),:root[data-mobile] .mood__label{display:none}
:root[data-mobile] .mood__picker{width:6.25rem}
}

.mood--disabled .mood__toggle{opacity:.35;cursor:not-allowed}
.mood--disabled :is(.mood__doodle,.mood__field,.mood__picker){display:none}
@media(width < 1100px){
:root[data-mobile] :is(.mood__picker,.calc-range__input){height:2.75rem;margin-block:-.375rem;box-shadow:none;filter:none;touch-action:pan-y}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-webkit-slider-runnable-track{box-shadow:none;filter:none}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-moz-range-track{box-shadow:none;filter:none}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-webkit-slider-thumb{width:1.75rem;height:1.75rem;margin-top:calc(2px - .875rem);border:6px solid transparent;background-clip:content-box;box-shadow:none;filter:none}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-moz-range-thumb{width:1.75rem;height:1.75rem;border:6px solid transparent;background-clip:content-box;box-shadow:none;filter:none}
}
/* Cały kafel prawie kwadratowy, nieco wyższy niż szeroki (polecenie klienta 2026-09-27); zdjęcie zajmuje wysokość, która zostaje po podpisie */
.stone-card{--stone-card-ratio:20 / 21;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.75rem;min-width:0;aspect-ratio:var(--stone-card-ratio);padding:.75rem;border:1px solid transparent;background:var(--stone-surface);transition:border-color .3s}
.stone-card:is(:hover,:focus-visible){border-color:var(--stone-border)}
.stone-card[hidden]{display:none}
/* Warstwy zdjęcia są absolutne, więc zdjęcie nie ma własnej wysokości i wypełnia resztę kafla */
.stone-card__media{position:relative;overflow:hidden;flex:1 1 0;min-height:0;background:var(--stone-active)}
/* Zdjęcie płyty (rezerwa bez WebGL) i canvas z podświetleniem z modules/swiatlo.js w tym samym kadrze */
.stone-card__image,.stone-card__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.stone-card__canvas{opacity:0}
.stone-card__canvas.is-ready{opacity:1}
/* Pod gotowym canvasem zdjęcie płyty znika po jego pojawieniu się: przeglądarka, szklany kursor i nav nie malują ani nie dekodują dużego pliku */
.stone-card__media:has(.stone-card__canvas.is-ready) .stone-card__image{visibility:hidden;transition:visibility 0s .5s}
.stone-card:is(:hover,:focus-visible) :is(.stone-card__image,.stone-card__canvas){transform:scale(1.03)}
.stone-card__tags{position:absolute;left:.75rem;bottom:.75rem;display:flex;gap:.25rem;z-index:2;max-width:calc(100% - 1.5rem)}
.stone-card__tag{padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;white-space:nowrap;background:rgb(241 240 239 / .65);backdrop-filter:blur(10px);color:var(--color-dark)}
.stone-card__gallery{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Figma 307:396 (zdjęcie 421,33 × 335, od 2026-09-22 kwadrat 1:1): miniatury 82 × 103 w procentach zdjęcia; odstęp od dołu przeliczony na kwadrat (6,32% × 335 / 421,33), więc miniatury stoją tam, gdzie w Figmie względem szerokości; height:auto znosi atrybut height */
.stone-card__photo{position:absolute;width:19.46%;height:auto;aspect-ratio:82 / 103;object-fit:cover;box-shadow:0 6px 16px rgb(23 7 7 / .25);opacity:0;transition:transform .55s var(--ease-out),opacity .35s var(--ease-out)}
.stone-card__photo--1{right:18.26%;bottom:5.03%;transform:translateY(140%) rotate(-6.27deg)}
.stone-card__photo--2{right:5.75%;bottom:5.02%;transform:translateY(140%) rotate(15deg)}
.stone-card:is(:hover,:focus-visible) .stone-card__photo--1{opacity:1;transform:translateY(0) rotate(-6.27deg)}
.stone-card:is(:hover,:focus-visible) .stone-card__photo--2{opacity:1;transform:translateY(0) rotate(15deg);transition-delay:.12s}
.stone-card__content{display:flex;flex-direction:column}
.stone-card__header,.stone-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.stone-card__name{margin:0;font:300 1.375rem/1 var(--font-display);letter-spacing:-.04125rem}
.stone-card__category{flex-shrink:0;padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;background:rgb(241 240 239 / .8);color:var(--color-dark)}
.stone-card__price{font-size:max(14px,.875rem);line-height:1.6;white-space:nowrap}
.stone-card__unit{font-size:max(12px,.75rem);color:var(--stone-muted)}
:root[data-theme=dark] .stone-card{background:rgb(29 26 22 / .5);backdrop-filter:blur(14px);box-shadow:0 0 48px -8px color-mix(in srgb,var(--stone-glow) 20%,transparent)}
:root[data-theme=dark] .stone-card__tag{background:rgb(23 7 7 / .65);color:var(--color-ink)}
/* Rodzaj kamienia w trybie ciemnym w kolorach filtrów katalogu (Blaty, Wyspy, Ściany, Schody) */
:root[data-theme=dark] .stone-card__category{background:var(--stone-surface);color:var(--color-ink)}
:root[data-theme=dark] .stone-card__gallery{display:none}
/* Zmiana motywu: wartości ustawiane tylko w trybie ciemnym przechodzą razem z tokenami (base.css), obok własnych przejść karty */
:root.is-theme-changing .stone-card{transition:border-color .3s,background-color var(--theme-duration) var(--theme-ease),box-shadow var(--theme-duration) var(--theme-ease),backdrop-filter var(--theme-duration) var(--theme-ease)}
:root.is-theme-changing :is(.stone-card__tag,.stone-card__category){transition:background-color var(--theme-duration) var(--theme-ease),color var(--theme-duration) var(--theme-ease)}
@media(prefers-reduced-motion:reduce){.stone-card,.stone-card__image,.stone-card__canvas,.stone-card__photo{transition:none}.stone-card:is(:hover,:focus-visible) :is(.stone-card__image,.stone-card__canvas){transform:none}}
/* Informacja dla kamienia bez podświetlenia; wielkość jak tagi zastosowań (Blaty, Wyspy, Schody; klient 2026-10-09) */
.stone-card__badge{position:absolute;right:.75rem;bottom:.75rem;z-index:2;display:none;padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;white-space:nowrap;color:#f1f0ef;background:rgb(66 56 49 / .7);backdrop-filter:blur(10px)}
:root[data-theme=dark] .stone-card__badge{display:block}

/* Telefon: dwie kolumny, kwadratowe zdjęcie, nazwa 17 px, cena 13 px i strzałka 16 px.
   Rodzaj kamienia 8 px od rogu zdjęcia, bez tagów zastosowań i zdjęć realizacji. */
@media(width < 1100px){
:root[data-mobile] .stone-card{aspect-ratio:auto;gap:.5rem;padding:0;border:0;background:transparent;backdrop-filter:none;box-shadow:none}
:root[data-mobile] .stone-card__media{container-type:inline-size;flex:none;aspect-ratio:1}
:root[data-mobile] :is(.stone-card__tags,.stone-card__gallery){display:none}
/* Stała etykieta ma 23 znaki; ograniczenie ścisku zapobiega nakładaniu liter. */
:root[data-mobile] .stone-card__badge{left:.5rem;top:.5rem;right:auto;bottom:auto;max-width:calc(100% - 1rem);padding:.25rem .5rem;border:0;font-size:.75rem;white-space:normal;letter-spacing:clamp(-.05em,calc((100cqw - 2rem - 10.9em) / 23),0px)}
:root[data-mobile] .stone-card__name{font-size:1.0625rem;line-height:1.25rem;letter-spacing:-.03125rem}
:root[data-mobile] .stone-card__content{gap:.125rem;padding:0 calc(.375rem + 1px) calc(.5rem + 1px) 0}
:root[data-mobile] .stone-card__category{position:absolute;left:.5rem;bottom:.5rem;z-index:2;font-size:.75rem;backdrop-filter:blur(10px)}
:root[data-mobile] .stone-card__meta{gap:.25rem}
:root[data-mobile] .stone-card__price{min-width:0;font-size:.8125rem;line-height:1.2;white-space:normal}
:root[data-mobile] .stone-card__amount{white-space:nowrap}
:root[data-mobile] .stone-card__unit{font-size:.6875rem;white-space:nowrap}
/* Bez efektów najechania (od 2026-10-05, klient; na dotyku zostawały po stuknięciu): bez szklanego kursora ze strzałką, ramki,
   powiększenia zdjęcia i koloru „Więcej” */
:root[data-mobile] .stone-card .glass-cursor{display:none}
:root[data-mobile] .stone-card.has-glass-cursor{cursor:pointer}
:root[data-mobile] .stone-card:hover{border-color:transparent}
:root[data-mobile] .stone-card:hover :is(.stone-card__image,.stone-card__canvas){transform:none}
}
/* Najwęższe telefony (poniżej 360 px): bez dopisku „z VAT”, inaczej „Więcej” nie mieści się w karcie (ceny i tak brutto) */
@media(max-width:359px){
:root[data-mobile] .stone-card__vat{display:none}
}

.stones{padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}
.stones__header{display:flex;align-items:flex-end;gap:2rem;margin-bottom:1.75rem}
.stones__intro{flex:1;min-width:0}
.stones__heading{margin:0 0 1.5rem;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}
.stones__filters{display:flex;align-items:flex-end;gap:2.5rem}
.stones__filter-group{display:flex;flex-direction:column;gap:.5rem;min-width:0;margin:0;padding:0;border:0}
.stones__filter-group legend,.stones__filter-group>label{padding:0;font-size:max(10px,.625rem);font-weight:500;line-height:1.6;text-transform:uppercase;color:var(--stone-muted)}
.stones__filter-group legend{margin-bottom:.5rem}
.stones__filter-options{display:flex;gap:.5rem}
.stones__filter,.stones__select select,.stones__select-button{position:relative;border:0;border-radius:0;padding:.5rem 1rem;background:var(--stone-surface);color:var(--color-ink);font:500 max(14px,.875rem)/1.5 var(--font-body);white-space:nowrap;cursor:pointer;transition:background-color .3s,color .3s}
.stones__filter:is(:hover,[aria-pressed=true]){background:var(--stone-active)}
.stones__filter[aria-pressed=true]::after{content:"";position:absolute;right:-2px;top:-2px;width:.5rem;height:.5rem;background:var(--color-accent)}
.stones__select{position:relative}
.stones__select select{appearance:none;padding-right:2.25rem;max-width:100%}
.stones__select::after{content:"";position:absolute;right:1rem;top:50%;width:.75rem;height:.75rem;background:currentColor;mask:url('/assets/img/kamienie/chevron.svg?v=f971a2af7d') center / contain no-repeat;transform:translateY(-50%) rotate(90deg);pointer-events:none;transition:transform .3s var(--ease-out)}
.stones__select:has([aria-expanded=true])::after{transform:translateY(-50%) rotate(-90deg)}
/* Własna lista sortowania (modules/lista.js): fokus i podświetlenie opcji ciemniejszym kremowym zamiast pomarańczowej ramki i koloru systemu */
.stones__select-button{display:grid;justify-items:start;padding-right:2.25rem;max-width:100%}
.stones__select-button>span{grid-area:1 / 1}
.stones__select-button>[aria-hidden]{visibility:hidden}
.stones__select select:focus-visible,.stones__select-button:is(:hover,:focus-visible,[aria-expanded=true]){outline:0;background:var(--stone-active)}
.stones__select-list{position:absolute;left:0;top:calc(100% + .25rem);z-index:5;min-width:100%;margin:0;padding:.25rem 0;list-style:none;background:var(--stone-surface);box-shadow:0 .5rem 1.5rem rgb(23 7 7 / .12);outline:0}
.stones__select-option{padding:.5rem 1rem;font:500 max(14px,.875rem)/1.5 var(--font-body);white-space:nowrap;color:var(--color-ink);cursor:pointer}
.stones__select-option.is-active{background:var(--stone-active)}
.stones__mood-controls{width:13rem;flex-shrink:0;margin-bottom:.15625rem}
/* Z suwakiem mocy: barwa, moc i przełącznik w jednym rzędzie (stała szerokość, więc nagłówek nie przeskakuje po włączeniu trybu) */
.stones__mood-controls.mood--power{width:22rem}
.stones__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.stones__empty[hidden]{display:none}
.stones__empty{padding:4rem 0;font-size:1rem;line-height:1.6}
.stones__reset{margin-top:1rem;padding:.5rem 1rem;border:0;background:var(--stone-active);color:var(--color-ink);cursor:pointer}
@media(prefers-reduced-motion:reduce){.stones__select::after{transition:none}}
/* Panel filtrów, jego nagłówek, przycisk „Filtrowanie” i zasłona tylko na telefonie */
.stones__sheet-head,.stones__filters-open,.stones__veil,.stones__clear{display:none}

@media(min-width:1100px) and (max-width:1151px){
.stones__filters{flex-wrap:wrap}
.stones__filter-group{flex-shrink:0}
}

/* Telefon (Figma 635:1364, panel filtrów 663:3123; html[data-mobile], do 767 px): nagłówek 32 px, pod nim „Filtrowanie” (znacznik jak przy
   wybranym filtrze) i przełącznik trybu z napisem „Zrób klimat”; w trybie ciemnym między nimi suwak koloru (bez suwaka mocy).
   Karty w dwóch kolumnach co 8 px, 20 px od krawędzi ekranu. Filtry w panelu wysuwanym od dołu (modules/panel-dolny.js): tło strony,
   padding 40 / 20, tytuł 24 px i strzałka zamknięcia, grupy jedna pod drugą; nad panelem zasłona z rozmyciem rosnącym ku panelowi */
@media(width < 1100px){
:root[data-mobile] .stones{padding:4.5rem 0}
:root[data-mobile] main > .stones:first-child{padding-top:7.5rem}
:root[data-mobile] .stones__header{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem 1rem;margin:0 var(--space-edge) 1.5rem}
:root[data-mobile] :is(.stones__intro,.stones__mood-controls){display:contents}
:root[data-mobile] .stones__heading{grid-column:1 / -1;margin:0;font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
/* „Filtrowanie” i przełącznik bez ramki (Figma 635:1366) */
:root[data-mobile] .stones__filters-open{position:relative;display:block;grid-row:2;grid-column:1;padding:.5rem 1rem;border:0;background:var(--stone-active);color:var(--color-ink);font:500 max(14px,.875rem)/1.5 var(--font-body);cursor:pointer}
:root[data-mobile] .stones__filters-open::after{content:"";position:absolute;right:-2px;top:-2px;width:.5rem;height:.5rem;background:var(--color-accent)}
/* Wygląd przełącznika, napisu i suwaka na telefonie ze wspólnego components/mood.css; tu tylko położenie */
:root[data-mobile] .stones__mood-controls .mood__toggle{grid-row:2;grid-column:3}
/* Napis „Zrób klimat” 12 px przed przełącznikiem, w rzędzie przycisku (nagłówek 34 px + odstęp 20) */
:root[data-mobile] .stones__mood-controls .mood__doodle{right:5.275rem;top:3.4375rem}
/* Tryb ciemny (Figma 679:1221): suwak koloru 100 px w rzędzie przycisku, 20 px przed przełącznikiem (przy wąskim ekranie się zwęża) */
:root[data-mobile] .stones__mood-controls .mood__field{grid-row:2;grid-column:2;justify-self:end;width:100%;max-width:6.25rem;min-width:0;margin-right:.25rem}
:root[data-mobile] .stones__mood-controls .mood__picker{width:100%}
:root[data-mobile] .stones__filters{position:fixed;left:0;right:0;bottom:0;z-index:71;flex-direction:column;align-items:stretch;gap:1rem;max-height:calc(var(--ekran) - 5rem);overflow:hidden auto;overscroll-behavior:contain;padding:2.5rem var(--space-edge);background:var(--color-bg);color:var(--color-ink);visibility:hidden;transform:translateY(100%)}
:root[data-mobile] .stones__filters.is-open{visibility:visible;transform:none}
:root[data-mobile] .stones__sheet-head{display:flex;align-items:center;justify-content:space-between;gap:1.75rem;margin-bottom:.5rem}
:root[data-mobile] .stones__sheet-title{font:300 1.5rem/normal var(--font-display);letter-spacing:-.1225rem}
:root[data-mobile] .stones__sheet-close{flex-shrink:0;width:1.5rem;height:1.5rem;padding:0;border:0;background:currentColor;mask:url('/assets/img/kamienie/zamknij-panel.svg?v=d4e3372865') center / contain no-repeat;cursor:pointer}
:root[data-mobile] .stones__filter-options{flex-wrap:wrap}
:root[data-mobile] .stones__filters .stones__select{align-self:flex-start}
/* Lista sortowania otwiera się w górę: panel stoi na dole ekranu */
:root[data-mobile] .stones__filters .stones__select-list{top:auto;bottom:calc(100% + .25rem)}
:root[data-mobile] .stones__veil{display:block;position:fixed;inset:0;z-index:70;visibility:hidden}
:root[data-mobile] .stones__veil.is-open{visibility:visible}
:root[data-mobile].is-sheet-open{overflow:hidden}
:root[data-mobile] .stones__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:0 var(--space-edge)}
:root[data-mobile] .stones__empty{padding:3rem var(--space-edge)}
}

@media(width < 1100px){:root[data-mobile] .stones__clear{display:block;align-self:flex-start;margin:0;padding:1rem 0 .5rem;border:0;background:transparent;color:var(--stone-muted);font-size:.75rem;line-height:1.5;text-decoration:underline;text-underline-offset:2px;text-transform:lowercase;cursor:pointer}}

/* Tablet (768-1099 px): układ telefonu, dwie kolumny kart (klient 2026-10-21; wcześniej trzy) */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .stones__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .625rem}
}

.services{padding:8rem 0 2.25rem;background:var(--color-bg)}
main > .services:not(.services--related):last-child{padding-bottom:8rem}
.stones + .services{padding-top:0}
.services__inner{width:100%}
.services__header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin:0 var(--space-edge) 1.75rem}
.services__heading{margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}
/* Nagłówek: tytuł i strzałki po prawej (od 2026-10-05 strzałki na chwilę były pod kartami, klient wrócił do góry; trójkątny znacznik usunięty) */
/* Odstęp między strzałkami od 2026-10-05 mniejszy: 0,5 rem (było 0,9375) */
.services__controls{display:flex;gap:.5rem}
/* Strzałki (klient 2026-10-05): najpierw +20%, potem -10%: pole 3,51 rem, ikona 1,89 × 1,2825 rem (pierwotnie 3,25 i 1,75 × 1,1875) */
.services__arrow{display:grid;place-items:center;width:3.51rem;height:3.51rem;border:0;padding:0;background:transparent;cursor:pointer;transition:transform .35s var(--ease-out)}
.services__arrow>img{width:1.89rem;height:1.2825rem;transition:opacity .3s}
.services__arrow--previous>img{transform:rotate(180deg)}
.services__arrow:disabled{cursor:default}
.services__arrow:disabled>img{opacity:.25}
.services__arrow:not(:disabled):is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.services__track{display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.services__track::-webkit-scrollbar{display:none}
.services__track:focus-visible{outline:1px solid var(--color-ink);outline-offset:6px}
/* Karta w karuzeli (Figma 517:10259): 400 × 580 przy 1440 px; wygląd karty w components/service-card.css */
.services__card{flex:0 0 27.778%;aspect-ratio:400 / 580;min-height:26.875rem}
.services__card:first-child{margin-left:var(--space-edge)}
@media(min-width:1920px){.services__card{flex-basis:23%}}
.services__footer{display:flex;justify-content:flex-end;margin:2.25rem var(--space-edge) 0}
.services__progress{width:19rem;max-width:100%;height:2px;overflow:hidden;background:#bdb9b5}
.services__progress-thumb{display:block;width:100%;height:100%;background:var(--color-ink);transform-origin:left;will-change:transform}
@media(prefers-reduced-motion:reduce){.services__arrow{transition:none}}

/* Wspólna karuzela Home i katalogu kamieni */
html[data-scale] :where(.services:not(.services--related)) :is(.services__header,.services__footer){width:calc(var(--page-box) - 2 * var(--space-edge));margin-inline:auto}
html[data-scale] :where(.services:not(.services--related)) .services__card{flex-basis:calc(var(--page-box) * .27778);--service-box:min(100vw,calc(1680px + clamp(0px,(100vw - 1680px) / 12,20px) + clamp(0px,(100vw - 1920px) / 96,20px)));height:calc(var(--service-box) * .27778 * 1.45 - 28px);min-height:0;aspect-ratio:auto}
html[data-scale] :where(.services:not(.services--related)) .services__card:first-child{margin-left:calc((100% - var(--page-box)) / 2 + var(--space-edge))}
html[data-scale] :where(.services:not(.services--related)) .services__track::after{content:'';flex:0 0 max(0px,calc((100% - var(--page-box)) / 2 + var(--space-edge) - 1rem))}


.services__arrow{color:var(--color-ink);transition:transform .55s var(--ease-out),color .55s ease,opacity .55s ease}
.services__arrow:disabled{opacity:.25}
.services__arrow>img{visibility:hidden}
.services__arrow::after{content:'';position:absolute;width:1.89rem;height:1.2825rem;background:currentColor;mask:url('/assets/img/uslugi/strzalka-prawo-v2.svg?v=35fa48a52c') center / contain no-repeat}
.services__arrow--previous::after{mask-image:url('/assets/img/uslugi/strzalka-lewo-v2.svg?v=22f4a4c0c6')}
.services__arrow:not(:disabled):is(:hover,:focus-visible){color:var(--color-accent)}
@media(prefers-reduced-motion:reduce){.services__arrow{transition:none}}

.services__track{cursor:grab}
.services__track.is-dragging{cursor:grabbing;user-select:none}

.services--related{padding:8rem 0}
.faq + .services--related{padding-top:16rem}
.services--related .services__inner{width:var(--page-box,100%);max-width:100%;margin-inline:auto;padding-inline:var(--space-edge)}
.services--related .services__header{margin:0 0 1.75rem}
.services--related .services__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;cursor:default}
.services--related .services__card{height:calc(min(100vw,1680px) * .27778 * 1.45 - 68px);min-height:0;aspect-ratio:auto;margin:0}
@media(min-width:1680px){.services--related .services__card{height:calc(var(--page-box,1680px) * .27778 * 1.45 - 68px)}}
.services--related .services__controls,.services--related .services__footer{display:none}

/* Telefon (Figma 634:1364; html[data-mobile], do 767 px): nagłówek 32 px, karty 280 × 360 do prawej krawędzi ekranu,
   pod nimi jeden rząd: strzałki 28 × 21 po lewej i pasek postępu 168 px po prawej (nagłówek rozbity w siatkę sekcji) */
@media(width < 1100px){
:root[data-mobile] .services{padding:4.5rem 0 0}
:root[data-mobile] main > .services:not(.services--related):last-child{padding-bottom:4.5rem}
:root[data-mobile] .stones + .services{padding-top:0}
:root[data-mobile] .services__inner{display:grid;grid-template-columns:auto minmax(0,1fr);row-gap:1.25rem}
:root[data-mobile] .services__header{display:contents}
:root[data-mobile] .services__heading{grid-column:1 / -1;margin:0 var(--space-edge);font-size:2rem;line-height:1.1;letter-spacing:-.1225rem}
:root[data-mobile] .services__controls{grid-row:3;grid-column:1;gap:1.25rem;margin:.5rem 0 0 var(--space-edge)}
:root[data-mobile] .services__arrow,:root[data-mobile] .services__arrow::after{width:1.75rem;height:1.3125rem}
:root[data-mobile] .services__track{grid-column:1 / -1;gap:.75rem}
:root[data-mobile] .services__card{--card-shade:7.5rem;--card-pad:1.25rem;--card-gap:.75rem;--card-title:1.5rem;flex:0 0 17.5rem;height:22.5rem;min-height:0;aspect-ratio:auto}
:root[data-mobile] .services__footer{grid-row:3;grid-column:2;align-self:center;margin:.5rem var(--space-edge) 0 1.5rem}
:root[data-mobile] .services__progress{width:10.5rem}
}

/* Polecane usługi na telefonie (klient, 2026-10-06): siatka 1/2 + 1/2 z dwiema kartami, nagłówek 30 px nad nimi */
@media(width < 1100px){
:root[data-mobile] .services--related{padding:4.5rem 0}
:root[data-mobile] .faq + .services--related{padding-top:4.5rem}
:root[data-mobile] .services--related .services__inner{display:block;padding-inline:var(--space-edge)}
:root[data-mobile] .services--related .services__heading{margin:0 0 1.5rem}
:root[data-mobile] .services--related .services__track{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
:root[data-mobile] .services--related .services__card{--card-shade:6.5rem;--card-pad:1rem .75rem .875rem;--card-gap:.5rem;--card-title:1rem;height:15rem;flex:none}
:root[data-mobile] .services--related .services__card:nth-child(n+3){display:none}
}

/* Tablet (klient 2026-10-21): tytuły kart o 2 px mniejsze; polecane usługi kafelkami jak w karuzeli (proporcje 280 × 360, te same odstępy i teksty) */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .services__card{--card-title:calc(1.5rem - 2px)}
:root[data-mobile] .services--related .services__track{gap:.75rem}
:root[data-mobile] .services--related .services__card{--card-shade:7.5rem;--card-pad:1.25rem;--card-gap:.75rem;--card-title:calc(1.5rem - 2px);height:auto;aspect-ratio:280 / 360}
}

.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}
}