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

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

/* Karta wpisu (Figma 356:476): wspólna dla Porcji wiedzy, katalogu artykułów i „Zobacz również”; opis: strona-glowna/ARTYKULY-SPECYFIKACJA.md */
.article-card{position:relative;display:flex;flex-direction:column;gap:.75rem;min-width:0;color:var(--color-ink)}

.article-card[hidden]{display:none}

.article-card:focus-visible{outline-offset:4px}

.article-card__media{position:relative;overflow:hidden;aspect-ratio:437.33 / 335;background:var(--stone-active)}

.article-card__image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}

.article-card:is(:hover,:focus-visible) .article-card__image{transform:scale(1.05)}

.article-card__time{position:absolute;left:.75rem;bottom:.75rem;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)}

/* Siatka 2 kolumn: tytuł i zajawka w pierwszej, kategoria i strzałka w drugiej, odstęp 60 px; zajawka kończy się tam, gdzie tytuł (klient 2026-10-28) */
.article-card__content{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3.75rem;row-gap:.25rem}

.article-card__top,.article-card__bottom{display:contents}

.article-card__title{min-width:0;margin:0;font:300 1.375rem/1.2 var(--font-display);letter-spacing:-.04125rem}

.article-card__category{justify-self:end;align-self:start;padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;background:var(--stone-surface)}

.article-card__bottom .card-link-icon{justify-self:end;align-self:center}

/* Zajawka = początek tekstu wpisu, jedna linia ucięta wielokropkiem */
.article-card__excerpt{min-width:0;margin:0;overflow:hidden;font-size:max(14px,.875rem);line-height:1.4;white-space:nowrap;text-overflow:ellipsis;color:var(--stone-muted)}

@media(min-width:1100px){
.article-card__category{background:var(--stone-surface);color:var(--color-dark)}
:root[data-theme=dark] .article-card__category{background:var(--stone-surface);color:var(--color-ink)}
:root[data-theme=dark] .article-card__time{background:rgb(23 7 7 / .65);color:var(--color-ink)}
}

@media(prefers-reduced-motion:reduce){.article-card__image{transition:none}
.article-card:is(:hover,:focus-visible) .article-card__image{transform:none}
}

/* Telefon: zdjęcie 335 × 160, tytuł 19 px, kategoria 12 px, zajawka 14 px. */
@media(width < 1100px){
:root[data-mobile] .article-card__media{aspect-ratio:335 / 160}
:root[data-mobile] .article-card__content{column-gap:20px}
:root[data-mobile] .article-card__title{font-size:1.25rem;letter-spacing:-.031875rem}
:root[data-mobile] .article-card__category{font-size:.75rem}
:root[data-mobile] .article-card__time{font-size:.75rem}
:root[data-mobile] .article-card__excerpt{font-size:.875rem}
}

/* Tablet (klient 2026-10-21): tytuł karty artykułu jak nazwa kamienia w siatce kamieni */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .article-card__title{font-size:1.0625rem;line-height:1.25rem;letter-spacing:-.03125rem}
}

/* Widok wpisu (Figma 359:3168): zdjęcie główne 1360 × 335 z miniaturą i datą, treść w kolumnie 800 px; opis: strona-glowna/ARTYKULY-SPECYFIKACJA.md */
.post{display:flex;flex-direction:column;gap:1.75rem;padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}

.post__hero{position:relative;height:20.9375rem;overflow:hidden;background:var(--stone-active)}

.post__cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

/* Kwadrat ze zdjęciem głównym: ramka 2 px w kolorze kafla (Figma 359:3809, #e9e7e5) */
.post__thumb{position:absolute;left:.75rem;bottom:.75rem;width:12.5rem;height:12.5rem;overflow:hidden;border:2px solid var(--stone-surface)}

.post__thumb-image{display:block;width:100%;height:100%;object-fit:cover}

.post__date,.post__time{padding:.25rem .5rem;line-height:1.6;white-space:nowrap;background:rgb(241 240 239 / .65);backdrop-filter:blur(10px);color:var(--color-dark)}

.post__date{position:absolute;right:.75rem;bottom:.75rem;font-size:max(10px,.625rem)}

.post__body{display:flex;flex-direction:column;gap:1.75rem;width:100%;max-width:50rem;margin-inline:auto}

