:root{
  /* --- baza: jasny wapień. Ciepły, ale nie kremowy — to firma budowlana,
         nie salon meblowy. --- */
  --paper:#F4F2EF; --paper-2:#EAE7E2; --paper-3:#DAD6D0; --ivory:#FBFAF8;
  /* --- atrament: prawie czarny, neutralny. Drugorzędny tekst NIE jest brązowy —
         to był błąd, przez który cała strona zrobiła się bura. --- */
  --ink:#17171A; --ink-2:#2E2E32; --ink-soft:#3D3D43; --muted:#5F5F66;
  /* --- akcent: glina. Materiałowy, nie meblowy. Używany WYŁĄCZNIE jako sygnał:
         etykiety, liczby, strzałki, stan aktywny, znaczniki list.
         Nigdy jako wypełnienie dużego przycisku — od tego robi się tandetnie. --- */
  --accent:#A85A3C; --accent-dk:#8A462D; --accent-lt:#D9B49F;
  --line:rgba(23,23,26,.12); --line-strong:rgba(23,23,26,.22);
  --on-dark:#F4F2EF; --on-dark-mut:#A8A5A0;
  --ok:#3D3D43;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-text:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"Inter Tight","Inter",system-ui,sans-serif;
  --t-hero:clamp(40px,6vw,78px);
  --t-h2:clamp(29px,3.6vw,48px);
  --t-h3:clamp(20px,2vw,25px);
  --t-lead:clamp(18px,1.5vw,21px);
  --t-body:17px; --t-small:16px; --t-tiny:15px; --t-label:11px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --section:clamp(88px,9vw,152px);
  --wrap:1280px; --wrap-text:min(700px,66ch);
  /* --- ostre krawędzie. Zaokrąglenia 8-18 px to była główna przyczyna
         wrażenia zabawki. Budownictwo = precyzja = kąt prosty. --- */
  --r-sm:0px; --r:2px; --r-lg:2px;
  --shadow-1:0 1px 2px rgba(23,23,26,.05);
  --shadow-2:0 18px 40px -22px rgba(23,23,26,.28);
  --ease:cubic-bezier(.16,1,.3,1); --dur:520ms;
  --hdr-h:74px; --util-h:38px;
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 16px) }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:var(--t-body); line-height:1.62;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html,body{ overflow-x:clip; max-width:100% }
img,svg,video{ max-width:100%; display:block }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:inherit }
figure{ margin:0 }
ul{ margin:0; padding:0 }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-.018em; line-height:1.12; margin:0; text-wrap:balance }
h1{ font-size:var(--t-hero); letter-spacing:-.026em; line-height:1.05 }
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3); line-height:1.25 }
p{ margin:0 0 var(--s3); text-wrap:pretty; max-width:var(--wrap-text) }
p:last-child{ margin-bottom:0 }
.lead{ font-size:var(--t-lead); line-height:1.58; color:var(--ink-soft); max-width:min(620px,60ch) }
.label{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.19em; text-transform:uppercase; color:var(--accent-dk); display:block; margin:0 0 var(--s3) }
.label--quiet{ color:var(--muted) }
.num{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.15em; color:var(--accent-dk) }
strong,b{ font-weight:600 }
.u-quiet{ color:var(--muted) }
.wrap{ width:min(100% - 2*var(--s4), var(--wrap)); margin-inline:auto }
@media (max-width:640px){ .wrap{ width:min(100% - 2*var(--s3), var(--wrap)) } }
section{ padding-block:var(--section) }
/* sąsiadujące sekcje nie sumują odstępów — jeden oddech zamiast dwóch */
section + section{ padding-top:0 }
section + section.tint,
section + section.dark{ padding-top:var(--section) }
.sec-head{ max-width:min(740px,62ch); margin-bottom:clamp(36px,4vw,64px) }
.sec-head p{ margin-top:var(--s3) }
.sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); max-width:none }
@media (max-width:760px){ .sec-head--row{ display:block } }
.dark{ background:var(--ink); color:var(--on-dark) }
.dark .lead,.dark p{ color:var(--on-dark-mut) }
.dark .label{ color:var(--accent-lt) }
.dark h1,.dark h2,.dark h3{ color:var(--on-dark) }
.dark .num{ color:var(--accent-lt) }
.tint{ background:var(--paper-2) }
.grid{ display:grid; gap:clamp(20px,2.2vw,36px) }
.g-2{ grid-template-columns:repeat(2,1fr) }
.g-3{ grid-template-columns:repeat(3,1fr) }
.g-4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:960px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr } }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4.5vw,80px); align-items:start }
.split--wide{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
@media (max-width:900px){ .split,.split--wide{ grid-template-columns:1fr } }
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:var(--r-sm);
  font-size:var(--t-small); font-weight:600; text-decoration:none; cursor:pointer; text-align:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{ --bg:var(--accent-dk); --bd:var(--accent-dk) }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-strong) }
