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

/* Pole formularza (Figma 287:427, formularz kontaktowy): jeden komponent dla kontaktu (sekcja i panel z prawej; w kalkulatorze próba cofnięta);
   opis: strona-kamienia/KONTAKT-SPECYFIKACJA.md. Pole 52 px na jasnym tle z linią 0,5 px, fokus w kolorze tekstu */
.field{position:relative;display:flex;flex-direction:column;min-width:0}

/* Pole obowiązkowe (Figma 510:1071, klient: wszędzie): pomarańczowy kwadrat 8 px w prawym górnym rogu pola, sam z atrybutu required */
.field:has(.field__control:required)::after{content:'';position:absolute;right:-2px;top:-2px;z-index:1;width:.5rem;height:.5rem;background:var(--color-accent);pointer-events:none}

.field__control{width:100%;height:3.25rem;padding:.75rem;border:.5px solid var(--calc-line);border-radius:0;background:var(--color-field);font:1rem/1.35 var(--font-body);color:var(--color-ink);transition:border-color .3s}

.field__control::placeholder{color:var(--stone-muted);opacity:1}

.field__control:hover{border-color:color-mix(in srgb,var(--stone-muted) 45%,var(--calc-line))}

.field__control:is(:focus,:focus-within){border-color:var(--color-ink);outline:none}

.field__control:focus-visible{outline:1px solid var(--color-ink);outline-offset:-1px}

/* Błąd (np. puste pole obowiązkowe po „Wyślij”, modules/kontakt.js): komunikat pod polem, ramka w kolorze błędu jak w kalkulatorze */
.field__error{display:block;margin-top:.25rem;font-size:max(12px,.75rem);line-height:normal;color:var(--color-waste)}

.field__error[hidden]{display:none}

.field.is-invalid .field__control{border-color:var(--color-waste)}

/* Liczby bez strzałek przeglądarki */
.field__control[type=number]{-moz-appearance:textfield;appearance:textfield}

.field__control[type=number]::-webkit-inner-spin-button,.field__control[type=number]::-webkit-outer-spin-button{margin:0;appearance:none}

/* Etykieta w polu (--float): puste pole pokazuje ją jak podpowiedź (14 px na środku), przy wpisywaniu i po wpisaniu unosi się na górę pola
   (10 px, 4 px od góry), a wartość stoi pod nią. Pola tekstowe mają placeholder=" ", żeby CSS wiedział, czy są puste; lista i suwak mają etykietę zawsze u góry */
.field--float .field__control{padding:1.25rem .75rem .375rem}

/* Etykieta nad wpisaną wartością 11 px (klient 2026-10-29, wcześniej 10 px) */
.field__label{position:absolute;left:calc(.75rem + .5px);top:calc(.25rem + .5px);max-width:calc(100% - 1.5rem);overflow:hidden;font-size:max(11px,.6875rem);line-height:normal;color:var(--stone-muted);white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:top .25s var(--ease-out),translate .25s var(--ease-out),font-size .25s var(--ease-out)}

.field__control:placeholder-shown:not(:focus) + .field__label{top:1.625rem;translate:0 -50%;font-size:max(14px,.875rem)}

/* Jednostka (np. cm) po prawej, na wysokości wartości */
.field--unit .field__control{padding-right:2.5rem}

.field__unit{position:absolute;right:.75rem;top:1.375rem;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--stone-muted);pointer-events:none}

/* Lista: strzałka po prawej, tekst 14 px */
.field__select{position:relative;display:block}

.field__select::after{content:'';position:absolute;top:50%;right:.75rem;width:1rem;height:1rem;margin-top:-.5rem;background:url('/assets/img/kamien/select-chevron.svg?v=a00603c348') center / contain no-repeat;pointer-events:none}

.field__select .field__control{padding-right:2.5rem;font-size:max(14px,.875rem);appearance:none;cursor:pointer}

.field__select .field__control:invalid{color:var(--color-ink)}

@media(prefers-reduced-motion:reduce){.field__control,.field__label{transition:none}}