.post__meta{display:flex;align-items:center;gap:.75rem}

.post__category{padding:.25rem .5rem;font-size:max(14px,.875rem);line-height:1.6;background:var(--stone-surface)}

.post__time{font-size:max(12px,.75rem)}

.post__title{margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}

.post__text{display:flex;flex-direction:column;gap:1.5rem;font-size:1rem;line-height:1.5;color:var(--stone-muted)}

.post__text p{margin:0}

/* Lista punktów (wiersze „- …”): jak w regulaminie (dokument.css), kwadracik 4 px w kolorze akcentu, punkty co 8 px, 8 px pod akapitem */
.post__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}
.post__text>p+.post__list{margin-top:-1rem}
.post__list li{position:relative;padding-left:1.25rem}
.post__list li::before{content:'';position:absolute;left:.375rem;top:calc(.75em - 2px);width:4px;height:4px;background:var(--color-accent)}

/* Wyróżnik w tekście (**Twardość:**): o stopień grubszy font, nie bold */
.post__lead{font-weight:500}

.post__link{color:var(--color-ink);text-decoration:underline;text-underline-offset:.15em;transition:color .3s}

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

.post__section{display:flex;flex-direction:column;gap:.5rem}

/* Między głównymi częściami wpisu 12 px więcej niż między pozostałymi blokami (klient 2026-10-28); śródtytuły podrzędne bez dodatku */
.post__body>.post__section:not(.post__section--sub){margin-top:.75rem}

/* Śródtytuł 28 px: w Figmie token −3 px zlewał słowa przy tej wielkości, więc odstęp proporcjonalny jak w tytule (−0,065em) */
.post__subtitle{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.75rem;line-height:1.2;letter-spacing:-.065em}

/* Śródtytuł podrzędny (sekcja z podrzedna: true) i nazwa polecanego kamienia: 4 px mniejsze */
.post__section--sub .post__subtitle,.post__stone-title{font-size:calc(1.75rem - 4px)}

/* Kilka polecanych kamieni pod rząd: dwie kolumny, na telefonie jeden pod drugim */
.post__stones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem;align-items:start}

/* Lista kamieni jeden pod drugim (jeden_pod_drugim: true) */
.post__stones--list{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}

.post__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}

.post__pair-image{display:block;width:100%;height:22rem;object-fit:cover}

.post__figure{position:relative;height:24.6875rem;margin:0;overflow:hidden}

.post__figure-image{display:block;width:100%;height:100%;object-fit:cover}

/* Próbka kamienia na zdjęciu 160 px (klient 2026-10-28, wcześniej 200 px) */
.post__figure-stone{position:absolute;left:1.25rem;bottom:1.25rem;width:10rem;height:10rem;overflow:hidden;border:2px solid var(--color-light)}

.post__figure-stone img,.post__stone-thumb img{display:block;width:100%;height:100%;object-fit:cover}

.post__stone{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}

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

/* Przycisk jak „Kontakt” w hero kamienia: miniatura kamienia i jasny przycisk ze strzałką */
.post__stone-link{display:flex;align-items:center;color:var(--color-ink);transition:transform .35s var(--ease-out)}

.post__stone-link:is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}

.post__stone-thumb{width:3.875rem;height:3.875rem;overflow:hidden;background:var(--stone-active)}

.post__stone-button{display:flex;align-items:center;gap:.5rem;padding:1.125rem 1.25rem;font-size:1rem;line-height:1.6;background:var(--stone-active)}

.post__stone-link:is(:hover,:focus-visible) .arrow-swap__icon{transform:translate(100%,-100%)}

.post__stone-link:is(:hover,:focus-visible) .arrow-swap__icon--next{transform:translate(0,0)}

.post__share{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding-top:2.5rem}

.post__share-label{margin:0;font-size:max(10px,.625rem);font-weight:500;line-height:1.6;text-transform:uppercase;color:var(--stone-muted)}

.post__share-list{display:flex;align-items:center;gap:.5rem}

.post__share-button{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:0;background:var(--stone-surface);cursor:pointer;transition:background-color .3s}

.post__share-button img{width:1.5rem;height:1.5rem}

.post__share-button:is(:hover,:focus-visible){background:var(--stone-active)}