.btn--ghost:hover{ --bg:transparent; --fg:var(--accent-dk); --bd:var(--accent) }
.btn--onphoto{ --bg:rgba(255,255,255,.12); --fg:#fff; --bd:rgba(255,255,255,.6) }
.btn--onphoto:hover{ --bg:#fff; --fg:var(--ink); --bd:#fff }
.dark .btn--ghost{ --fg:var(--on-dark); --bd:rgba(242,240,235,.34) }
.dark .btn--ghost:hover{ --fg:#fff; --bd:rgba(242,240,235,.75) }
.btn__arrow{ transition:transform var(--dur) var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(3px) }
.link-arrow{
  display:inline-flex; align-items:center; gap:7px; color:var(--accent-dk);
  text-decoration:none; font-size:var(--t-small); font-weight:600;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color var(--dur) var(--ease);
}
.link-arrow:hover{ border-bottom-color:var(--accent) }
.dark .link-arrow{ color:var(--accent-lt) }
.dark .link-arrow:hover{ border-bottom-color:var(--accent-lt) }
:where(a,button,input,textarea,select,summary):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm) }
.util{ position:relative; z-index:70; background:var(--ink); color:var(--on-dark-mut); font-size:14px; min-height:var(--util-h); display:flex; align-items:center }
.util__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); width:min(100% - 2*var(--s4), var(--wrap)); margin-inline:auto; padding-block:8px }
.util a{ text-decoration:none; color:var(--on-dark); font-weight:500 }
.util a:hover{ color:#fff }
.util__right{ display:flex; gap:var(--s4); align-items:center }
@media (max-width:760px){ .util__right span{ display:none } }
@media (max-width:640px){ .util__in{ width:min(100% - 2*var(--s3), var(--wrap)) } }
.hdr{ position:sticky; top:0; z-index:60; width:100%; background:var(--paper); border-bottom:1px solid var(--line) }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:var(--hdr-h) }
.nav{ flex-wrap:nowrap; white-space:nowrap }
.nav > a{ flex:0 0 auto }
@media (min-width:1081px){ .hdr__cta .btn{ white-space:nowrap } }
.brand{ display:flex; flex-direction:column; text-decoration:none; line-height:1 }
.brand__name{ font-family:var(--font-display); font-size:25px; font-weight:600; letter-spacing:.01em }
.brand__sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:5px }
.nav{ display:flex; align-items:center; gap:clamp(12px,1.7vw,26px) }
.nav a{ text-decoration:none; font-size:16px; font-weight:500; color:var(--ink-soft); padding-bottom:2px; border-bottom:2px solid transparent; transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease) }
.nav a:hover{ color:var(--ink); border-bottom-color:var(--accent) }
.hdr__cta{ display:flex; align-items:center; gap:var(--s2) }
.hdr__cta .btn{ padding:12px 20px }
.tel{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:16px; font-weight:600; white-space:nowrap }
.tel:hover{ color:var(--accent-dk) }
.burger{ display:none; background:none; border:0; padding:10px; cursor:pointer }
.burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform var(--dur) var(--ease),opacity 200ms }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media (max-width:1080px){
  .burger{ display:block }
  .nav{ position:fixed; inset:var(--hdr-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:var(--s2) max(var(--s4),calc((100vw - var(--wrap))/2 + var(--s4))) var(--s4); transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity 240ms var(--ease),transform 240ms var(--ease),visibility 240ms; max-height:calc(100svh - var(--hdr-h)); overflow:auto }
  .nav.is-open{ transform:none; opacity:1; visibility:visible }
  .nav a{ font-size:19px; padding:15px 0; border-bottom:1px solid var(--line) }
  .nav a:hover{ border-bottom-color:var(--line) }
  .hdr__cta .tel{ display:none }
  .hdr__cta .btn{ padding:11px 16px; font-size:15px }
}
.hero{ position:relative; background:var(--ink); color:#fff; isolation:isolate; overflow:hidden }
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media > *{ width:100%; height:100%; object-fit:cover }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to right,rgba(10,11,12,.90) 0%,rgba(10,11,12,.72) 42%,rgba(10,11,12,.34) 100%),linear-gradient(to top,rgba(10,11,12,.72),rgba(10,11,12,.10) 55%) }
.hero__in{ padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,72px); display:grid; align-content:center; min-height:clamp(520px,72svh,760px) }
.hero h1{ color:#fff; max-width:19ch; margin-bottom:var(--s3) }
.hero__sub{ font-size:var(--t-lead); line-height:1.55; color:rgba(255,255,255,.92); max-width:min(600px,58ch); margin-bottom:var(--s5) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center }
.hero__cues{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s5); font-size:var(--t-small); color:rgba(255,255,255,.86) }
.hero__cues li{ list-style:none; display:flex; align-items:center; gap:9px }
.hero__cues li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-lt); flex:0 0 auto }
.trustbar{ background:var(--paper-2); border-bottom:1px solid var(--line) }
.trustbar__in{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3); padding-block:clamp(24px,2.6vw,38px) }
/* UWAGA: musi być „> div", nie „div". Zapis „.trustbar div" łapał także sam
   kontener .trustbar__in (on też jest div-em) i — mając wyższą specyficzność —
   przestawiał jego siatkę pięciu kolumn na pojedynczą kolumnę flex. Skutek:
   pięć faktów stało jeden pod drugim przy lewej krawędzi, a 900 px po prawej
   zostawało puste. To był główny powód wrażenia „strona wygląda na pustą". */
