/* =========================================================
   MAT-PRO — monochrom: biel, czerń, odcienie szarości
   ========================================================= */
:root{
  --ink:#0E0E0C;
  --ink-soft:#2A2A27;
  --paper:#FFFFFF;
  --paper-2:#F5F5F3;
  --line:#E3E3DF;
  --line-2:#CFCFC9;
  --muted:#6B6B66;

  --pad:clamp(20px, 5vw, 72px);
  --hdr-h:72px;

  --sans:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::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(--sans); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:999; background:var(--ink); color:var(--paper); padding:10px 16px}

.wrap{width:100%; max-width:1280px; margin:0 auto; padding-inline:var(--pad)}

/* ---------- typografia ---------- */
.display{font-size:clamp(2.5rem, 5.4vw, 4.6rem); line-height:1.02; letter-spacing:-.03em; font-weight:400; margin:0}
.display em{font-style:normal}
.h2{font-size:clamp(1.75rem, 3vw, 2.6rem); line-height:1.05; letter-spacing:-.025em; font-weight:400; margin:0}
.lead{font-size:clamp(1.02rem, 1.25vw, 1.15rem); line-height:1.65; color:var(--muted); max-width:56ch; margin:22px 0 0}
.num{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--muted); margin-bottom:14px}
.num--inv{color:rgba(255,255,255,.6)}
.kicker{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:28px;
}
.kicker__dot{width:6px; height:6px; background:var(--ink); border-radius:50%}

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border:1px solid var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, color .25s;
}
.btn--solid{background:var(--ink); color:var(--paper)}
.btn--solid:hover{background:#3A3A36; border-color:#3A3A36}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}
.btn--sm{min-height:44px; padding:0 18px; font-size:10px}

/* ---------- nagłówek ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--hdr-h);
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.05);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex; align-items:center; gap:clamp(16px,3vw,44px); height:var(--hdr-h)}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand__mark{width:26px; height:26px; color:var(--ink)}
.brand__mark svg{width:100%; height:100%}
.brand__txt{font-size:13px; letter-spacing:.22em; font-weight:600; line-height:1.1; display:flex; flex-direction:column; gap:3px}
.brand__txt em{
  font-family:var(--mono); font-style:normal; font-size:8.5px; letter-spacing:.18em;
  color:var(--muted); font-weight:400; text-transform:uppercase;
}
.nav{display:flex; gap:clamp(14px,1.8vw,28px)}
.nav a{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .2s; padding-block:6px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.hdr__tel{font-family:var(--mono); font-size:12px; letter-spacing:.08em; white-space:nowrap}
.hdr__tel:hover{color:var(--muted)}
.burger{display:none; width:44px; height:44px; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink); transition:transform .3s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){bottom:18px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none; position:fixed; inset:var(--hdr-h) 0 0; background:var(--paper); z-index:99; overflow:auto}
.mnav__in{display:flex; flex-direction:column; padding-block:28px 40px}
.mnav__in a{font-size:clamp(1.7rem,7vw,2.2rem); letter-spacing:-.02em; padding:16px 0; border-bottom:1px solid var(--line)}
.mnav__tel{font-family:var(--mono)!important; font-size:14px!important; letter-spacing:.1em!important; margin-top:24px; border:0!important; color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--hdr-h) + clamp(48px,7vw,104px)); padding-bottom:0}
.hero__in{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr); gap:clamp(32px,5vw,80px); align-items:start}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:36px}
.hero__panel{border:1px solid var(--line); padding:clamp(18px,2.4vw,28px); display:grid; gap:1px; align-self:start}
.fact{display:flex; flex-direction:column; gap:4px; padding:14px 0; border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact__k{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.fact__v{font-size:17px; letter-spacing:-.01em}
.fact__v small{font-size:12px; color:var(--muted)}
.hero__strip{margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip{display:flex; flex-wrap:wrap}
.strip span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:16px 0; margin-right:clamp(18px,3vw,44px); position:relative;
}
.strip span::after{content:""; position:absolute; right:calc(clamp(18px,3vw,44px)/-2); top:50%; width:3px; height:3px; background:var(--line-2); border-radius:50%}
.strip span:last-child::after{display:none}

/* ---------- sekcje ---------- */
.section{padding-block:clamp(64px,8vw,120px); border-top:1px solid var(--line)}
.section--alt{background:var(--paper-2)}
.section--dark{background:var(--ink); color:var(--paper); border-top:0}
.section--dark .h2{color:var(--paper)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(32px,4vw,56px)}
.sec-head__r{margin:0; color:var(--muted); font-size:15px; line-height:1.65; max-width:46ch}

/* ---------- usługi ---------- */
.services{border-top:1px solid var(--line)}
.service{display:grid; grid-template-columns:64px minmax(0,1fr); gap:clamp(12px,2vw,28px); padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--line); transition:background .25s}
.service:hover{background:var(--paper-2)}
.service__no{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); padding-top:6px}
.service__title{font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.2; letter-spacing:-.02em; font-weight:400; margin:0 0 10px}
.service__desc{color:var(--muted); margin:0 0 14px; max-width:62ch}
.service__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px}
.service__list li{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); position:relative; padding-left:14px}
.service__list li::before{content:""; position:absolute; left:0; top:.55em; width:5px; height:1px; background:var(--ink)}

/* ---------- realizacje (zajawka na stronie głównej) ---------- */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,18px)}
.tile{position:relative; display:block; overflow:hidden; background:var(--paper-2)}
.tile img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.04)}
.tile__cap{
  position:absolute; inset:auto 0 0; padding:14px; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); color:#fff;
}
.tile__cap b{font-weight:500; font-size:13.5px}
.tile__cap span{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.8}
.section__more{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(24px,3vw,36px)}

