/* OSTOJA — Pracownia Wnetrz. Warstwa bazowa: tokeny, siatka adaptacyjna,
   komponenty wspoldzielone, loader, header, menu, modal.
   Sekcje tresci (hero, o nas, portfolio, uslugi, liczby, stopka) siedza w sections.css.

   Zasada progresywnego wzmocnienia: strona jest w pelni czytelna BEZ JS.
   Klasa .js ladowana jest przez modul na starcie — dopiero ona chowa loader
   i ustawia stany poczatkowe animacji wejscia. Jesli modul padnie, uzytkownik
   dostaje kompletna tresc zamiast czarnej planszy. */

/* ---------- fonty (self-hosted, zero CDN) ---------- */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/onest-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/onest-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/onest-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/onest-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/onest-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/onest-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/onest-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/onest-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokeny ---------- */
:root{
  --background:#ffffff;  --foreground:#111111;
  --ink:#0a0a0a;         --muted:#8d8d8d;      --subtle:#b6b6b6;
  --line:#e6e5e2;        --surface:#f1f0ee;    --surface-2:#e3e2df;
  --accent:#b15f2c;      --accent-from:#cf8047; --accent-to:#97501f;
  --hero-from:#ecebe9;   --hero-to:#c9c9c9;

  --radius-pill:9999px;  --radius-card:2rem;
  --radius-card-sm:1.25rem; --radius-control:0.875rem;
  --text-watermark:13rem;
  --container-shell:88rem;

  /* Podloga czytelnosci. Uklad zostaje czysto proporcjonalny (rem sterowane przez vw),
     ale sam TEKST nie schodzi ponizej wartosci px. Bez tego przy szerokosci 1100-1500px
     root spada do ~12px i tekst 0.875rem lezy na ~10.7px. */
  --fs-xs:max(0.75rem, 11.5px);
  --fs-sm:max(0.875rem, 13px);
  --fs-base:max(1rem, 14.5px);
  --fs-lg:max(1.125rem, 16px);

  --ease-line:cubic-bezier(0.215,0.61,0.355,1);
  --ease-word:cubic-bezier(0.165,0.84,0.44,1);
  --ease-spring:cubic-bezier(0.22,1,0.36,1);
  --ease-snap:cubic-bezier(0.2,0.8,0.2,1);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:auto }
body{ background:var(--background); color:var(--foreground); font-family:'Onest',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Ograniczenie ruchu. Bezpieczne, bo caly stan strony steruja klasy i setTimeout,
   nie zdarzenia transitionend — wygaszenie tranzycji niczego nie zakleszcza. */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ---------- siatka adaptacyjna (rem sterowany viewportem) ----------
   Kazda wartosc = 16 * 100 / bazowa szerokosc, w vw.
   Powyzej 1920px root ustawia JS (applyAdaptiveGrid) z tlumieniem 0.6666.

   MUSI stac PO resecie. Media query nie podnosi specyficznosci, wiec przy
   odwrotnej kolejnosci html{font-size:16px} z resetu wygrywa i cala siatka
   jest martwa — root stoi na 16px na kazdej szerokosci. */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

.shell{ max-width:var(--container-shell); margin-inline:auto }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto; z-index:130;
  border-radius:var(--radius-control); background:var(--ink);
  padding:.5rem 1rem; font-size:var(--fs-sm); color:#fff;
}
.skip-link:focus{ position:fixed; left:1rem; top:1rem }

/* ---------- animacje wejscia ----------
   Domyslnie WSZYSTKO widoczne. Stan poczatkowy dokladany dopiero, gdy modul
   zglosi sie klasa .js — inaczej awaria JS chowa cala tresc. */
.reveal{ opacity:1 }
.js .reveal{ opacity:0; transform:translateY(var(--rv-y,1rem)) scale(var(--rv-s,1));
  transition:opacity .8s var(--ease-spring), transform .8s var(--ease-spring);
  transition-delay:var(--rv-delay,0ms) }
.js .reveal.is-in{ opacity:var(--rv-op,1); transform:none }

/* Naglowki animowane liniami/slowami: sam blok stoi, rusza sie jego zawartosc. */
.js .reveal--lines, .js .reveal--words{ opacity:1; transform:none }