.trustbar__in > div{ display:flex; flex-direction:column; gap:5px }
.trustbar b{ font-family:var(--font-display); font-size:clamp(21px,1.8vw,27px); font-weight:600; letter-spacing:-.02em; line-height:1.1 }
.trustbar span{ font-size:var(--t-tiny); color:var(--muted); line-height:1.45 }
@media (max-width:980px){ .trustbar__in{ grid-template-columns:repeat(3,1fr); row-gap:var(--s4) } }
@media (max-width:560px){ .trustbar__in{ grid-template-columns:repeat(2,1fr) } }
.ph{ position:relative; overflow:hidden; width:100%; height:100%; background:linear-gradient(150deg,#CFC8B9 0%,#B9B2A4 46%,#D6CFC0 100%); display:grid; place-items:center }
.ph::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(118deg,rgba(255,255,255,.22) 0 2px,transparent 2px 24px); opacity:.55 }
.ph::after{ content:attr(data-ph); position:relative; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#413D36; text-align:center; padding:0 var(--s3); max-width:26ch; line-height:1.75 }
.hero .ph,.dark .ph{ background:linear-gradient(150deg,#2C3134 0%,#16181A 52%,#2A2420 100%) }
.hero .ph::after,.dark .ph::after{ color:rgba(242,240,235,.55) }
.fig{ position:relative; display:block; overflow:hidden; background:var(--paper-3) }
.fig > img,.fig > .ph,.fig > .fig-btn{ width:100%; height:100%; object-fit:cover }
.fig-btn{ display:block; padding:0; border:0; background:none; overflow:hidden }
.fig-btn > img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur) var(--ease) }
.work:hover .fig-btn > img{ transform:scale(1.03) }
@media (prefers-reduced-motion:reduce){ .fig-btn > img{ transition:none } .work:hover .fig-btn > img{ transform:none } }
.fig--4x5{ aspect-ratio:4/5 } .fig--3x2{ aspect-ratio:3/2 } .fig--16x9{ aspect-ratio:16/9 }
.fig--21x9{ aspect-ratio:21/9 } .fig--1x1{ aspect-ratio:1/1 } .fig--tall{ aspect-ratio:3/4 }
@media (max-width:640px){ .fig--21x9{ aspect-ratio:3/2 } }
.fig-cap{ display:flex; align-items:center; gap:7px; margin-top:9px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted) }
.fig-cap::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:0 0 auto; opacity:.85 }
.dark .fig-cap{ color:rgba(242,240,235,.66) }
.dark .fig-cap::before{ background:var(--accent-lt) }
.fig-cap--onphoto{ position:absolute; right:14px; bottom:11px; margin:0; z-index:2; padding:0; background:none; font-size:8.5px; letter-spacing:.12em; color:rgba(255,255,255,.34); text-shadow:0 1px 2px rgba(0,0,0,.45) }
.fig-cap--onphoto::before{ display:none }
.filters{ display:flex; flex-wrap:wrap; gap:var(--s1); margin-bottom:clamp(24px,3vw,40px) }
.filters button{
  background:transparent; border:1px solid var(--line-strong); border-radius:100px;
  padding:9px 18px; font-size:var(--t-tiny); font-weight:500; cursor:pointer; color:var(--ink-soft);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.filters button:hover{ border-color:var(--accent) }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--on-dark) }