.post__share-status{margin-left:.5rem;font-size:max(10px,.625rem);line-height:1.6;color:var(--stone-muted)}

@media(prefers-reduced-motion:reduce){.post__link,.post__stone-link,.post__share-button{transition:none}
}

/* Telefon (Figma 718:1477; html[data-mobile], do 767 px): padding 120 / 20 / 72, bloki co 24 px; zdjęcie główne 240 px wysokości
   z kwadratem 100 px i datą 8 px od rogów; tytuł 30/34, śródtytuły 22 px; para zdjęć jedno pod drugim co 8 px (proporcja desktopu),
   zdjęcie z próbką w proporcji desktopu (próbka 84 px), link do kamienia 56 px; ikony udostępniania zawijają się na wąskim ekranie */
@media(width < 1100px){
:root[data-mobile] .post{gap:1.5rem;padding:0 var(--space-edge) 4.5rem}
:root[data-mobile] .post__hero{height:16.25rem;margin-inline:calc(-1 * var(--space-edge))}
:root[data-mobile] .post__thumb{left:1.25rem;bottom:.5rem;width:6.25rem;height:6.25rem}
:root[data-mobile] .post__date{right:1.25rem;bottom:.5rem;font-size:.75rem}
:root[data-mobile] .post__body{gap:1.5rem}
:root[data-mobile] .post__title{font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .post__subtitle{font-size:1.375rem}
:root[data-mobile] :is(.post__section--sub .post__subtitle,.post__stone-title){font-size:calc(1.375rem - 4px)}
:root[data-mobile] .post__stones{grid-template-columns:minmax(0,1fr)}
:root[data-mobile] .post__pair{grid-template-columns:minmax(0,1fr);gap:.5rem}
:root[data-mobile] .post__pair-image{height:auto;aspect-ratio:392 / 352}
:root[data-mobile] .post__figure{height:auto;aspect-ratio:800 / 395}
:root[data-mobile] .post__figure-stone{left:.5rem;bottom:.5rem;width:5.25rem;height:5.25rem}
:root[data-mobile] .post__stone-thumb{flex:none;width:3.85rem;height:3.85rem}
:root[data-mobile] .post__stone-button{height:3.85rem;padding:0 1.25rem}
:root[data-mobile] .post__share{padding-top:2rem}
:root[data-mobile] .post__share-list{flex-wrap:wrap}
}

/* Tablet (klient 2026-10-21): para zdjęć we wpisie obok siebie 1/2 + 1/2 */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .post__pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Porcja wiedzy (Figma 356:476) i „Zobacz również” pod wpisem (359:3725): nagłówek z jasnym przyciskiem i trzy karty (components/article-card.css); opis: strona-glowna/ARTYKULY-SPECYFIKACJA.md */
.articles{display:flex;flex-direction:column;gap:1.75rem;padding:12.5rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}

.articles--related{padding-block:8rem}

.articles__header{align-items:center}

/* Jasny wariant przycisku (Figma 359:3731): tło z tokenu, przy najechaniu tylko skala .button (bez wejścia innego koloru od strony kursora) */
.articles__button{--button-base:var(--stone-active);--button-gradient:var(--stone-active);--button-hover:var(--stone-active);padding:1.125rem 1.25rem;color:var(--color-ink)}

.articles__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.5rem}

/* Telefon (Figma 638:1375; html[data-mobile], do 767 px): nagłówek 30 px, dwie karty jedna pod drugą, przycisk „Wszystkie artykuły”
   pod kartami (nagłówek sekcji rozbity: display contents) */
@media(width < 1100px){
:root[data-mobile] .articles{gap:1.25rem;padding:4.5rem var(--space-edge)}
:root[data-mobile] .articles__header{display:contents}
:root[data-mobile] .articles__button{order:1;align-self:flex-start;margin-top:.25rem}
:root[data-mobile] .articles--related .articles__button{display:none}
:root[data-mobile] .articles__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
:root[data-mobile] .articles__grid>:nth-child(n+3){display:none}
/* Pod wpisem bez górnego odstępu: wpis kończy się marginesem 72 px */
:root[data-mobile] .post + .articles{padding-top:0}
}

/* Tablet (768-1099 px): dwie karty obok siebie, odstępy jak w siatce katalogu artykułów (klient 2026-10-21) */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .articles__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem .75rem}
}

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