/* linie naglowka — klip + wjazd od dolu
   Padding z OBU stron jest konieczny: polskie znaki wychodza w dwie strony —
   kreska nad S/Z/O i kropka nad Z ponad wysokosc wersalika, ogonek A/E pod
   linie bazowa. Bez tego overflow:hidden ucinal je przy ciasnym line-height.
   Marginesy zdejmuja padding z ukladu, wiec odstepy wierszy zostaja bez zmian.
   translateY musi byc wieksze niz 100%, bo box jest teraz wyzszy od wnetrza —
   przy 100% tekst przeciekal dolna krawedzia w stanie ukrytym. */
.line-mask{ display:block; overflow:hidden;
  padding-top:.2em; margin-top:-.2em;
  padding-bottom:.16em; margin-bottom:-.16em }
.line-mask > span{ display:block }
.js .line-mask > span{ transform:translateY(150%); opacity:0;
  transition:transform .9s var(--ease-line), opacity .9s var(--ease-line);
  transition-delay:var(--rv-delay,0ms) }
.js .is-in .line-mask > span,
.js .line-mask.is-in > span{ transform:none; opacity:1 }

/* slowa — wjazd 24px z opoznieniem co 35ms */
.js .word{ display:inline-block; transform:translateY(24px); opacity:0;
  transition:transform .7s var(--ease-word), opacity .7s var(--ease-word);
  transition-delay:var(--rv-delay,0ms) }
.js .is-in .word{ transform:none; opacity:1 }

/* ---------- loader ---------- */
.loader{ display:none }
.js .loader{
  position:fixed; inset:0; z-index:120;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  background:var(--ink); color:#fff; border-radius:0 0 var(--radius-card) var(--radius-card);
  transform:translateY(0); transition:transform .7s var(--ease-spring);
}
.js .loader.is-out{ transform:translateY(-100%) }
.loader-center{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center;
  opacity:1; transform:none; transition:opacity .55s ease-out, transform .55s ease-out }
.loader.is-out .loader-center{ opacity:0; transform:translateY(-12px) }
.loader-brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:1.5rem }
.loader-brand .ico{ font-size:1.875rem; color:var(--accent-from) }
.loader-tag{ max-width:26ch; font-size:var(--fs-sm); color:rgba(255,255,255,.55) }
.loader-progress{ display:flex; flex-direction:column; gap:.75rem; width:min(22rem,72vw) }
.loader-track{ height:1px; background:rgba(255,255,255,.15) }
.loader-fill{ height:100%; width:0%; background:var(--accent-from); transition:width .1s ease-out }
.loader-meta{ display:flex; justify-content:space-between; font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }
.loader-count{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8) }
@media (min-width:640px){ .loader-brand{ font-size:1.875rem } }

/* ---------- komponenty wspoldzielone ---------- */
.ico{ display:inline-block; width:1em; height:1em; flex:none }

.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); font-weight:500;
  color:rgba(17,17,17,.7) }
.eyebrow::before{ content:''; width:.375rem; height:.375rem; border-radius:var(--radius-pill);
  background:rgba(17,17,17,.5) }
.eyebrow--light{ color:rgba(255,255,255,.7) }
.eyebrow--light::before{ background:rgba(255,255,255,.6) }
.eyebrow--ring{ border:1px solid var(--line); border-radius:var(--radius-pill); padding:.375rem 1rem }

.pill{ display:inline-block }
.pill > span{ display:inline-flex; align-items:center; gap:.75rem; border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:500; padding:.875rem 1.75rem;
  transition:transform .35s var(--ease-snap) }