.work{ display:block; text-decoration:none; color:inherit }
.work[hidden]{ display:none }
.work .fig > *{ transition:transform 800ms var(--ease) }
.work:hover .fig > *{ transform:scale(1.035) }
.work h3{ margin:var(--s3) 0 10px }
.work__meta{ list-style:none; border-top:1px solid var(--line); font-size:var(--t-tiny) }
.work__meta li{ display:flex; justify-content:space-between; gap:var(--s2); padding:9px 0; border-bottom:1px solid var(--line) }
.work__meta .k{ color:var(--muted) }
.work__meta .v{ font-weight:600; text-align:right }
.svc{ display:flex; flex-direction:column; text-decoration:none; color:inherit; border-top:2px solid var(--ink); padding-top:var(--s3); transition:border-color var(--dur) var(--ease) }
.svc:hover{ border-top-color:var(--accent) }
.svc h3{ margin-bottom:10px }
.svc p{ font-size:var(--t-small); color:var(--muted); margin-bottom:var(--s3) }
.svc__foot{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2) }
.svc__price{ font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; color:var(--ink) }
.svc__go{ color:var(--accent-dk); font-size:18px; transition:transform var(--dur) var(--ease) }
.svc:hover .svc__go{ transform:translateX(4px) }
.ptable{ width:100%; border-collapse:collapse; font-size:var(--t-small) }
.ptable th,.ptable td{ text-align:left; padding:15px 0; border-bottom:1px solid var(--line); vertical-align:top }
.ptable th{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:400; border-bottom-color:var(--line-strong) }
.ptable td:last-child,.ptable th:last-child{ text-align:right; white-space:nowrap; font-weight:600 }
.callout{ border-left:3px solid var(--accent); padding:var(--s3) 0 var(--s3) var(--s3) }
.callout h3{ margin-bottom:10px }
.callout p{ font-size:var(--t-small); color:var(--ink-soft) }
.phase{ display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,1.15fr); gap:clamp(14px,2.4vw,40px); align-items:start; padding-block:clamp(22px,2.2vw,32px); border-bottom:1px solid rgba(242,240,235,.16) }
.phase:first-child{ border-top:1px solid rgba(242,240,235,.16) }
.phase__n{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--accent-lt); padding-top:7px }
.phase h3{ font-size:clamp(19px,1.6vw,25px) }
.phase p{ font-size:var(--t-small); margin:0 }
.phase--key{ background:rgba(224,169,140,.08) }
.phase__tag{ display:inline-block; margin-top:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-lt); border:1px solid rgba(224,169,140,.45); padding:4px 9px; border-radius:2px }
@media (max-width:820px){ .phase{ grid-template-columns:40px minmax(0,1fr) } .phase p{ grid-column:2 } }
.quote{ border-top:2px solid var(--ink); padding-top:var(--s3) }
.quote blockquote{ margin:0 0 var(--s3); font-family:var(--font-display); font-size:clamp(19px,1.5vw,23px); line-height:1.4; letter-spacing:-.01em }
.quote figcaption{ font-size:var(--t-tiny); color:var(--muted) }
.empty{ border:1px dashed var(--line-strong); padding:clamp(24px,3vw,40px); border-radius:var(--r) }
.empty h3{ margin-bottom:10px }
.empty p{ font-size:var(--t-small); color:var(--muted) }
.person{ display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start }
@media (max-width:620px){ .person{ grid-template-columns:1fr } }
.creds{ list-style:none; font-size:var(--t-small); margin-top:var(--s3) }
.creds li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line) }
.creds li::before{ content:"✓"; color:var(--ok); font-weight:600; flex:0 0 auto }
.creds li.is-pending::before{ content:"—"; color:var(--muted); font-weight:400 }
.dark .creds li{ border-bottom-color:rgba(242,240,235,.16) }
.area{ display:flex; flex-wrap:wrap; gap:var(--s1) }
.area li{ list-style:none; border:1px solid var(--line-strong); border-radius:100px; padding:8px 16px; font-size:var(--t-tiny) }
.area li.is-core{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); font-weight:600 }
.faq{ border-top:1px solid var(--line-strong); max-width:min(880px,80ch) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); padding:var(--s3) 0; font-family:var(--font-display); font-size:clamp(18px,1.3vw,22px); font-weight:600; line-height:1.35 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--font-mono); font-size:21px; color:var(--accent-dk); line-height:1; flex:0 0 auto; transition:transform var(--dur) var(--ease) }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details > div{ padding:0 0 var(--s3); max-width:var(--wrap-text) }
.faq details > div p{ font-size:var(--t-small); color:var(--ink-soft) }
.formcard{ background:var(--ink-2); border:1px solid rgba(242,240,235,.2); border-radius:var(--r); padding:clamp(24px,2.6vw,40px) }
.form{ display:grid; gap:var(--s3) }
.field{ display:grid; gap:7px }
.field > span{ font-size:var(--t-tiny); font-weight:500 }
.field input,.field select{ background:var(--ink); border:1px solid rgba(242,240,235,.28); color:var(--on-dark); border-radius:var(--r-sm); padding:14px 15px; font-size:var(--t-small); width:100%; transition:border-color var(--dur) var(--ease) }
.field input:focus,.field select:focus{ border-color:var(--accent-lt); outline:none }
.consent{ display:flex; gap:11px; align-items:flex-start; font-size:var(--t-tiny); color:var(--on-dark-mut) }
.consent input{ width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--accent) }
.form__note{ font-size:var(--t-tiny); color:var(--on-dark-mut) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.steps-next{ list-style:none; counter-reset:sn; font-size:var(--t-small) }
.steps-next li{ counter-increment:sn; display:flex; gap:14px; padding:13px 0; border-bottom:1px solid rgba(242,240,235,.16) }
.steps-next li::before{ content:counter(sn); font-family:var(--font-mono); font-size:12px; color:var(--accent-lt); flex:0 0 auto; padding-top:3px }
.lb{ position:fixed; inset:0; z-index:200; display:none; background:rgba(10,11,12,.96); padding:clamp(16px,4vw,52px); grid-template-rows:1fr auto; gap:var(--s3) }
.lb.is-open{ display:grid }
.lb__stage{ display:grid; place-items:center; min-height:0 }
.lb__stage .ph{ width:min(90vw,1080px); aspect-ratio:3/2 }
.lb__stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain }
.lb__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); color:rgba(242,240,235,.82) }
.lb__cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase }
.lb__nav{ display:flex; gap:var(--s1) }
.lb button{ background:transparent; border:1px solid rgba(242,240,235,.36); color:var(--on-dark); width:44px; height:44px; border-radius:var(--r-sm); cursor:pointer; font-size:17px }
.lb button:hover{ border-color:var(--on-dark); background:rgba(242,240,235,.1) }
.lb__close{ position:absolute; top:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px) }
body.lb-open{ overflow:hidden }
.ftr{ background:var(--ink); color:var(--on-dark); padding-block:var(--s7) var(--s5) }
.ftr a{ color:var(--on-dark-mut); text-decoration:none; transition:color var(--dur) var(--ease) }
.ftr a:hover{ color:var(--on-dark) }
.ftr__grid{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,52px) }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:1fr } }
.ftr h4{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.19em; text-transform:uppercase; color:var(--on-dark-mut); font-weight:400; margin-bottom:var(--s3) }
.ftr ul{ list-style:none; font-size:var(--t-small) }
.ftr li{ margin-bottom:10px }
.ftr__legal{ margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid rgba(242,240,235,.16); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); font-size:var(--t-tiny); color:var(--on-dark-mut) }
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:1px; background:var(--line-strong); border-top:1px solid var(--line-strong) }
.bar a{ flex:1; text-align:center; padding:15px 8px; background:var(--paper); color:var(--ink); text-decoration:none; font-size:16px; font-weight:600 }
.bar a:first-child{ background:var(--accent); color:#fff }
@media (max-width:1080px){ .bar{ display:flex } body{ padding-bottom:58px } }
.form__ctx{ margin:0 0 var(--s2); padding:9px 12px; border-left:2px solid var(--accent);
  background:rgba(255,255,255,.06); font-size:var(--t-small); line-height:1.5 }
.dark .form__ctx{ color:var(--on-dark) }
.nextsteps{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line) }
.dark .nextsteps{ border-top-color:rgba(242,240,235,.22) }
.nextsteps__t{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 var(--s2) }
.dark .nextsteps__t{ color:rgba(242,240,235,.66) }
.nextsteps ol{ margin:0; padding:0; list-style:none; counter-reset:ns; display:grid; gap:var(--s2) }
.nextsteps li{ counter-increment:ns; position:relative; padding-left:30px;
  font-size:var(--t-small); line-height:1.6 }