/* Kontakt: doradca, formularz i panel z hero (Figma 152:5978, 393:2001); opis: strona-kamienia/KONTAKT-SPECYFIKACJA.md.
   Sekcja kontaktu i panel z prawej to ten sam komponent i ten sam CSS (bez wariantów): zmiana tutaj zmienia oba miejsca */
.contact-advisor{display:flex;align-items:flex-end;gap:1.5rem;color:var(--color-ink)}

.contact-advisor__photo{position:relative;flex-shrink:0;width:13.125rem;height:16.875rem;margin:0;overflow:hidden;background:var(--stone-active)}

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

/* Imię na zdjęciu: Sentient 16 px na przyciemnionym, rozmytym tle, 231 px od góry zdjęcia jak w Figmie. Padding 4 px góra/dół, 8 px boki
   (klient 2026-10-15: +4 px z boków); korekta .07em wyrównuje napis w tagu: z prawej ujemny odstęp liter po ostatniej literze,
   pod spodem miejsce na zejścia liter (imiona ich nie mają), więc 1 px więcej z prawej i u góry, 1 px mniej u dołu */
.contact-advisor__name{--name-pad-y:.25rem;--name-pad-x:.5rem;position:absolute;left:.75rem;top:14.4375rem;padding:calc(var(--name-pad-y) + .07em) calc(var(--name-pad-x) + .07em) calc(var(--name-pad-y) - .07em) var(--name-pad-x);font:300 1rem/normal var(--font-display);letter-spacing:-.03rem;background:rgb(23 7 7 / .5);backdrop-filter:blur(10px);color:var(--color-light)}

.contact-advisor__details{display:flex;flex-direction:column;gap:1rem}

.contact-advisor__group{display:flex;flex-direction:column;align-items:flex-start;gap:.375rem}

.contact-advisor__meta{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}

.contact-advisor__phone,.contact-advisor__email{font-weight:400;line-height:normal;color:inherit;text-decoration:none;transition:color .3s}

.contact-advisor__phone{font-size:1.875rem}

.contact-advisor__email{font-size:1.375rem}

.contact-advisor__phone:is(:hover,:focus-visible),.contact-advisor__email:is(:hover,:focus-visible){color:var(--color-accent)}

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

/* Status: kwadrat dostępności 8 px ze wspólnego components/status-dot.css */
.contact-advisor__status{--status-dot-size:.5rem;display:flex;align-items:center;gap:.25rem;margin:0;padding:0 .125rem;font-size:max(12px,.75rem);line-height:normal;color:var(--stone-muted)}

.contact-advisor__copy{display:flex;align-items:center;gap:.25rem;padding:0;border:0;background:none;font:inherit;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--stone-muted);cursor:pointer;transition:color .3s}

.contact-advisor__copy img{width:1rem;height:1rem}

.contact-advisor__copy:is(:hover,:focus-visible),.contact-advisor__copy.is-copied{color:var(--color-ink)}

/* Formularz: padding 32 px, odstępy 16 px między wierszami i 12 px w wierszu; same pola ze wspólnego components/field.css */
.contact-form{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;background:var(--stone-surface);color:var(--color-ink)}

.contact-form__title{margin:0;font-size:max(12px,.75rem);line-height:normal;text-transform:uppercase;color:var(--stone-muted)}

/* Wersja skrócona (etap 2 kalkulatora, Figma 510:1071): padding 20 px, duży nagłówek Sentient 24 px zamiast małego tytułu */
.contact-form--compact{padding:1.25rem}

.contact-form__heading{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.5rem;line-height:normal;letter-spacing:-.045rem;color:var(--color-ink)}

.contact-form__fields{display:flex;flex-direction:column;gap:1rem}
.contact-form__notes{display:flex;flex-direction:column;gap:.5rem;margin:-.25rem 0 0;padding:0;list-style:none;font-size:1rem;line-height:1.375}
.contact-form__notes li{display:flex;align-items:center;gap:.375rem}
.contact-form__notes img{flex:none;width:1.25rem;height:1.25rem}
.contact-form:has(.contact-form__notes) .field__control:focus-visible{outline:none;border:1px solid var(--color-ink)}
.contact-form:has(.contact-form__notes) .contact-form__checkbox{translate:0 1px}

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