/* ---------- proces ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.step{background:var(--paper); padding:clamp(20px,2.4vw,30px)}
.step__no{font-family:var(--mono); font-size:11px; color:var(--ink); letter-spacing:.14em}
.step__title{font-size:1.05rem; line-height:1.3; margin:14px 0 8px; font-weight:500; letter-spacing:-.01em}
.step p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}

/* ---------- o firmie ---------- */
.about{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,5vw,80px)}
.about__lead{font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.55; margin:22px 0 18px; color:rgba(255,255,255,.9)}
.about__text{color:rgba(255,255,255,.6); margin:0 0 14px; max-width:56ch}
.facts{margin:0; display:grid; gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16)}
.facts > div{background:var(--ink); padding:14px 16px; display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.facts dt{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.facts dd{margin:0; font-size:14.5px; text-align:right; color:#fff}
.badge{
  display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px 16px;
  border:1px solid rgba(255,255,255,.22); font-size:13.5px; color:rgba(255,255,255,.85);
  transition:border-color .25s, background .25s;
}
.badge:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05)}
.badge__star{color:#fff; font-size:16px}
.badge b{color:#fff}

/* ---------- kontakt ---------- */
.contact{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,5vw,80px)}
.clines{margin-top:32px; border-top:1px solid var(--line)}
.cline{display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); transition:color .2s}
a.cline:hover{color:var(--muted)}
.cline__k{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.cline__v{font-size:16px; text-align:right}
.enquiry{border:1px solid var(--line); background:var(--paper-2); padding:clamp(22px,2.8vw,34px)}
.enquiry__title{font-size:1.15rem; font-weight:500; letter-spacing:-.01em; margin:0 0 10px}
.enquiry__lead{color:var(--muted); margin:0 0 16px}
.enquiry__list{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:8px}
.enquiry__list li{position:relative; padding-left:18px; font-size:14.5px; color:var(--ink-soft)}
.enquiry__list li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:1px; background:var(--ink)}
.enquiry__actions{display:flex; flex-direction:column; gap:10px}
.enquiry__actions .btn{width:100%}
.enquiry__note{margin:16px 0 0; font-size:12.5px; color:var(--muted)}
@media(min-width:520px){.enquiry__actions{flex-direction:row}.enquiry__actions .btn{width:auto}}

/* ---------- stopka ---------- */
.foot{background:var(--ink); color:rgba(255,255,255,.8); padding-top:clamp(48px,6vw,72px)}
.foot__in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(28px,4vw,64px); padding-bottom:clamp(36px,4vw,56px)}
.foot__brand .brand__txt{color:var(--paper)}
.foot .brand__txt em{color:rgba(255,255,255,.7)}
.foot__brand p{margin:14px 0 0; font-size:13.5px; color:rgba(255,255,255,.7); max-width:34ch}
.foot__cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.foot__cols h3{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.68); margin:0 0 14px; font-weight:400}
.foot__cols a,.foot__cols span{display:block; font-size:13.5px; margin-bottom:9px; color:rgba(255,255,255,.82)}
.foot__cols a:hover{color:#fff}
.foot__bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:20px; border-top:1px solid rgba(255,255,255,.14); font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.72)}

/* ---------- podstrona realizacji ---------- */
.page-head{padding-top:calc(var(--hdr-h) + clamp(40px,6vw,84px)); padding-bottom:clamp(28px,4vw,48px)}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,18px)}
.shot{margin:0; position:relative; overflow:hidden; background:var(--paper-2)}
.shot button{display:block; width:100%; padding:0; line-height:0}
.shot img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{display:flex; flex-direction:column; gap:2px; padding:12px 0 0}
.shot figcaption b{font-weight:500; font-size:14px}
.shot__meta{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* filtry galerii */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.6vw,32px)}
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 14px; border:1px solid var(--line); color:var(--muted); transition:.2s;
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:200; background:rgba(8,8,8,.975); display:flex; align-items:center; justify-content:center; padding:5vh 4vw}
.lb[hidden]{display:none}
.lb img{max-width:min(1400px,100%); max-height:80vh; object-fit:contain; background:#0a0a0a}
.lb__cap{position:absolute; left:0; right:0; bottom:24px; text-align:center; color:#fff; font-size:13px}
.lb__cap span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin-top:4px}
.lb__close{position:absolute; top:18px; right:20px; width:44px; height:44px; color:#fff; font-size:24px; line-height:1; border:1px solid rgba(255,255,255,.35)}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; color:#fff; border:1px solid rgba(255,255,255,.35); font-size:18px}
.lb__nav--prev{left:16px}
.lb__nav--next{right:16px}

/* ---------- responsywność ---------- */
@media(max-width:1080px){
  .nav{display:none}
  .hdr__tel{display:none}
  .burger{display:block}
  .mnav:not([hidden]){display:block}
}
@media(max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__panel{grid-template-columns:1fr 1fr; gap:1px 18px}
  .fact--wide{grid-column:1 / -1}
  .sec-head{grid-template-columns:1fr; align-items:start}
  .tiles{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .about,.contact{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero__panel{grid-template-columns:1fr}
  .service{grid-template-columns:1fr; gap:8px}
  .service__no{display:none}
  .gallery{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
  .hdr .btn{display:none}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%}
  .display{font-size:clamp(2.1rem,9vw,2.8rem)}
  .lb__nav{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}