.nextsteps li::before{ content:counter(ns); position:absolute; left:0; top:1px; width:20px; height:20px;
  border-radius:50%; border:1px solid var(--accent); display:grid; place-items:center;
  font-family:var(--font-mono); font-size:10.5px; color:var(--accent-dk) }
.dark .nextsteps li::before{ border-color:var(--accent-lt); color:var(--accent-lt) }
.proof__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s2); margin-bottom:var(--s4) }
.proof__ext{ display:block; padding:var(--s3); border:1px solid var(--line);
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease) }
.proof__ext:hover{ border-color:var(--accent); transform:translateY(-2px) }
.proof__ext b{ display:block; font-size:var(--t-body) }
.proof__ext span{ display:block; margin-top:3px; font-size:var(--t-small); color:var(--muted) }
.proof__list{ display:grid; gap:var(--s3); margin:0; padding:0; list-style:none;
  max-width:74ch }
.proof__list li{ padding-left:var(--s3); border-left:2px solid var(--line-strong);
  font-size:var(--t-small); line-height:1.65 }
.proof__list li b{ display:block; margin-bottom:2px; font-size:var(--t-body) }
@media (prefers-reduced-motion:reduce){ .proof__ext:hover{ transform:none } }
.wiz{ position:absolute; right:8px; bottom:8px; z-index:2; padding:3px 7px; border-radius:2px;
  background:rgba(10,11,12,.55); color:rgba(255,255,255,.92); backdrop-filter:blur(2px);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  pointer-events:none }
/* Treść jest widoczna DOMYŚLNIE. Chowamy ją do animacji wejścia dopiero wtedy,
   gdy w <html> pojawi się klasa „js-anim" — a stawia ją mikroskrypt w <head>,
   który dodatkowo zdejmuje ją po 2,5 s, jeśli app.js się nie wczytał.
   Odwrotna kolejność (domyślnie ukryte, pokazywane przez skrypt) oznaczałaby,
   że jedno nieudane pobranie pliku zostawia pustą stronę. */