/* Wiadomość (Figma 363:4040): 131 px, podpowiedź „Twoja wiadomość” 14 px szara jak puste etykiety innych pól, wpisany tekst 16 px */
.field__control.contact-form__message{display:block;height:8.1875rem;padding:.75rem 1rem;resize:none}

.contact-form__message::placeholder{font-size:max(14px,.875rem)}

.contact-form__footer{display:flex;align-items:flex-start;justify-content:space-between;gap:.875rem}

/* Zgoda: tekst 285 px (węższy, gdy obok przycisku jest mniej miejsca, np. w panelu); od 2026-10-03 skaluje się w dół do 10 px
   (klient: na małych rozdzielczościach był za duży), przy 1680 nadal 14 px */
.contact-form__consent{display:flex;align-items:flex-start;gap:.5rem;max-width:19.3125rem;font-size:max(10px,.875rem);line-height:normal;color:var(--stone-muted);cursor:pointer}

.contact-form__checkbox{flex-shrink:0;width:1rem;height:1rem;margin:0;border:.5px solid var(--calc-line);border-radius:0;background:var(--color-field) center / .625rem no-repeat;appearance:none;cursor:pointer;transition:background-color .2s,border-color .2s}

.contact-form__checkbox:checked{border-color:var(--color-dark);background-color:var(--color-dark);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.5l4.5-5' fill='none' stroke='%23f1f0ef' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.contact-form__checkbox:focus-visible{outline:1px solid var(--color-ink);outline-offset:2px}

/* Brak zgody po „Wyślij”: ramka pola wyboru w kolorze błędu, komunikat (.field__error) pod tekstem zgody */
.contact-form__consent.is-invalid .contact-form__checkbox{border-color:var(--color-waste)}

.contact-form__policy{color:var(--color-ink);text-decoration:none}

.contact-form__policy:is(:hover,:focus-visible){text-decoration:underline}

.contact-form__submit{flex-shrink:0;gap:.5rem;border:0;font-family:var(--font-body);color:var(--color-on-dark)}
.contact-form__submit:disabled{cursor:progress;opacity:.7}
/* Wysyłka (modules/kontakt.js): komunikat pod przyciskiem, błąd w kolorze błędów pól; pole-pułapka na automaty poza ekranem */
.contact-form__status{margin:0;font-size:max(12px,.875rem);line-height:1.3;color:var(--color-ink)}
.contact-form__status.is-error{color:var(--color-waste)}
.contact-form__status[hidden]{display:none}

/* Informacja pod przyciskiem podczas wysyłki (Figma 947:7106, partials/wysylanie-info.php): ikona 20 px w kolorze akcentu, tekst 14/1,5 z odliczaniem;
   wysokość rośnie od zera, a treść pojawia się płynnie, po wysyłce odwrotnie (modules/postep-wysylki.js, klasa is-visible) */
.send-info{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease-out),opacity .35s ease}
.send-info.is-visible{grid-template-rows:1fr;opacity:1}
.send-info__inner{min-height:0;overflow:hidden}
.contact-form__action{display:flex;flex-direction:column;flex-shrink:0}
.materials__send > .send-info{grid-column:3}
.send-info__row{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.5rem .25rem 0;font-size:max(12px,.875rem);line-height:1.5;color:var(--color-ink);transform:translateY(-.375rem);transition:transform .45s var(--ease-out)}
.send-info.is-visible .send-info__row{transform:none}
.send-info__row svg{flex-shrink:0;width:1.25rem;height:1.25rem;color:var(--color-accent)}
@media(prefers-reduced-motion:reduce){.send-info,.send-info__row{transition:none}}
@media(width < 1100px){:root[data-mobile] .materials__send > .send-info{grid-column:auto}}

/* reCAPTCHA v3 (modules/recaptcha.js): znaczek Google ukryty, bez informacji pod formularzem (decyzja klienta 2026-10-29; informacja tylko w polityce prywatności) */
.grecaptcha-badge{visibility:hidden}
.contact-form__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Panel z prawej: <dialog> na cały ekran, własne tło zamiast ::backdrop (animowane w modules/kontakt.js) */
.is-contact-open{overflow:hidden}