.pill--arrow > span{ padding:.375rem .375rem .375rem 1.5rem }
.pill:hover > span{ transform:scale(1.04) }
.pill--dark > span{ background:var(--ink); color:#fff }
.pill--light > span{ background:var(--surface); color:var(--foreground) }
/* Mocniejsze niz --line: wariant outline stoi takze na zdjeciu w hero,
   gdzie hairline w kolorze --line znika calkowicie. */
.pill--outline > span{ border:1px solid rgba(17,17,17,.25); background:rgba(255,255,255,.35);
  backdrop-filter:blur(3px); color:var(--foreground) }
.pill-badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; flex:none;
  border-radius:var(--radius-pill); font-size:var(--fs-base); background:var(--ink); color:#fff }
.pill--dark .pill-badge{ background:#fff; color:var(--ink) }
.pill-badge .ico{ transition:transform .35s var(--ease-snap) }
.pill:hover .pill-badge .ico{ transform:translate(3px,0) }
.pill[data-arrow="up-right"]:hover .pill-badge .ico{ transform:translate(2px,-2px) }

.chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:var(--radius-pill); padding:.5rem 1rem; font-size:var(--fs-sm) }

.alink{ display:inline-flex }
.alink > span{ display:inline-block; opacity:.65; transition:transform .35s var(--ease-snap), opacity .35s var(--ease-snap) }
.alink:hover > span{ transform:translateX(4px); opacity:1 }
.alink--legal > span{ opacity:.7 }
.alink--legal:hover > span{ transform:translateX(3px); opacity:1 }

/* Hover wylaczony tam, gdzie nie ma wskaznika (dotyk) */
@media (hover:none){
  .pill:hover > span,
  .pill:hover .pill-badge .ico,
  .alink:hover > span{ transform:none }
}

/* ---------- header ---------- */
.header{ position:absolute; inset-inline:0; top:0; z-index:50 }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
.brand{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em;
  transition:transform .35s var(--ease-snap) }
.brand .ico{ font-size:1.25rem; color:var(--accent) }
.brand-btn:hover .brand{ transform:scale(1.04) }

.nav-main{ display:none }
.nav-main ul{ display:flex; gap:2rem; font-size:var(--fs-sm); font-weight:500 }
.nav-main button > span{ display:inline-flex; align-items:center; gap:.25rem; opacity:.8;
  transition:transform .35s var(--ease-snap), opacity .35s var(--ease-snap) }
.nav-main button:hover > span{ transform:translateY(-2px); opacity:1 }
.nav-caret{ font-size:var(--fs-xs); opacity:.6 }

.header-actions{ display:flex; align-items:center; gap:.75rem }
.chip-control{ border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4);
  backdrop-filter:blur(4px); border-radius:var(--radius-control) }
.clock{ display:none; align-items:center; gap:.75rem; padding:.5rem .75rem;
  font-size:var(--fs-xs); color:rgba(17,17,17,.7) }
.clock-label{ color:rgba(17,17,17,.45) }
.clock-time{ min-width:3.5rem; font-variant-numeric:tabular-nums; font-weight:500; color:var(--foreground) }
.clock-sep{ color:rgba(17,17,17,.3) }
.clock-date{ font-weight:500 }

.lang{ display:flex; align-items:center; gap:.25rem; padding:.5rem .625rem;
  font-size:var(--fs-xs); font-weight:500; color:rgba(17,17,17,.45) }
.lang:hover{ background:rgba(255,255,255,.7) }
.lang-opt{ transition:color .2s }
.lang-opt.is-active{ color:var(--foreground) }

.menu-btn:hover{ background:rgba(255,255,255,.7) }
.menu-btn > span{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem;
  font-size:var(--fs-xs); font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  transition:transform .35s var(--ease-snap) }
.menu-btn:hover > span{ transform:scale(1.05) }
.menu-btn .ico{ font-size:.875rem }
.menu-btn .label{ display:none }

@media (min-width:640px){
  .header-inner{ padding:1.5rem 2rem }
  .menu-btn .label{ display:inline }
}
@media (min-width:768px){ .clock{ display:flex } }
@media (min-width:1024px){ .nav-main{ display:flex } }
@media (hover:none){
  .brand-btn:hover .brand, .menu-btn:hover > span, .nav-main button:hover > span{ transform:none }
}

/* ---------- menu pelnoekranowe ---------- */
.navmenu{ position:fixed; inset:0; z-index:115; display:none; flex-direction:column;
  background:var(--ink); color:#fff; opacity:0; transition:opacity .4s var(--ease-spring) }
.navmenu.is-mounted{ display:flex }
.navmenu.is-open{ opacity:1 }
.navmenu-top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
.navmenu-brand{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-lg); font-weight:600 }
.navmenu-brand .ico{ font-size:1.25rem; color:var(--accent-from) }
.navmenu-close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-control); padding:.5rem 1rem; font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7);
  transition:color .3s, border-color .3s }