.js-anim .reveal{ opacity:0; transform:translateY(16px) }
.js-anim .reveal.is-in{ opacity:1; transform:none; transition:opacity 700ms var(--ease),transform 700ms var(--ease) }
.js-anim .reveal.is-in[data-d="1"]{ transition-delay:80ms }
.js-anim .reveal.is-in[data-d="2"]{ transition-delay:160ms }
.js-anim .reveal.is-in[data-d="3"]{ transition-delay:240ms }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .js-anim .reveal{ opacity:1; transform:none }
  .work:hover .fig > *{ transform:none }
}
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--on-dark); padding:12px 20px }
.skip:focus{ left:var(--s3); top:var(--s3) }
.crumbs{ font-size:var(--t-tiny); color:var(--muted); padding-block:var(--s3) 0 }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px }
.crumbs li::after{ content:"/"; margin-left:8px; color:var(--line-strong) }
.crumbs li:last-child::after{ content:"" }
.crumbs a{ text-decoration:none; color:var(--muted) }
.crumbs a:hover{ color:var(--accent-dk) }
.phero{ padding-block:var(--s5) var(--s6) }
.phero h1{ max-width:20ch; margin-bottom:var(--s3) }
.phero .lead{ margin-bottom:var(--s4) }
.phero__actions{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s4) }
.chips li{ list-style:none; border:1px solid var(--line-strong); border-radius:100px; padding:7px 15px; font-size:var(--t-tiny) }
.atglance{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); border-block:1px solid var(--line); padding-block:var(--s4); margin-block:var(--s5) }
.atglance div{ display:flex; flex-direction:column; gap:5px }
.atglance b{ font-family:var(--font-display); font-size:clamp(19px,1.6vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.15 }
.atglance span{ font-size:var(--t-tiny); color:var(--muted) }
@media (max-width:820px){ .atglance{ grid-template-columns:repeat(2,1fr); row-gap:var(--s4) } }
.prose{ max-width:var(--wrap-text) }
.prose h2{ margin-top:var(--s7); margin-bottom:var(--s3) }
.prose h3{ margin-top:var(--s5); margin-bottom:var(--s2) }
.prose ul,.prose ol{ margin:0 0 var(--s3); padding-left:1.15em; font-size:var(--t-small) }
.prose li{ margin-bottom:11px }
.prose li::marker{ color:var(--accent-dk) }
.prose table{ width:100%; border-collapse:collapse; font-size:var(--t-small); margin-bottom:var(--s3) }
.prose th,.prose td{ text-align:left; padding:13px 0; border-bottom:1px solid var(--line); vertical-align:top }
.prose th{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:400 }
.prose td:last-child,.prose th:last-child{ text-align:right; white-space:nowrap }
.expert{ border-left:3px solid var(--accent); padding:var(--s3) 0 var(--s3) var(--s3); margin-block:var(--s4) }
.expert h3{ margin:0 0 10px; font-size:var(--t-h3) }
.expert p{ font-size:var(--t-small); color:var(--ink-soft); margin:0 }
.expert + .expert{ margin-top:var(--s3) }
.mistakes li{ border-top:1px solid var(--line); padding:15px 0; list-style:none; font-size:var(--t-small) }
.mistakes li:last-child{ border-bottom:1px solid var(--line) }
.mistakes b{ display:block; margin-bottom:5px }
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3) }
.related a{ display:block; text-decoration:none; border-top:2px solid var(--ink); padding-top:var(--s2); font-size:var(--t-small); font-weight:600; transition:border-color var(--dur) var(--ease) }
.related a:hover{ border-top-color:var(--accent) }
.related span{ display:block; font-weight:400; color:var(--muted); margin-top:5px; font-size:var(--t-tiny) }
@media (max-width:760px){ .related{ grid-template-columns:1fr } }
.cta-strip{ background:var(--ink); color:var(--on-dark); padding-block:var(--s6) }
.cta-strip h2{ color:var(--on-dark); max-width:22ch }
.cta-strip p{ color:var(--on-dark-mut); margin-top:var(--s3) }
.cta-strip__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap }
.consent-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--ink); color:var(--on-dark);
  padding:var(--s3) var(--s4);
  display:flex; align-items:center; justify-content:center; gap:var(--s4); flex-wrap:wrap;
  border-top:1px solid rgba(242,240,235,.2);
}
.consent-bar p{ margin:0; font-size:var(--t-tiny); color:var(--on-dark-mut); max-width:62ch }
.consent-bar a{ color:var(--accent-lt) }
.consent-bar__btns{ display:flex; gap:var(--s2); flex-wrap:wrap }
.consent-bar .btn{ padding:11px 20px; font-size:var(--t-tiny) }
.consent-bar .btn--ghost{ --fg:var(--on-dark); --bd:rgba(242,240,235,.4) }
@media (max-width:1080px){ .consent-bar{ bottom:58px } }
.formula{
  background:var(--paper-2); border-left:3px solid var(--accent);
  padding:var(--s3) var(--s4); margin-block:var(--s4);
  font-family:var(--font-mono); font-size:.95rem; line-height:1.7
}
.ptable--cennik td:nth-child(2){ white-space:nowrap; color:var(--muted); font-family:var(--font-mono); font-size:.85em }
.ptable--cennik td:last-child,
.ptable td:last-child{ white-space:nowrap }
.ptable--cennik .u-quiet{ display:block; margin-top:.25em; font-size:.85em; line-height:1.5 }
.ptable__sum td{ border-top:2px solid var(--ink); background:var(--paper-2) }
.kalk{ border:1px solid var(--line); background:#fff; padding:var(--s5); margin-block:var(--s5) }
.kalk__tabs{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s4) }
.kalk__tab{
  font:inherit; font-size:var(--t-small); padding:.6em 1.1em; cursor:pointer;
  background:transparent; color:var(--muted); border:1px solid var(--line)
}
.kalk__tab.is-on{ background:var(--ink); color:#fff; border-color:var(--ink) }
.kalk__pola{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) }
@media (max-width:640px){ .kalk__pola{ grid-template-columns:1fr } }
.kalk__pole{ display:flex; flex-direction:column; gap:.4em }
.kalk__pole>span{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dk) }
.kalk__pole select,.kalk__pole input{
  font:inherit; padding:.65em .8em; border:1px solid var(--line); background:var(--paper); color:var(--ink); width:100%
}
.kalk__opis{ margin:var(--s3) 0 0; color:var(--muted); font-size:var(--t-small) }
.kalk__lista{ max-height:34em; overflow-y:auto; margin-top:var(--s3); border:1px solid var(--line); padding:var(--s3) }
.kalk__grupa{ margin:var(--s4) 0 var(--s2); font-size:var(--t-small); letter-spacing:.04em }
.kalk__grupa:first-child{ margin-top:0 }
.kalk__row{
  display:grid; grid-template-columns:1fr auto 5.5em; gap:var(--s3); align-items:center;
  padding:.5em 0; border-bottom:1px solid var(--line)
}
@media (max-width:640px){ .kalk__row{ grid-template-columns:1fr 5.5em; } .kalk__stawka{ grid-column:1 } }
.kalk__nazwa{ font-size:var(--t-small); line-height:1.5 }
.kalk__stawka{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); white-space:nowrap }
.kalk__ilosc{ font:inherit; font-size:var(--t-small); padding:.4em .5em; border:1px solid var(--line); background:var(--paper); width:100% }
.kalk__wynik{ margin-top:var(--s4); padding-top:var(--s4); border-top:2px solid var(--ink) }
.kalk__kwota{ font-family:var(--font-display); font-size:clamp(1.9rem,4.5vw,2.7rem); line-height:1.1; margin:.1em 0 .3em }
.kalk__nota{ margin:0; color:var(--muted); font-size:var(--t-small) }
.kalk__akcje{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4) }
.kalk__bezpoz{ border-left:3px solid var(--accent-lt); padding-left:var(--s3) }
.toc{ border-left:3px solid var(--accent-lt); padding:var(--s3) 0 var(--s3) var(--s4); margin-bottom:var(--s5) }
.toc__label{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.19em; text-transform:uppercase; color:var(--accent-dk); display:block; margin-bottom:var(--s2) }
.toc ol{ margin:0; padding:0; list-style:none; columns:2; column-gap:var(--s5) }
@media (max-width:640px){ .toc ol{ columns:1 } }
.toc li{ margin:0 0 .4em; font-size:var(--t-small); line-height:1.45; break-inside:avoid }
.toc a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent }
.toc a:hover,.toc a:focus-visible{ color:var(--ink); border-bottom-color:var(--accent) }
.toc--grupy ol{ columns:2 }
@media (max-width:760px){ .toc--grupy ol{ columns:1 } }
.toc--grupy li{ margin-bottom:.55em }
.toc__n{ font-family:var(--font-mono); font-size:.75em; color:var(--accent-dk); margin-left:.4em }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s3) }
.kroki{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) }
@media (max-width:900px){ .kroki{ grid-template-columns:1fr; gap:var(--s4) } }
.kroki li{ border-top:2px solid var(--ink); padding-top:var(--s3) }
.kroki__n{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.19em; color:var(--accent-dk); display:block; margin-bottom:var(--s2) }
.kroki h3{ margin:0 0 var(--s2); font-size:clamp(19px,1.5vw,23px) }
.kroki p{ margin:0; font-size:var(--t-small); color:var(--muted); line-height:1.6 }
.kroki a{ color:var(--ink) }
.kroki .btn{ color:#fff }
.drabina{ border-top:2px solid var(--ink); padding-top:var(--s4) }
.drabina>.label{ margin-bottom:var(--s4) }
.drabina ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
@media (max-width:900px){ .drabina ol{ grid-template-columns:1fr; gap:var(--s3) } }
.drabina li{ display:flex; flex-direction:column; gap:.5em; align-items:flex-start; padding:var(--s3); background:var(--paper-2) }
.drabina li:last-child{ background:var(--ink) }
.drabina b{ font-family:var(--font-display); font-size:clamp(17px,1.3vw,20px); font-weight:600; line-height:1.25 }
.drabina span{ font-size:var(--t-small); color:var(--muted); line-height:1.55 }
.drabina li:last-child b{ color:#fff }
.drabina li:last-child span{ color:var(--on-dark-mut) }
.btn--sm{ padding:.6em 1.1em; font-size:var(--t-small) }


/* ============ MENU PEŁNE, STRONA USŁUG, „ZOBACZ TEŻ" ============
   Trzy bloki dopisane po tym, jak okazało się, że wcześniejsze wstawki
   trafiały w nieistniejącą kotwicę i przepadały bez śladu. */

/* --- pełne menu pod burgerem: serwis ma 87 stron, w nagłówku mieści się 5 --- */
.burger{ display:block }
.mega{ position:fixed; inset:calc(var(--hdr-h) + var(--util-h)) 0 auto 0; z-index:59;
  background:var(--paper); border-bottom:1px solid var(--line-strong);
  max-height:calc(100svh - var(--hdr-h) - var(--util-h)); overflow:auto;
  box-shadow:0 24px 48px -24px rgba(13,13,12,.18) }
.mega[hidden]{ display:none }
.mega__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:var(--s5) var(--s4); padding-block:var(--s5) var(--s4) }
.mega__t{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 var(--s2);
  padding-bottom:9px; border-bottom:1px solid var(--line) }
.mega__col a{ display:block; padding:7px 0; color:var(--ink); text-decoration:none;
  font-size:var(--t-small); line-height:1.4 }
.mega__col a:hover{ color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px }
.mega__foot{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding-bottom:var(--s5); border-top:1px solid var(--line); padding-top:var(--s3) }
body.mega-open{ overflow:hidden }
@media (max-width:640px){ .mega__in{ gap:var(--s4) var(--s3); padding-block:var(--s4) } }

/* --- strona usług: karty ze zdjęciem zamiast 134 bloków tekstu --- */
.srv-new-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s3) }
.srv-new{ position:relative; display:block; padding:var(--s4); text-decoration:none;
  color:var(--on-dark); background:var(--ink); border-radius:var(--r);
  transition:transform var(--dur) var(--ease) }