.contact-panel{--sheet-width:35.5rem;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:clip;background:none;color:var(--color-ink)}

.contact-panel::backdrop{background:none}

/* Zasłona strony pod panelem: wspólne zwykłe rozmycie i przyciemnienie (components/blur-veil.css); kliknięcie zamyka panel */
.contact-panel__overlay{cursor:pointer}

/* Wjazd panelu animowany przez GSAP. */
.contact-panel__sheet{position:absolute;top:0;right:0;bottom:0;width:var(--sheet-width);max-width:100%;background:var(--color-bg);transform:translate3d(0,0,0)}
.contact-panel[open] .contact-panel__sheet{will-change:transform}

/* Na niskich ekranach treść panelu przewija się; natywny pasek ukryty jak na całej stronie (nie zwęża formularza) */
.contact-panel__inner{display:flex;flex-direction:column;gap:2rem;height:100%;padding:2.5rem 1.5rem;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}

.contact-panel__inner::-webkit-scrollbar{display:none}
.contact-panel__viewport,.contact-panel__scroll{display:contents}

.contact-panel__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.contact-panel__title:focus{outline:0}.contact-panel__title{margin:0;font-size:max(12px,.75rem);font-weight:400;text-transform:uppercase;color:var(--stone-muted)}

.contact-panel__back{display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;background:none;cursor:pointer;transition:transform .45s var(--ease-out)}

.contact-panel__back img{width:2rem;height:2rem}

.contact-panel__back:is(:hover,:focus-visible){transform:translateX(-.25rem)}

/* Kurtyna: ciemny pas zjeżdża z panelu w prawo i odsłania treść przy otwieraniu */
.contact-panel__curtain{position:absolute;inset:0;z-index:3;background:var(--color-dark);transform:scaleX(0);transform-origin:right;pointer-events:none}

@media(prefers-reduced-motion:reduce){.contact-advisor__phone,.contact-advisor__email,.contact-advisor__copy,.contact-form__checkbox,.contact-panel__back{transition:none}
}

/* Kompaktowy doradca i formularz w wysuwanym panelu. */
.contact-panel .contact-advisor{gap:1rem}
.contact-panel .contact-advisor__photo{width:9rem;height:auto;aspect-ratio:7 / 9}
.contact-panel .contact-advisor__name{top:auto;bottom:.75rem;font-size:max(14px,calc(1rem - 2px))}
.contact-panel .contact-advisor__phone{font-size:1.625rem}
.contact-panel .contact-advisor__email{font-size:1.25rem}
.contact-panel .contact-form{padding:1.25rem}