.navmenu-close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
.navmenu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center }
.navmenu-nav ul{ display:flex; flex-direction:column; gap:.25rem }
.navmenu-item{ display:flex; gap:1rem; width:100%; padding-block:.5rem; text-align:left;
  font-size:2.25rem; font-weight:600; letter-spacing:-.02em;
  transform:translateY(1rem); opacity:0; transition:all .5s ease-out }
.navmenu.is-open .navmenu-item{ transform:none; opacity:1 }
.navmenu-index{ font-size:var(--fs-base); font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
.navmenu-label{ color:rgba(255,255,255,.7); transition:color .3s }
.navmenu-item:hover .navmenu-index{ color:var(--accent-from) }
.navmenu-item:hover .navmenu-label{ color:#fff }
.navmenu-bottom{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 1.25rem; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.025em;
  color:rgba(255,255,255,.45) }
.navmenu-cta{ color:rgba(255,255,255,.7); text-align:left }
.navmenu-cta:hover{ text-decoration:underline; color:#fff }
@media (min-width:640px){
  .navmenu-top{ padding:1.5rem 2rem }
  .navmenu-item{ font-size:3.75rem }
  .navmenu-bottom{ flex-direction:row; align-items:center; justify-content:space-between; padding-inline:2rem }
}

/* ---------- modal zapytania ---------- */
.modal{ position:fixed; inset:0; z-index:110; display:none; align-items:flex-end; justify-content:center;
  padding:1rem; background:rgba(17,17,17,.3); backdrop-filter:blur(16px);
  opacity:0; transition:opacity .45s var(--ease-spring) }
.modal.is-mounted{ display:flex }
.modal.is-open{ opacity:1 }
.modal-panel{ position:relative; width:100%; max-width:32rem; overflow:hidden;
  border-radius:var(--radius-card); background:#fff; padding:1.5rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25); outline:1px solid var(--line); outline-offset:-1px;
  transform:translateY(28px); transition:transform .45s var(--ease-spring) }
.modal.is-open .modal-panel{ transform:none }
.modal.is-closing .modal-panel{ transform:translateY(18px) }
.modal-close{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem;
  display:grid; place-items:center; border-radius:var(--radius-pill);
  background:var(--surface); color:rgba(17,17,17,.6); transition:background .2s, color .2s }
.modal-close:hover{ background:var(--surface-2); color:var(--foreground) }
.modal-head{ display:flex; flex-direction:column; gap:.375rem; margin-bottom:1.5rem }
.modal-kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); font-weight:500;
  color:rgba(17,17,17,.6) }
.modal-kicker::before{ content:''; width:.375rem; height:.375rem; border-radius:var(--radius-pill);
  background:var(--accent) }
.modal-title{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
.modal-form{ display:flex; flex-direction:column; gap:1rem }
.field{ display:flex; flex-direction:column; gap:.375rem }
.field-label{ font-size:var(--fs-xs); font-weight:500; text-transform:uppercase; letter-spacing:.025em;
  color:rgba(17,17,17,.5) }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); background:rgba(241,240,238,.5);
  border-radius:var(--radius-control); padding:.75rem 1rem; font:inherit; font-size:var(--fs-sm);
  color:var(--foreground); outline:none; transition:border-color .2s, background .2s }
.field textarea{ resize:none }
.field input:focus, .field textarea:focus{ border-color:rgba(17,17,17,.3); background:#fff }
.modal-foot{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.modal-note{ font-size:var(--fs-xs); color:rgba(17,17,17,.45) }
.modal-success{ display:none; flex-direction:column; align-items:center; text-align:center;
  gap:1rem; padding-block:2rem }
.modal.is-done .modal-success{ display:flex }
.modal.is-done .modal-head, .modal.is-done .modal-form{ display:none }
.modal-badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:var(--radius-pill);
  background:var(--ink); color:var(--accent-from); font-size:1.5rem }
.modal-success p{ max-width:34ch; font-size:var(--fs-sm); color:rgba(17,17,17,.6) }
@media (min-width:640px){
  .modal{ align-items:center }
  .modal-panel{ padding:2rem }
  .modal-title{ font-size:1.875rem }
}