.srv-new:hover{ transform:translateY(-3px) }
.srv-new__tag{ display:inline-block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-lt);
  border:1px solid rgba(242,240,235,.32); border-radius:100px; padding:3px 10px;
  margin-bottom:var(--s3) }
.srv-new h3{ font-size:var(--t-h3); margin:0 0 8px; color:var(--on-dark) }
.srv-new p{ margin:0 0 var(--s3); color:var(--on-dark-mut); font-size:var(--t-small) }
.srv-new ul{ margin:0 0 var(--s3); padding:0; list-style:none; display:grid; gap:6px }
.srv-new li{ font-size:var(--t-small); color:var(--on-dark-mut); padding-left:16px; position:relative }
.srv-new li::before{ content:"\2014"; position:absolute; left:0; color:var(--accent-lt) }
.srv-new__go{ font-family:var(--font-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-dark) }

.srv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:var(--s4) var(--s3) }
.srv{ display:block; text-decoration:none; color:var(--ink) }
.srv .fig{ margin-bottom:var(--s3) }
.srv .fig img{ transition:transform var(--dur) var(--ease) }
.srv h3{ font-size:var(--t-h3); margin:0 0 6px }
.srv p{ margin:0 0 var(--s2); font-size:var(--t-small); color:var(--muted); line-height:1.55 }
.srv__foot{ display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid var(--line); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase }
.srv:hover h3{ text-decoration:underline; text-underline-offset:4px }
.srv:hover .fig img{ transform:scale(1.03) }