/* Kontakt mobile: telefon 24 px, e-mail 20 px. */
@media(width < 1100px){
:root[data-mobile] .contact-panel{--sheet-width:calc(100% - 20px)}
:root[data-mobile] .contact-panel__inner{gap:0;padding:0;overflow:hidden}
:root[data-mobile] .contact-panel__top{flex:none;padding:calc(1.25rem + 8px) 1.5rem calc(1.25rem - 8px);background:var(--color-bg)}
:root[data-mobile] .contact-panel__back img{width:1.875rem;height:1.875rem}
:root[data-mobile] .contact-panel .contact-advisor{flex-wrap:wrap}
:root[data-mobile] .contact-panel .contact-advisor__details{flex:1 1 10rem;min-width:0}
:root[data-mobile] .contact-panel__viewport{position:relative;display:block;flex:1;min-height:0;overflow:hidden}
:root[data-mobile] .contact-panel__scroll{display:flex;flex-direction:column;gap:2rem;height:100%;padding:2.5rem 1.5rem 5.5rem;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none;scroll-padding-block:4rem}
:root[data-mobile] .contact-panel__scroll::-webkit-scrollbar{display:none}
:root[data-mobile] .contact-panel__scroll>*{flex-shrink:0}
:root[data-mobile] .contact-panel__viewport::before,:root[data-mobile] .contact-panel__viewport::after{content:'';position:absolute;left:0;right:0;z-index:2;pointer-events:none;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%)}
:root[data-mobile] .contact-panel__viewport::before{--fade-direction:to bottom;top:0;height:2.5rem}
:root[data-mobile] .contact-panel__viewport::after{--fade-direction:to top;bottom:0;height:3.5rem}
:root[data-mobile] .contact-advisor{gap:1rem}
:root[data-mobile] .contact-advisor__photo{width:7.8125rem;height:10.0437rem;aspect-ratio:auto}
:root[data-mobile] .contact-advisor__name{--name-pad-y:.15rem;--name-pad-x:.4rem;top:auto;left:.5625rem;bottom:.5625rem;font-size:.875rem}
:root[data-mobile] .contact-advisor__group{gap:.25rem}
:root[data-mobile] .contact-advisor__phone{font-size:1.5rem;letter-spacing:var(--phone-tracking,normal)}
:root[data-mobile] .contact-advisor__phone[style*="--phone-tracking"]{font-size:calc(1.5rem - var(--phone-smaller,0px));white-space:nowrap}
:root[data-mobile] .contact-advisor__email{font-size:1.25rem}
:root[data-mobile] .contact-advisor__hours{font-size:.75rem}
:root[data-mobile] :is(.contact-advisor__status,.contact-advisor__copy){font-size:.75rem}
:root[data-mobile] .contact-form{gap:1rem;padding:1rem}
:root[data-mobile] .contact-form__notes{line-height:1.3}
:root[data-mobile] .contact-form__notes li{align-items:flex-start}
:root[data-mobile] .contact-form__notes img{margin-top:calc(.65em - .625rem)}
:root[data-mobile] .contact-form__fields,:root[data-mobile] .contact-form__row{gap:.75rem}
:root[data-mobile] .contact-form__row{grid-template-columns:minmax(0,1fr)}
:root[data-mobile] .contact-form__footer{flex-direction:column;align-items:stretch;gap:1.25rem;margin-top:.5rem}
:root[data-mobile] .contact-form__consent{max-width:none;font-size:.875rem}
}

/* Okno z podziękowaniem po wysłaniu formularza (Figma 898:3166, modules/kontakt.js thanks()): wspólna zasłona strony, karta na środku,
   X 20 px nad kartą i 20 px od jej prawej krawędzi (krzyżyk jak w lightboxie zdjęć); zasłona i karta pojawiają się płynnie, ikona rysuje się raz */
html.is-thanks-open{overflow:hidden}
.thanks{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:20px;border:0;background:transparent;color:var(--color-on-dark)}
.thanks[open]{display:grid;place-items:center}
.thanks::backdrop{background:transparent}
.thanks .blur-veil{position:fixed;opacity:0;transition:opacity .45s ease}
.thanks__card{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;width:504px;max-width:100%;padding:32px;border:.5px solid var(--calc-line);background:var(--color-bg);color:var(--color-ink);text-align:center;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s ease,transform .6s var(--ease-out)}
.thanks.is-visible .blur-veil,.thanks.is-visible .thanks__card{opacity:1}
.thanks.is-visible .thanks__card{transform:none;transition-delay:.08s}
.thanks__icon{display:block;width:60px;height:60px;stroke:var(--color-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Rysowanie kreski (tylko raz, bez pętli): najpierw ramka, potem ptaszek */
.thanks__icon path{stroke-dasharray:1;stroke-dashoffset:1}
.thanks.is-visible .thanks__frame{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out) .25s}
.thanks.is-visible .thanks__tick{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-out) .9s}
.thanks__copy{display:flex;flex-direction:column;gap:8px;max-width:440px}
.thanks__title{margin:0;font:300 24px/1.2 var(--font-display);letter-spacing:-.03em}
.thanks__text{margin:0;color:var(--color-grey);font-size:14px;line-height:1.6}
/* Przycisk 52 px, krzyżyk 24 px na środku: 14 px marginesu wewnątrz przycisku odjęte od odstępów 20 px */
.thanks__close{position:absolute;bottom:calc(100% + 6px);right:6px;display:grid;place-items:center;width:52px;height:52px;border:0;padding:0;background:transparent;color:var(--color-on-dark);cursor:pointer;opacity:0;transition:opacity .45s ease}
.thanks.is-visible .thanks__close{opacity:1}
.thanks__cross{position:relative;width:24px;height:24px;transition:rotate .5s var(--ease-ui)}
.thanks__cross::before,.thanks__cross::after{content:'';position:absolute;left:50%;top:50%;width:100%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}
.thanks__cross::after{rotate:-45deg}
.thanks__close:is(:hover,:focus-visible) .thanks__cross{rotate:90deg}
.thanks__close:focus:not(:focus-visible){outline:none}
.thanks__close:focus-visible{outline:2px solid var(--color-on-dark);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .thanks .blur-veil,.thanks__card,.thanks__close,.thanks__cross,.thanks.is-visible :is(.thanks__frame,.thanks__tick){transition:none}
  .thanks__card{transform:none}
}

/* Znacznik dostępności (Figma 434:555 dane techniczne, 393:1981 doradca): zielony kwadrat z jasną obwódką 2 px; rozmiar przez --status-dot-size (domyślnie 10 px) */
.status-dot{box-sizing:border-box;flex-shrink:0;width:var(--status-dot-size,.625rem);height:var(--status-dot-size,.625rem);border:2px solid var(--color-available-ring);background:var(--color-available)}

/* Na żywo („Możesz dzwonić”): co 3,2 s obwódka lekko się rozjaśnia, a od kwadratu odchodzi słaba, wąska zielona fala, która gaśnie (klient: łagodniej niż pierwsza wersja) */
.status-dot--live{animation:status-dot-live 3.2s var(--ease-out) infinite}
/* Poza godzinami pracy (modules/status-dzwonienia.js): pomarańczowy kwadrat z jasną obwódką, bez fali */
.status-dot--closed{border-color:color-mix(in srgb,var(--color-accent) 35%,#fff);background:var(--color-accent)}

@keyframes status-dot-live{
  0%{border-color:var(--color-available-ring);box-shadow:0 0 0 0 color-mix(in srgb,var(--color-available) 22%,transparent)}
  25%{border-color:color-mix(in srgb,var(--color-available-ring) 82%,#fff)}
  70%{border-color:var(--color-available-ring);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--color-available) 0%,transparent)}
  100%{border-color:var(--color-available-ring);box-shadow:0 0 0 0 color-mix(in srgb,var(--color-available) 0%,transparent)}
}

@media(prefers-reduced-motion:reduce){.status-dot--live{animation:none}}

/* Tekstury i modele 3D (Figma 868:2134, wstępny projekt): kolumna 800 px jak treść wpisu (artykul.css .post__body), odstępy 28 px,
   zasady w dwóch boksach, dwie listy (tekstury, modele 3D) z polem wyboru, miniaturą 56 px (modele: większy render bez tła) i opisem; tekstury mailem (imię, e-mail, przycisk, zgoda pod spodem), modele 3D pod maską „Dostępne wkrótce”.
   Pola wyboru z components/contact-form.css (.contact-form__checkbox, .contact-form__consent) */
.materials{padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}
.materials__body{display:flex;flex-direction:column;gap:1.75rem;width:100%;max-width:50rem;margin-inline:auto}
.materials__back{display:inline-flex;align-items:center;align-self:flex-start;gap:.625rem;padding:.25rem .5rem;background:var(--stone-surface);font-size:max(12px,.875rem);line-height:1.6;color:var(--color-ink);text-decoration:none;transition:color .3s}
.materials__back:is(:hover,:focus-visible){color:var(--color-accent)}
/* Strzałka powrotu jako maska w kolorze tekstu: na hover zmienia kolor razem z napisem */
.materials__back-icon{flex-shrink:0;width:1rem;height:1rem;background:currentColor;mask:url('/assets/img/materialy/powrot.svg?v=0f408aa780') center / contain no-repeat}
.materials__title{margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}
.materials__lead{margin:0;font-size:1rem;line-height:1.5;color:var(--color-text-muted)}
.materials__rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;scroll-margin-top:7rem}
.materials__rule{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;background:var(--stone-surface)}
.materials__rule-title{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.25rem;line-height:normal;letter-spacing:-.0625rem}
.materials__points{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}
.materials__point{display:flex;align-items:flex-start;gap:.375rem;font-size:1rem;line-height:1.25;letter-spacing:-.03rem}
.materials__point img{flex-shrink:0;width:1.25rem;height:1.25rem}
.materials__download{display:flex;flex-direction:column;gap:.5rem;padding-top:2.5rem}
.materials__group-title{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.5rem;line-height:normal;letter-spacing:-.075rem}
.materials__label{margin:0;font-size:max(10px,.625rem);font-weight:500;line-height:1.6;text-transform:uppercase;color:var(--color-text-muted)}
.materials__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}
.materials__row{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--stone-surface);cursor:pointer}
.materials__check{width:1.25rem;height:1.25rem}
.materials__thumb{flex-shrink:0;width:3.5rem;height:3.5rem;margin-left:1.25rem;object-fit:cover}
/* Modele 3D: render przycięty do bryły, mieszczony w polu 128 × 96 px (szerokie wyspy i stół na całą szerokość, schody na całą wysokość) */
.materials__download--modele .materials__thumb{width:8rem;height:6rem;object-fit:contain}
.materials__name{font-family:var(--font-display);font-weight:300;font-size:1rem;letter-spacing:-.02rem}
.materials__maps{margin-left:auto;font-size:max(12px,.875rem);color:var(--color-text-muted);text-align:right}
/* Wysyłka tekstur (Figma 869:2569): imię lub firma, e-mail i przycisk w trzech równych kolumnach (pola 60 px), zgoda pod nimi */
.materials__send{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.5rem;padding-inline:.75rem}
.materials__send .field__control{height:3.75rem}
.materials__send .field__control:placeholder-shown:not(:focus) + .field__label{top:1.875rem}
.materials__button{gap:.5rem;height:3.75rem;padding:0 1rem;color:var(--color-on-dark)}
.materials__button-icon{width:1.5rem;height:1.5rem}
.materials__button:disabled{opacity:.45;cursor:default}
.materials__consent{max-width:none;margin-top:.375rem;padding-inline:.75rem}
.materials__download .contact-form__status{padding-inline:.75rem}
/* Modele 3D (klient 2026-10-25): lista pod półprzezroczystą maską w kolorze tła z napisem „Dostępne wkrótce” na środku */
.materials__soon{position:relative}
.materials__soon::after{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--color-bg) 72%,transparent)}
.materials__soon .materials__row{cursor:default}
.materials__soon-label{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;font-family:var(--font-display);font-weight:300;font-size:1.5rem;letter-spacing:-.075rem;color:var(--color-ink)}