.srv-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:0 var(--s4) }
.srv-list a{ display:block; padding:13px 0; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:var(--t-small);
  transition:padding-left var(--dur) var(--ease) }
.srv-list a:hover{ padding-left:8px; color:var(--accent-dk) }

/* --- „Zobacz też": bez tego linki zlewały się w jeden nieczytelny ciąg --- */
.rel-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s2) }
.rel{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:15px var(--s3); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink); text-decoration:none;
  font-size:var(--t-small); line-height:1.35;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease) }
.rel::after{ content:"\2192"; color:var(--muted); flex:0 0 auto }
.rel:hover{ border-color:var(--accent); transform:translateY(-2px) }
.rel:hover::after{ color:var(--accent) }

@media (prefers-reduced-motion:reduce){
  .srv-new:hover,.srv:hover .fig img,.rel:hover{ transform:none }
  .srv-list a:hover{ padding-left:0 } }


/* --- akcent: dwa warianty, bo kontrast decyduje o czytelności --------------
   --accent (koniak #9C6B48) = 3.91:1 na pergaminie. Wystarcza dla ramek, ikon,
   podkreśleń i dużego tekstu, ale nie dla drobnego druku.
   --accent-dk (#7E5439) = 5.60:1 — i tym piszemy wszystko, co się czyta. */
a:not([class]){ color:var(--accent-dk); text-underline-offset:3px }
a:not([class]):hover{ color:var(--ink) }
.link-arrow{ color:var(--accent-dk) }
.label{ color:var(--accent-dk) }

/* ============ DYSCYPLINA AKCENTU ============================================
   Poprzednia wersja wyglądała jak zabawka z jednego powodu: akcent był wszędzie
   — wypełniał przyciski, kolorował całe menu, wszystkie punktory. Kolor użyty
   wszędzie przestaje być akcentem i staje się tłem.
   Zasada: glina pojawia się tylko tam, gdzie ma coś ZASYGNALIZOWAĆ. */

/* Nawigacja: atrament. Glina dopiero przy najechaniu i na stanie aktywnym. */
.nav a{ color:var(--ink-2); font-weight:500 }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--accent-dk); border-bottom-color:var(--accent) }

/* Etykiety sekcji i liczby — tu akcent pracuje, bo prowadzi wzrok. */
.label{ color:var(--accent-dk); letter-spacing:.18em }
.atglance b,.trustbar__in b{ font-family:var(--font-display); font-weight:500 }

/* Typografia: Fraunces ma optyczną oś — przy dużym kegle zwężamy odstępy,
   inaczej nagłówek rozjeżdża się na trzy linie i traci siłę. */
h1,h2,h3,.brand__name{ font-family:var(--font-display); font-weight:500;
  letter-spacing:-.022em; line-height:1.06 }
h1{ font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0 }
h2{ font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0; line-height:1.1 }
h3{ font-variation-settings:"opsz" 32,"SOFT" 0,"WONK" 0; line-height:1.22;
  letter-spacing:-.014em }
.lead{ letter-spacing:-.005em }

/* Przyciski: ostre, atramentowe. Drugi przycisk to sama ramka — bez wypełnienia. */
.btn{ border-radius:0; font-weight:600; letter-spacing:-.005em }
.btn:hover{ --bg:var(--accent-dk); --bd:var(--accent-dk) }
.btn--ghost:hover{ --bg:transparent; --fg:var(--accent-dk); --bd:var(--accent) }

/* Karty i obrazy bez zaokrągleń — kąt prosty czyta się jako precyzja. */
.fig,.srv-new,.rel,.proof__ext,.mega{ border-radius:0 }

/* Nagłówek: cienka linia zamiast kremowej płyty, żeby nie odcinał się od zdjęcia. */
.hdr{ background:rgba(244,242,239,.92); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line) }
.util{ background:var(--ink); color:var(--on-dark-mut) }
.util a{ color:var(--paper) }

/* Punktory: cienkie kreski zamiast kolorowych kropek. */
.trustbar__in > div::before{ background:var(--accent) }

/* ---------- Nagłówek na telefonie ----------------------------------------
   Problem z żywej strony: przy 375 px przycisk „Bezpłatna wycena" wchodził
   na logo, jego napis łamał się na dwie linie, a sam przycisk rozpychał
   nagłówek na 73 px. Do tego podpis marki „REMONTY KAPITALNE · 21 LAT"
   też szedł na dwie linie.

   Rozwiązanie: na wąskim ekranie w nagłówku zostaje marka i burger, bo oba
   wezwania do działania — „Zadzwoń" i „Bezpłatna wycena" — i tak stoją
   w przyklejonym pasku na dole, bliżej kciuka. Powtarzanie ich w nagłówku
   nie dokłada konwersji, a psuje pierwsze wrażenie. */
@media (max-width:560px){
  .hdr__cta .btn{ display:none }
  .hdr__in{ gap:var(--s2) }
  .brand__name{ font-size:22px }
  .brand__sub{ font-size:9px; letter-spacing:.16em; white-space:nowrap }
  .burger{ margin-right:-10px }
}

/* Zapas na przyklejony pasek: ma 51 px wysokości plus obszar bezpieczny
   iPhone'a. Wcześniej stała wartość 58 px potrafiła przyciąć ostatni
   przycisk na stronie. */
@media (max-width:1080px){
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)) }
  .bar{ padding-bottom:env(safe-area-inset-bottom,0px) }
}