/* Telefon i tablet (układ telefonu): nagłówek 32 px, zasady jedna pod drugą, opis map pod nazwą kamienia, zgoda nad przyciskiem na całą szerokość */
@media(width < 1100px){
:root[data-mobile] .materials{padding:7.5rem var(--space-edge) 4.5rem}
:root[data-mobile] .materials__body{gap:1.5rem}
:root[data-mobile] .materials__title{font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .materials__rules{grid-template-columns:minmax(0,1fr)}
:root[data-mobile] .materials__download{padding-top:1.5rem}
:root[data-mobile] .materials__row{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px .75rem}
:root[data-mobile] .materials__thumb{grid-row:span 2;margin-left:.25rem}
:root[data-mobile] .materials__maps{grid-column:3;margin-left:0;font-size:.75rem;text-align:left}
:root[data-mobile] .materials__check{grid-row:span 2}
:root[data-mobile] .materials__download--modele .materials__thumb{width:6.5rem;height:5rem}
/* Nazwa i opis jedno pod drugim, razem na środku wiersza w pionie (obie listy; klient 2026-10-23) */
:root[data-mobile] .materials__name{align-self:end}
:root[data-mobile] .materials__maps{align-self:start}
:root[data-mobile] .materials__send{grid-template-columns:minmax(0,1fr);gap:.5rem;padding-inline:0}
:root[data-mobile] .materials__consent{padding-inline:0}
:root[data-mobile] .materials__download .contact-form__status{padding-inline:0}
}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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